Skip to content

Commit 7680aee

Browse files
ibolton336ibolton336
authored
🐛 MTA-1997 fix for column layout changing widths upon creation/de… (#1853)
…letion (#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. <!-- ## PR Title Prefix Every **PR Title** should be prefixed with :text: to indicate its type. - Breaking change: ⚠️ (`⚠️`) - Non-breaking feature: ✨ (`✨`) - Patch fix: 🐛 (`🐛`) - Docs: 📖 (`📖`) - Infra/Tests/Other: 🌱 (`🌱`) - No release note: 👻 (`👻`) For example, a pull request containing breaking changes might look like `⚠️ My pull request contains breaking changes`. Since GitHub supports emoji aliases (ie. `👻`), there is no need to include the emoji directly in the PR title -- **please use the alias**. It used to be the case that projects using emojis for PR typing had to include the emoji directly because GitHub didn't render the alias. Given that `⚠️` is easy enough to read as text, easy to parse in release tooling, and rendered in GitHub well, we prefer to standardize on the alias. For more information, please see the Konveyor [Versioning Doc](https://github.com/konveyor/release-tools/blob/main/VERSIONING.md). --> Signed-off-by: Ian Bolton <[email protected]>
1 parent 837d9c1 commit 7680aee

File tree

5 files changed

+181
-173
lines changed

5 files changed

+181
-173
lines changed

‎client/src/app/components/AppTableActionButtons.tsx

+25-26
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from "react";
22
import { useTranslation } from "react-i18next";
3-
import { Button, Flex, FlexItem } from "@patternfly/react-core";
3+
import { Button } from "@patternfly/react-core";
44
import { applicationsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
55
import { ConditionalTooltip } from "./ConditionalTooltip";
6+
import { Td } from "@patternfly/react-table";
67

78
export interface AppTableActionButtonsProps {
89
isDeleteEnabled?: boolean;
@@ -24,34 +25,32 @@ export const AppTableActionButtons: React.FC<AppTableActionButtonsProps> = ({
2425
allowedPermissions={applicationsWriteScopes}
2526
rbacType={RBAC_TYPE.Scope}
2627
>
27-
<Flex>
28-
<FlexItem align={{ default: "alignRight" }}>
28+
<Td isActionCell>
29+
<Button
30+
id="edit-button"
31+
aria-label="edit"
32+
variant="secondary"
33+
onClick={onEdit}
34+
>
35+
{t("actions.edit")}
36+
</Button>
37+
</Td>
38+
<Td isActionCell>
39+
<ConditionalTooltip
40+
isTooltipEnabled={isDeleteEnabled}
41+
content={tooltipMessage}
42+
>
2943
<Button
30-
id="edit-button"
31-
aria-label="edit"
32-
variant="secondary"
33-
onClick={onEdit}
44+
id="delete-button"
45+
aria-label="delete"
46+
variant="link"
47+
onClick={onDelete}
48+
isAriaDisabled={isDeleteEnabled}
3449
>
35-
{t("actions.edit")}
50+
{t("actions.delete")}
3651
</Button>
37-
</FlexItem>
38-
<FlexItem>
39-
<ConditionalTooltip
40-
isTooltipEnabled={isDeleteEnabled}
41-
content={tooltipMessage}
42-
>
43-
<Button
44-
id="delete-button"
45-
aria-label="delete"
46-
variant="link"
47-
onClick={onDelete}
48-
isAriaDisabled={isDeleteEnabled}
49-
>
50-
{t("actions.delete")}
51-
</Button>
52-
</ConditionalTooltip>
53-
</FlexItem>
54-
</Flex>
52+
</ConditionalTooltip>
53+
</Td>
5554
</RBAC>
5655
);
5756
};

‎client/src/app/pages/applications/applications-table/applications-table.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -844,17 +844,17 @@ export const ApplicationsTable: React.FC = () => {
844844
<Thead>
845845
<Tr>
846846
<TableHeaderContentWithControls {...tableControls}>
847-
<Th {...getThProps({ columnKey: "name" })} width={15} />
847+
<Th {...getThProps({ columnKey: "name" })} width={10} />
848848
<Th
849849
{...getThProps({ columnKey: "businessService" })}
850850
width={15}
851851
/>
852-
<Th {...getThProps({ columnKey: "assessment" })} width={10} />
853-
<Th {...getThProps({ columnKey: "review" })} width={10} />
854-
<Th {...getThProps({ columnKey: "analysis" })} width={10} />
852+
<Th {...getThProps({ columnKey: "assessment" })} width={15} />
853+
<Th {...getThProps({ columnKey: "review" })} width={15} />
854+
<Th {...getThProps({ columnKey: "analysis" })} width={15} />
855855
<Th {...getThProps({ columnKey: "tags" })} width={10} />
856856
<Th {...getThProps({ columnKey: "effort" })} width={10} />
857-
<Th />
857+
<Th width={10} />
858858
</TableHeaderContentWithControls>
859859
</Tr>
860860
</Thead>
@@ -890,7 +890,7 @@ export const ApplicationsTable: React.FC = () => {
890890
rowIndex={rowIndex}
891891
>
892892
<Td
893-
width={15}
893+
width={10}
894894
{...getTdProps({ columnKey: "name" })}
895895
modifier="truncate"
896896
>
@@ -933,7 +933,7 @@ export const ApplicationsTable: React.FC = () => {
933933
/>
934934
</Td>
935935
<Td
936-
width={10}
936+
width={15}
937937
modifier="truncate"
938938
{...getTdProps({ columnKey: "analysis" })}
939939
>

‎client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx

+64-60
Original file line numberDiff line numberDiff line change
@@ -225,9 +225,13 @@ export const StakeholderGroups: React.FC = () => {
225225
<Thead>
226226
<Tr>
227227
<TableHeaderContentWithControls {...tableControls}>
228-
<Th {...getThProps({ columnKey: "name" })} />
229-
<Th {...getThProps({ columnKey: "description" })} />
230-
<Th {...getThProps({ columnKey: "count" })} />
228+
<Th {...getThProps({ columnKey: "name" })} width={25} />
229+
<Th
230+
{...getThProps({ columnKey: "description" })}
231+
width={25}
232+
/>
233+
<Th {...getThProps({ columnKey: "count" })} width={40} />
234+
<Th width={10} />
231235
</TableHeaderContentWithControls>
232236
</Tr>
233237
</Thead>
@@ -252,71 +256,71 @@ export const StakeholderGroups: React.FC = () => {
252256
}
253257
numRenderedColumns={numRenderedColumns}
254258
>
255-
{currentPageItems?.map((stakeholderGroup, rowIndex) => {
256-
return (
257-
<Tbody
258-
key={stakeholderGroup.id}
259-
isExpanded={isCellExpanded(stakeholderGroup)}
260-
>
261-
<Tr {...getTrProps({ item: stakeholderGroup })}>
262-
<TableRowContentWithControls
263-
{...tableControls}
264-
item={stakeholderGroup}
265-
rowIndex={rowIndex}
266-
>
267-
<Td width={25} {...getTdProps({ columnKey: "name" })}>
268-
{stakeholderGroup.name}
269-
</Td>
270-
<Td
271-
width={10}
272-
{...getTdProps({ columnKey: "description" })}
259+
<Tbody key={stakeholderGroups?.length}>
260+
{currentPageItems?.map((stakeholderGroup, rowIndex) => {
261+
return (
262+
<>
263+
<Tr {...getTrProps({ item: stakeholderGroup })}>
264+
<TableRowContentWithControls
265+
{...tableControls}
266+
item={stakeholderGroup}
267+
rowIndex={rowIndex}
273268
>
274-
{stakeholderGroup.description}
275-
</Td>
276-
<Td width={10} {...getTdProps({ columnKey: "count" })}>
277-
{stakeholderGroup.stakeholders?.length}
278-
</Td>
279-
<Td width={20}>
269+
<Td width={25} {...getTdProps({ columnKey: "name" })}>
270+
{stakeholderGroup.name}
271+
</Td>
272+
<Td
273+
width={25}
274+
{...getTdProps({ columnKey: "description" })}
275+
>
276+
{stakeholderGroup.description}
277+
</Td>
278+
<Td
279+
width={40}
280+
{...getTdProps({ columnKey: "count" })}
281+
>
282+
{stakeholderGroup.stakeholders?.length}
283+
</Td>
280284
<AppTableActionButtons
281285
onEdit={() =>
282286
setCreateUpdateModalState(stakeholderGroup)
283287
}
284288
onDelete={() => deleteRow(stakeholderGroup)}
285289
/>
286-
</Td>
287-
</TableRowContentWithControls>
288-
</Tr>
289-
{isCellExpanded(stakeholderGroup) ? (
290-
<Tr isExpanded>
291-
<Td />
292-
<Td
293-
{...getExpandedContentTdProps({
294-
item: stakeholderGroup,
295-
})}
296-
className={spacing.pyLg}
297-
>
298-
<ExpandableRowContent>
299-
<DescriptionList>
300-
<DescriptionListGroup>
301-
<DescriptionListTerm>
302-
{t("terms.member(s)")}
303-
</DescriptionListTerm>
304-
{!!stakeholderGroup.stakeholders?.length && (
305-
<DescriptionListDescription>
306-
{stakeholderGroup.stakeholders
307-
?.map((f) => f.name)
308-
.join(", ")}
309-
</DescriptionListDescription>
310-
)}
311-
</DescriptionListGroup>
312-
</DescriptionList>
313-
</ExpandableRowContent>
314-
</Td>
290+
</TableRowContentWithControls>
315291
</Tr>
316-
) : null}
317-
</Tbody>
318-
);
319-
})}
292+
{isCellExpanded(stakeholderGroup) ? (
293+
<Tr isExpanded>
294+
<Td />
295+
<Td
296+
{...getExpandedContentTdProps({
297+
item: stakeholderGroup,
298+
})}
299+
className={spacing.pyLg}
300+
>
301+
<ExpandableRowContent>
302+
<DescriptionList>
303+
<DescriptionListGroup>
304+
<DescriptionListTerm>
305+
{t("terms.member(s)")}
306+
</DescriptionListTerm>
307+
{!!stakeholderGroup.stakeholders?.length && (
308+
<DescriptionListDescription>
309+
{stakeholderGroup.stakeholders
310+
?.map((f) => f.name)
311+
.join(", ")}
312+
</DescriptionListDescription>
313+
)}
314+
</DescriptionListGroup>
315+
</DescriptionList>
316+
</ExpandableRowContent>
317+
</Td>
318+
</Tr>
319+
) : null}
320+
</>
321+
);
322+
})}
323+
</Tbody>
320324
</ConditionalTableBody>
321325
</Table>
322326
<SimplePagination

0 commit comments

Comments
 (0)