Repository: obsidian-tasks-group/obsidian-tasks
Pull request #1571 (2023-01-22 21:26:21)

feat: Make statuses more readable in settings
<!--- Provide a general summary of your changes in the Title above -->

# Description

I've been struggling to read the jagged words in statuses in settings, so this aligns the text better.

Specifically, the fixed-width text is shown first now.

In an ideal world, this would all be a table with inline editing, but that's a step too far right now.

An example of the difference:

Example before:

```
"- [ ] Todo, next status is 'x', type is 'TODO'. "
"- [-] Cancelled, next status is ' ', type is 'CANCELLED'. "
"- [/] In Progress, next status is 'x', type is 'IN_PROGRESS'. "
```

Example after:

```
"- [ ] => [x], name: 'Todo', type: 'TODO'."
"- [-] => [ ], name: 'Cancelled', type: 'CANCELLED'."
"- [/] => [x], name: 'In Progress', type: 'IN_PROGRESS'."
```

## Motivation and Context

See above

## How has this been tested?

- Updating tests
- Running it on Mac
- Running it on iPhone

## Screenshots (if appropriate)

![image](https://user-images.githubusercontent.com/4840096/213941238-de04b92a-495f-4437-a7db-925f81ebf1a3.png)


## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->

Changes visible to users:

- [x] **New feature** (prefix: `feat` - non-breaking change which adds functionality)

Internal changes:

- [x] **Tests** (prefix: `test` - additions and improvements to unit tests and the smoke tests)

## Checklist

<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [x] My change requires a change to the documentation.
- [ ] I have [updated the documentation](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CONTRIBUTING.md#updating-documentation) accordingly.
- [x] My change has adequate [Unit Test coverage](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CONTRIBUTING.md#maintaining-the-tests).

## Terms

<!--
By submitting this pull request, you must agree to follow our
[contributing guide](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CONTRIBUTING.md) and
[Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md).
Put an x in the boxes to confirm you agree.
-->

- [x] My contribution follow this project's [contributing guide](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CONTRIBUTING.md)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)



Patch:
diff --git a/src/Status.ts b/src/Status.ts
index f06a62d8..6efa4475 100644
--- a/src/Status.ts
+++ b/src/Status.ts
@@ -217,9 +217,15 @@ export class Status {
     public previewText() {
         let commandNotice = '';
         if (Status.tasksPluginCanCreateCommandsForStatuses() && this.availableAsCommand) {
-            commandNotice = 'Available as a command.';
+            commandNotice = ' Available as a command.';
         }
-        return `- [${this.symbol}] ${this.name}, next status is '${this.nextStatusSymbol}', type is '${this.configuration.type}'. ${commandNotice}`;
+        return (
+            `- [${this.symbol}]` + // comment to break line
+            ` => [${this.nextStatusSymbol}],` +
+            ` name: '${this.name}',` +
+            ` type: '${this.configuration.type}'.` +
+            `${commandNotice}`
+        );
     }
 
     /**


Test patch:
diff --git a/tests/Status.test.ts b/tests/Status.test.ts
index 13b59c78..13679dc8 100644
--- a/tests/Status.test.ts
+++ b/tests/Status.test.ts
@@ -11,25 +11,23 @@ window.moment = moment;
 
 describe('Status', () => {
     it('preview text', () => {
-        const configuration = new Status(new StatusConfiguration('P', 'Pro', 'Con', true, StatusType.TODO));
-        expect(configuration.previewText()).toEqual("- [P] Pro, next status is 'Con', type is 'TODO'. ");
+        const configuration = new Status(new StatusConfiguration('P', 'Pro', 'C', true, StatusType.TODO));
+        expect(configuration.previewText()).toEqual("- [P] => [C], name: 'Pro', type: 'TODO'.");
     });
 
     it('default configurations', () => {
-        expect(Status.DONE.previewText()).toEqual("- [x] Done, next status is ' ', type is 'DONE'. ");
-        expect(Status.EMPTY.previewText()).toEqual("- [] EMPTY, next status is '', type is 'EMPTY'. ");
-        expect(Status.TODO.previewText()).toEqual("- [ ] Todo, next status is 'x', type is 'TODO'. ");
+        expect(Status.DONE.previewText()).toEqual("- [x] => [ ], name: 'Done', type: 'DONE'.");
+        expect(Status.EMPTY.previewText()).toEqual("- [] => [], name: 'EMPTY', type: 'EMPTY'.");
+        expect(Status.TODO.previewText()).toEqual("- [ ] => [x], name: 'Todo', type: 'TODO'.");
     });
 
     it('factory methods for default statuses', () => {
-        expect(Status.makeDone().previewText()).toEqual("- [x] Done, next status is ' ', type is 'DONE'. ");
-        expect(Status.makeEmpty().previewText()).toEqual("- [] EMPTY, next status is '', type is 'EMPTY'. ");
-        expect(Status.makeTodo().previewText()).toEqual("- [ ] Todo, next status is 'x', type is 'TODO'. ");
-        expect(Status.makeCancelled().previewText()).toEqual(
-            "- [-] Cancelled, next status is ' ', type is 'CANCELLED'. ",
-        );
+        expect(Status.makeDone().previewText()).toEqual("- [x] => [ ], name: 'Done', type: 'DONE'.");
+        expect(Status.makeEmpty().previewText()).toEqual("- [] => [], name: 'EMPTY', type: 'EMPTY'.");
+        expect(Status.makeTodo().previewText()).toEqual("- [ ] => [x], name: 'Todo', type: 'TODO'.");
+        expect(Status.makeCancelled().previewText()).toEqual("- [-] => [ ], name: 'Cancelled', type: 'CANCELLED'.");
         expect(Status.makeInProgress().previewText()).toEqual(
-            "- [/] In Progress, next status is 'x', type is 'IN_PROGRESS'. ",
+            "- [/] => [x], name: 'In Progress', type: 'IN_PROGRESS'.",
         );
     });