NAS-131565 / 24.10.0 / Use circle icons for start and stop actions (by denysbutenko)

src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html

@@ -13,7 +13,7 @@ <h3 mat-card-title>
         {{ 'Edit' | translate }}
       </button>
 
-      @if (hasUpdates()) {
+      @if (app()?.upgrade_available) {
         <button
           *ixRequiresRoles="requiredRoles"
           id="update-app"
@@ -85,7 +85,7 @@ <h3 mat-card-title>
             {{ app()?.metadata?.train | orNotAvailable }}
           </div>
         </div>
-        @if (app()?.portals) {
+        @if ((app().portals | keyvalue).length > 0 ) {
           <div class="portals">
             @for (portal of app().portals | keyvalue; track portal.key) {
               <button
@@ -116,7 +116,7 @@ <h3 mat-card-title>
               [disabled]="inProgress"
               (click)="startApp.emit(); $event.stopPropagation()"
             >
-              <ix-icon name="mdi-play"></ix-icon> {{ 'Start' | translate }}
+              <ix-icon name="mdi-play-circle"></ix-icon> {{ 'Start' | translate }}
             </button>
           }
         </ng-container>
@@ -130,7 +130,7 @@ <h3 mat-card-title>
               [disabled]="inProgress"
               (click)="stopApp.emit(); $event.stopPropagation()"
             >
-              <ix-icon name="mdi-stop"></ix-icon> {{ 'Stop' | translate }}
+              <ix-icon name="mdi-stop-circle"></ix-icon> {{ 'Stop' | translate }}
             </button>
           }
         </ng-container>

src/app/pages/apps/components/installed-apps/app-row/app-row.component.html

@@ -70,7 +70,7 @@
       [disabled]="inProgress()"
       (click)="start(); $event.stopPropagation()"
     >
-      <ix-icon name="mdi-play"></ix-icon>
+      <ix-icon name="mdi-play-circle"></ix-icon>
     </button>
   } @else {
     <button
@@ -80,7 +80,7 @@
       [matTooltip]="'Stop' | translate"
       (click)="stop(); $event.stopPropagation()"
     >
-      <ix-icon name="mdi-stop"></ix-icon>
+      <ix-icon name="mdi-stop-circle"></ix-icon>
     </button>
   }
 </div>

src/app/pages/apps/components/installed-apps/app-row/app-row.component.spec.ts

@@ -99,8 +99,8 @@ describe('AppRowComponent', () => {
     it('shows Stop button when app status is not Stopped', async () => {
       spectator.setInput('status', AppStatus.Running);
 
-      const stopIcon = await loader.getHarness(IxIconHarness.with({ name: 'mdi-stop' }));
-      const startIcon = await loader.getHarnessOrNull(IxIconHarness.with({ name: 'mdi-play' }));
+      const stopIcon = await loader.getHarness(IxIconHarness.with({ name: 'mdi-stop-circle' }));
+      const startIcon = await loader.getHarnessOrNull(IxIconHarness.with({ name: 'mdi-play-circle' }));
 
       expect(stopIcon).toExist();
       expect(startIcon).not.toExist();
@@ -112,8 +112,8 @@ describe('AppRowComponent', () => {
         state: CatalogAppState.Stopped,
       });
 
-      const stopIcon = await loader.getHarnessOrNull(IxIconHarness.with({ name: 'mdi-stop' }));
-      const startIcon = await loader.getHarness(IxIconHarness.with({ name: 'mdi-play' }));
+      const stopIcon = await loader.getHarnessOrNull(IxIconHarness.with({ name: 'mdi-stop-circle' }));
+      const startIcon = await loader.getHarness(IxIconHarness.with({ name: 'mdi-play-circle' }));
 
       expect(stopIcon).not.toExist();
       expect(startIcon).toExist();

src/app/pages/apps/components/installed-apps/installed-apps.component.html

@@ -165,7 +165,7 @@ <h2>{{ 'Applications' | translate }}</h2>
             ></ix-icon>
           }
         </div>
-        <div></div>
+        <div>{{ 'Controls' | translate }}</div>
       </div>
     </div>
 

src/app/pages/data-protection/cloud-backup/cloud-backup-card/cloud-backup-card.component.spec.ts

@@ -110,7 +110,7 @@ describe('CloudBackupCardComponent', () => {
   });
 
   it('shows confirmation dialog when Run Now button is pressed', async () => {
-    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'play_arrow' }), 1, 5);
+    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'mdi-play-circle' }), 1, 5);
     await runNowButton.click();
 
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({

src/app/pages/data-protection/cloud-backup/cloud-backup-card/cloud-backup-card.component.ts

@@ -86,7 +86,7 @@ export class CloudBackupCardComponent implements OnInit {
           onClick: (row) => this.openForm(row),
         },
         {
-          iconName: 'play_arrow',
+          iconName: 'mdi-play-circle',
           tooltip: this.translate.instant('Run job'),
           hidden: (row) => of(row.job?.state === JobState.Running),
           onClick: (row) => this.runNow(row),

src/app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component.spec.ts

@@ -126,7 +126,7 @@ describe('CloudBackupListComponent', () => {
   });
 
   it('shows confirmation dialog when Run Now button is pressed', async () => {
-    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'play_arrow' }), 1, 5);
+    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'mdi-play-circle' }), 1, 5);
     await runNowButton.click();
 
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({

src/app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component.ts

@@ -90,7 +90,7 @@ export class CloudBackupListComponent implements OnInit {
           onClick: (row) => this.openForm(row),
         },
         {
-          iconName: 'play_arrow',
+          iconName: 'mdi-play-circle',
           tooltip: this.translate.instant('Run job'),
           hidden: (row) => of(row.job?.state === JobState.Running),
           onClick: (row) => this.runNow(row),

src/app/pages/data-protection/cloudsync/cloudsync-list/cloudsync-list.component.html

@@ -54,7 +54,7 @@
               [ixTest]="[task.id, 'stop']"
               (click)="stopCloudSyncTask(task)"
             >
-              <ix-icon name="stop"></ix-icon>
+              <ix-icon name="mdi-stop-circle"></ix-icon>
               <span>{{ 'Stop' | translate }}</span>
             </button>
           }

src/app/pages/data-protection/cloudsync/cloudsync-task-card/cloudsync-task-card.component.spec.ts

@@ -186,7 +186,7 @@ describe('CloudSyncTaskCardComponent', () => {
 
   it('shows confirmation dialog when Run Now button is pressed', async () => {
     jest.spyOn(spectator.inject(DialogService), 'confirm');
-    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'play_arrow' }), 1, 6);
+    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'mdi-play-circle' }), 1, 6);
     await runNowButton.click();
 
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({

src/app/pages/data-protection/cloudsync/cloudsync-task-card/cloudsync-task-card.component.ts

@@ -89,14 +89,14 @@ export class CloudSyncTaskCardComponent implements OnInit {
           onClick: (row) => this.onEdit(row),
         },
         {
-          iconName: 'play_arrow',
+          iconName: 'mdi-play-circle',
           tooltip: this.translate.instant('Run job'),
           hidden: (row) => of(row.job?.state === JobState.Running),
           onClick: (row) => this.runNow(row),
           requiredRoles: this.requiredRoles,
         },
         {
-          iconName: 'stop',
+          iconName: 'mdi-stop-circle',
           tooltip: this.translate.instant('Stop'),
           hidden: (row) => of(row.job?.state !== JobState.Running),
           onClick: (row) => this.stopCloudSyncTask(row),

src/app/pages/data-protection/replication/replication-task-card/replication-task-card.component.spec.ts

@@ -147,7 +147,7 @@ describe('ReplicationTaskCardComponent', () => {
   });
 
   it('shows confirmation dialog when Run Now button is pressed', async () => {
-    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'play_arrow' }), 1, 5);
+    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'mdi-play-circle' }), 1, 5);
     await runNowButton.click();
 
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({

src/app/pages/data-protection/replication/replication-task-card/replication-task-card.component.ts

@@ -92,7 +92,7 @@ export class ReplicationTaskCardComponent implements OnInit {
           onClick: (row) => this.editReplicationTask(row),
         },
         {
-          iconName: 'play_arrow',
+          iconName: 'mdi-play-circle',
           tooltip: this.translate.instant('Run job'),
           hidden: (row) => of(row.job?.state === JobState.Running),
           onClick: (row) => this.runNow(row),

src/app/pages/data-protection/rsync-task/rsync-task-card/rsync-task-card.component.spec.ts

@@ -160,7 +160,7 @@ describe('RsyncTaskCardComponent', () => {
 
   it('shows confirmation dialog when Run Now button is pressed', async () => {
     jest.spyOn(spectator.inject(DialogService), 'confirm');
-    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'play_arrow' }), 1, 7);
+    const runNowButton = await table.getHarnessInCell(IxIconHarness.with({ name: 'mdi-play-circle' }), 1, 7);
     await runNowButton.click();
 
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({

src/app/pages/data-protection/rsync-task/rsync-task-card/rsync-task-card.component.ts

@@ -89,7 +89,7 @@ export class RsyncTaskCardComponent implements OnInit {
           onClick: (row) => this.openForm(row),
         },
         {
-          iconName: 'play_arrow',
+          iconName: 'mdi-play-circle',
           tooltip: this.translate.instant('Run job'),
           requiredRoles: this.requiredRoles,
           hidden: (row) => of(row.job?.state === JobState.Running),

src/app/pages/data-protection/rsync-task/rsync-task-list/rsync-task-list.component.spec.ts

@@ -192,7 +192,7 @@ describe('RsyncTaskListComponent', () => {
   });
 
   it('runs a task when run button is pressed', async () => {
-    const runIcon = await table.getHarnessInRow(IxIconHarness.with({ name: 'play_arrow' }), '/mnt/Pool1');
+    const runIcon = await table.getHarnessInRow(IxIconHarness.with({ name: 'mdi-play-circle' }), '/mnt/Pool1');
     await runIcon.click();
 
     expect(spectator.inject(WebSocketService).job).toHaveBeenCalledWith('rsynctask.run', [1]);

src/app/pages/data-protection/rsync-task/rsync-task-list/rsync-task-list.component.ts

@@ -133,7 +133,7 @@ export class RsyncTaskListComponent implements OnInit {
     actionsColumn({
       actions: [
         {
-          iconName: 'play_arrow',
+          iconName: 'mdi-play-circle',
           tooltip: this.translate.instant('Run job'),
           requiredRoles: this.requiredRoles,
           onClick: (row) => this.runNow(row),

src/app/pages/system/advanced/cron/cron-card/cron-card.component.spec.ts

@@ -107,7 +107,7 @@ describe('CronCardComponent', () => {
   });
 
   it('shows confirmation dialog when Run Now button is pressed', async () => {
-    const runNowButton = await table.getHarnessInRow(IxIconHarness.with({ name: 'play_arrow' }), 'root');
+    const runNowButton = await table.getHarnessInRow(IxIconHarness.with({ name: 'mdi-play-circle' }), 'root');
     await runNowButton.click();
 
     expect(spectator.inject(DialogService).confirm).toHaveBeenCalledWith({

src/app/pages/system/advanced/cron/cron-card/cron-card.component.ts

@@ -75,7 +75,7 @@ export class CronCardComponent implements OnInit {
       cssClass: 'tight-actions',
       actions: [
         {
-          iconName: 'play_arrow',
+          iconName: 'mdi-play-circle',
           tooltip: this.translate.instant('Run job'),
           onClick: (row) => this.runNow(row),
           requiredRoles: this.requiredRoles,

src/app/pages/vm/vm-list/vm-details-row/vm-details-row.component.html

@@ -5,7 +5,7 @@
     [ixTest]="['stop', vm().id]"
     (click)="doStop()"
   >
-    <ix-icon name="stop"></ix-icon>
+    <ix-icon name="mdi-stop-circle"></ix-icon>
     <span>{{ 'Stop' | translate }}</span>
   </button>
 
@@ -35,7 +35,7 @@
     [ixTest]="['start', vm().id]"
     (click)="doStart()"
   >
-    <ix-icon name="play_arrow"></ix-icon>
+    <ix-icon name="mdi-play-circle"></ix-icon>
     <span>{{ 'Start' | translate }}</span>
   </button>
 }

src/app/pages/vm/vm-list/vm-details-row/vm-details-row.component.spec.ts

@@ -10,6 +10,7 @@ import { fakeFile } from 'app/core/testing/utils/fake-file.uitls';
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
 import { VmState } from 'app/enums/vm.enum';
 import { VirtualMachine } from 'app/interfaces/virtual-machine.interface';
+import { IxIconHarness } from 'app/modules/ix-icon/ix-icon.harness';
 import { VmEditFormComponent } from 'app/pages/vm/vm-edit-form/vm-edit-form.component';
 import { CloneVmDialogComponent } from 'app/pages/vm/vm-list/clone-vm-dialog/clone-vm-dialog.component';
 import { DeleteVmDialogComponent } from 'app/pages/vm/vm-list/delete-vm-dialog/delete-vm-dialog.component';
@@ -130,6 +131,9 @@ describe('VirtualMachineDetailsRowComponent', () => {
     spectator.setInput('vm', stoppedVirtualMachine);
 
     const startButton = await loader.getHarness(MatButtonHarness.with({ text: /Start/ }));
+    const startIcon = await startButton.getHarness(IxIconHarness.with({ name: 'mdi-play-circle' }));
+    expect(await startIcon.getName()).toBe('mdi-play-circle');
+
     await startButton.click();
 
     expect(spectator.inject(VmService).doStart).toHaveBeenCalledWith(stoppedVirtualMachine);
@@ -144,6 +148,10 @@ describe('VirtualMachineDetailsRowComponent', () => {
 
   it('should call service to stop the VM', async () => {
     const stopButton = await loader.getHarness(MatButtonHarness.with({ text: /Stop/ }));
+
+    const stopIcon = await stopButton.getHarness(IxIconHarness.with({ name: 'mdi-stop-circle' }));
+    expect(await stopIcon.getName()).toBe('mdi-stop-circle');
+
     await stopButton.click();
 
     expect(spectator.inject(VmService).doStop).toHaveBeenCalledWith(virtualMachine);

src/assets/i18n/af.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/ar.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/ast.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/az.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/be.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/bg.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/bn.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/br.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",

src/assets/i18n/bs.json

@@ -963,6 +963,7 @@
   "Contract Type": "",
   "Control": "",
   "Controller Type": "",
+  "Controls": "",
   "Controls whether  <a href=\"https://www.truenas.com/docs/scale/scaleuireference/dataprotection/smarttestsscreensscale/\" target=\"_blank\">SMART monitoring and scheduled SMART tests</a>  are enabled.": "",
   "Controls whether audit messages will be generated for the share. <br><br> <b>Note</b>: Auditing may not be enabled if SMB1 support is enabled for the server.": "",
   "Controls whether the user used for SSH/SSH+NETCAT replication will have passwordless sudo enabled to execute zfs commands on the remote host.    If not checked, <i>zfs allow</i> must be used to grant non-user permissions to perform ZFS tasks. Mounting ZFS filesystems by non-root still would not be possible due to Linux restrictions.": "",