NAS-130524: Change train selection to checkbox group (#10426)

src/app/interfaces/api/api-call-directory.interface.ts

@@ -354,6 +354,7 @@ export interface ApiCallDirectory {
 
   // Catalog
   'catalog.get_app_details': { params: [name: string, params: GetItemDetailsParams]; response: CatalogApp };
+  'catalog.trains': { params: void; response: string[] };
   'catalog.update': { params: [CatalogUpdate]; response: Catalog };
   'catalog.config': { params: void; response: Catalog };
 

src/app/pages/apps/components/catalog-settings/catalog-settings.component.html

@@ -1,5 +1,5 @@
 <ix-modal-header
-  [title]="'Edit Catalog' | translate"
+  [title]="'Train Settings' | translate"
   [loading]="isFormLoading()"
   [requiredRoles]="requiredRoles"
 ></ix-modal-header>
@@ -8,12 +8,13 @@
   <mat-card-content>
     <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
       <ix-fieldset>
-        <ix-chips
+        <ix-checkbox-list
           formControlName="preferred_trains"
-          [required]="true"
           [label]="'Preferred Trains' | translate"
           [tooltip]="tooltips.preferred_trains | translate"
-        ></ix-chips>
+          [options]="allTrains$"
+          [inlineFields]="true"
+        ></ix-checkbox-list>
       </ix-fieldset>
 
       <ix-form-actions>

src/app/pages/apps/components/catalog-settings/catalog-settings.component.spec.ts

@@ -6,6 +6,7 @@ import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectat
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
 import { mockCall, mockWebSocket } from 'app/core/testing/utils/mock-websocket.utils';
 import { Catalog } from 'app/interfaces/catalog.interface';
+import { IxCheckboxListHarness } from 'app/modules/forms/ix-forms/components/ix-checkbox-list/ix-checkbox-list.harness';
 import { IxSlideInRef } from 'app/modules/forms/ix-forms/components/ix-slide-in/ix-slide-in-ref';
 import { IxFormsModule } from 'app/modules/forms/ix-forms/ix-forms.module';
 import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service';
@@ -26,6 +27,7 @@ describe('CatalogEditFormComponent', () => {
     providers: [
       mockWebSocket([
         mockCall('catalog.update'),
+        mockCall('catalog.trains', ['stable', 'community', 'test']),
         mockCall('catalog.config', {
           label: 'TrueNAS',
           preferred_trains: ['test'],
@@ -43,6 +45,17 @@ describe('CatalogEditFormComponent', () => {
     loader = TestbedHarnessEnvironment.loader(spectator.fixture);
   });
 
+  it('loads list of available trains and shows them', async () => {
+    expect(spectator.inject(WebSocketService).call).toHaveBeenCalledWith('catalog.trains');
+
+    const checkboxList = await loader.getHarness(IxCheckboxListHarness);
+    const checkboxes = await checkboxList.getCheckboxes();
+    expect(checkboxes).toHaveLength(3);
+    expect(await checkboxes[0].getLabelText()).toBe('stable');
+    expect(await checkboxes[1].getLabelText()).toBe('community');
+    expect(await checkboxes[2].getLabelText()).toBe('test');
+  });
+
   it('shows preferred trains when catalog is open for editing', async () => {
     const form = await loader.getHarness(IxFormHarness);
     const values = await form.getValues();
@@ -55,14 +68,14 @@ describe('CatalogEditFormComponent', () => {
   it('saves catalog updates and reloads catalog apps when form is saved', async () => {
     const form = await loader.getHarness(IxFormHarness);
     await form.fillForm({
-      'Preferred Trains': ['stable', 'incubator'],
+      'Preferred Trains': ['stable', 'community'],
     });
 
     const saveButton = await loader.getHarness(MatButtonHarness.with({ text: 'Save' }));
     await saveButton.click();
 
     expect(spectator.inject(WebSocketService).call).toHaveBeenCalledWith('catalog.update', [
-      { preferred_trains: ['stable', 'incubator'] },
+      { preferred_trains: ['stable', 'community'] },
     ]);
     expect(spectator.inject(AppsStore).loadCatalog).toHaveBeenCalled();
   });

src/app/pages/apps/components/catalog-settings/catalog-settings.component.ts

@@ -5,6 +5,7 @@ import { FormBuilder, Validators } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { switchMap } from 'rxjs';
 import { Role } from 'app/enums/role.enum';
+import { singleArrayToOptions } from 'app/helpers/operators/options.operators';
 import { helptextApps } from 'app/helptext/apps/apps';
 import { Catalog, CatalogUpdate } from 'app/interfaces/catalog.interface';
 import { IxSlideInRef } from 'app/modules/forms/ix-forms/components/ix-slide-in/ix-slide-in-ref';
@@ -26,6 +27,10 @@ export class CatalogSettingsComponent implements OnInit {
     preferred_trains: [[] as string[], Validators.required],
   });
 
+  protected allTrains$ = this.ws.call('catalog.trains').pipe(
+    singleArrayToOptions(),
+  );
+
   readonly tooltips = {
     preferred_trains: helptextApps.catalogForm.preferredTrains.tooltip,
   };