Add Register Model and Register Model Version form

clients/ui/frontend/package.json

@@ -94,6 +94,7 @@
     "@patternfly/react-icons": "6.0.0-alpha.37",
     "@patternfly/react-styles": "6.0.0-alpha.35",
     "@patternfly/react-table": "6.0.0-alpha.101",
+    "@patternfly/react-templates": "6.0.0-alpha.50",
     "lodash-es": "^4.17.15",
     "npm-run-all": "^4.1.5",
     "react": "^18",

clients/ui/frontend/src/__mocks__/mockBFFResponse.ts

@@ -1,5 +1,5 @@
-import { ModelRegistryResponse } from '~/app/types';
+import { ModelRegistryBody } from '~/app/types';
 
-export const mockBFFResponse = <T>(data: T): ModelRegistryResponse<T> => ({
+export const mockBFFResponse = <T>(data: T): ModelRegistryBody<T> => ({
   data,
 });

clients/ui/frontend/src/__mocks__/utils.ts

@@ -1,6 +1,6 @@
 import {
   ModelRegistryMetadataType,
-  ModelRegistryResponse,
+  ModelRegistryBody,
   ModelRegistryStringCustomProperties,
 } from '~/app/types';
 
@@ -16,6 +16,6 @@ export const createModelRegistryLabelsObject = (
     return acc;
   }, {} as ModelRegistryStringCustomProperties);
 
-export const mockBFFResponse = <T>(data: T): ModelRegistryResponse<T> => ({
+export const mockBFFResponse = <T>(data: T): ModelRegistryBody<T> => ({
   data,
 });

clients/ui/frontend/src/__tests__/cypress/cypress/support/commands/api.ts

@@ -3,7 +3,7 @@ import type {
   ModelArtifact,
   ModelArtifactList,
   ModelRegistry,
-  ModelRegistryResponse,
+  ModelRegistryBody,
   ModelVersion,
   ModelVersionList,
   RegisteredModel,
@@ -35,7 +35,7 @@ declare global {
       interceptApi: ((
         type: 'GET /api/:apiVersion/model_registry/:modelRegistryName/registered_models',
         options: { path: { modelRegistryName: string; apiVersion: string } },
-        response: ApiResponse<ModelRegistryResponse<RegisteredModelList>>,
+        response: ApiResponse<ModelRegistryBody<RegisteredModelList>>,
       ) => Cypress.Chainable<null>) &
         ((
           type: 'POST /api/:apiVersion/model_registry/:modelRegistryName/registered_models',
@@ -47,7 +47,7 @@ declare global {
           options: {
             path: { modelRegistryName: string; apiVersion: string; registeredModelId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<ModelVersionList>>,
+          response: ApiResponse<ModelRegistryBody<ModelVersionList>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'POST /api/:apiVersion/model_registry/:modelRegistryName/registered_models/:registeredModelId/versions',
@@ -61,28 +61,28 @@ declare global {
           options: {
             path: { modelRegistryName: string; apiVersion: string; registeredModelId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<RegisteredModel>>,
+          response: ApiResponse<ModelRegistryBody<RegisteredModel>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'PATCH /api/:apiVersion/model_registry/:modelRegistryName/registered_models/:registeredModelId',
           options: {
             path: { modelRegistryName: string; apiVersion: string; registeredModelId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<RegisteredModel>>,
+          response: ApiResponse<ModelRegistryBody<RegisteredModel>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'GET /api/:apiVersion/model_registry/:modelRegistryName/model_versions/:modelVersionId',
           options: {
             path: { modelRegistryName: string; apiVersion: string; modelVersionId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<ModelVersion>>,
+          response: ApiResponse<ModelRegistryBody<ModelVersion>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'GET /api/:apiVersion/model_registry/:modelRegistryName/model_versions/:modelVersionId/artifacts',
           options: {
             path: { modelRegistryName: string; apiVersion: string; modelVersionId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<ModelArtifactList>>,
+          response: ApiResponse<ModelRegistryBody<ModelArtifactList>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'POST /api/:apiVersion/model_registry/:modelRegistryName/model_versions/:modelVersionId/artifacts',
@@ -101,7 +101,7 @@ declare global {
         ((
           type: 'GET /api/:apiVersion/model_registry',
           options: { path: { apiVersion: string } },
-          response: ApiResponse<ModelRegistryResponse<ModelRegistry[]>>,
+          response: ApiResponse<ModelRegistryBody<ModelRegistry[]>>,
         ) => Cypress.Chainable<null>);
     }
   }

clients/ui/frontend/src/app/api/__tests__/service.spec.ts

@@ -28,6 +28,7 @@ jest.mock('~/app/api/apiUtils', () => ({
   restCREATE: jest.fn(() => mockRestPromise),
   restGET: jest.fn(() => mockRestPromise),
   restPATCH: jest.fn(() => mockRestPromise),
+  assembleModelRegistryBody: jest.fn(() => ({})),
   isModelRegistryResponse: jest.fn(() => true),
 }));
 
@@ -61,7 +62,7 @@ describe('createRegisteredModel', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/registered_models`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -89,7 +90,7 @@ describe('createModelVersion', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_versions`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -117,7 +118,7 @@ describe('createModelVersionForRegisteredModel', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/registered_models/1/versions`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -150,7 +151,7 @@ describe('createModelArtifact', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_artifacts`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -183,7 +184,7 @@ describe('createModelArtifactForModelVersion', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_versions/2/artifacts`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -347,7 +348,7 @@ describe('patchRegisteredModel', () => {
     expect(restPATCHMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/registered_models/1`,
-      mockData,
+      {},
       APIOptionsMock,
     );
     expect(handleRestFailuresMock).toHaveBeenCalledTimes(1);
@@ -366,7 +367,7 @@ describe('patchModelVersion', () => {
     expect(restPATCHMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_versions/1`,
-      mockData,
+      {},
       APIOptionsMock,
     );
     expect(handleRestFailuresMock).toHaveBeenCalledTimes(1);
@@ -385,7 +386,7 @@ describe('patchModelArtifact', () => {
     expect(restPATCHMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_artifacts/1`,
-      mockData,
+      {},
       APIOptionsMock,
     );
     expect(handleRestFailuresMock).toHaveBeenCalledTimes(1);

clients/ui/frontend/src/app/api/apiUtils.ts

@@ -1,6 +1,6 @@
 import { APIOptions } from '~/app/api/types';
 import { EitherOrNone } from '~/typeHelpers';
-import { ModelRegistryResponse } from '~/app/types';
+import { ModelRegistryBody } from '~/app/types';
 
 export const mergeRequestInit = (
   opts: APIOptions = {},
@@ -163,14 +163,16 @@ export const restDELETE = <T>(
     parseJSON: options?.parseJSON,
   });
 
-export const isModelRegistryResponse = <T>(
-  response: unknown,
-): response is ModelRegistryResponse<T> => {
+export const isModelRegistryResponse = <T>(response: unknown): response is ModelRegistryBody<T> => {
   if (typeof response === 'object' && response !== null) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const modelRegistryResponse = response as { data?: T };
+    const modelRegistryBody = response as { data?: T };
     // TODO: Check if data is conforming any type so we have a proper check
-    return modelRegistryResponse.data !== undefined;
+    return modelRegistryBody.data !== undefined;
   }
   return false;
 };
+
+export const assembleModelRegistryBody = <T>(data: T): ModelRegistryBody<T> => ({
+  data,
+});