Merge pull request ceph#65285 from rhcs-dashboard/table-actions

mgr/dashboard: add customizations to table-actions

Reviewed-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html

@@ -26,7 +26,8 @@
           <cd-table-actions [permission]="{read: true}"
                             [selection]="selection"
                             dropDownOnly="Cluster-wide configuration"
-                            btnColor="light"
+                            [dropDownOnlyOffset]="{ x: 110, y: 0 }"
+                            [dropDownOnlyBtnColor]="'tertiary'"
                             class="btn-group"
                             id="cluster-wide-actions"
                             [tableActions]="clusterWideActions">

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html

@@ -18,37 +18,25 @@
        routerLink="/services">
        Cluster->Services</a>
   </cd-alert-panel>
-  <cd-table-actions class="btn-group mb-4 me-2"
-                    [permission]="permissions.rgw"
-                    [selection]="selection"
-                    [tableActions]="multisiteReplicationActions">
-  </cd-table-actions>
-  <cd-table-actions *ngIf="showMigrateAndReplicationActions"
-                    class="btn-group mb-4 me-2 secondary"
-                    [permission]="permissions.rgw"
-                    [btnColor]="'light'"
-                    [selection]="selection"
-                    [tableActions]="migrateTableAction">
-  </cd-table-actions>
-  <cd-table-actions *ngIf="!showMigrateAndReplicationActions"
-                    class="btn-group mb-4 me-2"
-                    [permission]="permissions.rgw"
-                    [selection]="selection"
-                    [tableActions]="createTableActions"
-                    [primaryDropDown]="true">
-  </cd-table-actions>
-  <cd-table-actions class="btn-group mb-4 me-2"
-                    [permission]="permissions.rgw"
-                    [btnColor]="'light'"
-                    [selection]="selection"
-                    [tableActions]="importAction">
-  </cd-table-actions>
-  <cd-table-actions class="btn-group mb-4 me-2"
-                    [permission]="permissions.rgw"
-                    [btnColor]="'light'"
-                    [selection]="selection"
-                    [tableActions]="exportAction">
-  </cd-table-actions>
+  <div [cdsStack]="'horizontal'"
+       [gap]="4">
+    <cd-table-actions [permission]="permissions.rgw"
+                      [selection]="selection"
+                      [tableActions]="multisiteReplicationActions">
+    </cd-table-actions>
+    <cd-table-actions *ngIf="showMigrateAndReplicationActions"
+                      [permission]="permissions.rgw"
+                      [selection]="selection"
+                      [tableActions]="migrateTableAction">
+    </cd-table-actions>
+    <cd-table-actions [permission]="permissions.rgw"
+                      [selection]="selection"
+                      [tableActions]="createTableActions"
+                      dropDownOnly="Actions"
+                      [dropDownOnlyBtnColor]="'tertiary'"
+                      [dropDownOnlyOffset]="{ x: 45, y: 0 }">
+    </cd-table-actions>
+  </div>
 </div>
 <div class="card">
   <div class="card-header"

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.scss

@@ -17,3 +17,9 @@
   padding-block: 0.5rem;
   width: 100%;
 }
+
+::ng-deep cds-overflow-menu .cds--btn--icon-only {
+  position: relative;
+  top: 4px;
+  width: auto;
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts

@@ -68,8 +68,6 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit {
   selection = new CdTableSelection();
   createTableActions: CdTableAction[];
   migrateTableAction: CdTableAction[];
-  importAction: CdTableAction[];
-  exportAction: CdTableAction[];
   multisiteReplicationActions: CdTableAction[];
   loadingIndicator = true;
 
@@ -236,40 +234,31 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit {
         permission: 'create',
         icon: Icons.add,
         name: this.actionLabels.CREATE + ' Realm',
-        click: () => this.openModal('realm')
+        click: () => this.openModal('realm'),
+        visible: () => !this.showMigrateAndReplicationActions
       },
       {
         permission: 'create',
         icon: Icons.add,
         name: this.actionLabels.CREATE + ' Zone Group',
         click: () => this.openModal('zonegroup'),
-        disable: () => this.getDisable()
+        disable: () => this.getDisable(),
+        visible: () => !this.showMigrateAndReplicationActions
       },
       {
         permission: 'create',
         icon: Icons.add,
         name: this.actionLabels.CREATE + ' Zone',
-        click: () => this.openModal('zone')
-      }
-    ];
-    this.migrateTableAction = [
-      {
-        permission: 'create',
-        icon: Icons.wrench,
-        name: this.actionLabels.MIGRATE,
-        click: () => this.openMigrateModal()
-      }
-    ];
-    this.importAction = [
+        click: () => this.openModal('zone'),
+        visible: () => !this.showMigrateAndReplicationActions
+      },
       {
         permission: 'create',
         icon: Icons.download,
         name: this.actionLabels.IMPORT,
         click: () => this.openImportModal(),
         disable: () => this.getDisableImport()
-      }
-    ];
-    this.exportAction = [
+      },
       {
         permission: 'create',
         icon: Icons.upload,
@@ -278,6 +267,14 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit {
         disable: () => this.getDisableExport()
       }
     ];
