✨ Extract IconWithLabel component (#1878)

Resolves: #1873 --------- Signed-off-by: Radoslaw Szwajkowski <[email protected]>
konveyor · Apr 25, 2024 · 312b8b8 · 312b8b8
1 parent 8715dbe
commit 312b8b8
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 69 deletions.
diff --git a/client/src/app/components/Icons/IconWithLabel.tsx b/client/src/app/components/Icons/IconWithLabel.tsx
@@ -0,0 +1,36 @@
+import React, { FC, ReactElement, ReactNode } from "react";
+import { Flex, FlexItem } from "@patternfly/react-core";
+import { OptionalTooltip } from "./OptionalTooltip";
+
+export const IconWithLabel: FC<{
+  iconTooltipMessage?: string;
+  icon: ReactElement;
+  label: ReactNode;
+  trailingItem?: ReactElement;
+  trailingItemTooltipMessage?: string;
+}> = ({
+  iconTooltipMessage,
+  icon,
+  label,
+  trailingItem,
+  trailingItemTooltipMessage,
+}) => (
+  <Flex
+    flexWrap={{ default: "nowrap" }}
+    spaceItems={{ default: "spaceItemsSm" }}
+  >
+    <FlexItem>
+      <OptionalTooltip tooltipMessage={iconTooltipMessage}>
+        {icon}
+      </OptionalTooltip>
+    </FlexItem>
+    <FlexItem>{label}</FlexItem>
+    {!!trailingItem && (
+      <FlexItem>
+        <OptionalTooltip tooltipMessage={trailingItemTooltipMessage}>
+          {trailingItem}
+        </OptionalTooltip>
+      </FlexItem>
+    )}
+  </Flex>
+);
diff --git a/client/src/app/components/IconedStatus.tsx → ...src/app/components/Icons/IconedStatus.tsx b/client/src/app/components/IconedStatus.tsx → ...src/app/components/Icons/IconedStatus.tsx
@@ -1,12 +1,14 @@
 import React from "react";
-import { Flex, FlexItem, Icon, Tooltip } from "@patternfly/react-core";
+import { Icon } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
 import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon";
 import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon";
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 import UnknownIcon from "@patternfly/react-icons/dist/esm/icons/unknown-icon";
 import TopologyIcon from "@patternfly/react-icons/dist/esm/icons/topology-icon";
+import { IconWithLabel } from "./IconWithLabel";
+import { ReactElement } from "react-markdown/lib/react-markdown";
 
 export type IconedStatusPreset =
   | "InheritedReviews"
@@ -31,7 +33,9 @@ export type IconedStatusStatusType =
   | "danger";
 
 type IconedStatusPresetType = {
-  [key in IconedStatusPreset]: Omit<IIconedStatusProps, "preset">;
+  [key in IconedStatusPreset]: Omit<IIconedStatusProps, "preset"> & {
+    topologyIcon?: ReactElement;
+  };
 };
 
 export interface IIconedStatusProps {
@@ -61,6 +65,7 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
       tooltipMessage: t("message.inheritedReviewTooltip", {
         count: tooltipCount,
       }),
+      topologyIcon: <TopologyIcon />,
     },
     InProgressInheritedAssessments: {
       icon: <InProgressIcon />,
@@ -69,6 +74,7 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
       tooltipMessage: t("message.inheritedAssessmentTooltip", {
         count: tooltipCount,
       }),
+      topologyIcon: <TopologyIcon />,
     },
     InheritedReviews: {
       icon: <CheckCircleIcon />,
@@ -77,6 +83,7 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
       tooltipMessage: t("message.inheritedReviewTooltip", {
         count: tooltipCount,
       }),
+      topologyIcon: <TopologyIcon />,
     },
     InheritedAssessments: {
       icon: <CheckCircleIcon />,
@@ -85,6 +92,7 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
       tooltipMessage: t("message.inheritedAssessmentTooltip", {
         count: tooltipCount,
       }),
+      topologyIcon: <TopologyIcon />,
     },
     Canceled: {
       icon: <TimesCircleIcon />,
@@ -129,63 +137,18 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
     },
   };
   const presetProps = preset && presets[preset];
