From 8e91e1db80df345ed2ab5860c8a4745a259b7e10 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Thu, 10 Oct 2024 13:53:46 -0400
Subject: [PATCH] [RHOAIENG-1101] Cannot remove additional storage from the
 workbench configuration

---
 .../screens/spawner/SpawnerFooter.tsx         |  42 ++++-
 .../projects/screens/spawner/SpawnerPage.tsx  |  68 +++++---
 .../projects/screens/spawner/spawnerUtils.ts  |  33 +---
 .../storage/ClusterStorageEditModal.tsx       |  99 ++++++++++++
 .../spawner/storage/ClusterStorageTable.tsx   | 146 ++++++++++++++++++
 .../screens/spawner/storage/StorageField.tsx  |  67 --------
 .../screens/spawner/storage/constants.ts      |  35 +++++
 .../projects/screens/spawner/storage/utils.ts |  50 ++----
 frontend/src/pages/projects/types.ts          |   2 +
 9 files changed, 385 insertions(+), 157 deletions(-)
 create mode 100644 frontend/src/pages/projects/screens/spawner/storage/ClusterStorageEditModal.tsx
 create mode 100644 frontend/src/pages/projects/screens/spawner/storage/ClusterStorageTable.tsx
 delete mode 100644 frontend/src/pages/projects/screens/spawner/storage/StorageField.tsx
 create mode 100644 frontend/src/pages/projects/screens/spawner/storage/constants.ts

diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
index 5748bd473b..f471e589c8 100644
--- a/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
+++ b/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
@@ -40,10 +40,11 @@ import {
 } from './service';
 import { checkRequiredFieldsForNotebookStart } from './spawnerUtils';
 import { getNotebookDataConnection } from './dataConnection/useNotebookDataConnection';
+import { defaultClusterStorage } from './storage/constants';
 
 type SpawnerFooterProps = {
   startNotebookData: StartNotebookData;
-  storageData: StorageData;
+  storageData: StorageData[];
   envVariables: EnvVariable[];
   dataConnection: DataConnectionData;
   canEnablePipelines: boolean;
@@ -90,6 +91,11 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
     editNotebook,
     existingDataConnections,
   );
