🐛 Update archetype tags labels to use category color

client/src/app/pages/applications/components/application-tags/application-tag-label.tsx → client/src/app/components/labels/item-tag-label/item-tag-label.tsx

@@ -9,13 +9,13 @@ export const getTagCategoryFallbackColor = (category?: TagCategory) => {
   return colorValues[category?.id % colorValues.length];
 };
 
-export interface ApplicationTagLabelProps {
+export interface ItemTagLabelProps {
   tag: Tag;
   category?: TagCategory;
   className?: string;
 }
 
-export const ApplicationTagLabel: React.FC<ApplicationTagLabelProps> = ({
+export const ItemTagLabel: React.FC<ItemTagLabelProps> = ({
   tag,
   category,
   className,

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { Label, LabelGroup } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+
+export function LabelsFromItems<T extends { name: string }>({
+  items,
+  noneMessage,
+}: {
+  items?: T[];
+  noneMessage?: string;
+}): JSX.Element {
+  const { t } = useTranslation();
+
+  if (items && items.length > 0) {
+    return (
+      <LabelGroup>
+        {items.map((item, index) => (
+          <Label key={index}>{item.name}</Label>
+        ))}
+      </LabelGroup>
+    );
+  }
+  return <div>{noneMessage || t("terms.none")}</div>;
+}

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { LabelGroup } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { ItemTagLabel } from "../item-tag-label/item-tag-label";
+import { Tag } from "@app/api/models";
+import { useFetchTagCategories } from "@app/queries/tags";
+
+export function LabelsFromTags({
+  tags,
+  noneMessage,
+}: {
+  tags?: Tag[];
+  noneMessage?: string;
+}): JSX.Element {
+  const { t } = useTranslation();
+  const { tagCategories } = useFetchTagCategories();
+
+  const findCategoryForTag = (tagId: number) => {
+    return tagCategories.find(
+      (category) =>
+        category.tags?.some((categoryTag) => categoryTag.id === tagId)
+    );
+  };
+
+  if (tags && tags.length > 0) {
+    return (
+      <LabelGroup>
+        {tags.map((tag) => {
+          const tagCategory = findCategoryForTag(tag.id);
+
+          if (!tagCategory) return null;
+
+          return <ItemTagLabel key={tag.id} tag={tag} category={tagCategory} />;
+        })}
+      </LabelGroup>
+    );
+  }
+
+  return <div>{noneMessage || t("terms.none")}</div>;
+}

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

@@ -45,7 +45,7 @@ import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 import { ApplicationFacts } from "./application-facts";
 import { ReviewFields } from "./review-fields";
-import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";
+import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels-from-items";
 import { ReviewedArchetypeItem } from "./reviewed-archetype-item";
 import { RiskLabel } from "@app/components/RiskLabel";
 import { ApplicationDetailFields } from "./application-detail-fields";

client/src/app/pages/applications/components/application-tags/application-tags.tsx

@@ -28,7 +28,7 @@ import {
 } from "@app/components/FilterToolbar";
 import { useLegacyFilterState } from "@app/hooks/useLegacyFilterState";
 import { useHistory } from "react-router-dom";
-import { ApplicationTagLabel } from "./application-tag-label";
+import { ItemTagLabel } from "../../../../components/labels/item-tag-label/item-tag-label";
 
 interface TagWithSource extends Tag {
   source?: string;
@@ -237,7 +237,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
                     </TextContent>
                     <Flex>
                       {tagsInThisCategoryInThisSource.map((tag) => (
-                        <ApplicationTagLabel
+                        <ItemTagLabel
                           key={tag.id}
                           tag={tag}
                           category={tagCategoriesById.get(

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

@@ -23,9 +23,10 @@ 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";
+import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels-from-items";
 import { ReviewFields } from "@app/pages/applications/components/application-detail-drawer/review-fields";
 import { RiskLabel } from "@app/components/RiskLabel";
+import { LabelsFromTags } from "@app/components/labels/labels-from-tags/labels-from-tags";
 
 export interface IArchetypeDetailDrawerProps {
   onCloseClick: () => void;
@@ -227,7 +228,7 @@ const ApplicationLabels: React.FC<{ applicationRefs?: Ref[] }> = ({
 }) => <LabelsFromItems items={applicationRefs as Ref[]} />;
 
 const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) => (
-  <LabelsFromItems items={tags} />
+  <LabelsFromTags tags={tags} />
 );
 
 const StakeholderLabels: React.FC<{ archetype: Archetype }> = ({

client/src/app/pages/controls/tags/components/tag-category-form.tsx

@@ -32,7 +32,7 @@ import {
 import { Color } from "@app/components/Color";
 import { OptionWithValue, SimpleSelect } from "@app/components/SimpleSelect";
 import { NotificationsContext } from "@app/components/NotificationsContext";
-import { getTagCategoryFallbackColor } from "@app/pages/applications/components/application-tags/application-tag-label";
+import { getTagCategoryFallbackColor } from "@app/components/labels/item-tag-label/item-tag-label";
 export interface FormValues {
   name: string;
   rank?: number;

client/src/app/pages/controls/tags/tags.tsx

@@ -40,7 +40,7 @@ import { NotificationsContext } from "@app/components/NotificationsContext";
 import { COLOR_NAMES_BY_HEX_VALUE } from "@app/Constants";
 import { TagForm } from "./components/tag-form";
 import { TagCategoryForm } from "./components/tag-category-form";
-import { getTagCategoryFallbackColor } from "@app/pages/applications/components/application-tags/application-tag-label";
+import { getTagCategoryFallbackColor } from "@app/components/labels/item-tag-label/item-tag-label";
 import { AppTableActionButtons } from "@app/components/AppTableActionButtons";
 import { Color } from "@app/components/Color";
 import { ConditionalRender } from "@app/components/ConditionalRender";