From 06b161d0d47066dfddf4889e9eb08c84b4b50790 Mon Sep 17 00:00:00 2001
From: Pedro Gonzalez Gomez <pegonzal@redhat.com>
Date: Thu, 27 Mar 2025 11:46:04 +0100
Subject: [PATCH] mgr/dashboard: carbonize smb tabs

also removes share tab as was the only one in favour of title and description

Fixes: https://tracker.ceph.com/issues/70695
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
---
 .../smb-cluster-list.component.html           |  2 ++
 .../smb-cluster-tabs.component.html           | 16 ++--------
 .../smb-cluster-tabs.component.spec.ts        | 27 -----------------
 .../smb-join-auth-list.component.html         |  2 ++
 .../smb-share-list.component.html             |  2 ++
 .../ceph/smb/smb-tabs/smb-tabs.component.html | 30 -------------------
 .../smb-usersgroups-list.component.html       |  2 ++
 .../datatable/table/table.component.html      | 11 +++++++
 .../shared/datatable/table/table.component.ts |  4 +++
 .../frontend/src/styles/_carbon-defaults.scss |  8 +++++
 10 files changed, 34 insertions(+), 70 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-list/smb-cluster-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-list/smb-cluster-list.component.html
index 269152a257ee6..3417d30adb62b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-list/smb-cluster-list.component.html
+++ b/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"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.html
index b729c89a84705..e57a5b92eeabf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.html
+++ b/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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.spec.ts
index c9c8bb9c52423..0f1dc6cc8529d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-tabs/smb-cluster-tabs.component.spec.ts
+++ b/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();
-  });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.html
index 56ee93b88da74..3f3da5e1e09ee 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.html
+++ b/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"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-list/smb-share-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-list/smb-share-list.component.html
index cc41f447ead59..0363545f22913 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-list/smb-share-list.component.html
+++ b/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"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.html
index bce02b277d0b0..03f2fbce5f806 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.html
+++ b/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"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component.html
index b0119dbe4392a..9d5ab9d98fe6d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component.html
+++ b/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"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 27750814d96fe..971bd96a4abff 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/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()"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 6ca4378b126c3..787d041733124 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/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[];
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
index 1282af5daa0ef..61ad991178a7a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
+++ b/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);
+}
-- 
2.39.5