feat: add hg model id field at model_instance page (#300)

This commit add HuggingFace model ID field at model_instance page to help user better navigate the model details (close #299)

integration-test/common/model.ts

@@ -117,7 +117,7 @@ export type ExpectCorrectModelDetailsProps = {
     | "STATE_UNSPECIFIED"
     | "STATE_ERROR";
   modelTask: string;
-  additionalRule?: () => Promise<void>;
+  additionalRules?: () => Promise<void>;
 };
 
 export const expectCorrectModelDetails = async ({
@@ -127,7 +127,7 @@ export const expectCorrectModelDetails = async ({
   modelInstanceTag,
   modelState,
   modelTask,
-  additionalRule,
+  additionalRules,
 }: ExpectCorrectModelDetailsProps) => {
   await page.goto(`/models/${modelId}`, { waitUntil: "networkidle" });
 
@@ -166,7 +166,7 @@ export const expectCorrectModelDetails = async ({
     expect(await stateToggle.isChecked()).not.toBeTruthy();
   }
 
-  if (additionalRule) await additionalRule();
+  if (additionalRules) await additionalRules();
 };
 
 export const expectToDeployModel = async (

integration-test/model-huggingface.spec.ts

@@ -84,6 +84,13 @@ test.describe.serial("Hugging face model", () => {
       modelInstanceTag,
       modelState: "STATE_ONLINE",
       modelTask: "CLASSIFICATION",
+      additionalRules: async () => {
+        const huggingFaceModelIdField = page.locator(
+          "input#huggingface-model-id"
+        );
+        expect(await huggingFaceModelIdField.isEditable()).toBeFalsy();
+        await expect(huggingFaceModelIdField).toHaveValue(huggingFaceId);
+      },
     });
   });
 

src/components/model/ConfigureModelInstanceForm.tsx

@@ -26,6 +26,8 @@ const ConfigureModelInstanceForm = ({
       status: null,
     });
 
+  console.log(modelInstance);
+
   return (
     <FormBase
       padding={null}
@@ -69,6 +71,18 @@ const ConfigureModelInstanceForm = ({
             />
           </>
         ) : null}
+        {modelInstance.model_definition === "model-definitions/huggingface" ? (
+          <>
+            <BasicTextField
+              id="huggingface-model-id"
+              label="HuggingFace model ID"
+              description="The name of a public HuggingFace model ID, e.g. `google/vit-base-patch16-224`."
+              value={modelInstance.configuration.repo_id}
+              disabled={true}
+              required={true}
+            />
+          </>
+        ) : null}
       </div>
       <div className="flex flex-row">
         <BasicProgressMessageBox