NAS-128968: TrueCloud Backup shows non-Storj credentials

package.json

@@ -16,7 +16,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:ci": "jest --runInBand",
-    "test:pr": "yarn run check-env -s && echo 'Setting up temporary environment file...\\n' && yarn run ui remote -i 'headless.local' && jest --coverage --maxWorkers=2 src/app/pages/dashboard/components",
+    "test:pr": "yarn run check-env -s && echo 'Setting up temporary environment file...\\n' && yarn run ui remote -i 'headless.local' && jest --coverage --maxWorkers=2",
     "test:changed": "node scripts/test_changed.js",
     "lint": "ng lint && stylelint 'src/**/*.scss' && markuplint 'src/**/*.html'",
     "lint:fix": "ng lint --fix && stylelint --fix 'src/**/*.scss' && markuplint --fix 'src/**/*.html'",

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

@@ -0,0 +1,121 @@
+import { HarnessLoader, parallel } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import {
+  FormGroup, FormControl, ReactiveFormsModule, FormsModule,
+} from '@angular/forms';
+import { TooltipComponent } from '@angular/material/tooltip';
+import { SpectatorHost } from '@ngneat/spectator';
+import { createHostFactory, mockProvider } from '@ngneat/spectator/jest';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+import { CloudSyncProviderName } from 'app/enums/cloudsync-provider.enum';
+import { CloudCredentialsSelectComponent } from 'app/modules/custom-selects/cloud-credentials-select/cloud-credentials-select.component';
+import { IxErrorsComponent } from 'app/modules/ix-forms/components/ix-errors/ix-errors.component';
+import { IxLabelComponent } from 'app/modules/ix-forms/components/ix-label/ix-label.component';
+import { IxSelectComponent } from 'app/modules/ix-forms/components/ix-select/ix-select.component';
+import { IxSelectHarness } from 'app/modules/ix-forms/components/ix-select/ix-select.harness';
+import { IxFormsModule } from 'app/modules/ix-forms/ix-forms.module';
+import { CloudCredentialService } from 'app/services/cloud-credential.service';
+
+describe('CloudCredentialsSelectComponent', () => {
+  let spectator: SpectatorHost<CloudCredentialsSelectComponent>;
+  let loader: HarnessLoader;
+
+  const host = `
+    <form [formGroup]="form">
+      <ix-cloud-credentials-select
+        formControlName="credentials"
+        [label]="label"
+        [tooltip]="tooltip"
+        [filterByProviders]="filterByProviders"
+        [required]="required"
+      ></ix-cloud-credentials-select>
+    </form>
+  `;
+
+  const defaultHostProps = {
+    form: new FormGroup({
+      credentials: new FormControl(),
+    }),
+    label: '',
+    required: false,
+    tooltip: '',
+  };
+
+  const mockCloudCredentialService = {
+    getCloudSyncCredentials: jest.fn(() => of([
+      { id: '1', name: 'AWS S3', provider: CloudSyncProviderName.AmazonS3 },
+      { id: '2', name: 'Dropbox', provider: CloudSyncProviderName.Dropbox },
+      { id: '2', name: 'Drive', provider: CloudSyncProviderName.GoogleDrive },
+    ])),
+  };
+
+  const createHost = createHostFactory({
+    component: CloudCredentialsSelectComponent,
+    imports: [
+      TranslateModule.forRoot(),
+      IxFormsModule,
+      ReactiveFormsModule,
+      FormsModule,
+    ],
+    declarations: [
+      IxSelectComponent,
+      MockComponent(IxErrorsComponent),
+      MockComponent(IxLabelComponent),
+      MockComponent(TooltipComponent),
+    ],
+    providers: [
+      mockProvider(CloudCredentialService, mockCloudCredentialService),
+    ],
+  });
+
+  describe('no filter by providers set', () => {
+    beforeEach(() => {
+      spectator = createHost(host, {
+        hostProps: defaultHostProps,
+      });
+
+      loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+    });
+
+    it('should populate ix-select with credentials when providers are set', async () => {
+      const select = await (await loader.getHarness(IxSelectHarness)).getSelectHarness();
+      await select.open();
+      const options = await select.getOptions();
+      const optionLabels = await parallel(() => options.map((option) => option.getText()));
+      expect(optionLabels).toEqual([
+        '--',
+        'Add New',
+        'AWS S3 (Amazon S3)',
+        'Dropbox (Dropbox)',
+        'Drive (Google Drive)',
+      ]);
+    });
+  });
+
+  describe('filter by providers is set', () => {
+    beforeEach(() => {
+      spectator = createHost(host, {
+        hostProps: {
+          ...defaultHostProps,
+          filterByProviders: [CloudSyncProviderName.AmazonS3],
+        },
+      });
+
+      loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+    });
+
+    it('should populate ix-select with credentials when providers are set', async () => {
+      const select = await (await loader.getHarness(IxSelectHarness)).getSelectHarness();
+      await select.open();
+      const options = await select.getOptions();
+      const optionLabels = await parallel(() => options.map((option) => option.getText()));
+      expect(optionLabels).toEqual([
+        '--',
+        'Add New',
+        'AWS S3 (Amazon S3)',
+      ]);
+    });
+  });
+});

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

