chore(frontend): improve customer features column (#1866)

kosmoz · web-flow · commit b36a11dd62c8 · 2026-02-19T14:16:45.000+01:00
Signed-off-by: Jakob Steiner &lt;jakob.steiner@glasskube.eu&gt;
diff --git a/frontend/ui/src/app/artifacts/artifact-licenses/edit-artifact-license.component.html b/frontend/ui/src/app/artifacts/artifact-licenses/edit-artifact-license.component.html
@@ -68,7 +68,10 @@
                         : getSelectedItemsCount(artifactCtrl) + ' tags selected'
                     }}
                   </span>
-                  <fa-icon [icon]="faChevronDown"></fa-icon>
+                  <fa-icon
+                    class="transition duration-150 ease-in-out"
+                    [class.rotate-x-180]="openedArtifactIdx() === i"
+                    [icon]="faChevronDown" />
                 </button>
 
                 <ng-template
diff --git a/frontend/ui/src/app/components/customer-organizations/customer-organizations.component.html b/frontend/ui/src/app/components/customer-organizations/customer-organizations.component.html
@@ -83,34 +83,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 items-center py-2 px-3 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)">
+                    <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 }}
@@ -160,7 +178,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 -->
diff --git a/frontend/ui/src/app/components/customer-organizations/customer-organizations.component.ts b/frontend/ui/src/app/components/customer-organizations/customer-organizations.component.ts
@@ -1,24 +1,24 @@
+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,
   faPlus,
-  faRotate,
   faTrash,
   faXmark,
 } from '@fortawesome/free-solid-svg-icons';
 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';
@@ -31,8 +31,6 @@ import {DialogRef, OverlayService} from '../../services/overlay.service';
 import {ToastService} from '../../services/toast.service';
 import {QuotaLimitComponent} from '../quota-limit.component';
 
-export const ALL_CUSTOMER_FEATURES: CustomerOrganizationFeature[] = ['deployment_targets', 'artifacts', 'alerts'];
-
 @Component({
   templateUrl: './customer-organizations.component.html',
   imports: [
@@ -45,8 +43,8 @@ export const ALL_CUSTOMER_FEATURES: CustomerOrganizationFeature[] = ['deployment
     RouterLink,
     RequireVendorDirective,
     QuotaLimitComponent,
+    OverlayModule,
   ],
-  animations: [modalFlyInOut],
 })
 export class CustomerOrganizationsComponent {
   protected readonly faMagnifyingGlass = faMagnifyingGlass;
@@ -56,7 +54,7 @@ export class CustomerOrganizationsComponent {
   protected readonly faXmark = faXmark;
   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);
@@ -104,6 +102,19 @@ 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();
+    return id ? this.customerOrganizations()?.find((it) => it.id === id) : undefined;
+  });
+  protected dropdownWidth = 0;
+
   protected showCreateDialog() {
     this.closeCreateDialog();
     this.modalRef = this.overlay.showModal(this.createCustomerDialog());
@@ -198,36 +209,45 @@ export class CustomerOrganizationsComponent {
       });
   }
 
-  protected async removeFeature(customer: CustomerOrganization, feature: CustomerOrganizationFeature): Promise<void> {
-    const updatedFeatures = customer.features.filter((f) => f !== feature);
-    try {
-      await firstValueFrom(
-        this.customerOrganizationsService.updateCustomerOrganization(customer.id, {
-          name: customer.name,
-          imageId: customer.imageId,
-          features: updatedFeatures,
-        })
-      );
-      this.toast.success(`Feature "${this.getFeatureLabel(feature)}" removed successfully`);
-      this.refresh$.next();
-    } catch (e) {
-      const msg = getFormDisplayedError(e);
-      if (msg) {
-        this.toast.error(msg);
-      }
+  protected getFeatureLabel(feature: CustomerOrganizationFeature): string {
+    switch (feature) {
+      case 'deployment_targets':
+        return 'Deployments';
+      case 'artifacts':
+        return 'Artifacts';
+      case 'alerts':
+        return 'Alerts';
+      default:
+        return feature;
     }
   }
 
-  protected async restoreAllFeatures(customer: CustomerOrganization): Promise<void> {
+  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, {
-          name: customer.name,
-          imageId: customer.imageId,
-          features: ALL_CUSTOMER_FEATURES,
+          ...customer,
+          features: Array.from(featureSet),
         })
       );
-      this.toast.success('All features restored successfully');
+      this.toast.success('Customer features updated');
       this.refresh$.next();
     } catch (e) {
       const msg = getFormDisplayedError(e);
@@ -237,20 +257,12 @@ export class CustomerOrganizationsComponent {
     }
   }
 
