Merge branch 'origin/master' into 131326/NAS-131326

src/app/app.routing.ts

@@ -44,7 +44,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'system',
-        loadChildren: () => import('./pages/system/system.module').then((module) => module.SystemModule),
+        loadChildren: () => import('./pages/system/system.routes').then((module) => module.systemRoutes),
         data: { title: T('System'), breadcrumb: T('System') },
       },
       {
@@ -124,7 +124,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'jobs',
-        loadChildren: () => import('./pages/jobs/jobs-list.module').then((module) => module.JobsListModule),
+        loadComponent: () => import('./pages/jobs/jobs-list.component').then((module) => module.JobsListComponent),
         data: { title: T('Jobs'), breadcrumb: T('Jobs') },
       },
       {

src/app/enums/app-state.enum.ts

@@ -4,19 +4,22 @@ export enum AppState {
   Running = 'RUNNING',
   Deploying = 'DEPLOYING',
   Stopped = 'STOPPED',
+  Stopping = 'STOPPING',
   Crashed = 'CRASHED',
 }
 
 export const appStateIcons = new Map<AppState, string>([
   [AppState.Running, 'mdi-check-circle'],
   [AppState.Deploying, 'mdi-progress-wrench'],
   [AppState.Stopped, 'mdi-stop-circle'],
+  [AppState.Stopping, 'mdi-progress-wrench'],
   [AppState.Crashed, 'mdi-alert-circle'],
 ]);
 
 export const appStateLabels = new Map<AppState, string>([
   [AppState.Running, T('Running')],
   [AppState.Deploying, T('Deploying')],
   [AppState.Stopped, T('Stopped')],
+  [AppState.Stopping, T('Stopping')],
   [AppState.Crashed, T('Crashed')],
 ]);

src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts

@@ -8,7 +8,7 @@ import { CloudSyncProviderName, cloudSyncProviderNameMap } from 'app/enums/cloud
 import { CloudCredential } from 'app/interfaces/cloud-sync-task.interface';
 import { Option } from 'app/interfaces/option.interface';
 import { IxSelectWithNewOption } from 'app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive';
-import { IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
+import { IxSelectComponent, IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import { CloudCredentialsFormComponent } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/cloud-credentials-form.component';
 import { CloudCredentialService } from 'app/services/cloud-credential.service';
 import { ChainedComponentResponse } from 'app/services/ix-chained-slide-in.service';
@@ -24,6 +24,8 @@ import { ChainedComponentResponse } from 'app/services/ix-chained-slide-in.servi
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IxSelectComponent],
 })
 export class CloudCredentialsSelectComponent extends IxSelectWithNewOption {
   @Input() label: string;

src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts

@@ -9,7 +9,7 @@ import { idNameArrayToOptions } from 'app/helpers/operators/options.operators';
 import { Option } from 'app/interfaces/option.interface';
 import { SshCredentials } from 'app/interfaces/ssh-credentials.interface';
 import { IxSelectWithNewOption } from 'app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive';
-import { IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
+import { IxSelectComponent, IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import { SshConnectionFormComponent } from 'app/pages/credentials/backup-credentials/ssh-connection-form/ssh-connection-form.component';
 import { ChainedComponentResponse } from 'app/services/ix-chained-slide-in.service';
 import { KeychainCredentialService } from 'app/services/keychain-credential.service';
@@ -25,6 +25,8 @@ import { KeychainCredentialService } from 'app/services/keychain-credential.serv
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IxSelectComponent],
 })
 export class SshCredentialsSelectComponent extends IxSelectWithNewOption {
   @Input() label: string;

src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.html

@@ -34,6 +34,7 @@
       @if (shouldShowResetInput() && !isValueFromOptions(ixInput.value)) {
         <ix-icon
           name="mdi-close-circle"
+          class="reset-icon"
           (click)="resetInput()"
         ></ix-icon>
       } @else {

src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.scss

@@ -61,8 +61,7 @@
 }
 
 .input-container .ix-icon {
-  font-size: 1rem;
-  height: auto;
+  height: 1rem;
   margin-left: 4px;
   width: auto;
 }

src/app/modules/ix-drop-grid/ix-drag-handle.directive.ts

@@ -5,5 +5,6 @@ import { ixDragHandleDirectiveToken } from 'app/modules/ix-drop-grid/ix-drop-gri
 @Directive({
   selector: '[ixDragHandle]',
   providers: [{ provide: ixDragHandleDirectiveToken, useExisting: IxDragHandleDirective }],
+  standalone: true,
 })
 export class IxDragHandleDirective extends CdkDragHandle {}

src/app/modules/ix-drop-grid/ix-drag.directive.ts

@@ -32,6 +32,7 @@ import {
     { provide: ixDragParentToken, useExisting: this },
     { provide: CDK_DRAG_PARENT, useExisting: this },
   ],
+  standalone: true,
 })
 export class IxDragDirective extends CdkDrag {
   @ContentChildren(ixDragHandleDirectiveToken, { descendants: true }) _ixHandles: QueryList<IxDragHandleDirective>;

src/app/modules/ix-drop-grid/ix-drop-grid-item.directive.ts

@@ -19,6 +19,7 @@ import {
     { provide: ixDropGridDirectiveToken, useValue: undefined },
     { provide: ixDropGridItemDirectiveToken, useExisting: IxDropGridItemDirective },
   ],
+  standalone: true,
 })
 export class IxDropGridItemDirective<T = unknown> extends CdkDropList<T> implements AfterViewInit {
   constructor(

src/app/modules/ix-drop-grid/ix-drop-grid-placeholder.component.ts

@@ -9,6 +9,8 @@ import { ixDropGridDirectiveToken } from 'app/modules/ix-drop-grid/ix-drop-grid.
   selector: 'ix-drop-grid-placeholder',
   template: '<div ixDropGridItem></div>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IxDropGridItemDirective],
 })
 export class IxDropGridPlaceholderComponent implements AfterViewInit {
   @ViewChild(IxDropGridItemDirective) itemInstance: IxDropGridItemDirective;

src/app/modules/ix-drop-grid/ix-drop-grid.directive.ts

@@ -1,4 +1,10 @@
-import { CdkDragEnter, CdkDropListGroup, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  CDK_DRAG_CONFIG,
+  CdkDragEnter,
+  CdkDropListGroup,
+  DragDropConfig,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
 import { DOCUMENT } from '@angular/common';
 import {
   Directive,
@@ -17,7 +23,12 @@ import { ixDropGridDirectiveToken } from 'app/modules/ix-drop-grid/ix-drop-grid.
   selector: '[ixDropGrid]',
   providers: [
     { provide: ixDropGridDirectiveToken, useExisting: this },
+    {
+      provide: CDK_DRAG_CONFIG,
+      useValue: {} as DragDropConfig,
+    },
   ],
+  standalone: true,
 })
 export class IxDropGridDirective<T = unknown> extends CdkDropListGroup<IxDropGridItemDirective> implements OnInit {
   @Input() ixDropGridModel: T[];

src/app/pages/api-keys/store/api-key.store.ts

@@ -21,7 +21,9 @@ const initialState: ApiKeysState = {
   error: null,
 };
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class ApiKeyComponentStore extends ComponentStore<ApiKeysState> {
   constructor(
     private ws: WebSocketService,

src/app/pages/apps/components/app-section-expand-collapse/app-section-expand-collapse.component.ts

@@ -1,8 +1,8 @@
 import {
-  AfterContentChecked,
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
   ElementRef,
   input,
   OnChanges,
@@ -16,7 +16,7 @@ import {
   styleUrls: ['./app-section-expand-collapse.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppSectionExpandCollapseComponent implements OnChanges, AfterContentChecked {
+export class AppSectionExpandCollapseComponent implements OnChanges {
   section = viewChild<ElementRef<HTMLElement>>('section');
   maxHeight = input<number>(250);
   height = signal<number>(this.maxHeight());
@@ -25,18 +25,20 @@ export class AppSectionExpandCollapseComponent implements OnChanges, AfterConten
     return this.height() >= this.maxHeight();
   });
 
+  constructor() {
+    effect(() => {
+      if (this.isCollapsed()) {
+        this.setHeight();
+        this.section().nativeElement.style.maxHeight = `${this.maxHeight()}px`;
+      }
+    }, { allowSignalWrites: true });
+  }
+
   ngOnChanges(): void {
     this.isCollapsed.set(true);
     this.section().nativeElement.style.maxHeight = `${this.maxHeight()}px`;
   }
 
-  ngAfterContentChecked(): void {
-    if (this.isCollapsed()) {
-      this.setHeight();
-      this.section().nativeElement.style.maxHeight = `${this.maxHeight()}px`;
-    }
-  }
-
   changeCollapsed(): void {
     this.setHeight();
     this.isCollapsed.set(!this.isCollapsed());

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-info-card/app-info-card.component.ts

@@ -41,7 +41,6 @@ export class AppInfoCardComponent {
   readonly stopApp = output();
   protected readonly isCustomApp = computed(() => this.app()?.metadata?.name === customApp);
   protected readonly requiredRoles = [Role.AppsWrite];
-  protected readonly hasUpdates = computed(() => this.app()?.upgrade_available);
   protected readonly isAppStopped = computed<boolean>(() => this.app()?.state === AppState.Stopped);
   protected readonly inProgress = computed<boolean>(() => [AppState.Deploying].includes(this.app()?.state));
   protected readonly imagePlaceholder = appImagePlaceholder;

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
@@ -91,7 +91,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', () => {
         state: AppState.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' }));
       const restartIcon = await loader.getHarnessOrNull(IxIconHarness.with({ name: 'mdi-restart' }));
 
       expect(stopIcon).toExist();
@@ -114,8 +114,8 @@ describe('AppRowComponent', () => {
         state: AppState.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' }));
       const restartIcon = await loader.getHarnessOrNull(IxIconHarness.with({ name: 'mdi-restart' }));
 
       expect(restartIcon).not.toExist();

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

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