chore(frontend): improve customer features column

Signed-off-by: Jakob Steiner <jakob.steiner@glasskube.eu>

Author: kosmoz

frontend/ui/src/app/components/customer-organizations/customer-organizations.component.html

@@ -55,7 +55,7 @@
             </tr>
           </thead>
           <tbody>
-            @for (customer of customerOrganizations(); track customer.id) {
+            @for (customer of customerOrganizations(); track customer.id; let i = $index) {
               <tr class="border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                 <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   <app-uuid [uuid]="customer.id" />
@@ -87,34 +87,52 @@
                   {{ customer.createdAt | date: 'short' }}
                 </td>
                 <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                  <div class="flex flex-wrap gap-1 items-center">
-                    @for (feature of customer.features; track feature) {
-                      <span
-                        class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-md dark:bg-gray-700 dark:text-blue-400 border border-blue-400 flex items-center gap-1">
-                        {{ getFeatureLabel(feature) }}
-                        @if (auth.hasAnyRole('read_write', 'admin')) {
-                          <button
-                            type="button"
-                            [attr.aria-label]="'Remove ' + getFeatureLabel(feature) + ' feature'"
-                            title="Disable feature"
-                            (click)="removeFeature(customer, feature)"
-                            class="-mr-1 text-red-400 hover:text-red-600 transition-colors">
-                            <fa-icon [icon]="faXmark"></fa-icon>
-                          </button>
+                  <button
+                    class="flex gap-1 py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+                    type="button"
+                    cdkOverlayOrigin
+                    #dropdownTriggerButton
+                    #dropdownTrigger="cdkOverlayOrigin"
+                    (click)="showCustomerFeaturesDropdown(customer, dropdownTriggerButton, i)">
+                    <span class="flex-grow"> {{ customer.features.length }} features enabled </span>
+                    <fa-icon
+                      class="transition duration-150 ease-in-out"
+                      [class.rotate-x-180]="openCustomerFeaturesDropdownId() === customer.id"
+                      [icon]="faChevronDown" />
+                  </button>
+
+                  <ng-template
+                    cdkConnectedOverlay
+                    [cdkConnectedOverlayHasBackdrop]="true"
+                    (backdropClick)="hideCustomerFeaturesDropdown()"
+                    [cdkConnectedOverlayBackdropClass]="'transparent'"
+                    [cdkConnectedOverlayOrigin]="dropdownTrigger"
+                    [cdkConnectedOverlayMinWidth]="dropdownWidth + 'px'"
+                    [cdkConnectedOverlayOpen]="openCustomerFeaturesDropdownId() === customer.id">
+                    <div
+                      animate.enter="animate-flip-in-top"
+                      animate.leave="animate-flip-out-top"
+                      style="transform-origin: top center"
+                      class="w-full text-base list-none bg-white divide-y divide-gray-100 rounded-sm shadow-sm dark:bg-gray-700 dark:divide-gray-600">
+                      <ul
+                        class="w-full text-sm font-medium text-gray-900 bg-white border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+                        @for (f of allCustomerFeatures; track f) {
+                          <li class="w-full border-t border-gray-200 dark:border-gray-600">
+                            <label class="flex items-center ps-3" [class.ms-4]="isFeatureIndent(f)">
+                              <input
+                                type="checkbox"
+                                [checked]="openCustomerFeaturesDropdownCustomer()?.features?.includes(f)"
+                                (change)="toggleFeature(customer, f)"
+                                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-xs focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" />
+                              <span class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                                {{ getFeatureLabel(f) }}
+                              </span>
+                            </label>
+                          </li>
                         }
-                      </span>
-                    }
-                    @if (auth.hasAnyRole('read_write', 'admin') && !hasAllFeatures(customer)) {
-                      <button
-                        type="button"
-                        aria-label="Restore all features"
-                        title="Restore all features"
-                        (click)="restoreAllFeatures(customer)"
-                        class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
-                        <fa-icon [icon]="faRotate" size="sm"></fa-icon>
-                      </button>
-                    }
-                  </div>
+                      </ul>
+                    </div>
+                  </ng-template>
                 </td>
                 <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white text-end">
                   {{ customer.userCount | number }}
@@ -164,7 +182,8 @@
 
 <ng-template #createCustomerDialog>
   <div
-    @modalFlyInOut
+    animate.enter="modal-fly-in"
+    animate.leave="modal-fly-out"
     style="transform-origin: top center"
     class="p-4 w-full mt-12 max-h-full bg-white rounded-lg shadow-sm dark:bg-gray-900">
     <!-- Modal header -->

frontend/ui/src/app/components/customer-organizations/customer-organizations.component.ts

@@ -1,12 +1,14 @@
+import {OverlayModule} from '@angular/cdk/overlay';
 import {AsyncPipe, DatePipe, DecimalPipe} from '@angular/common';
-import {Component, computed, inject, TemplateRef, viewChild} from '@angular/core';
+import {Component, computed, inject, signal, TemplateRef, viewChild} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {FormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 import {CustomerOrganization, CustomerOrganizationFeature, CustomerOrganizationWithUsage} from '@distr-sh/distr-sdk';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {
   faBuildingUser,
+  faChevronDown,
   faCircleExclamation,
   faEdit,
   faMagnifyingGlass,
@@ -18,7 +20,6 @@ import {
 import {combineLatest, filter, firstValueFrom, map, startWith, Subject, switchMap} from 'rxjs';
 import {getFormDisplayedError} from '../../../util/errors';
 import {SecureImagePipe} from '../../../util/secureImage';
-import {modalFlyInOut} from '../../animations/modal';
 import {RequireVendorDirective} from '../../directives/required-role.directive';
 import {ArtifactLicensesService} from '../../services/artifact-licenses.service';
 import {AuthService} from '../../services/auth.service';
@@ -32,8 +33,6 @@ import {ToastService} from '../../services/toast.service';
 import {QuotaLimitComponent} from '../quota-limit.component';
 import {UuidComponent} from '../uuid';
 
-export const ALL_CUSTOMER_FEATURES: CustomerOrganizationFeature[] = ['deployment_targets', 'artifacts', 'alerts'];
-
 @Component({
   templateUrl: './customer-organizations.component.html',
   imports: [
@@ -47,8 +46,8 @@ export const ALL_CUSTOMER_FEATURES: CustomerOrganizationFeature[] = ['deployment
     RouterLink,
     RequireVendorDirective,
     QuotaLimitComponent,
+    OverlayModule,
   ],
-  animations: [modalFlyInOut],
 })
 export class CustomerOrganizationsComponent {
   protected readonly faMagnifyingGlass = faMagnifyingGlass;
@@ -59,6 +58,7 @@ export class CustomerOrganizationsComponent {
   protected readonly faCircleExclamation = faCircleExclamation;
   protected readonly faEdit = faEdit;
   protected readonly faRotate = faRotate;
+  protected readonly faChevronDown = faChevronDown;
 
   private readonly customerOrganizationsService = inject(CustomerOrganizationsService);
   private readonly toast = inject(ToastService);
@@ -106,6 +106,21 @@ export class CustomerOrganizationsComponent {
   });
   protected createFormLoading = false;
 
+  protected readonly allCustomerFeatures: readonly CustomerOrganizationFeature[] = [
+    'deployment_targets',
+    'alerts',
+    'artifacts',
+  ];
+
+  protected readonly openCustomerFeaturesDropdownId = signal<string | void>(undefined);
+  protected readonly openCustomerFeaturesDropdownCustomer = computed(() => {
+    const id = this.openCustomerFeaturesDropdownId();
+    const c = id ? this.customerOrganizations()?.find((it) => it.id === id) : undefined;
+    console.log(c);
+    return c;
+  });
+  protected dropdownWidth = 0;
+
   protected showCreateDialog() {
     this.closeCreateDialog();
     this.modalRef = this.overlay.showModal(this.createCustomerDialog());
@@ -226,7 +241,7 @@ export class CustomerOrganizationsComponent {
         this.customerOrganizationsService.updateCustomerOrganization(customer.id, {
           name: customer.name,
           imageId: customer.imageId,
-          features: ALL_CUSTOMER_FEATURES,
+          features: [...this.allCustomerFeatures],
         })
       );
       this.toast.success('All features restored successfully');
@@ -240,7 +255,7 @@ export class CustomerOrganizationsComponent {
   }
 
   protected hasAllFeatures(customer: CustomerOrganization): boolean {
-    return customer.features.length === ALL_CUSTOMER_FEATURES.length;
+    return customer.features.length === this.allCustomerFeatures.length;
   }
 
   protected getFeatureLabel(feature: CustomerOrganizationFeature): string {
@@ -255,4 +270,48 @@ export class CustomerOrganizationsComponent {
         return feature;
     }
   }
+
+  protected isFeatureIndent(feature: CustomerOrganizationFeature): boolean {
+    return feature === 'alerts';
+  }
+
+  protected async toggleFeature(customer: CustomerOrganization, feature: CustomerOrganizationFeature) {
+    const featureSet = new Set(customer.features);
+    if (featureSet.has(feature)) {
+      featureSet.delete(feature);
+      if (feature === 'deployment_targets') {
+        featureSet.delete('alerts');
+      }
+    } else {
+      featureSet.add(feature);
+      if (feature === 'alerts') {
+        featureSet.add('deployment_targets');
+      }
+    }
+
+    try {
+      await firstValueFrom(
+        this.customerOrganizationsService.updateCustomerOrganization(customer.id, {
+          ...customer,
+          features: Array.from(featureSet),
+        })
+      );
+      this.toast.success('Customer features updated');
+      this.refresh$.next();
+    } catch (e) {
+      const msg = getFormDisplayedError(e);
+      if (msg) {
+        this.toast.error(msg);
+      }
+    }
+  }
+
+  protected showCustomerFeaturesDropdown(customer: CustomerOrganization, btn: HTMLButtonElement, i: number) {
+    this.dropdownWidth = btn.getBoundingClientRect().width;
+    this.openCustomerFeaturesDropdownId.set(customer.id);
+  }
+
+  protected hideCustomerFeaturesDropdown(): void {
+    this.openCustomerFeaturesDropdownId.set(undefined);
+  }
 }

frontend/ui/src/styles/animations.scss

@@ -22,9 +22,22 @@
   }
 }
 
+@keyframes flip-top {
+  from {
+    transform: rotateX(-90deg);
+  }
+
+  to {
+    transform: rotateX(0);
+  }
+}
+
 @theme {
   --animate-fly-in-right: fly-in-right 150ms ease-out;
   --animate-fly-out-right: fly-in-right 150ms ease-in reverse;
+
+  --animate-flip-in-top: flip-top 100ms ease-out;
+  --animate-flip-out-top: flip-top 100ms ease-in reverse;
 }
 
 .modal-fly-in {