From db8e51f5dc61e3ed231d8d40b40c0d3b8ba62a90 Mon Sep 17 00:00:00 2001
From: Dipanshu Gupta <dipanshug421@gmail.com>
Date: Fri, 1 Sep 2023 22:46:52 +0530
Subject: [PATCH] Update

---
 .../detail/ProjectDetailsComponents.tsx       | 25 +-------
 .../data-connections/DataConnectionsList.tsx  | 59 +++++++++++--------
 .../screens/detail/notebooks/NotebookList.tsx | 58 ++++++++++--------
 .../detail/pipelines/PipelinesSection.tsx     | 56 +++++++++++-------
 .../screens/detail/storage/StorageList.tsx    | 59 +++++++++++--------
 5 files changed, 141 insertions(+), 116 deletions(-)

diff --git a/frontend/src/pages/projects/screens/detail/ProjectDetailsComponents.tsx b/frontend/src/pages/projects/screens/detail/ProjectDetailsComponents.tsx
index 258366353c..819130f635 100644
--- a/frontend/src/pages/projects/screens/detail/ProjectDetailsComponents.tsx
+++ b/frontend/src/pages/projects/screens/detail/ProjectDetailsComponents.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { Divider, PageSection, Stack, StackItem } from '@patternfly/react-core';
+import { PageSection, Stack, StackItem } from '@patternfly/react-core';
 import GenericSidebar from '~/components/GenericSidebar';
 import { useAppContext } from '~/app/AppContext';
 import ServingRuntimeList from '~/pages/modelServing/screens/projects/ServingRuntimeList';
-import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { featureFlagEnabled } from '~/utilities/utils';
 import PipelinesSection from '~/pages/projects/screens/detail/pipelines/PipelinesSection';
-import usePipelines from '~/concepts/pipelines/apiHooks/usePipelines';
 import NotebooksList from './notebooks/NotebookList';
 import { ProjectSectionID } from './types';
 import StorageList from './storage/StorageList';
