feat: add AliasedBaseImageName

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;

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} />
             ),
           },
           {