@@ -60,7 +60,7 @@
 
         <ng-template #folderIcon>
           <ng-container *ngIf="!node.data.isLock; else lockIcon">
-            <ix-icon *ngIf="node.data.isMountpoint" name="folder"></ix-icon>
+            <ix-icon *ngIf="node.data.isMountpoint" name="ix:dataset"></ix-icon>
             <ix-icon *ngIf="!node.data.isMountpoint" name="folder_open"></ix-icon>
           </ng-container>
         </ng-template>

src/app/modules/ix-icon/ix-icon.constants.ts

@@ -9,6 +9,7 @@ export const ixSvgIcons = {
   anti_lock: 'assets/customicons/anti-lock.svg',
   two_factor_auth: 'assets/customicons/2fa.svg',
   dataset: 'assets/customicons/dataset.svg',
+  dataset_root: 'assets/customicons/dataset_root.svg',
   ha_disabled: 'assets/customicons/ha_disabled.svg',
   ha_enabled: 'assets/customicons/ha_enabled.svg',
   ha_reconnecting: 'assets/customicons/ha_reconnecting.svg',

src/app/pages/datasets/components/dataset-icon/dataset-icon.component.spec.ts

@@ -33,7 +33,7 @@ describe('DatasetIconComponent', () => {
     } as DatasetDetails);
 
     expect(await ixIcon.getNamespace()).toBe('ix');
-    expect(await ixIcon.getName()).toBe('dataset');
+    expect(await ixIcon.getName()).toBe('dataset_root');
   });
 
   it('shows an icon for an ordinary datasets', async () => {
@@ -42,7 +42,7 @@ describe('DatasetIconComponent', () => {
       type: DatasetType.Filesystem,
     } as DatasetDetails);
 
-    expect(await ixIcon.getName()).toBe('folder');
+    expect(await ixIcon.getName()).toBe('dataset');
   });
 
   it('shows an icon for a zvol', async () => {

src/app/pages/datasets/components/dataset-icon/dataset-icon.component.ts

@@ -24,12 +24,12 @@ export class DatasetIconComponent {
 
   get name(): string {
     if (this.isRoot) {
-      return 'ix:dataset';
+      return 'ix:dataset_root';
     }
     if (this.isZvol) {
       return 'mdi-database';
     }
 
-    return 'folder';
+    return 'ix:dataset';
   }
 }

src/app/services/navigation/navigation.service.ts

@@ -48,7 +48,7 @@ export class NavigationService {
       name: T('Datasets'),
       type: MenuItemType.Link,
       tooltip: T('Datasets'),
-      icon: 'ix:dataset',
+      icon: 'ix:dataset_root',
       state: 'datasets',
     },
     {

src/setup-jest.ts

@@ -10,6 +10,7 @@ import { MATERIAL_SANITY_CHECKS, MatNativeDateModule } from '@angular/material/c
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -54,6 +55,7 @@ defineGlobalsInjections({
     MatSlideToggleModule,
     MatMenuModule,
     IxIconModule,
+    MatIconTestingModule,
     MatDatepickerModule,
     MatNativeDateModule,
     MatSelectModule,