From 62b91118f904ccacdd156c650580490b088420be Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Fri, 7 Jun 2024 10:42:07 -0400
Subject: [PATCH 1/2] :bug: Effort width inadvertently removed in app table

Signed-off-by: Ian Bolton <ibolton@redhat.com>
---
 .../applications/applications-table/applications-table.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 59eb559a2e..de12606f91 100644
--- a/client/src/app/pages/applications/applications-table/applications-table.tsx
+++ b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -851,7 +851,7 @@ export const ApplicationsTable: React.FC = () => {
                 {getColumnVisibility("tags") && (
                   <Th {...getThProps({ columnKey: "tags" })} width={10} />
                 )}
-                <Th {...getThProps({ columnKey: "effort" })}>
+                <Th {...getThProps({ columnKey: "effort" })} width={10}>
                   <Flex
                     flexWrap={{ default: "nowrap" }}
                     spaceItems={{ default: "spaceItemsSm" }}

From 9902de63c62f503b6aee1ca55a3cd80bd9554953 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Fri, 7 Jun 2024 11:00:03 -0400
Subject: [PATCH 2/2] Replace custom tooltips with pf <Th/> 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 de12606f91..d9f1752d5a 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,
@@ -851,25 +845,15 @@ export const ApplicationsTable: React.FC = () => {
                 {getColumnVisibility("tags") && (
                   <Th {...getThProps({ columnKey: "tags" })} width={10} />
                 )}
-                <Th {...getThProps({ columnKey: "effort" })} width={10}>
-                  <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 bc9ba6f707..53e235c47c 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 a73b3718f7..404df21fbf 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 dcf6a3cd0f..63bbe50742 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>