Skip to content

Commit

Permalink
🐛 MTA-1997 fix for column layout changing widths upon creation/deleti…
Browse files Browse the repository at this point in the history 
…on (konveyor#1807)

Resolves https://issues.redhat.com/browse/MTA-1997 
Match space allocation between column headers and rows to prevent layout
shift when the first / last item is added / removed from the table.
Before:


https://github.com/konveyor/tackle2-ui/assets/11218376/e5564ea6-e78c-4fc0-92f2-dea496d6b88f


After: 



https://github.com/konveyor/tackle2-ui/assets/11218376/7d12ddbd-c46a-4b06-970d-876fe2f90421

- Also addresses mishandling of TBody resulting in several Tbody
elements rendered for each row in the table.

Signed-off-by: Ian Bolton <ibolton@redhat.com>
  • Loading branch information
@ibolton336
ibolton336 committed Apr 16, 2024
1 parent 655b493 commit d8d1ede
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 186 deletions.
51 changes: 25 additions & 26 deletions client/src/app/components/AppTableActionButtons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Button, Flex, FlexItem } from "@patternfly/react-core";
import { Button } from "@patternfly/react-core";
import { applicationsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
import { ConditionalTooltip } from "./ConditionalTooltip";
import { Td } from "@patternfly/react-table";

export interface AppTableActionButtonsProps {
isDeleteEnabled?: boolean;
Expand All @@ -24,34 +25,32 @@ export const AppTableActionButtons: React.FC<AppTableActionButtonsProps> = ({
allowedPermissions={applicationsWriteScopes}
rbacType={RBAC_TYPE.Scope}
>
<Flex>
<FlexItem align={{ default: "alignRight" }}>
<Td isActionCell>
<Button
id="edit-button"
aria-label="edit"
variant="secondary"
onClick={onEdit}
>
{t("actions.edit")}
</Button>
</Td>
<Td isActionCell>
<ConditionalTooltip
isTooltipEnabled={isDeleteEnabled}
content={tooltipMessage}
>
<Button
id="edit-button"
aria-label="edit"
variant="secondary"
onClick={onEdit}
id="delete-button"
aria-label="delete"
variant="link"
onClick={onDelete}
isAriaDisabled={isDeleteEnabled}
>
{t("actions.edit")}
{t("actions.delete")}
</Button>
</FlexItem>
<FlexItem>
<ConditionalTooltip
isTooltipEnabled={isDeleteEnabled}
content={tooltipMessage}
>
<Button
id="delete-button"
aria-label="delete"
variant="link"
onClick={onDelete}
isAriaDisabled={isDeleteEnabled}
>
{t("actions.delete")}
</Button>
</ConditionalTooltip>
</FlexItem>
</Flex>
</ConditionalTooltip>
</Td>
</RBAC>
);
};
12 changes: 6 additions & 6 deletions client/src/app/pages/applications/applications-table/applications-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -824,7 +824,7 @@ export const ApplicationsTable: React.FC = () => {
<Tr>
<TableHeaderContentWithControls {...tableControls}>
{getColumnVisibility("name") && (
<Th {...getThProps({ columnKey: "name" })} width={15} />
<Th {...getThProps({ columnKey: "name" })} width={10} />
)}
{getColumnVisibility("businessService") && (
<Th
Expand All @@ -836,18 +836,18 @@ export const ApplicationsTable: React.FC = () => {
<Th {...getThProps({ columnKey: "assessment" })} width={15} />
)}
{getColumnVisibility("review") && (
<Th {...getThProps({ columnKey: "review" })} width={10} />
<Th {...getThProps({ columnKey: "review" })} width={15} />
)}
{getColumnVisibility("analysis") && (
<Th {...getThProps({ columnKey: "analysis" })} width={10} />
<Th {...getThProps({ columnKey: "analysis" })} width={15} />
)}
{getColumnVisibility("tags") && (
<Th {...getThProps({ columnKey: "tags" })} width={10} />
)}
{getColumnVisibility("effort") && (
<Th {...getThProps({ columnKey: "effort" })} width={10} />
)}
<Th />
<Th width={10} />
</TableHeaderContentWithControls>
</Tr>
</Thead>
Expand Down Expand Up @@ -885,7 +885,7 @@ export const ApplicationsTable: React.FC = () => {
>
{getColumnVisibility("name") && (
<Td
width={15}
width={10}
{...getTdProps({ columnKey: "name" })}
modifier="truncate"
>
Expand Down Expand Up @@ -936,7 +936,7 @@ export const ApplicationsTable: React.FC = () => {
)}
{getColumnVisibility("analysis") && (
<Td
width={10}
width={15}
modifier="truncate"
{...getTdProps({ columnKey: "analysis" })}
>
Expand Down
116 changes: 51 additions & 65 deletions client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,9 +226,13 @@ export const StakeholderGroups: React.FC = () => {
<Thead>
<Tr>
<TableHeaderContentWithControls {...tableControls}>
<Th {...getThProps({ columnKey: "name" })} />
<Th {...getThProps({ columnKey: "description" })} />
<Th {...getThProps({ columnKey: "count" })} />
<Th {...getThProps({ columnKey: "name" })} width={25} />
<Th
{...getThProps({ columnKey: "description" })}
width={25}
/>
<Th {...getThProps({ columnKey: "count" })} width={40} />
<Th width={10} />
</TableHeaderContentWithControls>
</Tr>
</Thead>
Expand All @@ -254,52 +258,49 @@ export const StakeholderGroups: React.FC = () => {
}
numRenderedColumns={numRenderedColumns}
>
{currentPageItems?.map((stakeholderGroup, rowIndex) => {
const hasStakeholders = stakeholderGroup.stakeholders?.length;
return (
<Tbody
key={stakeholderGroup.id}
isExpanded={isCellExpanded(stakeholderGroup)}
>
<Tr {...getTrProps({ item: stakeholderGroup })}>
<TableRowContentWithControls
{...tableControls}
item={stakeholderGroup}
rowIndex={rowIndex}
>
<Td width={25} {...getTdProps({ columnKey: "name" })}>
{stakeholderGroup.name}
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "description" })}
<Tbody key={stakeholderGroups?.length}>
{currentPageItems?.map((stakeholderGroup, rowIndex) => {
return (
<>
<Tr {...getTrProps({ item: stakeholderGroup })}>
<TableRowContentWithControls
{...tableControls}
item={stakeholderGroup}
rowIndex={rowIndex}
>
{stakeholderGroup.description}
</Td>
<Td width={10} {...getTdProps({ columnKey: "count" })}>
{stakeholderGroup.stakeholders?.length}
</Td>
<Td width={20}>
<Td width={25} {...getTdProps({ columnKey: "name" })}>
{stakeholderGroup.name}
</Td>
<Td
width={25}
{...getTdProps({ columnKey: "description" })}
>
{stakeholderGroup.description}
</Td>
<Td
width={40}
{...getTdProps({ columnKey: "count" })}
>
{stakeholderGroup.stakeholders?.length}
</Td>
<AppTableActionButtons
onEdit={() =>
setCreateUpdateModalState(stakeholderGroup)
}
onDelete={() => deleteRow(stakeholderGroup)}
/>
</Td>
</TableRowContentWithControls>
</Tr>
{isCellExpanded(stakeholderGroup) ? (
<Tr isExpanded>
<Td />
<Td
{...getExpandedContentTdProps({
item: stakeholderGroup,
})}
className={spacing.pyLg}
>
<ExpandableRowContent>
{hasStakeholders ? (
</TableRowContentWithControls>
</Tr>
{isCellExpanded(stakeholderGroup) ? (
<Tr isExpanded>
<Td />
<Td
{...getExpandedContentTdProps({
item: stakeholderGroup,
})}
className={spacing.pyLg}
>
<ExpandableRowContent>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>
Expand All @@ -314,29 +315,14 @@ export const StakeholderGroups: React.FC = () => {
)}
</DescriptionListGroup>
</DescriptionList>
) : (
<EmptyState variant="sm">
<EmptyStateIcon icon={CubesIcon} />
<Title headingLevel="h2" size="lg">
{t("composed.noDataStateTitle", {
what: t("terms.stakeholder").toLowerCase(),
})}
</Title>
<EmptyStateBody>
{t("composed.noDataStateBody", {
how: t("terms.add"),
what: t("terms.stakeholder").toLowerCase(),
})}
</EmptyStateBody>
</EmptyState>
)}
</ExpandableRowContent>
</Td>
</Tr>
) : null}
</Tbody>
);
})}
</ExpandableRowContent>
</Td>
</Tr>
) : null}
</>
);
})}
</Tbody>
</ConditionalTableBody>
</Table>
<SimplePagination
Expand Down
Loading

0 comments on commit d8d1ede

Please sign in to comment.