Divider disappears after create pipeline

opendatahub-io · Sep 11, 2023 · 4032449 · 4032449
1 parent 2a2abff
commit 4032449
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 73 deletions.
diff --git 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 { usePipelinesAPI } from '~/concepts/pipelines/context';
 import NotebooksList from './notebooks/NotebookList';
 import { ProjectSectionID } from './types';
 import StorageList from './storage/StorageList';
@@ -17,19 +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);
-  const { pipelinesServer } = usePipelinesAPI();
-
   const modelServingEnabled = featureFlagEnabled(
     dashboardConfig.spec.dashboardConfig.disableModelServing,
   );
@@ -42,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: !pipelinesServer.installed,
           },
         ]
       : []),
@@ -68,7 +53,6 @@ const ProjectDetailsComponents: React.FC = () => {
           {
             id: ProjectSectionID.MODEL_SERVER,
             component: <ServingRuntimeList />,
-            isEmpty: modelServersLoaded && modelServers.length === 0,
           },
         ]
       : []),
@@ -82,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}
@@ -91,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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Divider } 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,6 +15,8 @@ const DataConnectionsList: React.FC = () => {
   } = React.useContext(ProjectDetailsContext);
   const [open, setOpen] = React.useState(false);
 
+  const emptyDataConnections = connections.length === 0;
+
   return (
     <>
       <DetailsSection
@@ -30,7 +32,7 @@ const DataConnectionsList: React.FC = () => {
           </Button>,
         ]}
         isLoading={!loaded}
-        isEmpty={connections.length === 0}
+        isEmpty={emptyDataConnections}
         loadError={error}
         emptyState={
           <EmptyDetailsList
@@ -41,6 +43,7 @@ const DataConnectionsList: React.FC = () => {
       >
         <DataConnectionsTable connections={connections} refreshData={refreshAllProjectData} />
       </DetailsSection>
+      {emptyDataConnections && <Divider data-id="details-page-section-divider" />}
       <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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Divider } 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,33 @@ 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"
-        >
-          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>
+    <>
+      <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."
+          />
+        }
+      >
+        <NotebookTable notebookStates={notebookStates} refresh={refresh} />
+      </DetailsSection>
+      {emptyNotebooks && <Divider data-id="details-page-section-divider" />}
+    </>
   );
 };
 

diff --git a/frontend/src/pages/projects/screens/detail/pipelines/PipelinesList.tsx b/frontend/src/pages/projects/screens/detail/pipelines/PipelinesList.tsx
@@ -9,11 +9,19 @@ import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import EmptyStateErrorMessage from '~/components/EmptyStateErrorMessage';
 import { TABLE_CONTENT_LIMIT, LIMIT_MAX_ITEM_COUNT } from '~/concepts/pipelines/const';
 
-const PipelinesList: React.FC = () => {
+interface PipelinesListProps {
+  setPipelinesIsEmpty: (arg0: boolean) => void;
+}
+
+const PipelinesList: React.FC<PipelinesListProps> = ({ setPipelinesIsEmpty }) => {
   const { namespace } = usePipelinesAPI();
   const [pipelines, loaded, loadError, refresh] = usePipelines(LIMIT_MAX_ITEM_COUNT);
   const navigate = useNavigate();
 
+  React.useEffect(() => {
+    pipelines.length === 0 ? setPipelinesIsEmpty(true) : setPipelinesIsEmpty(false);
+  }, [pipelines, setPipelinesIsEmpty]);
+
   if (loadError) {
     return (
       <EmptyStateErrorMessage title="Error displaying pipelines" bodyText={loadError.message} />

diff --git 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 } 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';
@@ -13,29 +14,34 @@ const PipelinesSection: React.FC = () => {
     pipelinesServer: { initializing, installed, timedOut },
   } = usePipelinesAPI();
 
+  const [isPipelinesEmpty, setPipelinesIsEmpty] = React.useState(false);
+
   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>
-      )}
-    </DetailsSection>
+    <>
+      <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 setPipelinesIsEmpty={setPipelinesIsEmpty} />
+          </EnsureAPIAvailability>
+        )}
+      </DetailsSection>
+      {(isPipelinesEmpty || !installed) && <Divider data-id="details-page-section-divider" />}
+    </>
   );
 };
 

diff --git 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 } 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,6 +15,8 @@ const StorageList: React.FC = () => {
     refreshAllProjectData: refresh,
   } = React.useContext(ProjectDetailsContext);
 
+  const emptyPvsc = pvcs.length === 0;
+
   return (
     <>
       <DetailsSection
@@ -30,7 +32,7 @@ const StorageList: React.FC = () => {
           </Button>,
         ]}
         isLoading={!loaded}
-        isEmpty={pvcs.length === 0}
+        isEmpty={emptyPvsc}
         loadError={loadError}
         emptyState={
           <EmptyDetailsList
@@ -41,6 +43,7 @@ const StorageList: React.FC = () => {
       >
         <StorageTable pvcs={pvcs} refresh={refresh} onAddPVC={() => setOpen(true)} />
       </DetailsSection>
+      {emptyPvsc && <Divider data-id="details-page-section-divider" />}
       <ManageStorageModal
         isOpen={isOpen}
         onClose={(submit: boolean) => {