@@ -17,21 +15,10 @@ import useCheckLogoutParams from './useCheckLogoutParams';
 type SectionType = {
   id: ProjectSectionID;
   component: React.ReactNode;
-  isEmpty: boolean;
 };
 
 const ProjectDetailsComponents: React.FC = () => {
   const { dashboardConfig } = useAppContext();
-  const {
-    notebooks: { data: notebookStates, loaded: notebookStatesLoaded },
-    pvcs: { data: pvcs, loaded: pvcsLoaded },
-    dataConnections: { data: connections, loaded: connectionsLoaded },
-    servingRuntimes: { data: modelServers, loaded: modelServersLoaded },
-  } = React.useContext(ProjectDetailsContext);
-
-  // Limit set to 1 for checking pipeline emptiness
-  const [pipelines, pipelinesLoaded] = usePipelines(1);
-
   const modelServingEnabled = featureFlagEnabled(
     dashboardConfig.spec.dashboardConfig.disableModelServing,
   );
@@ -44,24 +31,20 @@ const ProjectDetailsComponents: React.FC = () => {
     {
       id: ProjectSectionID.WORKBENCHES,
       component: <NotebooksList />,
-      isEmpty: notebookStatesLoaded && notebookStates.length === 0,
     },
     {
       id: ProjectSectionID.CLUSTER_STORAGES,
       component: <StorageList />,
-      isEmpty: pvcsLoaded && pvcs.length === 0,
     },
     {
       id: ProjectSectionID.DATA_CONNECTIONS,
       component: <DataConnectionsList />,
-      isEmpty: connectionsLoaded && connections.length === 0,
     },
     ...(pipelinesEnabled
       ? [
           {
             id: ProjectSectionID.PIPELINES,
             component: <PipelinesSection />,
-            isEmpty: pipelinesLoaded && pipelines.length === 0,
           },
         ]
       : []),
@@ -70,7 +53,6 @@ const ProjectDetailsComponents: React.FC = () => {
           {
             id: ProjectSectionID.MODEL_SERVER,
             component: <ServingRuntimeList />,
-            isEmpty: modelServersLoaded && modelServers.length === 0,
           },
         ]
       : []),
@@ -84,7 +66,7 @@ const ProjectDetailsComponents: React.FC = () => {
         maxWidth={175}
       >
         <Stack hasGutter>
-          {sections.map(({ id, component, isEmpty }, index) => (
+          {sections.map(({ id, component }) => (
             <React.Fragment key={id}>
               <StackItem
                 id={id}
@@ -93,9 +75,6 @@ const ProjectDetailsComponents: React.FC = () => {
               >
                 {component}
               </StackItem>
-              {index !== sections.length - 1 && isEmpty && (
-                <Divider data-id="details-page-section-divider" />
-              )}
             </React.Fragment>
           ))}
         </Stack>
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx
index 18d23c0fe7..5bcb15c599 100644
--- a/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx
+++ b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Divider, Stack, StackItem } from '@patternfly/react-core';
 import EmptyDetailsList from '~/pages/projects/screens/detail/EmptyDetailsList';
 import { ProjectSectionID } from '~/pages/projects/screens/detail/types';
 import DetailsSection from '~/pages/projects/screens/detail/DetailsSection';
@@ -15,32 +15,43 @@ const DataConnectionsList: React.FC = () => {
   } = React.useContext(ProjectDetailsContext);
   const [open, setOpen] = React.useState(false);
 
+  const emptyDataConnections = connections.length === 0;
+
   return (
     <>
-      <DetailsSection
-        id={ProjectSectionID.DATA_CONNECTIONS}
-        title={ProjectSectionTitles[ProjectSectionID.DATA_CONNECTIONS] || ''}
-        actions={[
-          <Button
-            key={`action-${ProjectSectionID.DATA_CONNECTIONS}`}
-            variant="secondary"
-            onClick={() => setOpen(true)}
+      <Stack>
+        <StackItem>
+          <DetailsSection
+            id={ProjectSectionID.DATA_CONNECTIONS}
+            title={ProjectSectionTitles[ProjectSectionID.DATA_CONNECTIONS] || ''}
+            actions={[
+              <Button
+                key={`action-${ProjectSectionID.DATA_CONNECTIONS}`}
+                variant="secondary"
+                onClick={() => setOpen(true)}
+              >
+                Add data connection
+              </Button>,
+            ]}
+            isLoading={!loaded}
+            isEmpty={emptyDataConnections}
+            loadError={error}
+            emptyState={
+              <EmptyDetailsList
+                title="No data connections"
+                description="To get started, add data to your project."
+              />
+            }
           >
-            Add data connection
-          </Button>,
-        ]}
-        isLoading={!loaded}
-        isEmpty={connections.length === 0}
-        loadError={error}
-        emptyState={
-          <EmptyDetailsList
-            title="No data connections"
-            description="To get started, add data to your project."
-          />
-        }
-      >
-        <DataConnectionsTable connections={connections} refreshData={refreshAllProjectData} />
-      </DetailsSection>
+            <DataConnectionsTable connections={connections} refreshData={refreshAllProjectData} />
+          </DetailsSection>
+        </StackItem>
+      </Stack>
+      {emptyDataConnections && (
+        <StackItem>
+          <Divider data-id="details-page-section-divider" />
+        </StackItem>
+      )}
       <ManageDataConnectionModal
         isOpen={open}
         onClose={(submitted) => {
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx
index 0396239c96..9ba7f07b1b 100644
--- a/frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx
+++ b/frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Divider, Stack, StackItem } from '@patternfly/react-core';
 import { useNavigate } from 'react-router-dom';
 import EmptyDetailsList from '~/pages/projects/screens/detail/EmptyDetailsList';
 import { ProjectSectionID } from '~/pages/projects/screens/detail/types';
@@ -17,6 +17,7 @@ const NotebookList: React.FC = () => {
   } = React.useContext(ProjectDetailsContext);
   const navigate = useNavigate();
   const projectName = currentProject.metadata.name;
+  const emptyNotebooks = notebookStates.length === 0;
 
   React.useEffect(() => {
     let interval: ReturnType<typeof setInterval>;
@@ -27,30 +28,39 @@ const NotebookList: React.FC = () => {
   }, [notebookStates, refreshNotebooks]);
 
   return (
-    <DetailsSection
-      id={ProjectSectionID.WORKBENCHES}
-      title={ProjectSectionTitles[ProjectSectionID.WORKBENCHES] || ''}
-      actions={[
-        <Button
-          key={`action-${ProjectSectionID.WORKBENCHES}`}
-          onClick={() => navigate(`/projects/${projectName}/spawner`)}
-          variant="secondary"
+    <Stack>
+      <StackItem>
+        <DetailsSection
+          id={ProjectSectionID.WORKBENCHES}
+          title={ProjectSectionTitles[ProjectSectionID.WORKBENCHES] || ''}
+          actions={[
+            <Button
+              key={`action-${ProjectSectionID.WORKBENCHES}`}
+              onClick={() => navigate(`/projects/${projectName}/spawner`)}
+              variant="secondary"
+            >
+              Create workbench
+            </Button>,
+          ]}
+          isLoading={!loaded}
+          loadError={loadError}
+          isEmpty={emptyNotebooks}
+          emptyState={
+            <EmptyDetailsList
+              title="No workbenches"
+              description="To get started, create a workbench."
+            />
+          }
         >
-          Create workbench
-        </Button>,
-      ]}
-      isLoading={!loaded}
-      loadError={loadError}
-      isEmpty={notebookStates.length === 0}
-      emptyState={
-        <EmptyDetailsList
-          title="No workbenches"
-          description="To get started, create a workbench."
-        />
-      }
-    >
-      <NotebookTable notebookStates={notebookStates} refresh={refresh} />
-    </DetailsSection>
+          <NotebookTable notebookStates={notebookStates} refresh={refresh} />
+        </DetailsSection>
+      </StackItem>
+      {emptyNotebooks && (
+        <StackItem>
+          <Divider data-id="details-page-section-divider" />
+        </StackItem>
+      )}
+    </Stack>
   );
 };
 
diff --git a/frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx b/frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx
index ed36a91cd9..65b48ebb1e 100644
--- a/frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx
+++ b/frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Divider, Stack, StackItem } from '@patternfly/react-core';
 import { ProjectSectionID } from '~/pages/projects/screens/detail/types';
 import { ProjectSectionTitles } from '~/pages/projects/screens/detail/const';
 import DetailsSection from '~/pages/projects/screens/detail/DetailsSection';
@@ -7,35 +8,48 @@ import NoPipelineServer from '~/concepts/pipelines/NoPipelineServer';
 import ImportPipelineButton from '~/concepts/pipelines/content/import/ImportPipelineButton';
 import PipelinesList from '~/pages/projects/screens/detail/pipelines/PipelinesList';
 import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability';
+import usePipelines from '~/concepts/pipelines/apiHooks/usePipelines';
 
 const PipelinesSection: React.FC = () => {
   const {
     pipelinesServer: { initializing, installed, timedOut },
   } = usePipelinesAPI();
 
+  const [pipelines] = usePipelines(1);
+  const pipelinesEmpty = !installed || pipelines.length === 0;
+
   return (
-    <DetailsSection
-      id={ProjectSectionID.PIPELINES}
-      title={ProjectSectionTitles[ProjectSectionID.PIPELINES]}
-      actions={[
-        <ImportPipelineButton
-          isDisabled={!installed}
-          key={`action-${ProjectSectionID.PIPELINES}`}
-          variant="secondary"
-        />,
-      ]}
-      isLoading={initializing}
-      isEmpty={!installed}
-      emptyState={<NoPipelineServer variant="secondary" />}
-    >
-      {timedOut ? (
-        <PipelineServerTimedOut />
-      ) : (
-        <EnsureAPIAvailability>
-          <PipelinesList />
-        </EnsureAPIAvailability>
+    <Stack>
+      <StackItem>
+        <DetailsSection
+          id={ProjectSectionID.PIPELINES}
+          title={ProjectSectionTitles[ProjectSectionID.PIPELINES]}
+          actions={[
+            <ImportPipelineButton
+              isDisabled={!installed}
+              key={`action-${ProjectSectionID.PIPELINES}`}
+              variant="secondary"
+            />,
+          ]}
+          isLoading={initializing}
+          isEmpty={!installed}
+          emptyState={<NoPipelineServer variant="secondary" />}
+        >
+          {timedOut ? (
+            <PipelineServerTimedOut />
+          ) : (
+            <EnsureAPIAvailability>
+              <PipelinesList />
+            </EnsureAPIAvailability>
+          )}
+        </DetailsSection>
+      </StackItem>
+      {pipelinesEmpty && (
+        <StackItem>
+          <Divider data-id="details-page-section-divider" />
+        </StackItem>
       )}
-    </DetailsSection>
+    </Stack>
   );
 };
 
diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageList.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageList.tsx
index 439f8f86b8..90f247b19d 100644
--- a/frontend/src/pages/projects/screens/detail/storage/StorageList.tsx
+++ b/frontend/src/pages/projects/screens/detail/storage/StorageList.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Divider, Stack, StackItem } from '@patternfly/react-core';
 import EmptyDetailsList from '~/pages/projects/screens/detail/EmptyDetailsList';
 import DetailsSection from '~/pages/projects/screens/detail/DetailsSection';
 import { ProjectSectionID } from '~/pages/projects/screens/detail/types';
@@ -15,32 +15,43 @@ const StorageList: React.FC = () => {
     refreshAllProjectData: refresh,
   } = React.useContext(ProjectDetailsContext);
 
+  const emptyPvsc = pvcs.length === 0;
+
   return (
     <>
-      <DetailsSection
-        id={ProjectSectionID.CLUSTER_STORAGES}
-        title={ProjectSectionTitles[ProjectSectionID.CLUSTER_STORAGES] || ''}
-        actions={[
-          <Button
-            onClick={() => setOpen(true)}
-            key={`action-${ProjectSectionID.CLUSTER_STORAGES}`}
-            variant="secondary"
+      <Stack>
+        <StackItem>
+          <DetailsSection
+            id={ProjectSectionID.CLUSTER_STORAGES}
+            title={ProjectSectionTitles[ProjectSectionID.CLUSTER_STORAGES] || ''}
+            actions={[
+              <Button
+                onClick={() => setOpen(true)}
+                key={`action-${ProjectSectionID.CLUSTER_STORAGES}`}
+                variant="secondary"
+              >
+                Add cluster storage
+              </Button>,
+            ]}
+            isLoading={!loaded}
+            isEmpty={emptyPvsc}
+            loadError={loadError}
+            emptyState={
+              <EmptyDetailsList
+                title="No storage"
+                description="To get started, add existing or create new cluster storage."
+              />
+            }
           >
-            Add cluster storage
-          </Button>,
-        ]}
-        isLoading={!loaded}
-        isEmpty={pvcs.length === 0}
-        loadError={loadError}
-        emptyState={
-          <EmptyDetailsList
-            title="No storage"
-            description="To get started, add existing or create new cluster storage."
-          />
-        }
-      >
-        <StorageTable pvcs={pvcs} refresh={refresh} onAddPVC={() => setOpen(true)} />
-      </DetailsSection>
+            <StorageTable pvcs={pvcs} refresh={refresh} onAddPVC={() => setOpen(true)} />
+          </DetailsSection>
+        </StackItem>
+        {emptyPvsc && (
+          <StackItem>
+            <Divider data-id="details-page-section-divider" />
+          </StackItem>
+        )}
+      </Stack>
       <ManageStorageModal
         isOpen={isOpen}
         onClose={(submit: boolean) => {