Extract IconWithLabel component

Signed-off-by: Radoslaw Szwajkowski <[email protected]>

client/src/app/components/Icons/IconWithLabel.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactElement, ReactNode } from "react";
+import { Flex, FlexItem } from "@patternfly/react-core";
+import { IconWithOptionalTooltip } from "./IconWithOptionalTooltip";
+
+export const IconWithLabel: FC<{
+  iconTooltipMessage?: string;
+  icon: ReactElement;
+  label: ReactNode;
+  hasTrailingItem?: boolean;
+  trailingItem?: ReactElement;
+}> = ({ iconTooltipMessage, icon, label, hasTrailingItem, trailingItem }) => (
+  <Flex
+    flexWrap={{ default: "nowrap" }}
+    spaceItems={{ default: "spaceItemsSm" }}
+  >
+    <FlexItem>
+      <IconWithOptionalTooltip tooltipMessage={iconTooltipMessage}>
+        {icon}
+      </IconWithOptionalTooltip>
+    </FlexItem>
+    <FlexItem>{label}</FlexItem>
+    {hasTrailingItem && <FlexItem>{trailingItem}</FlexItem>}
+  </Flex>
+);

client/src/app/components/Icons/IconWithOptionalTooltip.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Tooltip } from "@patternfly/react-core";
+
+export const IconWithOptionalTooltip: React.FC<{
+  tooltipMessage?: string;
+  children: React.ReactElement;
+}> = ({ children, tooltipMessage }) =>
+  tooltipMessage ? (
+    <Tooltip content={tooltipMessage}>{children}</Tooltip>
+  ) : (
+    <>{children}</>
+  );

client/src/app/components/IconedStatus.tsx → client/src/app/components/Icons/IconedStatus.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { Flex, FlexItem, Icon, Tooltip } from "@patternfly/react-core";
+import { Icon, Tooltip } 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";
 
 export type IconedStatusPreset =
   | "InheritedReviews"
@@ -129,14 +130,6 @@ 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) {
@@ -164,28 +157,25 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
   };
 
   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" ||
+    <IconWithLabel
+      iconTooltipMessage={presetProps?.tooltipMessage}
+      icon={
+        <Icon status={status || presetProps?.status} className={className}>
+          {icon || presetProps?.icon || <UnknownIcon />}
+        </Icon>
+      }
+      label={label || presetProps?.label}
+      hasTrailingItem={
+        preset === "InheritedReviews" ||
         preset === "InheritedAssessments" ||
         preset === "InProgressInheritedAssessments" ||
-        preset === "InProgressInheritedReviews") && (
-        <FlexItem>
-          <Tooltip content={getTooltipContent()}>
-            <TopologyIcon />
-          </Tooltip>
-        </FlexItem>
-      )}
-    </Flex>
+        preset === "InProgressInheritedReviews"
+      }
+      trailingItem={
+        <Tooltip content={getTooltipContent()}>
+          <TopologyIcon />
+        </Tooltip>
+      }
+    />
   );
 };

client/src/app/components/Icons/index.ts

@@ -0,0 +1,3 @@
+export * from "./IconWithOptionalTooltip";
+export * from "./IconedStatus";
+export * from "./IconWithLabel";

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";

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;

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", () => {

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") && (

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;

client/src/app/pages/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 {

client/src/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";

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";

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 = () => {

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;