Use LabelCustomColor from migtools/lib-ui (#745)

Signed-off-by: Gilles Dubreuil <[email protected]>
konveyor · Mar 28, 2023 · e6da82e · e6da82e
1 parent d7d0270
commit e6da82e
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 196 deletions.
diff --git a/client/package.json b/client/package.json
@@ -24,7 +24,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@hookform/resolvers": "^2.8.0",
     "@hot-loader/react-dom": "^17.0.2",
-    "@migtools/lib-ui": "^8.6.0",
+    "@migtools/lib-ui": "^8.7.0",
     "@patternfly/patternfly": "^4.222.4",
     "@patternfly/react-charts": "^6.94.15",
     "@patternfly/react-core": "^4.267.6",

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
@@ -13,10 +13,11 @@ import {
   ToolbarItem,
   ButtonVariant,
 } from "@patternfly/react-core";
+import { LabelCustomColor } from "@migtools/lib-ui";
+
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
 import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";
-import { DEFAULT_COLOR_LABELS } from "@app/Constants";
 import { ConditionalRender, NoDataEmptyState } from "@app/shared/components";
 import { Application, Tag, TagCategory } from "@app/api/models";
 import { getTagById, getTagCategoryById } from "@app/api/rest";
@@ -189,7 +190,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
 
       {Array.from(tagsBySource.keys())
         .sort(compareSources)
-        .map((source) => {
+        .map((source, tagSourceIndex) => {
           const tagsInThisSource = tagsBySource.get(source);
           const tagCategoriesInThisSource = new Set<TagCategory>();
           tagsInThisSource?.forEach((tag) => {
@@ -222,22 +223,19 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
                       </Text>
                     </TextContent>
                     <Flex>
-                      {tagsInThisCategoryInThisSource
-                        ?.sort((a, b) => a.name.localeCompare(b.name))
-                        .map((tag) => {
-                          const colorLabel = DEFAULT_COLOR_LABELS.get(
-                            tagCategory?.colour || ""
-                          );
-                          return (
-                            <Label
-                              key={tag.id}
-                              color={colorLabel as any}
-                              className={`${spacing.mrSm} ${spacing.mbSm}`}
-                            >
-                              {tag.name}
-                            </Label>
-                          );
-                        })}
+                      {tagsInThisCategoryInThisSource &&
+                        tagsInThisCategoryInThisSource.map((tag) => (
+                          <LabelCustomColor
+                            key={tag.id}
+                            color={
+                              tagCategoriesById.get(tag?.category?.id || 0)
+                                ?.colour || "gray"
+                            }
+                            className={spacing.mXs}
+                          >
+                            {tag.name}
+                          </LabelCustomColor>
+                        ))}
                     </Flex>
                   </React.Fragment>
                 );