NAS-132759 / 25.04 / Rework Installed Apps

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

@@ -1,34 +1,19 @@
-<div class="header">
-  <h2 class="title">
-    <div class="mobile-prefix">
-      <ix-mobile-back-button
-        (onClose)="onCloseMobileDetails()"
-      ></ix-mobile-back-button>
-      {{ 'Details' | translate }}
-    </div>
-
-    <span class="prefix">{{ 'Details' | translate }}</span>
-  </h2>
-</div>
-
-@if (app()) {
-  <div class="cards">
-    <div class="scroll-window">
-      <ix-app-info-card
-        [app]="app()"
-        (startApp)="startApp.emit()"
-        (stopApp)="stopApp.emit()"
-      ></ix-app-info-card>
-      <ix-app-containers-card [app]="app()"></ix-app-containers-card>
-      @if (app()?.notes) {
-        <ix-app-notes-card [app]="app()"></ix-app-notes-card>
-      }
-      @if (app()?.metadata) {
-        <ix-app-metadata-card
-          [appMetadata]="app().metadata"
-          [maxHeight]="180"
-        ></ix-app-metadata-card>
-      }
-    </div>
+<div class="cards">
+  <div class="scroll-window">
+    <ix-app-info-card
+      [app]="app()"
+      (startApp)="startApp.emit()"
+      (stopApp)="stopApp.emit()"
+    ></ix-app-info-card>
+    <ix-app-containers-card [app]="app()"></ix-app-containers-card>
+    @if (app()?.notes) {
+      <ix-app-notes-card [app]="app()"></ix-app-notes-card>
+    }
+    @if (app()?.metadata) {
+      <ix-app-metadata-card
+        [appMetadata]="app().metadata"
+        [maxHeight]="180"
+      ></ix-app-metadata-card>
+    }
   </div>
-}
+</div>

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

@@ -2,7 +2,6 @@ import { Spectator } from '@ngneat/spectator';
 import { createComponentFactory } from '@ngneat/spectator/jest';
 import { MockComponents } from 'ng-mocks';
 import { App } from 'app/interfaces/app.interface';
-import { MobileBackButtonComponent } from 'app/modules/buttons/mobile-back-button/mobile-back-button.component';
 import { AppDetailsPanelComponent } from 'app/pages/apps/components/installed-apps/app-details-panel/app-details-panel.component';
 import { AppInfoCardComponent } from 'app/pages/apps/components/installed-apps/app-info-card/app-info-card.component';
 import { AppMetadataCardComponent } from 'app/pages/apps/components/installed-apps/app-metadata-card/app-metadata-card.component';
@@ -23,7 +22,6 @@ describe('AppDetailsPanelComponent', () => {
         AppInfoCardComponent,
         AppWorkloadsCardComponent,
         AppMetadataCardComponent,
-        MobileBackButtonComponent,
       ),
     ],
     providers: [],
@@ -37,10 +35,6 @@ describe('AppDetailsPanelComponent', () => {
     });
   });
 