-  protected hasAllFeatures(customer: CustomerOrganization): boolean {
-    return customer.features.length === ALL_CUSTOMER_FEATURES.length;
+  protected showCustomerFeaturesDropdown(customer: CustomerOrganization, btn: HTMLButtonElement) {
+    this.dropdownWidth = btn.getBoundingClientRect().width;
+    this.openCustomerFeaturesDropdownId.set(customer.id);
   }
 
-  protected getFeatureLabel(feature: CustomerOrganizationFeature): string {
-    switch (feature) {
-      case 'deployment_targets':
-        return 'Deployments';
-      case 'artifacts':
-        return 'Artifacts';
-      case 'alerts':
-        return 'Alerts';
-      default:
-        return feature;
-    }
+  protected hideCustomerFeaturesDropdown(): void {
+    this.openCustomerFeaturesDropdownId.set(undefined);
   }
 }
diff --git a/frontend/ui/src/app/components/nav-bar/nav-bar.component.html b/frontend/ui/src/app/components/nav-bar/nav-bar.component.html
@@ -77,8 +77,9 @@ <h1 class="font-display self-center text-xl font-semibold sm:text-2xl whitespace
                     }
                   </span>
                   <fa-icon
-                    class="ml-2 text-gray-900 dark:text-gray-300"
-                    [icon]="organizationsOpened ? faChevronUp : faChevronDown"></fa-icon>
+                    class="ml-2 text-gray-900 dark:text-gray-300 transition duration-150 ease-in-out"
+                    [class.rotate-x-180]="organizationsOpened"
+                    [icon]="faChevronDown" />
                 </button>
               </div>
               <ng-template
diff --git a/frontend/ui/src/app/components/side-bar/side-bar.component.html b/frontend/ui/src/app/components/side-bar/side-bar.component.html
@@ -54,8 +54,8 @@
             <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">Agents</span>
             <fa-icon
               [icon]="faChevronDown"
-              [class.rotate-180]="agentsSubMenuOpen()"
-              class="transition duration-150"></fa-icon>
+              [class.rotate-x-180]="agentsSubMenuOpen()"
+              class="transition duration-150 ease-in-out"></fa-icon>
           </button>
           @if (agentsSubMenuOpen()) {
             <ul class="space-y-1">
@@ -106,8 +106,8 @@
             <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">Registry</span>
             <fa-icon
               [icon]="faChevronDown"
-              [class.rotate-180]="registrySubMenuOpen()"
-              class="transition duration-150"></fa-icon>
+              [class.rotate-x-180]="registrySubMenuOpen()"
+              class="transition duration-150 ease-in-out"></fa-icon>
           </button>
           @if (registrySubMenuOpen()) {
             <ul class="space-y-1">
@@ -146,8 +146,8 @@
               <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">Licenses</span>
               <fa-icon
                 [icon]="faChevronDown"
-                [class.rotate-180]="licenseSubMenuOpen()"
-                class="transition duration-150"></fa-icon>
+                [class.rotate-x-180]="licenseSubMenuOpen()"
+                class="transition duration-150 ease-in-out"></fa-icon>
             </button>
             @if (licenseSubMenuOpen()) {
               <ul class="space-y-1">
diff --git a/frontend/ui/src/app/licenses/edit-license.component.html b/frontend/ui/src/app/licenses/edit-license.component.html
@@ -59,7 +59,10 @@
                 : subjectItemsSelected + ' versions selected'
             }}
           </span>
-          <fa-icon [icon]="faChevronDown"></fa-icon>
+          <fa-icon
+            class="transition duration-150 ease-in-out"
+            [class.rotate-x-180]="dropdownOpen()"
+            [icon]="faChevronDown" />
         </button>
 
         <ng-template
diff --git a/frontend/ui/src/styles/animations.scss b/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 {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
