Merge pull request ceph#62543 from rhcs-dashboard/smb-carbonize-tabs

mgr/dashboard: carbonize smb tabs

Reviewed-by: Nizamudeen A <[email protected]>

Author: Pegonzal

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

@@ -1,5 +1,7 @@
 <ng-container *ngIf="smbClusters$ | async as smbClusters">
   <cd-table
+    headerTitle="Clusters"
+    headerDescription="Logical management units that may map to one or more managed Samba service"
     [data]="smbClusters"
     columnMode="flex"
     [columns]="columns"

src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.html

@@ -1,15 +1,5 @@
 <ng-container *ngIf="selection">
-  <cds-tabs
-    type="contained"
-    followFocus="true"
-    isNavigation="true"
-    cacheActive="true">
-  <cds-tab
-    heading="Shares"
-    i18n-heading>
-    <cd-smb-share-list
-      [clusterId]="selection.cluster_id"
-    ></cd-smb-share-list>
-  </cds-tab>
-  </cds-tabs>
+  <cd-smb-share-list
+    [clusterId]="selection.cluster_id"
+  ></cd-smb-share-list>
 </ng-container>

src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.spec.ts

@@ -1,8 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SmbClusterTabsComponent } from './smb-cluster-tabs.component';
-import { CLUSTER_RESOURCE, SMBCluster } from '../smb.model';
-import { By } from '@angular/platform-browser';
 
 describe('SmbClusterTabsComponent', () => {
   let component: SmbClusterTabsComponent;
@@ -21,29 +19,4 @@ describe('SmbClusterTabsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should not render anything if selection is falsy', () => {
-    component.selection = null;
-    fixture.detectChanges();
-
-    const tabsElement = fixture.debugElement.query(By.css('cds-tabs'));
-    expect(tabsElement).toBeNull();
-  });
-
-  const selectedSmbCluster = (clusterId: string) => {
-    const smbCluster: SMBCluster = {
-      resource_type: CLUSTER_RESOURCE,
-      cluster_id: clusterId,
-      auth_mode: 'user'
-    };
-    return smbCluster;
-  };
-
-  it('should render cds-tabs if selection is truthy', () => {
-    component.selection = selectedSmbCluster('fooBar');
-    fixture.detectChanges();
-
-    const tabsElement = fixture.debugElement.query(By.css('cds-tabs'));
-    expect(tabsElement).toBeTruthy();
-  });
 });

src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.html

@@ -1,4 +1,6 @@
 <cd-table
+  headerTitle="Active directory access resources"
+  headerDescription="Logical management units for authorization on active directory (AD) servers"
   [data]="joinAuth$ | async"
   columnMode="flex"
   [columns]="columns"

src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-list/smb-share-list.component.html

@@ -1,5 +1,7 @@
 <ng-container *ngIf="smbShares$ | async as smbShares">
   <cd-table
+    headerTitle="Shares"
+    headerDescription="Logical unit hosted by the cluster that maps to the given CephFS volume and path"
     [data]="smbShares"
     columnMode="flex"
     [columns]="columns"

src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.html

@@ -1,33 +1,3 @@
-<legend
-  *ngIf="selectedTab == Tabs.clusters"
-  i18n
->
-  Clusters
-  <cd-help-text>
-    Logical management units that may map to one or more managed Samba service
-  </cd-help-text>
-</legend>
-
-<legend
-  *ngIf="selectedTab == Tabs.joinAuths"
-  i18n
->
-  Active directory access resources
-  <cd-help-text>
-    Logical management units for authorization on active directory (AD) servers
-  </cd-help-text>
-</legend>
-
-<legend
-  *ngIf="selectedTab == Tabs.usersgroups"
-  i18n
->
-  Standalone access resources
-  <cd-help-text>
-    Logical management units for authorization on Standalone servers
-  </cd-help-text>
-</legend>
-
 <cds-tabs
   type="contained"
   followFocus="true"

src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component.html

@@ -1,5 +1,7 @@
 <ng-container *ngIf="usersGroups$ | async as usersGroups">
   <cd-table
+    headerTitle="Standalone access resoruces"
+    headerDescription="Logical management units for authorization on Standalone servers"
     [data]="usersGroups"
     columnMode="flex"
     [columns]="columns"

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

@@ -1,6 +1,17 @@
 <cds-table-container [cdsLayer]="layer"
                      [cdsTheme]="theme"
                      class="content-theme">
+  <cds-table-header *ngIf="headerTitle">
+    <h4 cdsTableHeaderTitle
+        i18n>
+      {{headerTitle}}
+    </h4>
+    <p cdsTableHeaderDescription
+       i18n
+       *ngIf="headerDescription">
+      {{headerDescription}}
+    </p>
+  </cds-table-header>
   <cds-table-toolbar #toolbar
                      *ngIf="toolHeader"
                      (cancel)="onBatchActionsCancel()"

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

@@ -89,6 +89,10 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
   @ContentChild(TableDetailDirective) rowDetail!: TableDetailDirective;
   @ContentChild(TableActionsComponent) tableActions!: TableActionsComponent;
 
+  @Input()
+  headerTitle: string;
+  @Input()
+  headerDescription: string;
   // This is the array with the items to be shown.
   @Input()
   data: any[];

src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss

@@ -157,6 +157,7 @@ Tooltip
 .cds--tooltip-content {
   background-color: theme.$layer-02;
 }
+
 /******************************************
 Carbon Popover
 ******************************************/
@@ -165,3 +166,10 @@ Carbon Popover
   max-height: layout.$spacing-13;
   overflow: auto;
 }
+
+/******************************************
+Tabs
+******************************************/
+.cds--tab-content {
+  background: var(--cds-layer-01);
+}