From a98a494331a29edaac6552f7c5d8c74e5b16bf9d Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Tue, 29 Oct 2024 18:25:38 +0900
Subject: [PATCH] feat: add AliasedBaseImageName

---
 react/src/components/AliasedBaseImageName.tsx | 28 +++++++++++++++++++
 react/src/components/ImageList.tsx            |  4 ++-
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 react/src/components/AliasedBaseImageName.tsx

diff --git a/react/src/components/AliasedBaseImageName.tsx b/react/src/components/AliasedBaseImageName.tsx
new file mode 100644
index 0000000000..ab27795ee5
--- /dev/null
+++ b/react/src/components/AliasedBaseImageName.tsx
@@ -0,0 +1,28 @@
+import { useBackendAIImageMetaData } from '../hooks';
+import { AliasedBaseImageNameFragment$key } from './__generated__/AliasedBaseImageNameFragment.graphql';
+import graphql from 'babel-plugin-relay/macro';
+import React from 'react';
+import { useFragment } from 'react-relay';
+
+interface AliasedBaseImageNameProps {
+  imageFrgmt: AliasedBaseImageNameFragment$key;
+}
+
+const AliasedBaseImageName: React.FC<AliasedBaseImageNameProps> = ({
+  imageFrgmt,
+}) => {
+  const images = useFragment(
+    graphql`
+      fragment AliasedBaseImageNameFragment on Image {
+        base_image_name @since(version: "24.09.1.")
+      }
+    `,
+    imageFrgmt,
+  );
+
+  const [, { tagAlias }] = useBackendAIImageMetaData();
+
+  return tagAlias(images?.base_image_name ?? '');
+};
+
+export default AliasedBaseImageName;
diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
index 53bdb76228..6cf3814a15 100644
--- a/react/src/components/ImageList.tsx
+++ b/react/src/components/ImageList.tsx
@@ -5,6 +5,7 @@ import {
   useSuspendedBackendaiClient,
   useUpdatableState,
 } from '../hooks';
+import AliasedBaseImageName from './AliasedBaseImageName';
 import DoubleTag from './DoubleTag';
 import ImageInstallModal from './ImageInstallModal';
 import { BaseImageTags, ConstraintTags, LangTags } from './ImageTags';
@@ -95,6 +96,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             value
           }
           version @since(version: "24.09.1.")
+          ...AliasedBaseImageNameFragment
         }
       }
     `,
@@ -194,7 +196,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             sorter: (a: EnvironmentImage, b: EnvironmentImage) =>
               localeCompare(a?.base_image_name, b?.base_image_name),
             render: (text: string, row: EnvironmentImage) => (
-              <TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
+              <AliasedBaseImageName imageFrgmt={row} />
             ),
           },
           {