From 89656b9456a99935bfe43ddc4dfe2f93fad6b08d Mon Sep 17 00:00:00 2001
From: Jaivardhan Kumar <mailjai.vardhan@gmail.com>
Date: Thu, 30 Nov 2023 13:59:20 +0530
Subject: [PATCH] fix(tekton): fix expand collapse with sorting of PLR list
 table

---
 .../PipelineRunList/PipelineRunRow.tsx        | 54 ++++++++++---------
 .../PipelineRunList/PipelineRunTableBody.tsx  | 17 ++++--
 plugins/tekton/src/types/types.ts             |  4 ++
 3 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx b/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx
index 91047ab231..5767a24274 100644
--- 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,8 @@ 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 +62,43 @@ const PipelineRunName = ({ row }: PipelineRunNameProps) => {
 export const PipelineRunRow = ({
   row,
   startTime,
-  rowIndex,
-  plrCount,
-  isExpanded,
+  isExpanded = false,
+  open,
+  setOpen,
 }: PipelineRunRowProps) => {
   const classes = useStyles();
-  const [open, setOpen] = React.useState<boolean[]>(
-    [...Array(plrCount)].map(() => isExpanded ?? false),
-  );
+  const uid = row.metadata?.uid;
 
   React.useEffect(() => {
-    return isExpanded
-      ? setOpen(val => val.map(() => true))
-      : setOpen(val => val.map(() => false));
-  }, [isExpanded, plrCount]);
+    return setOpen((val: OpenRowStatus) => {
+      return {
+        ...val,
+        ...(uid && { [uid]: isExpanded }),
+      };
+    });
+  }, [isExpanded, uid, setOpen]);
+
+  const expandCollapseClickHandler = () => {
+    setOpen((val: OpenRowStatus) => {
+      return {
+        ...val,
+        ...(uid && {
+          [uid]: !val[uid],
+        }),
+      };
+    });
+  };
 
   return (
     <>
-      <TableRow key={row.metadata?.uid} className={classes.plrRow}>
+      <TableRow key={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 +124,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
index e1c4501638..2374377366 100644
--- 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,11 +12,19 @@ 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: PipelineRunKind) => {
         const startTime = row.status?.startTime || '';
-        const plrCount = plrs.length;
 
         return (
           <PipelineRunRow
@@ -23,8 +32,8 @@ 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
index a47d539dd1..07cfd23064 100644
--- 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;
+};