From 7680aeec2772b01991e55daf2ab6e58985ebabde Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Tue, 16 Apr 2024 11:08:52 -0400
Subject: [PATCH] =?UTF-8?q?:bug:=20MTA-1997=20fix=20for=20column=20layout?=
 =?UTF-8?q?=20changing=20widths=20upon=20creation/de=E2=80=A6=20(#1853)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…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: :warning: (`:warning:`)
- Non-breaking feature: :sparkles: (`:sparkles:`)
- Patch fix: :bug: (`:bug:`)
- Docs: :book: (`:book:`)
- Infra/Tests/Other: :seedling: (`:seedling:`)
- No release note: :ghost: (`:ghost:`)

For example, a pull request containing breaking changes might look like
`:warning: My pull request contains breaking changes`.

Since GitHub supports emoji aliases (ie. `:ghost:`), 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 `:warning:`
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 <ibolton@redhat.com>
---
 .../app/components/AppTableActionButtons.tsx  |  51 ++++---
 .../applications-table/applications-table.tsx |  14 +-
 .../stakeholder-groups/stakeholder-groups.tsx | 124 ++++++++--------
 .../controls/stakeholders/stakeholders.tsx    | 136 +++++++++---------
 client/src/app/pages/controls/tags/tags.tsx   |  29 ++--
 5 files changed, 181 insertions(+), 173 deletions(-)

diff --git a/client/src/app/components/AppTableActionButtons.tsx b/client/src/app/components/AppTableActionButtons.tsx
index 9e01ceaf72..550f196568 100644
--- a/client/src/app/components/AppTableActionButtons.tsx
+++ b/client/src/app/components/AppTableActionButtons.tsx
@@ -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;
@@ -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>
   );
 };
diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
index 0193627b8f..78e71d5d95 100644
--- a/client/src/app/pages/applications/applications-table/applications-table.tsx
+++ b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -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>
@@ -890,7 +890,7 @@ export const ApplicationsTable: React.FC = () => {
                       rowIndex={rowIndex}
                     >
                       <Td
-                        width={15}
+                        width={10}
                         {...getTdProps({ columnKey: "name" })}
                         modifier="truncate"
                       >
@@ -933,7 +933,7 @@ export const ApplicationsTable: React.FC = () => {
                         />
                       </Td>
                       <Td
-                        width={10}
+                        width={15}
                         modifier="truncate"
                         {...getTdProps({ columnKey: "analysis" })}
                       >
diff --git a/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
index ae388d4b7f..2d9bf3f1f6 100644
--- a/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
+++ b/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
@@ -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>
@@ -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
diff --git a/client/src/app/pages/controls/stakeholders/stakeholders.tsx b/client/src/app/pages/controls/stakeholders/stakeholders.tsx
index cf8a16540e..04d4c21f10 100644
--- a/client/src/app/pages/controls/stakeholders/stakeholders.tsx
+++ b/client/src/app/pages/controls/stakeholders/stakeholders.tsx
@@ -233,10 +233,14 @@ export const Stakeholders: React.FC = () => {
             <Thead>
               <Tr>
                 <TableHeaderContentWithControls {...tableControls}>
-                  <Th {...getThProps({ columnKey: "email" })} />
-                  <Th {...getThProps({ columnKey: "name" })} />
-                  <Th {...getThProps({ columnKey: "jobFunction" })} />
-                  <Th {...getThProps({ columnKey: "groupCount" })} />
+                  <Th {...getThProps({ columnKey: "email" })} width={30} />
+                  <Th {...getThProps({ columnKey: "name" })} width={20} />
+                  <Th
+                    {...getThProps({ columnKey: "jobFunction" })}
+                    width={20}
+                  />
+                  <Th {...getThProps({ columnKey: "groupCount" })} width={20} />
+                  <Th width={10} />
                 </TableHeaderContentWithControls>
               </Tr>
             </Thead>
@@ -261,75 +265,77 @@ export const Stakeholders: React.FC = () => {
               }
               numRenderedColumns={numRenderedColumns}
             >
-              {currentPageItems?.map((stakeholder, rowIndex) => {
-                return (
-                  <Tbody
-                    key={stakeholder.id}
-                    isExpanded={isCellExpanded(stakeholder)}
-                  >
-                    <Tr {...getTrProps({ item: stakeholder })}>
-                      <TableRowContentWithControls
-                        {...tableControls}
-                        item={stakeholder}
-                        rowIndex={rowIndex}
-                      >
-                        <Td width={25} {...getTdProps({ columnKey: "email" })}>
-                          {stakeholder.email}
-                        </Td>
-                        <Td width={10} {...getTdProps({ columnKey: "name" })}>
-                          {stakeholder.name}
-                        </Td>
-                        <Td
-                          width={10}
-                          {...getTdProps({ columnKey: "jobFunction" })}
-                        >
-                          {stakeholder.jobFunction?.name}
-                        </Td>
-                        <Td
-                          width={10}
-                          {...getTdProps({ columnKey: "groupCount" })}
+              <Tbody key={currentPageItems.length}>
+                {currentPageItems?.map((stakeholder, rowIndex) => {
+                  return (
+                    <>
+                      <Tr {...getTrProps({ item: stakeholder })}>
+                        <TableRowContentWithControls
+                          {...tableControls}
+                          item={stakeholder}
+                          rowIndex={rowIndex}
                         >
-                          {stakeholder.stakeholderGroups?.length}
-                        </Td>
-                        <Td width={20}>
+                          <Td
+                            width={30}
+                            {...getTdProps({ columnKey: "email" })}
+                          >
+                            {stakeholder.email}
+                          </Td>
+                          <Td width={20} {...getTdProps({ columnKey: "name" })}>
+                            {stakeholder.name}
+                          </Td>
+                          <Td
+                            width={20}
+                            {...getTdProps({ columnKey: "jobFunction" })}
+                          >
+                            {stakeholder.jobFunction?.name}
+                          </Td>
+                          <Td
+                            width={20}
+                            {...getTdProps({ columnKey: "groupCount" })}
+                          >
+                            {stakeholder.stakeholderGroups?.length}
+                          </Td>
                           <AppTableActionButtons
                             onEdit={() =>
                               setCreateUpdateModalState(stakeholder)
                             }
                             onDelete={() => deleteRow(stakeholder)}
                           />
-                        </Td>
-                      </TableRowContentWithControls>
-                    </Tr>
-                    {isCellExpanded(stakeholder) ? (
-                      <Tr isExpanded>
-                        <Td />
-                        <Td
-                          {...getExpandedContentTdProps({ item: stakeholder })}
-                          className={spacing.pyLg}
-                        >
-                          <ExpandableRowContent>
-                            <DescriptionList>
-                              <DescriptionListGroup>
-                                <DescriptionListTerm>
-                                  {t("terms.group(s)")}
-                                </DescriptionListTerm>
-                                {!!stakeholder.stakeholderGroups?.length && (
-                                  <DescriptionListDescription>
-                                    {stakeholder.stakeholderGroups
-                                      ?.map((f) => f.name)
-                                      .join(", ")}
-                                  </DescriptionListDescription>
-                                )}
-                              </DescriptionListGroup>
-                            </DescriptionList>
-                          </ExpandableRowContent>
-                        </Td>
+                        </TableRowContentWithControls>
                       </Tr>
-                    ) : null}
-                  </Tbody>
-                );
-              })}
+                      {isCellExpanded(stakeholder) ? (
+                        <Tr isExpanded>
+                          <Td />
+                          <Td
+                            {...getExpandedContentTdProps({
+                              item: stakeholder,
+                            })}
+                            className={spacing.pyLg}
+                          >
+                            <ExpandableRowContent>
+                              <DescriptionList>
+                                <DescriptionListGroup>
+                                  <DescriptionListTerm>
+                                    {t("terms.group(s)")}
+                                  </DescriptionListTerm>
+                                  {!!stakeholder.stakeholderGroups?.length && (
+                                    <DescriptionListDescription>
+                                      {stakeholder.stakeholderGroups
+                                        ?.map((f) => f.name)
+                                        .join(", ")}
+                                    </DescriptionListDescription>
+                                  )}
+                                </DescriptionListGroup>
+                              </DescriptionList>
+                            </ExpandableRowContent>
+                          </Td>
+                        </Tr>
+                      ) : null}
+                    </>
+                  );
+                })}
+              </Tbody>
             </ConditionalTableBody>
           </Table>
           <SimplePagination
diff --git a/client/src/app/pages/controls/tags/tags.tsx b/client/src/app/pages/controls/tags/tags.tsx
index abbe2e8f60..bf654ba8c4 100644
--- a/client/src/app/pages/controls/tags/tags.tsx
+++ b/client/src/app/pages/controls/tags/tags.tsx
@@ -318,10 +318,11 @@ export const Tags: React.FC = () => {
             <Thead>
               <Tr>
                 <TableHeaderContentWithControls {...tableControls}>
-                  <Th {...getThProps({ columnKey: "name" })} />
-                  <Th {...getThProps({ columnKey: "rank" })} />
-                  <Th {...getThProps({ columnKey: "color" })} />
-                  <Th {...getThProps({ columnKey: "tagCount" })} />
+                  <Th {...getThProps({ columnKey: "name" })} width={30} />
+                  <Th {...getThProps({ columnKey: "rank" })} width={20} />
+                  <Th {...getThProps({ columnKey: "color" })} width={20} />
+                  <Th {...getThProps({ columnKey: "tagCount" })} width={20} />
+                  <Th width={10} />
                 </TableHeaderContentWithControls>
               </Tr>
             </Thead>
@@ -379,20 +380,18 @@ export const Tags: React.FC = () => {
                         >
                           {tagCategory.tags?.length || 0}
                         </Td>
-                        <Td width={20}>
-                          <AppTableActionButtons
-                            isDeleteEnabled={!!tagCategory.tags?.length}
-                            tooltipMessage={t(
-                              "message.cannotDeleteNonEmptyTagCategory"
-                            )}
-                            onEdit={() => setTagCategoryModalState(tagCategory)}
-                            onDelete={() => setTagCategoryToDelete(tagCategory)}
-                          />
-                        </Td>
+                        <AppTableActionButtons
+                          isDeleteEnabled={!!tagCategory.tags?.length}
+                          tooltipMessage={t(
+                            "message.cannotDeleteNonEmptyTagCategory"
+                          )}
+                          onEdit={() => setTagCategoryModalState(tagCategory)}
+                          onDelete={() => setTagCategoryToDelete(tagCategory)}
+                        />
                       </TableRowContentWithControls>
                     </Tr>
                     {isCellExpanded(tagCategory) && (
-                      <Tr>
+                      <Tr isExpanded>
                         <Td colSpan={numRenderedColumns}>
                           <ExpandableRowContent>
                             {hasTags ? (