👻 Adds colors to drawer tags & removes boilerplate (#1481)

Follow up to: #1470 

  - Added a reusable component for drawer labels. 
  - Adds random colors to the tags just for differentiation between the
    tags when viewing in the drawer.

---------

Signed-off-by: Ian Bolton <ibolton@redhat.com>

client/src/app/components/labels-from-items/labels-from-items.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { LabelGroup, LabelProps } from "@patternfly/react-core";
+import { LabelCustomColor } from "../LabelCustomColor";
+import { useTranslation } from "react-i18next";
+
+interface RandomColorLabelProps extends LabelProps {}
+
+export const RandomColorLabel: React.FC<RandomColorLabelProps> = ({
+  ...props
+}) => {
+  const getRandomColor = (() => {
+    "use strict";
+
+    const randomInt = (min: number, max: number) => {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    };
+
+    return () => {
+      const h = randomInt(0, 360);
+      const s = randomInt(42, 98);
+      const l = randomInt(40, 90);
+      return `hsl(${h},${s}%,${l}%)`;
+    };
+  })();
+
+  const randomColor = getRandomColor();
+
+  return <LabelCustomColor color={randomColor} {...props} />;
+};
+
+export function LabelsFromItems<T extends { name: string }>({
+  items,
+  noneMessage,
+}: {
+  items?: T[];
+  noneMessage?: string;
+}): JSX.Element {
+  const { t } = useTranslation();
+
+  if (items?.length ?? 0 === 0) {
+    return <div>{noneMessage || t("terms.none")}</div>;
+  }
+
+  return (
+    <LabelGroup>
+      {items?.map((item, index) => (
+        <RandomColorLabel key={index}>{item.name}</RandomColorLabel>
+      ))}
+    </LabelGroup>
+  );
+}

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx

@@ -9,7 +9,6 @@ import {
   Text,
   Title,
   Label,
-  LabelGroup,
 } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
@@ -22,6 +21,7 @@ import {
 import { ReviewedArchetypeItem } from "./reviewed-archetype-item";
 import { ReviewFields } from "./review-fields";
 import { RiskLabel } from "@app/components/RiskLabel";
+import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";
 
 export interface IApplicationDetailDrawerAssessmentProps
   extends Pick<IApplicationDetailDrawerProps, "application" | "onCloseClick"> {
@@ -57,9 +57,7 @@ export const ApplicationDetailDrawerAssessment: React.FC<
               </DescriptionListTerm>
               <DescriptionListDescription>
                 {application?.archetypes?.length ?? 0 > 0 ? (
-                  <ArchetypeLabels
-                    archetypeRefs={application?.archetypes as Ref[]}
-                  />
+                  <ArchetypeLabels archetypeRefs={application?.archetypes} />
                 ) : (
                   <EmptyTextMessage message={t("terms.none")} />
                 )}
@@ -105,17 +103,7 @@ export const ApplicationDetailDrawerAssessment: React.FC<
     />
   );
 };
+
 const ArchetypeLabels: React.FC<{ archetypeRefs?: Ref[] }> = ({
   archetypeRefs,
-}) =>
-  (archetypeRefs?.length ?? 0) === 0 ? null : (
-    <LabelGroup>
-      {(archetypeRefs as Ref[])
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .map((ref) => (
-          <Label color="grey" key={ref.id}>
-            {ref.name}
-          </Label>
-        ))}
-    </LabelGroup>
-  );
+}) => <LabelsFromItems items={archetypeRefs} />;

client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx

@@ -10,8 +10,6 @@ import {
   DescriptionListGroup,
   DescriptionListTerm,
   DescriptionListDescription,
-  LabelGroup,
-  Label,
   Stack,
   StackItem,
 } from "@patternfly/react-core";
@@ -22,6 +20,7 @@ import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { PageDrawerContent } from "@app/components/PageDrawerContext";
 
 import { dedupeArrayOfObjects } from "@app/utils/utils";
+import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";
 
 export interface IArchetypeDetailDrawerProps {
   onCloseClick: () => void;
@@ -170,56 +169,18 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
 
 const ApplicationLabels: React.FC<{ applicationRefs?: Ref[] }> = ({
   applicationRefs,
-}) =>
-  (applicationRefs?.length ?? 0) === 0 ? null : (
-    <LabelGroup>
-      {(applicationRefs as Ref[])
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .map((ref) => (
-          <Label color="grey" key={ref.id}>
-            {ref.name}
-          </Label>
-        ))}
-    </LabelGroup>
-  );
+}) => <LabelsFromItems items={applicationRefs as Ref[]} />;
 
-const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) =>
-  (tags?.length ?? 0) === 0 ? null : (
-    <LabelGroup>
-      {(tags as Tag[])
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .map((sh) => (
-          <Label color="grey" key={sh.id}>
-            {sh.name}
-          </Label>
-        ))}
-    </LabelGroup>
-  );
+const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) => (
+  <LabelsFromItems items={tags} />
+);
 
 const StakeholderLabels: React.FC<{ archetype: Archetype }> = ({
   archetype,
-}) =>
-  (archetype.stakeholders?.length ?? 0) === 0 ? null : (
-    <LabelGroup>
-      {archetype.stakeholders?.map((sh) => (
-        <Label color="orange" key={sh.id}>
-          {sh.name}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
+}) => <LabelsFromItems items={archetype.stakeholders as Ref[]} />;
 
 const StakeholderGroupsLabels: React.FC<{ archetype: Archetype }> = ({
   archetype,
-}) =>
-  (archetype.stakeholderGroups?.length ?? 0) === 0 ? null : (
-    <LabelGroup>
-      {archetype.stakeholderGroups?.map((sh) => (
-        <Label color="green" key={sh.id}>
-          {sh.name}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
+}) => <LabelsFromItems items={archetype.stakeholderGroups as Ref[]} />;
 
 export default ArchetypeDetailDrawer;