Merge pull request #1020 from ankrsinha/fix/SRVKP-9789-main

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,5 +1,5 @@
 import * as React 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-dom';
@@ -72,8 +72,8 @@ const PipelinesOverview: React.FC<PipelinesOverviewProps> = ({
           </Link>
         )}
       </SidebarSectionHeading>
-      <ul className="list-group">
-        <li className="list-group-item pipeline-overview">
+      <List isPlain>
+        <ListItem>
           <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
             <FlexItem>
               <ResourceLink
@@ -97,11 +97,11 @@ const PipelinesOverview: React.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 * as React 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-dom-v5-compat';
 import { useTaskRuns } from '../hooks/useTaskRuns';
@@ -45,7 +45,7 @@ const PipelineRunItem: React.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>
@@ -84,7 +84,7 @@ const PipelineRunItem: React.FC<PipelineRunItemProps> = ({ pipelineRun }) => {
           </GridItem>
         )}
       </Grid>
-    </li>
+    </ListItem>
   );
 };
 

src/components/pipeline-overview/TriggersOverview.tsx

@@ -1,5 +1,5 @@
 import * as React 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: React.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: React.FC<TriggersOverviewProps> = ({ pipeline }) => {
               />
             </FlexItem>
           </Flex>
-        </li>
-      </ul>
+        </ListItem>
+      </List>
     </>
   ) : null;
 };