Display the storage class metadata name in the end user UI (#3473)

opendatahub-io · Nov 15, 2024 · 13449c5 · 13449c5
1 parent 142e63f
commit 13449c5
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts b/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts
@@ -36,6 +36,18 @@ class ClusterStorageRow extends TableRow {
     this.find().siblings().find('[data-label=Size]').contains(name).should('exist');
     return this;
   }
+
+  showStorageClassDetails() {
+    return this.findStorageClassColumn().findByTestId('resource-name-icon-button').click();
+  }
+
+  findStorageClassResourceNameText() {
+    return cy.findByTestId('resource-name-text');
+  }
+
+  findStorageClassResourceKindText() {
+    return cy.findByTestId('resource-kind-text');
+  }
 }
 
 class ClusterStorageModal extends Modal {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts
@@ -110,6 +110,11 @@ describe('ClusterStorage', () => {
       clusterStorage.visit('test-project');
       const clusterStorageRow = clusterStorage.getClusterStorageRow('Test Storage');
       clusterStorageRow.findStorageClassColumn().should('exist');
+      clusterStorageRow.showStorageClassDetails();
+      clusterStorageRow
+        .findStorageClassResourceNameText()
+        .should('have.text', 'openshift-default-sc');
+      clusterStorageRow.findStorageClassResourceKindText().should('have.text', 'StorageClass');
     });
 
     it('Check whether the Storage class is deprecated', () => {

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx
@@ -15,7 +15,6 @@ import {
   Text,
   TextVariants,
   Tooltip,
-  Truncate,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon, HddIcon } from '@patternfly/react-icons';
 import { PersistentVolumeClaimKind } from '~/k8sTypes';
@@ -108,13 +107,14 @@ const StorageTableRow: React.FC<StorageTableRowProps> = ({
               alignItems={{ default: 'alignItemsCenter' }}
             >
               <FlexItem>
-                <Truncate
-                  content={
+                <TableRowTitleDescription
+                  title={
                     storageClassConfig?.displayName ??
                     obj.storageClass?.metadata.name ??
                     obj.pvc.spec.storageClassName ??
                     ''
                   }
+                  resource={obj.storageClass}
                 />
               </FlexItem>
               {storageClassesLoaded && (

diff --git a/frontend/src/pages/projects/screens/spawner/storage/StorageClassSelect.tsx b/frontend/src/pages/projects/screens/spawner/storage/StorageClassSelect.tsx
@@ -62,7 +62,13 @@ const StorageClassSelect: React.FC<StorageClassSelectProps> = ({
     return {
       key: sc.metadata.name,
       label: config?.displayName || sc.metadata.name,
-      description: config?.description,
+      description: (
+        <>
+          Resource name: {sc.metadata.name}
+          <br />
+          {config?.description && `Description: ${config.description}`}
+        </>
+      ),
       isDisabled: !config?.isEnabled,
       dropdownLabel: (
         <Split>
@@ -96,6 +102,7 @@ const StorageClassSelect: React.FC<StorageClassSelectProps> = ({
         isDisabled={disableStorageClassSelect || !storageClassesLoaded}
         placeholder="Select storage class"
         popperProps={{ appendTo: menuAppendTo }}
+        previewDescription={false}
       />
       <FormHelperText>
         {selectedStorageClassConfig && !selectedStorageClassConfig.isEnabled ? (