Skip to content

Commit

Permalink
🐛 MTA-1997 fix for column layout changing widths upon creation/de… (#…
Browse files Browse the repository at this point in the history 
…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]>
  • Loading branch information
@ibolton336
ibolton336 authored Apr 16, 2024
1 parent 837d9c1 commit 7680aee
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 173 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>
);
};
14 changes: 7 additions & 7 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 @@ -844,17 +844,17 @@ export const ApplicationsTable: React.FC = () => {
<Thead>
<Tr>
<TableHeaderContentWithControls {...tableControls}>
<Th {...getThProps({ columnKey: "name" })} width={15} />
<Th {...getThProps({ columnKey: "name" })} width={10} />
<Th
{...getThProps({ columnKey: "businessService" })}
width={15}
/>
<Th {...getThProps({ columnKey: "assessment" })} width={10} />
<Th {...getThProps({ columnKey: "review" })} width={10} />
<Th {...getThProps({ columnKey: "analysis" })} width={10} />
<Th {...getThProps({ columnKey: "assessment" })} width={15} />
<Th {...getThProps({ columnKey: "review" })} width={15} />
<Th {...getThProps({ columnKey: "analysis" })} width={15} />
<Th {...getThProps({ columnKey: "tags" })} width={10} />
<Th {...getThProps({ columnKey: "effort" })} width={10} />
<Th />
<Th width={10} />
</TableHeaderContentWithControls>
</Tr>
</Thead>
Expand Down Expand Up @@ -890,7 +890,7 @@ export const ApplicationsTable: React.FC = () => {
rowIndex={rowIndex}
>
<Td
width={15}
width={10}
{...getTdProps({ columnKey: "name" })}
modifier="truncate"
>
Expand Down Expand Up @@ -933,7 +933,7 @@ export const ApplicationsTable: React.FC = () => {
/>
</Td>
<Td
width={10}
width={15}
modifier="truncate"
{...getTdProps({ columnKey: "analysis" })}
>
Expand Down
124 changes: 64 additions & 60 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 @@ -225,9 +225,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 @@ -252,71 +256,71 @@ export const StakeholderGroups: React.FC = () => {
}
numRenderedColumns={numRenderedColumns}
>
{currentPageItems?.map((stakeholderGroup, rowIndex) => {
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>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.member(s)")}
</DescriptionListTerm>
{!!stakeholderGroup.stakeholders?.length && (
<DescriptionListDescription>
{stakeholderGroup.stakeholders
?.map((f) => f.name)
.join(", ")}
</DescriptionListDescription>
)}
</DescriptionListGroup>
</DescriptionList>
</ExpandableRowContent>
</Td>
</TableRowContentWithControls>
</Tr>
) : null}
</Tbody>
);
})}
{isCellExpanded(stakeholderGroup) ? (
<Tr isExpanded>
<Td />
<Td
{...getExpandedContentTdProps({
item: stakeholderGroup,
})}
className={spacing.pyLg}
>
<ExpandableRowContent>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.member(s)")}
</DescriptionListTerm>
{!!stakeholderGroup.stakeholders?.length && (
<DescriptionListDescription>
{stakeholderGroup.stakeholders
?.map((f) => f.name)
.join(", ")}
</DescriptionListDescription>
)}
</DescriptionListGroup>
</DescriptionList>
</ExpandableRowContent>
</Td>
</Tr>
) : null}
</>
);
})}
</Tbody>
</ConditionalTableBody>
</Table>
<SimplePagination
Expand Down
Loading

0 comments on commit 7680aee

Please sign in to comment.