From 9db39570b4aea9924be52f42f1c9c0155e5aeacb Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Thu, 31 Oct 2024 12:48:03 +0900
Subject: [PATCH] feat: add `AliasedImageDoubleTags`

---
 .../src/components/AliasedImageDoubleTags.tsx | 77 +++++++++++++++++
 react/src/components/ImageList.tsx            | 85 ++++++++++---------
 2 files changed, 121 insertions(+), 41 deletions(-)
 create mode 100644 react/src/components/AliasedImageDoubleTags.tsx

diff --git a/react/src/components/AliasedImageDoubleTags.tsx b/react/src/components/AliasedImageDoubleTags.tsx
new file mode 100644
index 0000000000..09eb4066dd
--- /dev/null
+++ b/react/src/components/AliasedImageDoubleTags.tsx
@@ -0,0 +1,77 @@
+import { useBackendAIImageMetaData } from '../hooks';
+import DoubleTag, { DoubleTagObjectValue } from './DoubleTag';
+import Flex from './Flex';
+import TextHighlighter from './TextHighlighter';
+import { AliasedImageDoubleTagsFragment$key } from './__generated__/AliasedImageDoubleTagsFragment.graphql';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React from 'react';
+import { useFragment } from 'react-relay';
+
+interface AliasedImageDoubleTagsProps extends DoubleTagObjectValue {
+  imageFrgmt?: AliasedImageDoubleTagsFragment$key | null;
+  highlightKeyword?: string;
+}
+
+const AliasedImageDoubleTags: React.FC<AliasedImageDoubleTagsProps> = ({
+  imageFrgmt,
+  highlightKeyword,
+  ...doubleTagProps
+}) => {
+  const images = useFragment(
+    graphql`
+      fragment AliasedImageDoubleTagsFragment on ImageNode {
+        labels {
+          key
+          value
+        }
+        tags @since(version: "24.09.1") {
+          key
+          value
+        }
+      }
+    `,
+    imageFrgmt,
+  );
+  const [, { tagAlias }] = useBackendAIImageMetaData();
+
+  return (
+    <Flex direction="row" align="start" gap={'xxs'}>
+      {_.map(images?.tags, (tag: { key: string; value: string }) => {
+        const isCustomized = _.includes(tag.key, 'customized_');
+        // If the tag is customized, we need to find the corresponding label instead of using the tag value (hash).
+        const tagValue = isCustomized
+          ? _.find(images?.labels, {
+              key: 'ai.backend.customized-image.name',
+            })?.value
+          : tag.value;
+        return (
+          <DoubleTag
+            key={tag.key}
+            values={[
+              {
+                label: (
+                  <TextHighlighter keyword={highlightKeyword} key={tag.key}>
+                    {tagAlias(tag.key)}
+                  </TextHighlighter>
+                ),
+                color: isCustomized ? 'cyan' : doubleTagProps.color,
+              },
+              {
+                label: (
+                  <TextHighlighter keyword={highlightKeyword} key={tagValue}>
+                    {tagValue}
+                  </TextHighlighter>
+                ),
+                color: isCustomized ? 'cyan' : doubleTagProps.color,
+              },
+            ]}
+            {...doubleTagProps}
+          />
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default AliasedImageDoubleTags;
diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
index 6f4c9d0f39..63b68b383f 100644
--- a/react/src/components/ImageList.tsx
+++ b/react/src/components/ImageList.tsx
@@ -213,50 +213,53 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             title: t('environment.Tags'),
             key: 'tags',
             dataIndex: 'tags',
-            render: (
-              text: Array<{ key: string; value: string }>,
-              row: EnvironmentImage,
-            ) => {
+            render: (text: Array<{ key: string; value: string }>) => {
               return (
                 <Flex direction="row" align="start">
                   {/* TODO: replace this with AliasedImageDoubleTags after image list query with ImageNode is implemented. */}
-                  {_.map(text, (tag: { key: string; value: string }) => {
-                    const isCustomized = _.includes(tag.key, 'customized_');
-                    const tagValue = isCustomized
-                      ? _.find(row?.labels, {
-                          key: 'ai.backend.customized-image.name',
-                        })?.value
-                      : tag.value;
-                    return (
-                      <DoubleTag
-                        key={tag.key}
-                        values={[
-                          {
-                            label: (
-                              <TextHighlighter
-                                keyword={imageSearch}
-                                key={tag.key}
-                              >
-                                {tagAlias(tag.key)}
-                              </TextHighlighter>
-                            ),
-                            color: isCustomized ? 'cyan' : 'blue',
-                          },
-                          {
-                            label: (
-                              <TextHighlighter
-                                keyword={imageSearch}
-                                key={tagValue}
-                              >
-                                {tagValue}
-                              </TextHighlighter>
-                            ),
-                            color: isCustomized ? 'cyan' : 'blue',
-                          },
-                        ]}
-                      />
-                    );
-                  })}
+                  {_.map(
+                    text,
+                    (
+                      tag: { key: string; value: string },
+                      row: EnvironmentImage,
+                    ) => {
+                      const isCustomized = _.includes(tag.key, 'customized_');
+                      const tagValue = isCustomized
+                        ? _.find(row?.labels, {
+                            key: 'ai.backend.customized-image.name',
+                          })?.value
+                        : tag.value;
+                      return (
+                        <DoubleTag
+                          key={tag.key}
+                          values={[
+                            {
+                              label: (
+                                <TextHighlighter
+                                  keyword={imageSearch}
+                                  key={tag.key}
+                                >
+                                  {tagAlias(tag.key)}
+                                </TextHighlighter>
+                              ),
+                              color: isCustomized ? 'cyan' : 'blue',
+                            },
+                            {
+                              label: (
+                                <TextHighlighter
+                                  keyword={imageSearch}
+                                  key={tagValue}
+                                >
+                                  {tagValue}
+                                </TextHighlighter>
+                              ),
+                              color: isCustomized ? 'cyan' : 'blue',
+                            },
+                          ]}
+                        />
+                      );
+                    },
+                  )}
                 </Flex>
               );
             },