Skip to content

Commit

Permalink
Arrangement ActionsColumn
Browse files Browse the repository at this point in the history 
Signed-off-by: sari weinberger <[email protected]>
  • Loading branch information
@sarinailinger
sarinailinger committed Oct 8, 2024
1 parent 0e10573 commit 69f4540
Showing 1 changed file with 117 additions and 144 deletions.
261 changes: 117 additions & 144 deletions client/src/app/pages/migration-waves/migration-waves.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,129 +390,101 @@ export const MigrationWaves: React.FC = () => {
}
numRenderedColumns={numRenderedColumns}
>
{currentPageItems?.map((migrationWave, rowIndex) => (
<Tbody
key={migrationWave.id}
isExpanded={isCellExpanded(migrationWave)}
>
<Tr {...getTrProps({ item: migrationWave })}>
<TableRowContentWithControls
{...tableControls}
item={migrationWave}
rowIndex={rowIndex}
>
<Td width={25} {...getTdProps({ columnKey: "name" })}>
{migrationWave.name}
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "startDate" })}
>
{dayjs(migrationWave.startDate)
.tz(currentTimezone)
.format("MM/DD/YYYY")}
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "endDate" })}
>
{dayjs(migrationWave.endDate)
.tz(currentTimezone)
.format("MM/DD/YYYY")}
</Td>
<Td
width={10}
{...getTdProps({
columnKey: "applications",
isCompoundExpandToggle: true,
item: migrationWave,
rowIndex,
})}
>
{migrationWave?.applications?.length.toString()}
</Td>
<Td
width={10}
{...getTdProps({
columnKey: "stakeholders",
isCompoundExpandToggle: true,
item: migrationWave,
rowIndex,
})}
>
{migrationWave.allStakeholders.length}
</Td>
<Td
width={20}
{...getTdProps({
columnKey: "status",
isCompoundExpandToggle:
!!migrationWave.applications.length ||
migrationWave.status === "No Issues",
item: migrationWave,
rowIndex,
})}
{currentPageItems?.map((migrationWave, rowIndex) => {
return (
<Tbody
key={migrationWave.id}
isExpanded={isCellExpanded(migrationWave)}
>
<Tr {...getTrProps({ item: migrationWave })}>
<TableRowContentWithControls
{...tableControls}
item={migrationWave}
rowIndex={rowIndex}
>
{migrationWave.applications.length
? migrationWave.status
: "--"}
</Td>
<Td isActionCell id="pencil-action">
<Tooltip content={t("actions.edit")}>
<Button
variant="plain"
icon={<PencilAltIcon />}
onClick={() => setWaveModalState(migrationWave)}
/>
</Tooltip>
</Td>
<Td isActionCell id="row-actions">
<Dropdown
isOpen={isRowDropdownOpen === migrationWave.id}
onSelect={() => setIsRowDropdownOpen(null)}
onOpenChange={(_isOpen) =>
setIsRowDropdownOpen(null)
}
popperProps={{ position: "right" }}
toggle={(
toggleRef: React.Ref<MenuToggleElement>
) => (
<MenuToggle
ref={toggleRef}
aria-label="row actions dropdown toggle"
variant="plain"
onClick={() => {
isRowDropdownOpen
? setIsRowDropdownOpen(null)
: setIsRowDropdownOpen(migrationWave.id);
}}
isExpanded={isRowDropdownOpen === rowIndex}
>
<EllipsisVIcon />
</MenuToggle>
)}
shouldFocusToggleOnSelect
<Td width={25} {...getTdProps({ columnKey: "name" })}>
{migrationWave.name}
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "startDate" })}
>
{dayjs(migrationWave.startDate)
.tz(currentTimezone)
.format("MM/DD/YYYY")}
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "endDate" })}
>
{dayjs(migrationWave.endDate)
.tz(currentTimezone)
.format("MM/DD/YYYY")}
</Td>
<Td
width={10}
{...getTdProps({
columnKey: "applications",
isCompoundExpandToggle: true,
item: migrationWave,
rowIndex,
})}
>
{migrationWave?.applications?.length.toString()}
</Td>
<Td
width={10}
{...getTdProps({
columnKey: "stakeholders",
isCompoundExpandToggle: true,
item: migrationWave,
rowIndex,
})}
>
{migrationWave.allStakeholders.length}
</Td>
<Td
width={20}
{...getTdProps({
columnKey: "status",
isCompoundExpandToggle:
!!migrationWave.applications.length ||
migrationWave.status === "No Issues",
item: migrationWave,
rowIndex,
})}
>
{migrationWave.applications.length
? migrationWave.status
: "--"}
</Td>
<Td isActionCell id="pencil-action">
<Tooltip content={t("actions.edit")}>
<Button
variant="plain"
icon={<PencilAltIcon />}
onClick={() => setWaveModalState(migrationWave)}
/>
</Tooltip>
</Td>
<Td isActionCell id="row-actions">
<ActionsColumn
open={isRowDropdownOpen === migrationWave.id}
items={[
// {
// title: t("actions.edit"),
// onClick: () => setWaveModalState(migrationWave),
// },
{
isAriaDisabled:
migrationWave.applications.length === 0,
migrationWave.applications?.length < 1,
tooltipProps: {
content:
migrationWave.applications.length === 0
migrationWave.applications?.length < 1
? "No applications are available for assignment."
: "",
},
title: t("composed.manage", {
what: t("terms.applications").toLowerCase(),
}),
onClick: () => {
if (migrationWave.applications.length > 0) {
{
setWaveToManageModalState(migrationWave);
}
},
Expand All @@ -537,7 +509,6 @@ export const MigrationWaves: React.FC = () => {
title: t("terms.exportToIssue"),
onClick: () => {
if (
migrationWave.applications?.length > 0 &&
hasExportableApplications(
tickets,
migrationWave?.applications
Expand All @@ -561,44 +532,46 @@ export const MigrationWaves: React.FC = () => {
},
]}
/>
</Dropdown>
</Td>
</TableRowContentWithControls>
</Tr>
{isCellExpanded(migrationWave) ? (
<Tr isExpanded>
<Td
{...getExpandedContentTdProps({
item: migrationWave,
})}
>
<ExpandableRowContent>
{isCellExpanded(migrationWave, "applications") &&
!!migrationWave.applications.length ? (
<WaveApplicationsTable
migrationWave={migrationWave}
removeApplication={removeApplication}
/>
) : isCellExpanded(migrationWave, "stakeholders") &&
!!migrationWave.allStakeholders.length ? (
<WaveStakeholdersTable
migrationWave={migrationWave}
/>
) : (
isCellExpanded(migrationWave, "status") && (
<WaveStatusTable
</Td>
</TableRowContentWithControls>
</Tr>
{isCellExpanded(migrationWave) ? (
<Tr isExpanded>
<Td
{...getExpandedContentTdProps({
item: migrationWave,
})}
>
<ExpandableRowContent>
{isCellExpanded(migrationWave, "applications") &&
!!migrationWave.applications.length ? (
<WaveApplicationsTable
migrationWave={migrationWave}
removeApplication={removeApplication}
setCellExpanded={setCellExpanded}
/>
)
)}
</ExpandableRowContent>
</Td>
</Tr>
) : null}
</Tbody>
))}
) : isCellExpanded(
migrationWave,
"stakeholders"
) && !!migrationWave.allStakeholders.length ? (
<WaveStakeholdersTable
migrationWave={migrationWave}
/>
) : (
isCellExpanded(migrationWave, "status") && (
<WaveStatusTable
migrationWave={migrationWave}
removeApplication={removeApplication}
setCellExpanded={setCellExpanded}
/>
)
)}
</ExpandableRowContent>
</Td>
</Tr>
) : null}
</Tbody>
);
})}
</ConditionalTableBody>
</Table>
<SimplePagination
Expand Down

0 comments on commit 69f4540

Please sign in to comment.