fix(tekton): fix expand collapse with sorting of PLR list table

janus-idp · Nov 30, 2023 · e3584b8 · e3584b8
1 parent 4dda929
commit e3584b8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx b/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx
@@ -15,7 +15,7 @@ import { Timestamp } from '@patternfly/react-core';
 
 import { PipelineRunKind } from '@janus-idp/shared-react';
 
-import { tektonGroupColor } from '../../types/types';
+import { OpenRowStatus, tektonGroupColor } from '../../types/types';
 import { pipelineRunDuration } from '../../utils/tekton-utils';
 import { PipelineRunVisualization } from '../pipeline-topology';
 import PipelineRunTaskStatus from './PipelineRunTaskStatus';
@@ -39,8 +39,9 @@ type PipelineRunRowProps = {
   row: PipelineRunKind;
   startTime: string;
   isExpanded?: boolean;
-  rowIndex: number;
   plrCount: number;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<OpenRowStatus>>;
 };
 
 type PipelineRunNameProps = { row: PipelineRunKind };
@@ -62,39 +63,50 @@ const PipelineRunName = ({ row }: PipelineRunNameProps) => {
 export const PipelineRunRow = ({
   row,
   startTime,
-  rowIndex,
   plrCount,
   isExpanded,
+  open,
+  setOpen,
 }: PipelineRunRowProps) => {
   const classes = useStyles();
-  const [open, setOpen] = React.useState<boolean[]>(
-    [...Array(plrCount)].map(() => isExpanded ?? false),
-  );
 
   React.useEffect(() => {
     return isExpanded
-      ? setOpen(val => val.map(() => true))
-      : setOpen(val => val.map(() => false));
+      ? setOpen((val: OpenRowStatus) => {
+          return {
+            ...val,
+            ...(row.metadata?.uid && { [row.metadata?.uid]: true }),
+          };
+        })
+      : setOpen((val: OpenRowStatus) => {
+          return {
+            ...val,
+            ...(row.metadata?.uid && { [row.metadata?.uid]: false }),
+          };
+        });
   }, [isExpanded, plrCount]);
 
+  const expandCollapseClickHandler = () => {
+    setOpen((val: OpenRowStatus) => {
+      return {
+        ...val,
+        ...(row.metadata?.uid && {
+          [row.metadata?.uid]: !val[row.metadata?.uid],
+        }),
+      };
+    });
+  };
+
   return (
     <>
       <TableRow key={row.metadata?.uid} className={classes.plrRow}>
         <TableCell>
           <IconButton
             aria-label="expand row"
             size="small"
-            onClick={() =>
-              setOpen(val =>
-                val.map((v, index) => (index === rowIndex ? !v : v)),
-              )
-            }
+            onClick={expandCollapseClickHandler}
           >
-            {open[rowIndex] ? (
-              <KeyboardArrowDownIcon />
-            ) : (
-              <KeyboardArrowRightIcon />
-            )}
+            {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
           </IconButton>
         </TableCell>
         <TableCell align="left">
@@ -120,7 +132,7 @@ export const PipelineRunRow = ({
       </TableRow>
       <TableRow className={classes.plrVisRow}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse in={open[rowIndex]} timeout="auto" unmountOnExit>
+          <Collapse in={open} timeout="auto" unmountOnExit>
             <Box margin={1}>
               <PipelineRunVisualization pipelineRunName={row.metadata?.name} />
             </Box>

diff --git a/plugins/tekton/src/components/PipelineRunList/PipelineRunTableBody.tsx b/plugins/tekton/src/components/PipelineRunList/PipelineRunTableBody.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { PipelineRunKind } from '@janus-idp/shared-react';
 
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext';
+import { OpenRowStatus } from '../../types/types';
 import { PipelineRunRow } from './PipelineRunRow';
 
 type PipelineRunTableBodyProps = {
@@ -11,9 +12,18 @@ type PipelineRunTableBodyProps = {
 
 export const PipelineRunTableBody = ({ rows }: PipelineRunTableBodyProps) => {
   const { isExpanded } = React.useContext(TektonResourcesContext);
+  const [open, setOpen] = React.useState<OpenRowStatus>(
+    rows.reduce((acc, row) => {
+      if (row.metadata?.uid) {
+        acc[row.metadata?.uid] = isExpanded ?? false;
+      }
+      return acc;
+    }, {} as OpenRowStatus),
+  );
+
   return (
     <>
-      {rows.map((row, index, plrs) => {
+      {rows.map((row, _, plrs) => {
         const startTime = row.status?.startTime || '';
         const plrCount = plrs.length;
 
@@ -23,8 +33,9 @@ export const PipelineRunTableBody = ({ rows }: PipelineRunTableBodyProps) => {
             startTime={startTime}
             isExpanded={isExpanded}
             key={row.metadata?.uid}
-            rowIndex={index}
             plrCount={plrCount}
+            open={row.metadata?.uid ? open[row.metadata.uid] : false}
+            setOpen={setOpen}
           />
         );
       })}

diff --git a/plugins/tekton/src/types/types.ts b/plugins/tekton/src/types/types.ts
@@ -34,3 +34,7 @@ export type TektonResourcesContextData = {
 };
 
 export type Order = 'asc' | 'desc';
+
+export type OpenRowStatus = {
+  [x: string]: boolean;
+};