Merge pull request #1019 from ankrsinha/fix/SRVKP-9789

SRVKP-9789: Fix sidebar list bullets for PipelineRuns and Triggers in Topology Page

Author: openshift-merge-bot[bot]

src/components/pipeline-overview/PipelineOverview.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useState, useEffect } from 'react';
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, List, ListItem } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
@@ -73,8 +73,8 @@ const PipelinesOverview: FC<PipelinesOverviewProps> = ({
           </Link>
         )}
       </SidebarSectionHeading>
-      <ul className="list-group">
-        <li className="list-group-item pipeline-overview">
+      <List isPlain>
+        <ListItem>
           <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
             <FlexItem>
               <ResourceLink
@@ -98,11 +98,11 @@ const PipelinesOverview: FC<PipelinesOverviewProps> = ({
               )}
             </FlexItem>
           </Flex>
-        </li>
+        </ListItem>
         {_.take(pipelineRuns, MAX_VISIBLE).map((pr) => (
           <PipelineRunItem key={pr.metadata.uid} pipelineRun={pr} />
         ))}
-      </ul>
+      </List>
       <TriggersOverview pipeline={pipeline} />
     </div>
   );

src/components/pipeline-overview/PipelineRunItem.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Grid, GridItem } from '@patternfly/react-core';
+import { Grid, GridItem, ListItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import { useTaskRuns } from '../hooks/useTaskRuns';
@@ -49,7 +49,7 @@ const PipelineRunItem: FC<PipelineRunItemProps> = ({ pipelineRun }) => {
     : creationTimestamp;
   const logDetails = getPLRLogSnippet(pipelineRun, taskRuns);
   return (
-    <li className="opp-pipeline-run-item list-group-item">
+    <ListItem className="opp-pipeline-run-item">
       <Grid hasGutter>
         <GridItem span={6}>
           <div>
@@ -88,7 +88,7 @@ const PipelineRunItem: FC<PipelineRunItemProps> = ({ pipelineRun }) => {
           </GridItem>
         )}
       </Grid>
-    </li>
+    </ListItem>
   );
 };
 

src/components/pipeline-overview/TriggersOverview.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, List, ListItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 
 import { usePipelineTriggerTemplateNames } from '../utils/triggers';
@@ -25,11 +25,8 @@ const TriggersOverview: FC<TriggersOverviewProps> = ({ pipeline }) => {
         data-testid="triggers-heading"
         text={t('Triggers')}
       />
-      <ul className="list-group" data-testid="triggers-list">
-        <li
-          className="list-group-item pipeline-overview"
-          data-testid="triggers-list-item"
-        >
+      <List isPlain data-testid="triggers-list">
+        <ListItem data-testid="triggers-list-item">
           <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
             <FlexItem>
               <TriggerResourceLinks
@@ -39,8 +36,8 @@ const TriggersOverview: FC<TriggersOverviewProps> = ({ pipeline }) => {
               />
             </FlexItem>
           </Flex>
-        </li>
-      </ul>
+        </ListItem>
+      </List>
     </>
   ) : null;
 };