fxi(FR-423): Unkown image error in Image list's control modal

react/src/components/ImageList.tsx

@@ -96,6 +96,8 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             value
           }
           version @since(version: "24.12.0")
+          ...ManageImageResourceLimitModal_image
+          ...ManageAppsModal_image
         }
       }
     `,
@@ -573,7 +575,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
               updateEnvironmentFetchKey();
             });
         }}
-        image={managingResourceLimit}
+        imageFrgmt={managingResourceLimit}
       />
       <ManageAppsModal
         open={!!managingApp}
@@ -584,7 +586,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
               updateEnvironmentFetchKey();
             });
         }}
-        image={managingApp}
+        imageFrgmt={managingApp}
       />
       <ImageInstallModal
         open={isOpenInstallModal}

react/src/components/ManageAppsModal.tsx

@@ -1,8 +1,8 @@
 import { useSuspendedBackendaiClient } from '../hooks';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
-import { EnvironmentImage } from './ImageList';
 import { ManageAppsModalMutation } from './__generated__/ManageAppsModalMutation.graphql';
+import { ManageAppsModal_image$key } from './__generated__/ManageAppsModal_image.graphql';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   Input,
@@ -18,19 +18,19 @@ import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useMutation } from 'react-relay';
+import { useFragment, useMutation } from 'react-relay';
 
 interface ManageAppsModalProps extends BAIModalProps {
   open: boolean;
-  image: EnvironmentImage | null;
+  imageFrgmt: ManageAppsModal_image$key | null;
   onRequestClose: (success: boolean) => void;
 }
 
 type ServicePort = { app: string; protocol: string; port: number };
 
 const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
   open,
-  image,
+  imageFrgmt,
   onRequestClose,
   ...baiModalProps
 }) => {
@@ -41,6 +41,24 @@ const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
 
   const { token } = theme.useToken();
 
+  const image = useFragment(
+    graphql`
+      fragment ManageAppsModal_image on Image {
+        labels {
+          key
+          value
+        }
+        registry
+        name @deprecatedSince(version: "24.12.0")
+        namespace @since(version: "24.12.0")
+        architecture
+        installed
+        tag
+      }
+    `,
+    imageFrgmt,
+  );
+
   const [commitModifyImageInput, isInFlightModifyImageInput] =
     useMutation<ManageAppsModalMutation>(graphql`
       mutation ManageAppsModalMutation(
@@ -109,7 +127,7 @@ const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
         const commitRequest = () =>
           commitModifyImageInput({
             variables: {
-              target: `${image?.registry}/${image?.name}:${image?.tag}`,
+              target: `${image?.registry}/${image?.name ?? image.namespace}:${image?.tag}`,
               architecture: image?.architecture,
               props: {
                 labels: labels,

react/src/components/ManageImageResourceLimitModal.tsx

@@ -1,26 +1,26 @@
 import { useSuspendedBackendaiClient } from '../hooks';
 import BAIModal, { BAIModalProps } from './BAIModal';
-import { EnvironmentImage } from './ImageList';
 import ImageResourceFormItem from './ImageResourceFormItem';
 import {
   ManageImageResourceLimitModalMutation,
   ResourceLimitInput,
 } from './__generated__/ManageImageResourceLimitModalMutation.graphql';
+import { ManageImageResourceLimitModal_image$key } from './__generated__/ManageImageResourceLimitModal_image.graphql';
 import { App, Form, FormInstance, message } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
 import React, { useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useMutation } from 'react-relay';
+import { useFragment, useMutation } from 'react-relay';
 
 interface ManageImageResourceLimitModalProps extends BAIModalProps {
-  image: EnvironmentImage | null;
+  imageFrgmt: ManageImageResourceLimitModal_image$key | null;
   open: boolean;
   onRequestClose: (success: boolean) => void;
 }
 const ManageImageResourceLimitModal: React.FC<
   ManageImageResourceLimitModalProps
-> = ({ image, open, onRequestClose, ...BAIModalProps }) => {
+> = ({ imageFrgmt, open, onRequestClose, ...BAIModalProps }) => {
   const baiClient = useSuspendedBackendaiClient();
   // Differentiate default max value based on manager version.
   // The difference between validating a variable type as undefined or none for an unsupplied field value.
@@ -30,6 +30,25 @@ const ManageImageResourceLimitModal: React.FC<
   const formRef = useRef<FormInstance>(null);
   const app = App.useApp();
 
+  const image = useFragment(
+    graphql`
+      fragment ManageImageResourceLimitModal_image on Image {
+        resource_limits {
+          key
+          min
+          max
+        }
+        registry
+        name @deprecatedSince(version: "24.12.0")
+        namespace @since(version: "24.12.0")
+        architecture
+        installed
+        tag
+      }
+    `,
+    imageFrgmt,
+  );
+
   const [commitModifyImageInput, isInFlightModifyImageInput] =
     useMutation<ManageImageResourceLimitModalMutation>(graphql`
       mutation ManageImageResourceLimitModalMutation(
@@ -65,7 +84,7 @@ const ManageImageResourceLimitModal: React.FC<
     const commitRequest = () =>
       commitModifyImageInput({
         variables: {
-          target: `${image?.registry}/${image?.name}:${image?.tag}`,
+          target: `${image?.registry}/${image?.name ?? image?.namespace}:${image?.tag}`,
           architecture: image?.architecture,
           props: {
             resource_limits,