-  const IconWithOptionalTooltip: React.FC<{ children: React.ReactElement }> = ({
-    children,
-  }) =>
-    presetProps?.tooltipMessage ? (
-      <Tooltip content={presetProps?.tooltipMessage}>{children}</Tooltip>
-    ) : (
-      <>{children}</>
-    );
-
-  const getTooltipContent = () => {
-    switch (preset) {
-      case "InheritedReviews":
-        return t("message.inheritedReviewTooltip", {
-          count: tooltipCount,
-        });
-
-      case "InheritedAssessments":
-        return t("message.inheritedAssessmentTooltip", {
-          count: tooltipCount,
-        });
-      case "InProgressInheritedReviews":
-        return t("message.inheritedReviewTooltip", {
-          count: tooltipCount,
-        });
-      case "InProgressInheritedAssessments":
-        return t("message.inheritedAssessmentTooltip", {
-          count: tooltipCount,
-        });
-
-      default:
-        return "";
-    }
-  };
 
   return (
-    <Flex
-      flexWrap={{ default: "nowrap" }}
-      spaceItems={{ default: "spaceItemsSm" }}
-    >
-      <FlexItem>
-        <IconWithOptionalTooltip>
-          <Icon status={status || presetProps?.status} className={className}>
-            {icon || presetProps?.icon || <UnknownIcon />}
-          </Icon>
-        </IconWithOptionalTooltip>
-      </FlexItem>
-      <FlexItem>{label || presetProps?.label}</FlexItem>
-      {(preset === "InheritedReviews" ||
-        preset === "InheritedAssessments" ||
-        preset === "InProgressInheritedAssessments" ||
-        preset === "InProgressInheritedReviews") && (
-        <FlexItem>
-          <Tooltip content={getTooltipContent()}>
-            <TopologyIcon />
-          </Tooltip>
-        </FlexItem>
-      )}
-    </Flex>
+    <IconWithLabel
+      iconTooltipMessage={presetProps?.tooltipMessage}
+      icon={
+        <Icon status={status || presetProps?.status} className={className}>
+          {icon || presetProps?.icon || <UnknownIcon />}
+        </Icon>
+      }
+      label={label || presetProps?.label}
+      trailingItemTooltipMessage={presetProps?.tooltipMessage}
+      trailingItem={presetProps?.topologyIcon}
+    />
   );
 };
diff --git a/client/src/app/components/Icons/OptionalTooltip.tsx b/client/src/app/components/Icons/OptionalTooltip.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Tooltip } from "@patternfly/react-core";
+
+export const OptionalTooltip: React.FC<{
+  tooltipMessage?: string;
+  children: React.ReactElement;
+}> = ({ children, tooltipMessage }) =>
+  tooltipMessage ? (
+    <Tooltip content={tooltipMessage}>{children}</Tooltip>
+  ) : (
+    <>{children}</>
+  );
diff --git a/client/src/app/components/Icons/index.ts b/client/src/app/components/Icons/index.ts
@@ -0,0 +1,3 @@
+export * from "./OptionalTooltip";
+export * from "./IconedStatus";
+export * from "./IconWithLabel";
diff --git a/client/src/app/components/answer-table/answer-table.tsx b/client/src/app/components/answer-table/answer-table.tsx
@@ -12,7 +12,7 @@ import { NoDataEmptyState } from "@app/components/NoDataEmptyState";
 import { Answer } from "@app/api/models";
 import { Label, Text, Tooltip } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import { IconedStatus } from "@app/components/IconedStatus";
+import { IconedStatus } from "@app/components/Icons";
 import { TimesCircleIcon } from "@patternfly/react-icons";
 import { WarningTriangleIcon } from "@patternfly/react-icons";
 import { List, ListItem } from "@patternfly/react-core";

