Merge pull request #2102 from christianvogt/section-separators

improve section divider rendering

frontend/src/__tests__/integration/pages/projects/ProjectDetails.spec.ts

@@ -7,11 +7,20 @@ test('Empty project', async ({ page }) => {
   // wait for page to load
   await page.waitForSelector('text=Models and model servers');
 
-  // the dividers number should always 1 less than the section number
-  const sections = await page.locator('[data-id="details-page-section"]').all();
-  const dividers = await page.locator('[data-id="details-page-section-divider"]').all();
-
-  expect(dividers).toHaveLength(sections.length - 1);
+  // all empty sections should be divided
+  const sectionsLocator = page.locator('[data-id="details-page-section"]');
+  const sections = await sectionsLocator.all();
+  const dividers = await page.locator('.odh-details-section--divide').all();
+
+  expect(dividers).toHaveLength(sections.length);
+
+  // all but the last section should include the bottom border divider
+  const sectionsWithDivider = await sectionsLocator.evaluateAll((elements) =>
+    elements
+      .map((element) => window.getComputedStyle(element).getPropertyValue('border-bottom-style'))
+      .filter((x) => x !== 'none'),
+  );
+  expect(sectionsWithDivider).toHaveLength(sections.length - 1);
 });
 
 test('Non-empty project', async ({ page }) => {
@@ -21,7 +30,7 @@ test('Non-empty project', async ({ page }) => {
   await page.waitForSelector('text=Test Notebook');
 
   // we fill in the page with data, so there should be no dividers on the page
-  expect(await page.locator('[data-id="details-page-section-divider"]').all()).toHaveLength(0);
+  expect(await page.locator('.odh-details-section--divide').all()).toHaveLength(0);
 
   // check the x-small size shown correctly
   expect(page.getByText('Small')).toBeTruthy();

frontend/src/pages/projects/screens/detail/DetailsSection.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import {
   Alert,
   Bullseye,
@@ -21,6 +22,7 @@ type DetailsSectionProps = {
   emptyState?: React.ReactNode;
   children: React.ReactNode;
   labels?: React.ReactNode[];
+  showDivider?: boolean;
 };
 
 const DetailsSection: React.FC<DetailsSectionProps> = ({
@@ -33,6 +35,7 @@ const DetailsSection: React.FC<DetailsSectionProps> = ({
   loadError,
   title,
   labels,
+  showDivider,
 }) => {
   const renderContent = () => {
     if (loadError) {
@@ -59,7 +62,12 @@ const DetailsSection: React.FC<DetailsSectionProps> = ({
   };
 
   return (
-    <Stack hasGutter>
+    <Stack
+      hasGutter
+      className={classNames({
+        'odh-details-section--divide': !loadError && (isLoading || isEmpty || showDivider),
+      })}
+    >
       <StackItem>
         <Flex>
           <FlexItem>

frontend/src/pages/projects/screens/detail/ProjectDetailsComponents.scss

@@ -0,0 +1,5 @@
+.odh-project-details-components__item:has(> .odh-details-section--divide):has(
+    + .odh-project-details-components__item
+  ) {
+  border-bottom: 1px solid var(--pf-global--BorderColor--100);
+}

frontend/src/pages/projects/screens/detail/ProjectDetailsComponents.tsx

@@ -12,6 +12,8 @@ import StorageList from './storage/StorageList';
 import { ProjectSectionTitles } from './const';
 import DataConnectionsList from './data-connections/DataConnectionsList';
 
+import './ProjectDetailsComponents.scss';
+
 type SectionType = {
   id: ProjectSectionID;
   component: React.ReactNode;
@@ -74,6 +76,7 @@ const ProjectDetailsComponents: React.FC = () => {
                 id={id}
                 aria-label={ProjectSectionTitles[id]}
                 data-id="details-page-section"
+                className="odh-project-details-components__item"
               >
                 {component}
               </StackItem>

frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Divider } from '@patternfly/react-core';
+import { Button } 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';
@@ -43,7 +43,6 @@ const DataConnectionsList: React.FC = () => {
       >
         <DataConnectionsTable connections={connections} refreshData={refreshAllProjectData} />
       </DetailsSection>
-      {isDataConnectionsEmpty && <Divider data-id="details-page-section-divider" />}
       <ManageDataConnectionModal
         isOpen={open}
         onClose={(submitted) => {

frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Divider } from '@patternfly/react-core';
+import { Button } 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';
@@ -53,7 +53,6 @@ const NotebookList: React.FC = () => {
       >
         <NotebookTable notebookStates={notebookStates} refresh={refresh} />
       </DetailsSection>
-      {isNotebooksEmpty && <Divider data-id="details-page-section-divider" />}
     </>
   );
 };

frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx

@@ -1,17 +1,16 @@
 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';
 import { PipelineServerTimedOut, usePipelinesAPI } from '~/concepts/pipelines/context';
 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 PipelineServerActions from '~/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineServerActions';
 
 const PipelinesSection: React.FC = () => {
   const {
+    apiAvailable,
     pipelinesServer: { initializing, installed, timedOut },
   } = usePipelinesAPI();
 
@@ -34,19 +33,17 @@ const PipelinesSection: React.FC = () => {
             variant="kebab"
           />,
         ]}
-        isLoading={initializing}
+        isLoading={(!apiAvailable && installed) || initializing}
         isEmpty={!installed}
         emptyState={<NoPipelineServer variant="secondary" />}
+        showDivider={isPipelinesEmpty}
       >
         {timedOut ? (
           <PipelineServerTimedOut />
         ) : (
-          <EnsureAPIAvailability>
-            <PipelinesList setIsPipelinesEmpty={setIsPipelinesEmpty} />
-          </EnsureAPIAvailability>
+          <PipelinesList setIsPipelinesEmpty={setIsPipelinesEmpty} />
         )}
       </DetailsSection>
-      {(isPipelinesEmpty || !installed) && <Divider data-id="details-page-section-divider" />}
     </>
   );
 };

frontend/src/pages/projects/screens/detail/storage/StorageList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Divider } from '@patternfly/react-core';
+import { Button } 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';
@@ -43,7 +43,6 @@ const StorageList: React.FC = () => {
       >
         <StorageTable pvcs={pvcs} refresh={refresh} onAddPVC={() => setOpen(true)} />
       </DetailsSection>
-      {isPvcsEmpty && <Divider data-id="details-page-section-divider" />}
       <ManageStorageModal
         isOpen={isOpen}
         onClose={(submit: boolean) => {