From d215b73db902cb883d62e28019a46c60c67e2f36 Mon Sep 17 00:00:00 2001 From: Ian Bolton Date: Mon, 20 Nov 2023 09:49:31 -0500 Subject: [PATCH] :bug: Update archetype tags labels to use category color (#1551) https://issues.redhat.com/browse/MTA-1687 - Removes color until we can persist the color for tags on the backend. --------- Signed-off-by: ibolton336 --- .../labels-from-items/labels-from-items.tsx | 50 ------------------- .../labels/item-tag-label/item-tag-label.tsx} | 4 +- .../labels-from-items/labels-from-items.tsx | 24 +++++++++ .../labels-from-tags/labels-from-tags.tsx | 40 +++++++++++++++ .../application-detail-drawer.tsx | 2 +- .../application-tags/application-tags.tsx | 4 +- .../components/archetype-detail-drawer.tsx | 5 +- .../tags/components/tag-category-form.tsx | 2 +- client/src/app/pages/controls/tags/tags.tsx | 2 +- 9 files changed, 74 insertions(+), 59 deletions(-) delete mode 100644 client/src/app/components/labels-from-items/labels-from-items.tsx rename client/src/app/{pages/applications/components/application-tags/application-tag-label.tsx => components/labels/item-tag-label/item-tag-label.tsx} (86%) create mode 100644 client/src/app/components/labels/labels-from-items/labels-from-items.tsx create mode 100644 client/src/app/components/labels/labels-from-tags/labels-from-tags.tsx diff --git a/client/src/app/components/labels-from-items/labels-from-items.tsx b/client/src/app/components/labels-from-items/labels-from-items.tsx deleted file mode 100644 index 2c65c59fcc..0000000000 --- a/client/src/app/components/labels-from-items/labels-from-items.tsx +++ /dev/null @@ -1,50 +0,0 @@ -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 = ({ - ...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 ; -}; - -export function LabelsFromItems({ - items, - noneMessage, -}: { - items?: T[]; - noneMessage?: string; -}): JSX.Element { - const { t } = useTranslation(); - - if (items && items.length > 0) { - return ( - - {items.map((item, index) => ( - {item.name} - ))} - - ); - } - return
{noneMessage || t("terms.none")}
; -} diff --git a/client/src/app/pages/applications/components/application-tags/application-tag-label.tsx b/client/src/app/components/labels/item-tag-label/item-tag-label.tsx similarity index 86% rename from client/src/app/pages/applications/components/application-tags/application-tag-label.tsx rename to client/src/app/components/labels/item-tag-label/item-tag-label.tsx index ea514d3587..ef6ad228a4 100644 --- a/client/src/app/pages/applications/components/application-tags/application-tag-label.tsx +++ b/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 = ({ +export const ItemTagLabel: React.FC = ({ tag, category, className, diff --git a/client/src/app/components/labels/labels-from-items/labels-from-items.tsx b/client/src/app/components/labels/labels-from-items/labels-from-items.tsx new file mode 100644 index 0000000000..aef881fcd9 --- /dev/null +++ b/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({ + items, + noneMessage, +}: { + items?: T[]; + noneMessage?: string; +}): JSX.Element { + const { t } = useTranslation(); + + if (items && items.length > 0) { + return ( + + {items.map((item, index) => ( + + ))} + + ); + } + return
{noneMessage || t("terms.none")}
; +} diff --git a/client/src/app/components/labels/labels-from-tags/labels-from-tags.tsx b/client/src/app/components/labels/labels-from-tags/labels-from-tags.tsx new file mode 100644 index 0000000000..6ec103c42b --- /dev/null +++ b/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 ( + + {tags.map((tag) => { + const tagCategory = findCategoryForTag(tag.id); + + if (!tagCategory) return null; + + return ; + })} + + ); + } + + return
{noneMessage || t("terms.none")}
; +} diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx index 9ae1466bf1..050925b54f 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx +++ b/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"; diff --git a/client/src/app/pages/applications/components/application-tags/application-tags.tsx b/client/src/app/pages/applications/components/application-tags/application-tags.tsx index 1cf37bcac6..ae7595e2f2 100644 --- a/client/src/app/pages/applications/components/application-tags/application-tags.tsx +++ b/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 = ({ {tagsInThisCategoryInThisSource.map((tag) => ( - void; @@ -227,7 +228,7 @@ const ApplicationLabels: React.FC<{ applicationRefs?: Ref[] }> = ({ }) => ; const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) => ( - + ); const StakeholderLabels: React.FC<{ archetype: Archetype }> = ({ diff --git a/client/src/app/pages/controls/tags/components/tag-category-form.tsx b/client/src/app/pages/controls/tags/components/tag-category-form.tsx index f2289edfc6..69091fdcc5 100644 --- a/client/src/app/pages/controls/tags/components/tag-category-form.tsx +++ b/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; diff --git a/client/src/app/pages/controls/tags/tags.tsx b/client/src/app/pages/controls/tags/tags.tsx index 212fe27b7e..578fec58b2 100644 --- a/client/src/app/pages/controls/tags/tags.tsx +++ b/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";