diff --git a/client/src/app/components/risk-icon/risk-icon.tsx b/client/src/app/components/risk-icon/risk-icon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { TimesCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
-import { IconedStatus } from "@app/components/IconedStatus";
+import { IconedStatus } from "@app/components/Icons";
 
 interface RiskIconProps {
   risk: string;

diff --git a/client/src/app/components/tests/StatusIcon.test.tsx b/client/src/app/components/tests/StatusIcon.test.tsx
@@ -1,6 +1,6 @@
 import { render } from "@app/test-config/test-utils";
 import React from "react";
-import { IconedStatus } from "../IconedStatus";
+import { IconedStatus } from "../Icons";
 
 describe("StatusIcon", () => {
   it("Renders without crashing", () => {

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -108,6 +108,7 @@ import { useFetchArchetypes } from "@app/queries/archetypes";
 import { ApplicationFormModal } from "../components/application-form";
 import { ManageColumnsToolbar } from "./components/manage-columns-toolbar";
 import dayjs from "dayjs";
+import { IconWithLabel } from "@app/components/Icons";
 
 export const ApplicationsTable: React.FC = () => {
   const { t } = useTranslation();
@@ -950,8 +951,12 @@ export const ApplicationsTable: React.FC = () => {
                           modifier="truncate"
                           {...getTdProps({ columnKey: "tags" })}
                         >
-                          <TagIcon />
-                          {application.tags ? application.tags.length : 0}
+                          <IconWithLabel
+                            icon={<TagIcon />}
+                            label={
+                              application.tags ? application.tags.length : 0
+                            }
+                          />
                         </Td>
                       )}
                       {getColumnVisibility("effort") && (

diff --git a/client/src/app/pages/applications/components/application-analysis-status.tsx b/client/src/app/pages/applications/components/application-analysis-status.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { TaskState } from "@app/api/models";
-import { IconedStatus } from "@app/components/IconedStatus";
+import { IconedStatus } from "@app/components/Icons";
 
 export interface ApplicationAnalysisStatusProps {
   state: TaskState;

diff --git a/...s/applications/components/application-assessment-status/application-assessment-status.tsx b/...s/applications/components/application-assessment-status/application-assessment-status.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Application } from "@app/api/models";
-import { IconedStatus, IconedStatusPreset } from "@app/components/IconedStatus";
+import { IconedStatus, IconedStatusPreset } from "@app/components/Icons";
 import { Spinner } from "@patternfly/react-core";
 import { useAssessmentStatus } from "@app/hooks/useAssessmentStatus";
 interface ApplicationAssessmentStatusProps {

diff --git a/...app/pages/applications/components/application-review-status/application-review-status.tsx b/...app/pages/applications/components/application-review-status/application-review-status.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Application } from "@app/api/models";
-import { IconedStatus, IconedStatusPreset } from "@app/components/IconedStatus";
+import { IconedStatus, IconedStatusPreset } from "@app/components/Icons";
 import { Spinner } from "@patternfly/react-core";
 import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { useTranslation } from "react-i18next";

diff --git a/client/src/app/pages/applications/manage-imports/manage-imports.tsx b/client/src/app/pages/applications/manage-imports/manage-imports.tsx
@@ -27,7 +27,7 @@ import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { ConfirmDialog } from "@app/components/ConfirmDialog";
 import { FilterType, FilterToolbar } from "@app/components/FilterToolbar";
-import { IconedStatus } from "@app/components/IconedStatus";
+import { IconedStatus } from "@app/components/Icons";
 import { KebabDropdown } from "@app/components/KebabDropdown";
 import { NotificationsContext } from "@app/components/NotificationsContext";
 import { SimplePagination } from "@app/components/SimplePagination";

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -71,7 +71,7 @@ import {
 } from "@app/rbac";
 import { checkAccess } from "@app/utils/rbac-utils";
 import keycloak from "@app/keycloak";
-import { IconedStatus } from "@app/components/IconedStatus";
+import { IconedStatus } from "@app/components/Icons";
 import { useQueryClient } from "@tanstack/react-query";
 
 const Archetypes: React.FC = () => {

diff --git a/client/src/app/pages/external/jira/components/tracker-status.tsx b/client/src/app/pages/external/jira/components/tracker-status.tsx
@@ -13,7 +13,7 @@ import {
   Spinner,
 } from "@patternfly/react-core";
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
-import { IconedStatus } from "@app/components/IconedStatus";
+import { IconedStatus } from "@app/components/Icons";
 
 interface ITrackerStatusProps {
   name: string;