+  const rootPathStorageData =
+    storageData.find(
+      (formData) => formData.creating.mountPath === defaultClusterStorage.mountPath,
+    ) || storageData[0];
+
   const afterStart = (name: string, type: 'created' | 'updated') => {
     const { selectedAcceleratorProfile, notebookSize, image } = startNotebookData;
     const tep: FormTrackingEventProperties = {
@@ -110,8 +116,8 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
       imageName: image.imageStream?.metadata.name,
       projectName,
       notebookName: name,
-      storageType: storageData.storageType,
-      storageDataSize: storageData.creating.size,
+      storageType: rootPathStorageData.storageType,
+      storageDataSize: rootPathStorageData.creating.size,
       dataConnectionType: dataConnection.creating?.type?.toString(),
       dataConnectionCategory: dataConnection.creating?.values?.category?.toString(),
       dataConnectionEnabled: dataConnection.enabled,
@@ -144,7 +150,7 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
     const pvcDetails = await replaceRootVolumesForNotebook(
       projectName,
       editNotebook,
-      storageData,
+      rootPathStorageData,
       dryRun,
     ).catch(handleError);
 
@@ -247,7 +253,33 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
         ? [dataConnection.existing]
         : [];
 
-    const pvcDetails = await createPvcDataForNotebook(projectName, storageData).catch(handleError);
+    const createPvcRequests = storageData.map((pvcData) =>
+      createPvcDataForNotebook(projectName, pvcData),
+    );
+
+    const pvcResponses = await Promise.all(createPvcRequests).catch(handleError);
+    const pvcDetails = pvcResponses?.reduce(
+      (acc, response) => {
+        if (response.volumes.length) {
+          acc.volumes = acc.volumes.concat(response.volumes);
+        } else {
+          acc.volumes = response.volumes;
+        }
+
+        if (response.volumeMounts.length) {
+          acc.volumeMounts = acc.volumeMounts.concat(response.volumeMounts);
+        } else {
+          acc.volumeMounts = response.volumeMounts;
+        }
+
+        return acc;
+      },
+      {
+        volumes: [],
+        volumeMounts: [],
+      },
+    );
+
     const envFrom = await createConfigMapsAndSecretsForNotebook(projectName, [
       ...envVariables,
       ...newDataConnection,
diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
index 9fc14141c0..230073423b 100644
--- a/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
+++ b/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import {
-  Alert,
   Breadcrumb,
   BreadcrumbItem,
+  Button,
+  Flex,
+  FlexItem,
   Form,
   FormSection,
   PageSection,
@@ -31,21 +33,23 @@ import K8sNameDescriptionField, {
   useK8sNameDescriptionFieldData,
 } from '~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField';
 import { LimitNameResourceType } from '~/concepts/k8s/K8sNameDescriptionField/utils';
+import { StorageData, StorageType } from '~/pages/projects/types';
 import { SpawnerPageSectionID } from './types';
 import { ScrollableSelectorID, SpawnerPageSectionTitles } from './const';
 import SpawnerFooter from './SpawnerFooter';
 import ImageSelectorField from './imageSelector/ImageSelectorField';
 import ContainerSizeSelector from './deploymentSize/ContainerSizeSelector';
-import StorageField from './storage/StorageField';
 import EnvironmentVariables from './environmentVariables/EnvironmentVariables';
-import { useStorageDataObject } from './storage/utils';
-import { getCompatibleAcceleratorIdentifiers, useMergeDefaultPVCName } from './spawnerUtils';
+import { getCompatibleAcceleratorIdentifiers, getRootVolumeName } from './spawnerUtils';
 import { useNotebookEnvVariables } from './environmentVariables/useNotebookEnvVariables';
 import DataConnectionField from './dataConnection/DataConnectionField';
 import { useNotebookDataConnection } from './dataConnection/useNotebookDataConnection';
 import { useNotebookSizeState } from './useNotebookSizeState';
 import useDefaultStorageClass from './storage/useDefaultStorageClass';
 import usePreferredStorageClass from './storage/usePreferredStorageClass';
+import { ClusterStorageTable } from './storage/ClusterStorageTable';
+import useDefaultPvcSize from './storage/useDefaultPvcSize';
+import { defaultClusterStorage } from './storage/constants';
 
 type SpawnerPageProps = {
   existingNotebook?: NotebookKind;
@@ -68,19 +72,30 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
   const [supportedAcceleratorProfiles, setSupportedAcceleratorProfiles] = React.useState<
     string[] | undefined
   >();
-  const [storageDataWithoutDefault, setStorageData] = useStorageDataObject(existingNotebook);
-
   const [defaultStorageClass] = useDefaultStorageClass();
   const preferredStorageClass = usePreferredStorageClass();
   const isStorageClassesAvailable = useIsAreaAvailable(SupportedArea.STORAGE_CLASSES).status;
   const defaultStorageClassName = isStorageClassesAvailable
     ? defaultStorageClass?.metadata.name
     : preferredStorageClass?.metadata.name;
-  const storageData = useMergeDefaultPVCName(
-    storageDataWithoutDefault,
-    k8sNameDescriptionData.data.name,
-    defaultStorageClassName,
-  );
+  const defaultNotebookSize = useDefaultPvcSize();
+  const [storageData, setStorageData] = React.useState<StorageData[]>([
+    {
+      storageType: existingNotebook ? StorageType.EXISTING_PVC : StorageType.NEW_PVC,
+      creating: {
+        nameDesc: {
+          name: k8sNameDescriptionData.data.name || defaultClusterStorage.name,
+          description: defaultClusterStorage.description,
+        },
+        size: defaultClusterStorage.size || defaultNotebookSize,
+        storageClassName: defaultStorageClassName || defaultClusterStorage.storageClassName,
+        mountPath: defaultClusterStorage.mountPath,
+      },
+      existing: {
+        storage: getRootVolumeName(existingNotebook),
+      },
+    },
+  ]);
 
   const [envVariables, setEnvVariables] = useNotebookEnvVariables(existingNotebook);
   const [dataConnectionData, setDataConnectionData] = useNotebookDataConnection(
@@ -204,19 +219,32 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
               <EnvironmentVariables envVariables={envVariables} setEnvVariables={setEnvVariables} />
             </FormSection>
             <FormSection
-              title={SpawnerPageSectionTitles[SpawnerPageSectionID.CLUSTER_STORAGE]}
+              title={
+                <Flex
+                  spaceItems={{ default: 'spaceItemsMd' }}
+                  alignItems={{ default: 'alignItemsCenter' }}
+                >
+                  <FlexItem spacer={{ default: 'spacerLg' }}>
+                    {SpawnerPageSectionTitles[SpawnerPageSectionID.CLUSTER_STORAGE]}
+                  </FlexItem>
+
+                  <Button variant="secondary" data-testid="existing-storage-button">
+                    Attach existing storage
+                  </Button>
+
+                  <Button variant="secondary" data-testid="create-storage-button">
+                    Create storage
+                  </Button>
+                </Flex>
+              }
               id={SpawnerPageSectionID.CLUSTER_STORAGE}
               aria-label={SpawnerPageSectionTitles[SpawnerPageSectionID.CLUSTER_STORAGE]}
             >
-              <Alert
-                data-testid="cluster-storage-alert"
-                component="h2"
-                variant="info"
-                isPlain
-                isInline
-                title="Cluster storage will mount to /"
+              <ClusterStorageTable
+                storageData={storageData.map((formData, index) => ({ ...formData, id: index }))}
+                setStorageData={setStorageData}
+                workbenchName={k8sNameDescriptionData.data.k8sName.value}
               />
-              <StorageField storageData={storageData} setStorageData={setStorageData} />
             </FormSection>
             <FormSection
               title={SpawnerPageSectionTitles[SpawnerPageSectionID.DATA_CONNECTIONS]}
diff --git a/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts b/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
index 7395b65562..0505212a2f 100644
--- a/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
+++ b/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import compareVersions from 'compare-versions';
 import { NotebookSize, Volume, VolumeMount } from '~/types';
 import {
@@ -30,31 +29,6 @@ import {
 import { FAILED_PHASES, PENDING_PHASES, IMAGE_ANNOTATIONS } from './const';
 
 /******************* Common utils *******************/
-export const useMergeDefaultPVCName = (
-  storageData: StorageData,
-  defaultPVCName: string,
-  defaultStorageClassName?: string,
-): StorageData => {
-  const modifiedRef = React.useRef(false);
-
-  if (modifiedRef.current || storageData.creating.nameDesc.name) {
-    modifiedRef.current = true;
-    return storageData;
-  }
-
-  return {
-    ...storageData,
-    creating: {
-      ...storageData.creating,
-      nameDesc: {
-        ...storageData.creating.nameDesc,
-        name: storageData.creating.nameDesc.name || defaultPVCName,
-      },
-      storageClassName: storageData.creating.storageClassName || defaultStorageClassName,
-    },
-  };
-};
-
 export const getVersion = (version?: string | number, prefix?: string): string => {
   if (!version) {
     return '';
@@ -395,12 +369,11 @@ export const isEnvVariableDataValid = (envVariables: EnvVariable[]): boolean =>
 
 export const checkRequiredFieldsForNotebookStart = (
   startNotebookData: StartNotebookData,
-  storageData: StorageData,
+  storageData: StorageData[],
   envVariables: EnvVariable[],
   dataConnection: DataConnectionData,
 ): boolean => {
   const { projectName, notebookData, image } = startNotebookData;
-  const { storageType, creating, existing } = storageData;
   const isNotebookDataValid = !!(
     projectName &&
     isK8sNameDescriptionDataValid(notebookData) &&
@@ -408,9 +381,7 @@ export const checkRequiredFieldsForNotebookStart = (
     image.imageVersion
   );
 
-  const newStorageFieldInvalid = storageType === StorageType.NEW_PVC && !creating.nameDesc.name;
-  const existingStorageFieldInvalid = storageType === StorageType.EXISTING_PVC && !existing.storage;
-  const isStorageDataValid = !newStorageFieldInvalid && !existingStorageFieldInvalid;
+  const isStorageDataValid = storageData.length > 0;
 
   const newDataConnectionInvalid =
     dataConnection.type === 'creating' &&
diff --git a/frontend/src/pages/projects/screens/spawner/storage/ClusterStorageEditModal.tsx b/frontend/src/pages/projects/screens/spawner/storage/ClusterStorageEditModal.tsx
new file mode 100644
index 0000000000..0158a39196
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/ClusterStorageEditModal.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+
+import { Form, FormGroup, Modal, ModalVariant, TextArea, TextInput } from '@patternfly/react-core';
+
+import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
+import PVSizeField from '~/pages/projects/components/PVSizeField';
+import { StorageData } from '~/pages/projects/types';
+import StorageClassSelect from './StorageClassSelect';
+
+interface ClusterStorageEditModalProps {
+  storageData: StorageData;
+  setStorageData: (storageData: StorageData) => void;
+  onClose: () => void;
+}
+
+export const ClusterStorageEditModal: React.FC<ClusterStorageEditModalProps> = ({
+  storageData,
+  setStorageData,
+  onClose,
+}) => {
+  const [name, setName] = React.useState(storageData.creating.nameDesc.name);
+  const [description, setDescription] = React.useState(storageData.creating.nameDesc.description);
+  const [size, setSize] = React.useState(storageData.creating.size);
+  const [storageClassName, setStorageClassName] = React.useState(
+    storageData.creating.storageClassName,
+  );
+  const [mountPath, setMountPath] = React.useState(storageData.creating.mountPath);
+
+  const onSubmit = () => {
+    setStorageData({
+      ...storageData,
+      creating: { nameDesc: { name, description }, size, storageClassName, mountPath },
+    });
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen
+      variant={ModalVariant.small}
+      title="Edit storage"
+      onClose={onClose}
+      footer={
+        <DashboardModalFooter
+          onCancel={onClose}
+          onSubmit={onSubmit}
+          submitLabel="Save"
+          isSubmitDisabled={!name}
+          alertTitle="Error updating storage class"
+        />
+      }
+      data-testid="edit-cluster-storage-modal"
+    >
+      <Form id="edit-cluster-storage-form">
+        <FormGroup label="Display name" fieldId="name" isRequired>
+          <TextInput
+            isRequired
+            value={name}
+            onChange={(_, value) => setName(value)}
+            id="display-name"
+            data-testid="display-name-input"
+          />
+        </FormGroup>
+
+        <FormGroup label="Description" fieldId="description">
+          <TextArea
+            value={description}
+            onChange={(_, value) => setDescription(value)}
+            resizeOrientation="vertical"
+            autoResize
+            id="description"
+            data-testid="description-textarea"
+          />
+        </FormGroup>
+
+        <StorageClassSelect
+          storageClassName={storageClassName}
+          setStorageClassName={(newName) => setStorageClassName(newName)}
+        />
+
+        <PVSizeField
+          fieldID="storage-size"
+          size={size}
+          setSize={(storageSize) => setSize(storageSize)}
+        />
+
+        <FormGroup label="Mount path" fieldId="mount-path" isRequired>
+          <TextInput
+            isRequired
+            value={mountPath}
+            onChange={(_, value) => setMountPath(value)}
+            id="mount-path"
+            data-testid="mount-path-input"
+          />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
diff --git a/frontend/src/pages/projects/screens/spawner/storage/ClusterStorageTable.tsx b/frontend/src/pages/projects/screens/spawner/storage/ClusterStorageTable.tsx
new file mode 100644
index 0000000000..c2c787a2ab
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/ClusterStorageTable.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+
+import { Flex, FlexItem, Icon, Popover, Truncate } from '@patternfly/react-core';
+import { Tr, Td, ActionsColumn } from '@patternfly/react-table';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+
+import { Table } from '~/components/table';
+import { StorageData } from '~/pages/projects/types';
+import { clusterStorageTableColumns } from './constants';
+import { ClusterStorageEditModal } from './ClusterStorageEditModal';
+
+interface ClusterStorageTableProps {
+  storageData: StorageData[];
+  workbenchName: string;
+  setStorageData: React.Dispatch<React.SetStateAction<StorageData[]>>;
+}
+
+export const ClusterStorageTable: React.FC<ClusterStorageTableProps> = ({
+  storageData,
+  workbenchName,
+  setStorageData,
+}) => {
+  const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
+  const [selectedId, setSelectedId] = React.useState<number>();
+  const selectedStorage =
+    storageData.find((formData) => formData.id === selectedId) || storageData[0];
+  const hasUpdatedDefaultNameRef = React.useRef(false);
+
+  const updateStorageData = React.useCallback(
+    (newStorageData: StorageData) => {
+      setStorageData((prevData) =>
+        prevData.map((pvcData) => {
+          if (newStorageData.id === selectedId) {
+            return newStorageData;
+          }
+
+          return pvcData;
+        }),
+      );
+      hasUpdatedDefaultNameRef.current = true;
+    },
+    [selectedId, setStorageData],
+  );
+
+  const updateInitialStorageName = React.useCallback(() => {
+    const [initialStorageData] = storageData;
+    const { name: pvcName } = initialStorageData.creating.nameDesc;
+
+    setStorageData([
+      {
+        ...initialStorageData,
+        creating: {
+          ...initialStorageData.creating,
+          nameDesc: {
+            ...initialStorageData.creating.nameDesc,
+            name: workbenchName
+              ? (!pvcName.includes('-') ? `${workbenchName}-${pvcName}` : pvcName).replace(
+                  /.*(?=-)/,
+                  workbenchName,
+                )
+              : pvcName.includes('-')
+              ? pvcName.split('-')[1]
+              : pvcName,
+          },
+        },
+      },
+    ]);
+  }, [workbenchName, storageData, setStorageData]);
+
+  // When the initial storage data has yet to be edited by the user,
+  // prepend the workbench name when one exists.
+  React.useEffect(() => {
+    if (!hasUpdatedDefaultNameRef.current) {
+      updateInitialStorageName();
+    }
+  }, [updateInitialStorageName]);
+
+  return (
+    <>
+      <Table
+        data-testid="cluster-storage-table-field"
+        borders={false}
+        variant="compact"
+        columns={clusterStorageTableColumns}
+        data={storageData}
+        rowRenderer={(row) => (
+          <Tr key={row.id}>
+            <Td>
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                spaceItems={{ default: 'spaceItemsSm' }}
+              >
+                <FlexItem>
+                  <Truncate content={row.creating.nameDesc.name} />
+                </FlexItem>
+
+                {!hasUpdatedDefaultNameRef.current && (
+                  <FlexItem>
+                    <Popover
+                      aria-label="Default storage name popover"
+                      bodyContent="This is the default cluster storage. Its name can be edited."
+                    >
+                      <Icon status="info" size="sm">
+                        <InfoCircleIcon />
+                      </Icon>
+                    </Popover>
+                  </FlexItem>
+                )}
+              </Flex>
+            </Td>
+            <Td>{row.creating.size}</Td>
+            <Td>{row.creating.mountPath}</Td>
+            <Td isActionCell>
+              <ActionsColumn
+                items={[
+                  {
+                    title: 'Edit',
+                    onClick: () => {
+                      setIsEditModalOpen(true);
+                      setSelectedId(row.id);
+                    },
+                  },
+                  {
+                    title: 'Detach',
+                    onClick: () =>
+                      setStorageData((prevData) =>
+                        prevData.filter((prevClusterStorage) => prevClusterStorage.id !== row.id),
+                      ),
+                  },
+                ]}
+              />
+            </Td>
+          </Tr>
+        )}
+      />
+
+      {isEditModalOpen && (
+        <ClusterStorageEditModal
+          storageData={selectedStorage}
+          setStorageData={updateStorageData}
+          onClose={() => setIsEditModalOpen(false)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/pages/projects/screens/spawner/storage/StorageField.tsx b/frontend/src/pages/projects/screens/spawner/storage/StorageField.tsx
deleted file mode 100644
index 0e2ac75155..0000000000
--- a/frontend/src/pages/projects/screens/spawner/storage/StorageField.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { FormGroup, Radio, Stack, StackItem } from '@patternfly/react-core';
-import { StorageData, StorageType, UpdateObjectAtPropAndValue } from '~/pages/projects/types';
-import { getDashboardMainContainer } from '~/utilities/utils';
-import CreateNewStorageSection from './CreateNewStorageSection';
-import AddExistingStorageField from './AddExistingStorageField';
-
-type StorageFieldType = {
-  storageData: StorageData;
-  setStorageData: UpdateObjectAtPropAndValue<StorageData>;
-};
-
-const StorageField: React.FC<StorageFieldType> = ({ storageData, setStorageData }) => {
-  const { storageType, creating, existing } = storageData;
-
-  return (
-    <FormGroup fieldId="cluster-storage" role="radiogroup">
-      <Stack hasGutter>
-        <StackItem>
-          <Radio
-            name="persistent-new-storage-type-radio"
-            data-testid="persistent-new-storage-type-radio"
-            id="persistent-new-storage-type-radio"
-            label="Create new persistent storage"
-            description="This creates storage that is retained when logged out."
-            isChecked={storageType === StorageType.NEW_PVC}
-            onChange={() => setStorageData('storageType', StorageType.NEW_PVC)}
-            body={
-              storageType === StorageType.NEW_PVC && (
-                <CreateNewStorageSection
-                  menuAppendTo={getDashboardMainContainer()}
-                  data={creating}
-                  setData={(key, value) =>
-                    setStorageData('creating', { ...creating, [key]: value })
-                  }
-                />
-              )
-            }
-          />
-        </StackItem>
-        <StackItem>
-          <Radio
-            name="persistent-existing-storage-type-radio"
-            data-testid="persistent-existing-storage-type-radio"
-            id="persistent-existing-storage-type-radio"
-            label="Use existing persistent storage"
-            description="This reuses a previously created persistent storage."
-            isChecked={storageType === StorageType.EXISTING_PVC}
-            onChange={() => setStorageData('storageType', StorageType.EXISTING_PVC)}
-            body={
-              storageType === StorageType.EXISTING_PVC && (
-                <AddExistingStorageField
-                  data={existing}
-                  setData={(data) => setStorageData('existing', data)}
-                  selectDirection="up"
-                  menuAppendTo={getDashboardMainContainer()}
-                />
-              )
-            }
-          />
-        </StackItem>
-      </Stack>
-    </FormGroup>
-  );
-};
-
-export default StorageField;
diff --git a/frontend/src/pages/projects/screens/spawner/storage/constants.ts b/frontend/src/pages/projects/screens/spawner/storage/constants.ts
new file mode 100644
index 0000000000..6f80242cdc
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/constants.ts
@@ -0,0 +1,35 @@
+import { SortableData, kebabTableColumn } from '~/components/table';
+import { StorageData } from '~/pages/projects/types';
+
+export const clusterStorageTableColumns: SortableData<StorageData>[] = [
+  {
+    label: 'ID',
+    field: 'id',
+    sortable: false,
+    className: 'pf-v5-u-hidden',
+  },
+  {
+    label: 'Name',
+    field: 'name',
+    sortable: false,
+  },
+  {
+    label: 'Storage size',
+    field: 'size',
+    sortable: false,
+  },
+  {
+    label: 'Mount path',
+    field: 'mountPath',
+    sortable: false,
+  },
+  kebabTableColumn(),
+];
+
+export const defaultClusterStorage = {
+  name: 'storage',
+  description: '',
+  size: '20Gi',
+  mountPath: '/opt/apt-root/src/',
+  storageClassName: '',
+};
diff --git a/frontend/src/pages/projects/screens/spawner/storage/utils.ts b/frontend/src/pages/projects/screens/spawner/storage/utils.ts
index 871d80338c..9df9276157 100644
--- a/frontend/src/pages/projects/screens/spawner/storage/utils.ts
+++ b/frontend/src/pages/projects/screens/spawner/storage/utils.ts
@@ -1,29 +1,28 @@
 import * as React from 'react';
 import {
+  CreatingStorageObject,
   CreatingStorageObjectForNotebook,
   ExistingStorageObjectForNotebook,
-  StorageData,
-  StorageType,
   UpdateObjectAtPropAndValue,
 } from '~/pages/projects/types';
-import { NotebookKind, PersistentVolumeClaimKind } from '~/k8sTypes';
+import { PersistentVolumeClaimKind } from '~/k8sTypes';
 import {
   useRelatedNotebooks,
   ConnectedNotebookContext,
 } from '~/pages/projects/notebook/useRelatedNotebooks';
 import useGenericObjectState from '~/utilities/useGenericObjectState';
-import { getRootVolumeName } from '~/pages/projects/screens/spawner/spawnerUtils';
 import { getDescriptionFromK8sResource, getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
 import useDefaultPvcSize from './useDefaultPvcSize';
 
 export const useCreateStorageObjectForNotebook = (
   existingData?: PersistentVolumeClaimKind,
+  creatingData?: CreatingStorageObject,
 ): [
   data: CreatingStorageObjectForNotebook,
   setData: UpdateObjectAtPropAndValue<CreatingStorageObjectForNotebook>,
   resetDefaults: () => void,
 ] => {
-  const size = useDefaultPvcSize();
+  const defaultSize = useDefaultPvcSize();
 
   const createDataState = useGenericObjectState<CreatingStorageObjectForNotebook>({
     nameDesc: {
@@ -31,7 +30,7 @@ export const useCreateStorageObjectForNotebook = (
       k8sName: undefined,
       description: '',
     },
-    size,
+    size: defaultSize,
     forNotebook: {
       name: '',
       mountPath: {
@@ -44,10 +43,17 @@ export const useCreateStorageObjectForNotebook = (
 
   const [, setCreateData] = createDataState;
 
-  const existingName = existingData ? getDisplayNameFromK8sResource(existingData) : '';
-  const existingDescription = existingData ? getDescriptionFromK8sResource(existingData) : '';
-  const existingSize = existingData ? existingData.spec.resources.requests.storage : size;
-  const existingStorageClassName = existingData?.spec.storageClassName;
+  const existingName =
+    creatingData?.nameDesc.name ||
+    (existingData ? getDisplayNameFromK8sResource(existingData) : '');
+  const existingDescription =
+    creatingData?.nameDesc.description ||
+    (existingData ? getDescriptionFromK8sResource(existingData) : '');
+  const existingSize =
+    creatingData?.size ||
+    (existingData ? existingData.spec.resources.requests.storage : defaultSize);
+  const existingStorageClassName =
+    creatingData?.storageClassName || existingData?.spec.storageClassName;
   const { notebooks: relatedNotebooks } = useRelatedNotebooks(
     ConnectedNotebookContext.REMOVABLE_PVC,
     existingData ? existingData.metadata.name : undefined,
@@ -89,27 +95,3 @@ export const useExistingStorageDataObjectForNotebook = (): [
       error: '',
     },
   });
-
-export const useStorageDataObject = (
-  notebook?: NotebookKind,
-): [
-  data: StorageData,
-  setData: UpdateObjectAtPropAndValue<StorageData>,
-  resetDefaults: () => void,
-] => {
-  const size = useDefaultPvcSize();
-  return useGenericObjectState<StorageData>({
-    storageType: notebook ? StorageType.EXISTING_PVC : StorageType.NEW_PVC,
-    creating: {
-      nameDesc: {
-        name: '',
-        description: '',
-      },
-      size,
-      storageClassName: '',
-    },
-    existing: {
-      storage: getRootVolumeName(notebook),
-    },
-  });
-};
diff --git a/frontend/src/pages/projects/types.ts b/frontend/src/pages/projects/types.ts
index b882168ca7..ad57b5bf34 100644
--- a/frontend/src/pages/projects/types.ts
+++ b/frontend/src/pages/projects/types.ts
@@ -30,6 +30,7 @@ export type CreatingStorageObject = {
   nameDesc: NameDescType;
   size: string;
   storageClassName?: string;
+  mountPath?: string;
 };
 
 export type MountPath = {
@@ -64,6 +65,7 @@ export type StorageData = {
   storageType: StorageType;
   creating: CreatingStorageObject;
   existing: ExistingStorageObject;
+  id?: number;
 };
 
 export type StartNotebookData = {