🐛 "Effort" with supplemental text info via tooltip (#1846)

Resolves https://issues.redhat.com/browse/MTA-2556 --------- Signed-off-by: Karishma Punwatkar <kpunwatk@redhat.com> Co-authored-by: Radoslaw Szwajkowski <rszwajko@redhat.com> Co-authored-by: Ian Bolton <ibolton@redhat.com> Co-authored-by: Scott Dickerson <sdickers@redhat.com>
konveyor · May 10, 2024 · ba67f92 · ba67f92
1 parent fa5fff2
commit ba67f92
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 7 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -172,6 +172,8 @@
     "autoSelectTooltip": "Automatically select this answer based on tags associated with the application(s) or archetype.",
     "autoTagTooltip": "Automatically tag this application or archetype with these tags based on this answer to the questionnaire.",
     "assessmentStakeholderHeader": "Select the stakeholder(s) or stakeholder group(s) associated with this assessment.",
+    "applicationEffortTooltip": "This column shows the total application effort.",
+    "affectedAppEffortTooltip": "This column shows the calculated effort for all incidents related to this file.",
     "binaryPackaging": "Packaging will default to JAR if left empty.",
     "blockedDeleteTracker": "Cannot delete {{what}} because it is associated with a tracker.",
     "blockedDeleteApplication": "Cannot delete {{what}} because it is associated with an application.",
@@ -194,6 +196,7 @@
     "inheritedReviewTooltip_plural": "This application is inheriting reviews from {{count}} archetypes.",
     "inheritedAssessmentTooltip": "This application is inheriting an assessment from an archetype.",
     "inheritedAssessmentTooltip_plural": "This application is inheriting assessments from {{count}} archetypes.",
+    "issuesEffortTooltip": "This column shows the effort weight for a single issue incident.",
     "dependentQuestionTooltip": "This question is conditionally included or excluded based on tags:",
     "jiraInstanceNotConnected": "Jira instance {{name}} is not connected.",
     "manageDependenciesInstructions": "Add northbound and southbound dependencies for the selected application here. Note that any selections made will be saved automatically. To undo any changes, you must manually delete the applications from the dropdowns.",

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -15,8 +15,14 @@ import {
   DropdownItem,
   Modal,
   Tooltip,
+  Flex,
+  FlexItem,
 } from "@patternfly/react-core";
-import { PencilAltIcon, TagIcon } from "@patternfly/react-icons";
+import {
+  PencilAltIcon,
+  QuestionCircleIcon,
+  TagIcon,
+} from "@patternfly/react-icons";
 import {
   Table,
   Thead,
@@ -845,9 +851,25 @@ export const ApplicationsTable: React.FC = () => {
                 {getColumnVisibility("tags") && (
                   <Th {...getThProps({ columnKey: "tags" })} width={10} />
                 )}
-                {getColumnVisibility("effort") && (
-                  <Th {...getThProps({ columnKey: "effort" })} 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>
                 <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
@@ -2,13 +2,16 @@ import * as React from "react";
 import {
   Breadcrumb,
   BreadcrumbItem,
+  Flex,
+  FlexItem,
   PageSection,
   PageSectionVariants,
   Text,
   TextContent,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
+  Tooltip,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
@@ -36,6 +39,7 @@ import {
 } from "../helpers";
 import { IssueDetailDrawer } from "../issue-detail-drawer";
 import { TablePersistenceKeyPrefix } from "@app/Constants";
+import { QuestionCircleIcon } from "@patternfly/react-icons";
 
 interface IAffectedApplicationsRouteParams {
   ruleset: string;
@@ -181,7 +185,28 @@ export const AffectedApplications: React.FC = () => {
                     <Th {...getThProps({ columnKey: "name" })} />
                     <Th {...getThProps({ columnKey: "description" })} />
                     <Th {...getThProps({ columnKey: "businessService" })} />
-                    <Th {...getThProps({ columnKey: "effort" })} />
+                    <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>
                     <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
@@ -2,9 +2,12 @@ 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";
@@ -26,6 +29,7 @@ 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;
@@ -136,7 +140,25 @@ export const IssueAffectedFilesTable: React.FC<
                 {...getThProps({ columnKey: "incidents" })}
                 modifier="nowrap"
               />
-              <Th {...getThProps({ columnKey: "effort" })} 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>
             </TableHeaderContentWithControls>
           </Tr>
         </Thead>

diff --git a/client/src/app/pages/issues/issues-table.tsx b/client/src/app/pages/issues/issues-table.tsx
@@ -70,6 +70,7 @@ 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";
@@ -328,7 +329,25 @@ export const IssuesTable: React.FC<IIssuesTableProps> = ({ mode }) => {
               <Th {...getThProps({ columnKey: "category" })} />
               <Th {...getThProps({ columnKey: "source" })} />
               <Th {...getThProps({ columnKey: "target" })} />
-              <Th {...getThProps({ columnKey: "effort" })} />
+              <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: "affected" })} />
             </TableHeaderContentWithControls>
           </Tr>