+    this.migrateTableAction = [
+      {
+        permission: 'create',
+        icon: Icons.wrench,
+        name: this.actionLabels.MIGRATE,
+        click: () => this.openMigrateModal()
+      }
+    ];
     this.multisiteReplicationActions = [
       {
         permission: 'create',

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts

@@ -25,6 +25,7 @@ import CheckIcon from '@carbon/icons/es/checkmark/16';
 import CloseIcon from '@carbon/icons/es/close/16';
 import MaximizeIcon from '@carbon/icons/es/maximize/16';
 import ArrowDown from '@carbon/icons/es/caret--down/16';
+import ChevronDwon from '@carbon/icons/es/chevron--down/16';
 
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
@@ -136,7 +137,8 @@ export class DataTableModule {
       CheckIcon,
       CloseIcon,
       MaximizeIcon,
-      ArrowDown
+      ArrowDown,
+      ChevronDwon
     ]);
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html

@@ -21,8 +21,7 @@
             [cdsOverflowMenu]="overflowMenuTpl"
             data-testid="table-action-btn">
       <svg
-           [cdsIcon]="icons.downArrow"
-           [size]="icons.size16"></svg>
+           [cdsIcon]="icons.chevronDown"></svg>
     </button>
     <ng-template #overflowMenuTpl>
       <ng-container *ngFor="let action of dropDownActions">
@@ -47,15 +46,14 @@
   <button [cdsButton]="currentAction.buttonKind"
           class="caret-btn">
     <svg class="cds--btn__icon"
-         cdsIcon="caret--down"
-         size="16"></svg>
+         [cdsIcon]="icons.chevronDown"></svg>
   </button>
 </ng-template>
 
 <ng-template #dropDownOnlyTpl>
   <cds-overflow-menu [customTrigger]="customTrigger"
                      [flip]="true"
-                     [offset]="{ x: 105, y: 0 }"
+                     [offset]="dropDownOnlyOffset"
                      data-testid="table-action-btn"
                      class="d-flex justify-content-end">
     <ng-container *ngFor="let action of dropDownActions">
@@ -76,10 +74,9 @@
 </ng-template>
 
 <ng-template #customTrigger>
-  <button cdsButton="tertiary">
+  <button [cdsButton]="dropDownOnlyBtnColor">
     <span i18n>{{ dropDownOnly }}</span>
-    <svg class="cds--btn__icon"
-         cdsIcon="caret--down"
-         size="16"></svg>
+    <svg class="override-position-static cds--btn__icon"
+         [cdsIcon]="icons.chevronDown"></svg>
   </button>
 </ng-template>

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss

@@ -32,3 +32,13 @@ button.dropdown-item:hover {
   justify-content: center;
   width: 3rem;
 }
+
+// https://github.com/carbon-design-system/carbon-components-angular/blob/v5.56.2/src/dialog/overflow-menu/overflow-menu.component.ts#52
+// Its always applying .cds--btn--icon-only which is making position static and svg color fill to var(--cds-icon-primary, #f8f9fa)
+.override-position-static.cds--btn__icon {
+  position: absolute;
+}
+
+.cds--overflow-menu-options__option {
+  min-width: fit-content;
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts

@@ -20,8 +20,9 @@ export class TableActionsComponent implements OnChanges, OnInit {
   @Input()
   tableActions: CdTableAction[];
   @Input()
-  btnColor = 'accent';
-
+  dropDownOnlyBtnColor = 'primary';
+  @Input()
+  dropDownOnlyOffset = { x: 105, y: 0 };
   // Use this if you just want to display a drop down button,
   // labeled with the given text, with all actions in it.
   // This disables the main action button.

src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts

@@ -85,6 +85,7 @@ export enum Icons {
   dataTable = 'data-table',
   idea = 'idea',
   userAccessLocked = 'user--access-locked', // User access locked
+  chevronDown = 'chevron--down',
   /* Icons for special effect */
   size16 = '16',
   size20 = '20',