mount points in DS projects (opendatahub-io#3315)

frontend/src/__mocks__/mockNotebookK8sResource.ts

@@ -146,6 +146,10 @@ export const mockNotebookK8sResource = ({
                     mountPath: '/opt/app-root/src',
                     name,
                   },
+                  {
+                    mountPath: '/opt/app-root/src/root',
+                    name: 'test-storage-1',
+                  },
                   ...additionalVolumeMounts,
                 ],
                 workingDir: '/opt/app-root/src',
@@ -233,6 +237,12 @@ export const mockNotebookK8sResource = ({
                   claimName: name,
                 },
               },
+              {
+                name: 'test-storage-1',
+                persistentVolumeClaim: {
+                  claimName: 'test-storage-1',
+                },
+              },
               {
                 name: 'oauth-config',
                 secret: {

frontend/src/__tests__/cypress/cypress/pages/workbench.ts

@@ -129,8 +129,24 @@ class NotebookRow extends TableRow {
     return this;
   }
 
-  toggleExpandableContent() {
-    this.find().findByRole('button', { name: 'Details' }).click();
+  shouldHaveClusterStorageTitle() {
+    this.findExpansion()
+      .findByTestId('notebook-storage-bar-title')
+      .should('have.text', 'Cluster storage');
+    return this;
+  }
+
+  shouldHaveMountPath(name: string) {
+    this.findExpansion().findByTestId('storage-mount-path').contains(name);
+    return this;
+  }
+
+  findExpansionButton() {
+    return this.find().findByTestId('notebook-table-expand-cell');
+  }
+
+  findExpansion() {
+    return this.find().siblings();
   }
 
   findAddStorageButton() {

frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts

@@ -17,7 +17,6 @@ import {
   editSpawnerPage,
   notFoundSpawnerPage,
   notebookConfirmModal,
-  storageModal,
   workbenchPage,
 } from '~/__tests__/cypress/cypress/pages/workbench';
 import { verifyRelativeURL } from '~/__tests__/cypress/cypress/utils/url';
@@ -165,7 +164,10 @@ const initIntercepts = ({
     ),
   );
   cy.interceptK8sList(SecretModel, mockK8sResourceList([mockSecretK8sResource({})]));
-  cy.interceptK8sList(PVCModel, mockK8sResourceList([mockPVCK8sResource({})]));
+  cy.interceptK8sList(
+    PVCModel,
+    mockK8sResourceList([mockPVCK8sResource({ name: 'test-storage-1' })]),
+  );
 
   cy.interceptK8s('POST', ConfigMapModel, mockConfigMap({})).as('createConfigMap');
 
@@ -327,7 +329,7 @@ describe('Workbench page', () => {
           template: {
             spec: {
               volumes: [
-                { name: 'test-storage', persistentVolumeClaim: { claimName: 'test-storage' } },
+                { name: 'test-storage-1', persistentVolumeClaim: { claimName: 'test-storage-1' } },
               ],
             },
           },
@@ -454,13 +456,6 @@ describe('Workbench page', () => {
     workbenchPage.findNotebookTableHeaderButton('Status').should(be.sortAscending);
     workbenchPage.findNotebookTableHeaderButton('Status').click();
     workbenchPage.findNotebookTableHeaderButton('Status').should(be.sortDescending);
-
-    //expandable table
-    notebookRow.toggleExpandableContent();
-    notebookRow.findAddStorageButton().click();
-    storageModal.selectExistingPersistentStorage('Test Storage');
-    storageModal.findMountField().fill('data');
-    storageModal.findSubmitButton().click();
   });
 
   it('Validate the notebook status when workbench is stopped and starting', () => {
@@ -650,6 +645,16 @@ describe('Workbench page', () => {
     verifyRelativeURL('/projects/test-project?section=overview');
   });
 
+  it('Expanded workbench table row', () => {
+    initIntercepts({});
+    workbenchPage.visit('test-project');
+    const notebookRow = workbenchPage.getNotebookRow('Test Notebook');
+    notebookRow.findExpansionButton().click();
+    notebookRow.findExpansion().should('be.visible');
+    notebookRow.shouldHaveClusterStorageTitle();
+    notebookRow.shouldHaveMountPath('/opt/app-root/src/root');
+  });
+
   it('Delete Workbench', () => {
     initIntercepts({});
     workbenchPage.visit('test-project');

frontend/src/api/k8s/__tests__/notebooks.spec.ts

@@ -780,14 +780,26 @@ describe('removeNotebookPVC', () => {
           path: '/spec/template/spec/volumes',
           value: [
             { name: notebookName, persistentVolumeClaim: { claimName: notebookName } },
+            {
+              name: 'test-storage-1',
+              persistentVolumeClaim: {
+                claimName: 'test-storage-1',
+              },
+            },
             { name: 'oauth-config', secret: { secretName: 'workbench-oauth-config' } },
             { name: 'tls-certificates', secret: { secretName: 'workbench-tls' } },
           ],
         },
         {
           op: 'replace',
           path: '/spec/template/spec/containers/0/volumeMounts',
-          value: [{ mountPath: '/opt/app-root/src', name: notebookName }],
+          value: [
+            { mountPath: '/opt/app-root/src', name: notebookName },
+            {
+              mountPath: '/opt/app-root/src/root',
+              name: 'test-storage-1',
+            },
+          ],
         },
       ],
       queryOptions: { name: notebookName, ns: namespace, queryParams: {} },
@@ -853,14 +865,26 @@ describe('removeNotebookPVC', () => {
           path: '/spec/template/spec/volumes',
           value: [
             { name: notebookName, persistentVolumeClaim: { claimName: notebookName } },
+            {
+              name: 'test-storage-1',
+              persistentVolumeClaim: {
+                claimName: 'test-storage-1',
+              },
+            },
             { name: 'oauth-config', secret: { secretName: 'workbench-oauth-config' } },
             { name: 'tls-certificates', secret: { secretName: 'workbench-tls' } },
           ],
         },
         {
           op: 'replace',
           path: '/spec/template/spec/containers/0/volumeMounts',
-          value: [{ mountPath: '/opt/app-root/src', name: notebookName }],
+          value: [
+            { mountPath: '/opt/app-root/src', name: notebookName },
+            {
+              mountPath: '/opt/app-root/src/root',
+              name: 'test-storage-1',
+            },
+          ],
         },
       ],
       queryOptions: { name: notebookName, ns: namespace, queryParams: {} },

frontend/src/components/InlineTruncatedClipboardCopy.tsx

@@ -4,17 +4,18 @@ import * as React from 'react';
 type Props = {
   textToCopy: string;
   testId?: string;
+  maxWidth?: number;
 };
 
 /** Hopefully PF will add some flexibility with ClipboardCopy
  *  in the future and this will not be necessary
  * https://github.com/patternfly/patternfly-react/issues/10890
  **/
 
-const InlineTruncatedClipboardCopy: React.FC<Props> = ({ textToCopy, testId }) => (
+const InlineTruncatedClipboardCopy: React.FC<Props> = ({ textToCopy, testId, maxWidth }) => (
   <ClipboardCopy
     variant="inline-compact"
-    style={{ display: 'inline-flex' }}
+    style={{ display: 'inline-flex', maxWidth }}
     hoverTip="Copy"
     clickTip="Copied"
     onCopy={() => {

frontend/src/concepts/design/HeaderIcon.tsx

@@ -10,6 +10,7 @@ import {
 interface HeaderIconProps {
   size?: number;
   padding?: number;
+  display?: string;
   image?: string;
   type: ProjectObjectType;
   sectionType?: SectionType;
@@ -18,13 +19,14 @@ interface HeaderIconProps {
 const HeaderIcon: React.FC<HeaderIconProps> = ({
   size = 40,
   padding = 2,
+  display = 'inline-block',
   image,
   type,
   sectionType,
 }) => (
   <div
     style={{
-      display: 'inline-block',
+      display,
       width: size,
       height: size,
       padding,

frontend/src/pages/projects/notebook/utils.ts

@@ -42,7 +42,7 @@ export const getNotebookPVCMountPathMap = (
           return innerAcc;
         }
 
-        return { ...innerAcc, [claimName]: relativeMountPath(volumeMount.mountPath) };
+        return { ...innerAcc, [claimName]: volumeMount.mountPath || '/ ' };
       }, {}),
     }),
     {},