From 2d55320d81c8afbf847736194f44c2e7fb96e18e Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Mon, 10 Jun 2024 16:08:29 -0400
Subject: [PATCH] :bug: Fix effort width & visibility conditional removed in
 app table (#1947)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Noticed some odd behavior in the app table.

Width and column visibility conditional removed from the effort col here:

https://github.com/konveyor/tackle2-ui/pull/1846/files#diff-7215462f9c61fbbe2362b5f02a64aa2f56a9b6b47fab387f8a7e9c5819c92a8eL848

Before:
![image](https://github.com/konveyor/tackle2-ui/assets/11218376/249e9953-1d41-49ec-a6a7-526e63eeacba)

After:
<img width="1912" alt="Screenshot 2024-06-07 at 10 58 22 AM"
src="https://github.com/konveyor/tackle2-ui/assets/11218376/79211a81-7ad2-4472-b687-84f1de767187">

This PR fixes these regressions in the app table and replaces custom
tooltips with the tooltip behavior included within the <Th/> component
via the info prop.

---------

Signed-off-by: Ian Bolton <ibolton@redhat.com>
---
 .../applications-table/applications-table.tsx | 36 ++++++-------------
 .../affected-applications.tsx                 | 28 +++------------
 .../issue-affected-files-table.tsx            | 31 +++++-----------
 client/src/app/pages/issues/issues-table.tsx  | 26 ++++----------
 4 files changed, 28 insertions(+), 93 deletions(-)

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 0bdcb6fd9..ed4ce863c 100644
--- a/client/src/app/pages/applications/applications-table/applications-table.tsx
+++ b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -15,14 +15,8 @@ import {
   DropdownItem,
   Modal,
   Tooltip,
-  Flex,
-  FlexItem,
 } from "@patternfly/react-core";
-import {
-  PencilAltIcon,
-  QuestionCircleIcon,
-  TagIcon,
-} from "@patternfly/react-icons";
+import { PencilAltIcon, TagIcon } from "@patternfly/react-icons";
 import {
   Table,
   Thead,
@@ -847,25 +841,15 @@ export const ApplicationsTable: React.FC = () => {
                 {getColumnVisibility("tags") && (
                   <Th {...getThProps({ columnKey: "tags" })} width={10} />
                 )}
-                <Th {...getThProps({ columnKey: "effort" })}>
-                  <Flex
-                    flexWrap={{ default: "nowrap" }}
-                    spaceItems={{ default: "spaceItemsSm" }}
-                    alignItems={{ default: "alignItemsCenter" }}
-                  >
-                    <FlexItem>{t("terms.effort")}</FlexItem>
-                    <FlexItem>
-                      <Tooltip
-                        content={t("message.applicationEffortTooltip")}
-                        position="top"
-                      >
-                        <Flex>
-                          <QuestionCircleIcon />
-                        </Flex>
-                      </Tooltip>
-                    </FlexItem>
-                  </Flex>
-                </Th>
+                {getColumnVisibility("effort") && (
+                  <Th
+                    {...getThProps({ columnKey: "effort" })}
+                    width={10}
+                    info={{
+                      tooltip: `${t("message.applicationEffortTooltip")}`,
+                    }}
+                  />
+                )}
                 <Th width={10} />
               </TableHeaderContentWithControls>
             </Tr>
diff --git a/client/src/app/pages/issues/affected-applications/affected-applications.tsx b/client/src/app/pages/issues/affected-applications/affected-applications.tsx
index bc9ba6f70..53e235c47 100644
--- a/client/src/app/pages/issues/affected-applications/affected-applications.tsx
+++ b/client/src/app/pages/issues/affected-applications/affected-applications.tsx
@@ -2,8 +2,6 @@ import * as React from "react";
 import {
   Breadcrumb,
   BreadcrumbItem,
-  Flex,
-  FlexItem,
   PageSection,
   PageSectionVariants,
   Text,
@@ -11,7 +9,6 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarItem,
-  Tooltip,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
@@ -39,7 +36,6 @@ import {
 } from "../helpers";
 import { IssueDetailDrawer } from "../issue-detail-drawer";
 import { TablePersistenceKeyPrefix } from "@app/Constants";
-import { QuestionCircleIcon } from "@patternfly/react-icons";
 
 interface IAffectedApplicationsRouteParams {
   ruleset: string;
@@ -187,26 +183,10 @@ export const AffectedApplications: React.FC = () => {
                     <Th {...getThProps({ columnKey: "businessService" })} />
                     <Th
                       {...getThProps({ columnKey: "effort" })}
-                      style={{ paddingRight: 0 }}
-                    >
-                      <Flex
-                        flexWrap={{ default: "nowrap" }}
-                        spaceItems={{ default: "spaceItemsSm" }}
-                        alignItems={{ default: "alignItemsCenter" }}
-                      >
-                        <FlexItem>{t("terms.effort")}</FlexItem>
-                        <FlexItem>
-                          <Tooltip
-                            content={t("message.applicationEffortTooltip")}
-                            position="top"
-                          >
-                            <Flex>
-                              <QuestionCircleIcon />
-                            </Flex>
-                          </Tooltip>
-                        </FlexItem>
-                      </Flex>
-                    </Th>
+                      info={{
+                        tooltip: `${t("message.applicationEffortTooltip")}`,
+                      }}
+                    />
                     <Th {...getThProps({ columnKey: "incidents" })} />
                   </TableHeaderContentWithControls>
                 </Tr>
diff --git a/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx b/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
index a73b3718f..404df21fb 100644
--- a/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
+++ b/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
@@ -2,12 +2,9 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import {
   Button,
-  Flex,
-  FlexItem,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
-  Tooltip,
 } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
@@ -29,7 +26,6 @@ import { SimplePagination } from "@app/components/SimplePagination";
 import { FileIncidentsDetailModal } from "./file-incidents-detail-modal";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
 import PathDisplay from "./path-display";
-import { QuestionCircleIcon } from "@patternfly/react-icons";
 
 export interface IIssueAffectedFilesTableProps {
   issue: AnalysisIssue;
@@ -140,25 +136,14 @@ export const IssueAffectedFilesTable: React.FC<
                 {...getThProps({ columnKey: "incidents" })}
                 modifier="nowrap"
               />
-              <Th {...getThProps({ columnKey: "effort" })}>
-                <Flex
-                  flexWrap={{ default: "nowrap" }}
-                  spaceItems={{ default: "spaceItemsSm" }}
-                  alignItems={{ default: "alignItemsCenter" }}
-                >
-                  <FlexItem>{t("terms.effort")}</FlexItem>
-                  <FlexItem>
-                    <Tooltip
-                      content={t("message.affectedAppEffortTooltip")}
-                      position="top"
-                    >
-                      <Flex>
-                        <QuestionCircleIcon />
-                      </Flex>
-                    </Tooltip>
-                  </FlexItem>
-                </Flex>
-              </Th>
+              <Th
+                {...getThProps({ columnKey: "effort" })}
+                width={10}
+                info={{
+                  tooltip: `${t("message.affectedAppEffortTooltip")}`,
+                }}
+                modifier="nowrap"
+              />
             </TableHeaderContentWithControls>
           </Tr>
         </Thead>
diff --git a/client/src/app/pages/issues/issues-table.tsx b/client/src/app/pages/issues/issues-table.tsx
index dcf6a3cd0..63bbe5074 100644
--- a/client/src/app/pages/issues/issues-table.tsx
+++ b/client/src/app/pages/issues/issues-table.tsx
@@ -70,7 +70,6 @@ import { AffectedAppsLink } from "./affected-apps-link";
 import { ConditionalTooltip } from "@app/components/ConditionalTooltip";
 import { IssueDetailDrawer } from "./issue-detail-drawer";
 import { IssueDescriptionAndLinks } from "./components/issue-description-and-links";
-import { QuestionCircleIcon } from "@patternfly/react-icons";
 
 export interface IIssuesTableProps {
   mode: "allIssues" | "singleApp";
@@ -329,25 +328,12 @@ export const IssuesTable: React.FC<IIssuesTableProps> = ({ mode }) => {
               <Th {...getThProps({ columnKey: "category" })} />
               <Th {...getThProps({ columnKey: "source" })} />
               <Th {...getThProps({ columnKey: "target" })} />
-              <Th {...getThProps({ columnKey: "effort" })}>
-                <Flex
-                  flexWrap={{ default: "nowrap" }}
-                  spaceItems={{ default: "spaceItemsSm" }}
-                  alignItems={{ default: "alignItemsCenter" }}
-                >
-                  <FlexItem>{t("terms.effort")}</FlexItem>
-                  <FlexItem>
-                    <Tooltip
-                      content={t("message.issuesEffortTooltip")}
-                      position="top"
-                    >
-                      <Flex>
-                        <QuestionCircleIcon />
-                      </Flex>
-                    </Tooltip>
-                  </FlexItem>
-                </Flex>
-              </Th>
+              <Th
+                {...getThProps({ columnKey: "effort" })}
+                info={{
+                  tooltip: `${t("message.issuesEffortTooltip")}`,
+                }}
+              />
               <Th {...getThProps({ columnKey: "affected" })} />
             </TableHeaderContentWithControls>
           </Tr>