diff --git a/client/src/app/hooks/table-controls/useTableControlProps.ts b/client/src/app/hooks/table-controls/useTableControlProps.ts index 872dff81b4..bd0c05cba5 100644 --- a/client/src/app/hooks/table-controls/useTableControlProps.ts +++ b/client/src/app/hooks/table-controls/useTableControlProps.ts @@ -17,7 +17,7 @@ export const useTableControlProps = < TItem, TColumnKey extends string, TSortableColumnKey extends TColumnKey, - TFilterCategoryKey extends string = string + TFilterCategoryKey extends string = string, >( args: IUseTableControlPropsArgs< TItem, @@ -102,6 +102,7 @@ export const useTableControlProps = < const tableProps: Omit = { variant, + isExpandable: !!expandableVariant, }; const getThProps = ({ diff --git a/client/src/app/pages/migration-waves/migration-waves.tsx b/client/src/app/pages/migration-waves/migration-waves.tsx index 09a17ffda5..d2ebd9e260 100644 --- a/client/src/app/pages/migration-waves/migration-waves.tsx +++ b/client/src/app/pages/migration-waves/migration-waves.tsx @@ -363,198 +363,194 @@ export const MigrationWaves: React.FC = () => { } numRenderedColumns={numRenderedColumns} > - - {currentPageItems?.map((migrationWave, rowIndex) => ( - <> - ( + + + - + {migrationWave.name} + + - - {migrationWave.name} - - - {dayjs(migrationWave.startDate) - .tz(currentTimezone) - .format("MM/DD/YYYY")} - - - {dayjs(migrationWave.endDate) - .tz(currentTimezone) - .format("MM/DD/YYYY")} - - - {migrationWave?.applications?.length.toString()} - - + + {dayjs(migrationWave.endDate) + .tz(currentTimezone) + .format("MM/DD/YYYY")} + + + {migrationWave?.applications?.length.toString()} + + + {migrationWave.allStakeholders.length} + + - {migrationWave.allStakeholders.length} - - + {migrationWave.applications.length + ? migrationWave.status + : "N/A"} + + + setIsRowDropdownOpen(null)} + onOpenChange={(_isOpen) => + setIsRowDropdownOpen(null) + } + popperProps={{ position: "right" }} + toggle={( + toggleRef: React.Ref + ) => ( + { + isRowDropdownOpen + ? setIsRowDropdownOpen(null) + : setIsRowDropdownOpen(migrationWave.id); + }} + isExpanded={isRowDropdownOpen === rowIndex} + > + + + )} + shouldFocusToggleOnSelect > - {migrationWave.applications.length - ? migrationWave.status - : "N/A"} - - - setIsRowDropdownOpen(null)} - onOpenChange={(_isOpen) => - setIsRowDropdownOpen(null) + setWaveModalState(migrationWave)} + > + {t("actions.edit")} + + - ) => ( - { - isRowDropdownOpen - ? setIsRowDropdownOpen(null) - : setIsRowDropdownOpen(migrationWave.id); - }} - isExpanded={isRowDropdownOpen === rowIndex} - > - - - )} - shouldFocusToggleOnSelect > setWaveModalState(migrationWave)} - > - {t("actions.edit")} - - { + setWaveToManageModalState(migrationWave); + }} > - { - setWaveToManageModalState(migrationWave); - }} - > - {t("composed.manage", { - what: t("terms.applications").toLowerCase(), - })} - - - + + + - - setApplicationsToExport( - migrationWave.fullApplications - ) - } - > - {t("terms.exportToIssue")} - - - - setMigrationWaveToDelete({ - id: migrationWave.id, - name: migrationWave.name, - }) + setApplicationsToExport( + migrationWave.fullApplications + ) } > - {t("actions.delete")} + {t("terms.exportToIssue")} - - - - - {isCellExpanded(migrationWave) ? ( - - - - {isCellExpanded(migrationWave, "applications") && - !!migrationWave.applications.length ? ( - + + setMigrationWaveToDelete({ + id: migrationWave.id, + name: migrationWave.name, + }) + } + > + {t("actions.delete")} + + + + + + {isCellExpanded(migrationWave) ? ( + + + + {isCellExpanded(migrationWave, "applications") && + !!migrationWave.applications.length ? ( + + ) : isCellExpanded(migrationWave, "stakeholders") && + !!migrationWave.allStakeholders.length ? ( + + ) : ( + isCellExpanded(migrationWave, "status") && ( + - ) : isCellExpanded( - migrationWave, - "stakeholders" - ) && !!migrationWave.allStakeholders.length ? ( - - ) : ( - isCellExpanded(migrationWave, "status") && ( - - ) - )} - - - - ) : null} - - ))} - + ) + )} + + + + ) : null} + + ))}