-  it('shows a title', () => {
-    expect(spectator.query('h2')).toHaveText('Details');
-  });
-
   it('shows all the cards', () => {
     const appInfoCard = spectator.query(AppInfoCardComponent);
     expect(appInfoCard).toBeTruthy();

src/app/pages/apps/components/installed-apps/app-details-panel/app-details-panel.component.ts

@@ -3,7 +3,6 @@ import {
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { App } from 'app/interfaces/app.interface';
-import { MobileBackButtonComponent } from 'app/modules/buttons/mobile-back-button/mobile-back-button.component';
 import { AppInfoCardComponent } from 'app/pages/apps/components/installed-apps/app-info-card/app-info-card.component';
 import { AppMetadataCardComponent } from 'app/pages/apps/components/installed-apps/app-metadata-card/app-metadata-card.component';
 import { AppNotesCardComponent } from 'app/pages/apps/components/installed-apps/app-notes-card/app-notes-card.component';
@@ -12,15 +11,13 @@ import { AppWorkloadsCardComponent } from 'app/pages/apps/components/installed-a
 @Component({
   selector: 'ix-app-details-panel',
   templateUrl: './app-details-panel.component.html',
-  styleUrls: ['./app-details-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     TranslateModule,
     AppInfoCardComponent,
     AppWorkloadsCardComponent,
     AppNotesCardComponent,
-    MobileBackButtonComponent,
     AppMetadataCardComponent,
   ],
 })
@@ -30,8 +27,4 @@ export class AppDetailsPanelComponent {
   readonly startApp = output();
   readonly stopApp = output();
   readonly closeMobileDetails = output();
-
-  onCloseMobileDetails(): void {
-    this.closeMobileDetails.emit();
-  }
 }

src/app/pages/apps/components/installed-apps/installed-apps-list/installed-apps-list-bulk-actions/installed-apps-list-bulk-actions.component.html

@@ -0,0 +1,57 @@
+<div class="bulk-actions-container">
+  <div class="bulk-selected">
+    <span>{{ checkedApps().length }}</span>
+    <span>{{ 'Selected' | translate }}</span>
+  </div>
+
+  <div class="bulk-button-wrapper">
+    <label>{{ 'Bulk Actions' | translate }}</label>
+    <button
+      *ixRequiresRoles="requiredRoles"
+      mat-button
+      ixTest="bulk-actions-menu"
+      [matMenuTriggerFor]="menu"
+    >
+      {{ 'Select action' | translate }}
+      <ix-icon name="mdi-menu-down" class="menu-caret"></ix-icon>
+    </button>
+  </div>
+
+  <mat-menu #menu="matMenu">
+    <button
+      *ixRequiresRoles="requiredRoles"
+      mat-menu-item
+      ixTest="start-selected"
+      [disabled]="isBulkStartDisabled"
+      (click)="bulkStart.emit()"
+    >
+      <span>{{ 'Start All Selected' | translate }}</span>
+    </button>
+    <button
+      *ixRequiresRoles="requiredRoles"
+      mat-menu-item
+      ixTest="stop-selected"
+      [disabled]="isBulkStopDisabled"
+      (click)="bulkStop.emit()"
+    >
+      <span>{{ 'Stop All Selected' | translate }}</span>
+    </button>
+    <button
+      *ixRequiresRoles="requiredRoles"
+      mat-menu-item
+      ixTest="upgrade-selected"
+      [disabled]="isBulkUpgradeDisabled"
+      (click)="bulkUpgrade.emit()"
+    >
+      <span>{{ 'Upgrade All Selected' | translate }}</span>
+    </button>
+    <button
+      *ixRequiresRoles="requiredRoles"
+      mat-menu-item
+      ixTest="delete-selected"
+      (click)="bulkDelete.emit()"
+    >
+      <span>{{ 'Delete All Selected' | translate }}</span>
+    </button>
+  </mat-menu>
+</div>

src/app/pages/apps/components/installed-apps/installed-apps-list/installed-apps-list-bulk-actions/installed-apps-list-bulk-actions.component.scss

@@ -0,0 +1,31 @@
+.bulk-selected {
+  align-items: center;
+  align-self: flex-end;
+  display: inline-flex;
+  font-size: 16px;
+  gap: 4px;
+  height: 36px;
+}
+
+.bulk-actions-container {
+  align-items: flex-end;
+  display: flex;
+  gap: 12px;
+}
+
+.bulk-button-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  label {
+    color: var(--fg2);
+    font-size: 10px;
+    margin-bottom: 2px;
+  }
+
+  button {
+    background-color: var(--bg1);
+    border: 1px solid var(--lines);
+    font-size: 12px;
+  }
+}

src/app/pages/apps/components/installed-apps/installed-apps-list/installed-apps-list-bulk-actions/installed-apps-list-bulk-actions.component.spec.ts

@@ -0,0 +1,80 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatMenuHarness } from '@angular/material/menu/testing';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
+import { AppState } from 'app/enums/app-state.enum';
+import { App } from 'app/interfaces/app.interface';
+import { InstalledAppsListBulkActionsComponent } from './installed-apps-list-bulk-actions.component';
+
+describe('InstalledAppsListBulkActionsComponent', () => {
+  let spectator: Spectator<InstalledAppsListBulkActionsComponent>;
+  let loader: HarnessLoader;
+  let menu: MatMenuHarness;
+
+  const checkedAppsMock = [
+    { id: 'ix-app-1', state: AppState.Running, upgrade_available: true },
+    { id: 'ix-app-2', state: AppState.Stopped },
+  ] as App[];
+
+  const createComponent = createComponentFactory({
+    component: InstalledAppsListBulkActionsComponent,
+    imports: [MatMenuModule],
+    providers: [
+      mockAuth(),
+    ],
+  });
+
+  beforeEach(async () => {
+    spectator = createComponent({
+      props: {
+        checkedApps: checkedAppsMock,
+      },
+    });
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+    menu = await loader.getHarness(MatMenuHarness);
+    await menu.open();
+  });
+
+  it('displays the correct count of selected instances', () => {
+    const selectedCount = spectator.query('.bulk-selected span:first-child');
+    expect(selectedCount).toHaveText(String(checkedAppsMock.length));
+  });
+
+  it('emits bulkStart after actions', async () => {
+    const startSpy = jest.spyOn(spectator.component.bulkStart, 'emit');
+
+    await menu.open();
+    await menu.clickItem({ text: 'Start All Selected' });
+
+    expect(startSpy).toHaveBeenCalled();
+  });
+
+  it('emits bulkStop after actions', async () => {
+    const stopSpy = jest.spyOn(spectator.component.bulkStop, 'emit');
+
+    await menu.open();
+    await menu.clickItem({ text: 'Stop All Selected' });
+
+    expect(stopSpy).toHaveBeenCalled();
+  });
+
+  it('emits bulkUpgrade after actions', async () => {
+    const upgradeSpy = jest.spyOn(spectator.component.bulkUpgrade, 'emit');
+
+    await menu.open();
+    await menu.clickItem({ text: 'Upgrade All Selected' });
+
+    expect(upgradeSpy).toHaveBeenCalled();
+  });
+
+  it('emits bulkDelete after actions', async () => {
+    const deleteSpy = jest.spyOn(spectator.component.bulkDelete, 'emit');
+
+    await menu.open();
+    await menu.clickItem({ text: 'Delete All Selected' });
+
+    expect(deleteSpy).toHaveBeenCalled();
+  });
+});

src/app/pages/apps/components/installed-apps/installed-apps-list/installed-apps-list-bulk-actions/installed-apps-list-bulk-actions.component.ts

@@ -0,0 +1,59 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  output,
+} from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
+import { AppState } from 'app/enums/app-state.enum';
+import { Role } from 'app/enums/role.enum';
+import { App } from 'app/interfaces/app.interface';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+
+@UntilDestroy()
+@Component({
+  selector: 'ix-installed-apps-list-bulk-actions',
+  templateUrl: './installed-apps-list-bulk-actions.component.html',
+  styleUrls: ['./installed-apps-list-bulk-actions.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatMenuTrigger,
+    MatMenu,
+    MatMenuItem,
+    RequiresRolesDirective,
+    IxIconComponent,
+    MatButton,
+    TranslateModule,
+  ],
+})
+
+export class InstalledAppsListBulkActionsComponent {
+  readonly checkedApps = input.required<App[]>();
+  readonly bulkStart = output();
+  readonly bulkStop = output();
+  readonly bulkUpgrade = output();
+  readonly bulkDelete = output();
+
+  protected readonly requiredRoles = [Role.AppsWrite];
+
+  get isBulkStartDisabled(): boolean {
+    return this.checkedApps().every(
+      (app) => [AppState.Running, AppState.Deploying].includes(app.state),
+    );
+  }
+
+  get isBulkStopDisabled(): boolean {
+    return this.checkedApps().every(
+      (app) => [AppState.Stopped, AppState.Crashed].includes(app.state),
+    );
+  }
+
+  get isBulkUpgradeDisabled(): boolean {
+    return !this.checkedApps().some((app) => app.upgrade_available);
+  }
+}