created ilab form

frontend/src/__tests__/cypress/cypress/pages/pipelines/modelCustomizationForm.ts

@@ -0,0 +1,43 @@
+class ModelCustomizationFormGlobal {
+  visit(projectName: string, empty = false) {
+    cy.visitWithLogin(`/modelCustomization/instructlab/${projectName}`);
+    if (empty) {
+      this.emptyWait();
+    } else {
+      this.wait();
+    }
+  }
+
+  invalidVisit() {
+    cy.visitWithLogin('/modelCustomization/instructlab');
+    this.emptyWait();
+  }
+
+  private wait() {
+    cy.findByTestId('app-page-title').contains('Instruct fine-tune run');
+    cy.testA11y();
+  }
+
+  private emptyWait() {
+    cy.findByTestId('app-page-title');
+    cy.testA11y();
+  }
+
+  findSubmitButton() {
+    return cy.findByTestId('model-customization-submit-button');
+  }
+
+  findProjectDropdown() {
+    cy.findByTestId('project-selector-toggle').click();
+  }
+
+  findProjectDropdownItem(name: string) {
+    cy.findAllByTestId('project-selector-menu').findMenuItem(name).click();
+  }
+
+  findEmptyState() {
+    return cy.findByTestId('empty-state-title');
+  }
+}
+
+export const modelCustomizationFormGlobal = new ModelCustomizationFormGlobal();

frontend/src/__tests__/cypress/cypress/support/commands/odh.ts

@@ -457,6 +457,33 @@ declare global {
           },
           response: OdhResponse<ListPipelinesResponseKF | GoogleRpcStatusKF>,
         ) => Cypress.Chainable<null>) &
+        ((
+          type: `GET /apis/v2beta1/pipelines/names/:pipelineName`,
+          options: {
+            path: { pipelineName: string };
+            times?: number;
+          },
+          response: OdhResponse<PipelineKF | GoogleRpcStatusKF>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines/names/:pipelineName',
+          options: {
+            path: { namespace: string; serviceName: string; pipelineName: string };
+            times?: number;
+          },
+          response: OdhResponse<PipelineKF | GoogleRpcStatusKF>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: `GET /apis/v2beta1/pipelines/:pipelineId/versions`,
+          options: {
+            path: {
+              pipelineId: string;
+            };
+            query?: { sort_by: string };
+            times?: number;
+          },
+          response: OdhResponse<ListPipelinesResponseKF | GoogleRpcStatusKF>,
+        ) => Cypress.Chainable<null>) &
         ((
           type: `POST /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/recurringruns/:recurringRunId`,
           options: { path: { namespace: string; serviceName: string; recurringRunId: string } },

frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/modelCustomizationForm.cy.ts

@@ -0,0 +1,211 @@
+/* eslint-disable camelcase */
+import { modelCustomizationFormGlobal } from '~/__tests__/cypress/cypress/pages/pipelines/modelCustomizationForm';
+import {
+  buildMockPipeline,
+  buildMockPipelines,
+  buildMockPipelineVersion,
+  buildMockPipelineVersions,
+  mockDashboardConfig,
+  mockDataSciencePipelineApplicationK8sResource,
+  mockK8sResourceList,
+  mockProjectK8sResource,
+  mockRouteK8sResource,
+  mockSecretK8sResource,
+} from '~/__mocks__';
+import {
+  DataSciencePipelineApplicationModel,
+  ProjectModel,
+  RouteModel,
+  SecretModel,
+} from '~/__tests__/cypress/cypress/utils/models';
+
+const projectName = 'test-project-name-2';
+const invalidMockPipeline = buildMockPipeline();
+const initialMockPipeline = buildMockPipeline({
+  display_name: 'instructlab',
+  pipeline_id: 'instructlab',
+});
+const initialMockPipelineVersion = buildMockPipelineVersion({
+  pipeline_id: initialMockPipeline.pipeline_id,
+});
+
+describe('Model Customization Form', () => {
+  it('Empty state', () => {
+    initIntercepts({ isEmptyProject: true });
+    cy.interceptK8sList(ProjectModel, mockK8sResourceList([]));
+    modelCustomizationFormGlobal.visit(projectName, true);
+    modelCustomizationFormGlobal.findEmptyState().should('exist');
+  });
+  it('Invalid state', () => {
+    initIntercepts({});
+    modelCustomizationFormGlobal.invalidVisit();
+    modelCustomizationFormGlobal.findEmptyState().should('exist');
+  });
+  it('Should submit', () => {
+    initIntercepts({});
+    modelCustomizationFormGlobal.visit(projectName);
+    cy.wait('@getAllPipelines');
+    cy.wait('@getAllPipelineVersions');
+    modelCustomizationFormGlobal.findSubmitButton().should('not.be.disabled');
+  });
+  it('Should not submit', () => {
+    initIntercepts({});
+    cy.interceptOdh(
+      'GET /apis/v2beta1/pipelines/names/:pipelineName',
+      {
+        path: { pipelineName: 'instructlab' },
+      },
+      buildMockPipeline(invalidMockPipeline),
+    ).as('getAllPipelines');
+    cy.interceptOdh(
+      'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines/names/:pipelineName',
+      {
+        path: {
+          namespace: projectName,
+          serviceName: 'dspa',
+          pipelineName: 'instructlab',
+        },
+      },
+      buildMockPipeline(invalidMockPipeline),
+    ).as('getIlabPipeline');
+    modelCustomizationFormGlobal.visit(projectName);
+    cy.wait('@getAllPipelines');
+    modelCustomizationFormGlobal.findSubmitButton().should('be.disabled');
+  });
+});
+
+type HandlersProps = {
+  disableFineTuning?: boolean;
+  isEmptyProject?: boolean;
+};
+
+export const initIntercepts = (
+  { disableFineTuning = false, isEmptyProject }: HandlersProps = { isEmptyProject: false },
+): void => {
+  cy.interceptOdh(
+    'GET /api/config',
+    mockDashboardConfig({
+      disableFineTuning,
+    }),
+  );
+  cy.interceptK8sList(
+    DataSciencePipelineApplicationModel,
+    mockK8sResourceList(
+      isEmptyProject
+        ? []
+        : [
+            mockDataSciencePipelineApplicationK8sResource({
+              namespace: projectName,
+            }),
+          ],
+    ),
+  );
+  cy.interceptK8s(
+    DataSciencePipelineApplicationModel,
+    mockDataSciencePipelineApplicationK8sResource({
+      namespace: projectName,
+      dspaSecretName: 'aws-connection-test',
+    }),
+  );
+  cy.interceptK8s(
+    {
+      model: SecretModel,
+      ns: projectName,
+    },
+    mockSecretK8sResource({
+      s3Bucket: 'c2RzZA==',
+      namespace: projectName,
+      name: 'aws-connection-test',
+    }),
+  );
+  cy.interceptK8s(
+    'GET',
+    SecretModel,
+    mockSecretK8sResource({ name: 'ds-pipeline-config', namespace: projectName }),
+  ).as('deletePipelineConfig');
+  cy.interceptK8s(
+    RouteModel,
+    mockRouteK8sResource({
+      notebookName: 'ds-pipeline-dspa',
+      namespace: projectName,
+    }),
+  );
+  cy.interceptK8sList(
+    ProjectModel,
+    mockK8sResourceList([
+      mockProjectK8sResource({ k8sName: 'test-project-name' }),
+      mockProjectK8sResource({ k8sName: `${projectName}`, displayName: 'Test Project 2' }),
+    ]),
+  );
+
+  cy.interceptOdh(
+    'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines',
+    {
+      path: { namespace: projectName, serviceName: 'dspa' },
+    },
+    buildMockPipelines([initialMockPipeline]),
+  ).as('getPipelines');
+
+  cy.interceptOdh(
+    'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines/:pipelineId/versions',
+    {
+      path: {
+        namespace: projectName,
+        serviceName: 'dspa',
+        pipelineId: initialMockPipeline.pipeline_id,
+      },
+    },
+    buildMockPipelineVersions([initialMockPipelineVersion]),
+  );
+  cy.interceptOdh(
+    'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines/:pipelineId',
+    {
+      path: {
+        namespace: projectName,
+        serviceName: 'dspa',
+        pipelineId: initialMockPipeline.pipeline_id,
+      },
+    },
+    initialMockPipeline,
+  );
+  cy.interceptOdh(
+    'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines/:pipelineId/versions/:pipelineVersionId',
+    {
+      path: {
+        namespace: projectName,
+        serviceName: 'dspa',
+        pipelineId: initialMockPipeline.pipeline_id,
+        pipelineVersionId: initialMockPipelineVersion.pipeline_version_id,
+      },
+    },
+    initialMockPipelineVersion,
+  );
+
+  cy.interceptOdh(
+    'GET /apis/v2beta1/pipelines/names/:pipelineName',
+    {
+      path: { pipelineName: 'instructlab' },
+    },
+    buildMockPipeline(initialMockPipeline),
+  ).as('getAllPipelines');
+
+  cy.interceptOdh(
+    'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines/names/:pipelineName',
+    {
+      path: {
+        namespace: projectName,
+        serviceName: 'dspa',
+        pipelineName: 'instructlab',
+      },
+    },
+    buildMockPipeline(initialMockPipeline),
+  ).as('getIlabPipeline');
+
+  cy.interceptOdh(
+    'GET /apis/v2beta1/pipelines/:pipelineId/versions',
+    {
+      path: { pipelineId: 'instructlab' },
+    },
+    buildMockPipelines([initialMockPipelineVersion]),
+  ).as('getAllPipelineVersions');
+};

frontend/src/api/pipelines/callTypes.ts

@@ -26,6 +26,7 @@ import {
   UpdateExperiment,
   DeleteExperiment,
   GetArtifact,
+  GetPipelineByName,
 } from '~/concepts/pipelines/types';
 import { K8sAPIOptions } from '~/k8sTypes';
 
@@ -41,6 +42,7 @@ export type CreatePipelineRunAPI = KubeflowAPICall<CreatePipelineRun>;
 export type CreatePipelineRecurringRunAPI = KubeflowAPICall<CreatePipelineRecurringRun>;
 export type GetExperimentAPI = KubeflowAPICall<GetExperiment>;
 export type GetPipelineAPI = KubeflowAPICall<GetPipeline>;
+export type GetPipelineByNameAPI = KubeflowAPICall<GetPipelineByName>;
 export type GetArtifactAPI = KubeflowAPICall<GetArtifact>;
 export type GetPipelineRunAPI = KubeflowAPICall<GetPipelineRun>;
 export type GetPipelineRecurringRunAPI = KubeflowAPICall<GetPipelineRecurringRun>;

frontend/src/api/pipelines/custom.ts

@@ -29,6 +29,7 @@ import {
   DeleteExperimentAPI,
   GetArtifactAPI,
   ListArtifactsAPI,
+  GetPipelineByNameAPI,
 } from './callTypes';
 import { handlePipelineFailures } from './errorUtils';
 
@@ -80,6 +81,11 @@ export const getArtifact: GetArtifactAPI = (hostPath) => (opts, artifactId, view
 export const getPipeline: GetPipelineAPI = (hostPath) => (opts, pipelineId) =>
   handlePipelineFailures(proxyGET(hostPath, `/apis/v2beta1/pipelines/${pipelineId}`, {}, opts));
 
+export const getPipelineByName: GetPipelineByNameAPI = (hostPath) => (opts, pipelineName) =>
+  handlePipelineFailures(
+    proxyGET(hostPath, `/apis/v2beta1/pipelines/names/${pipelineName}`, {}, opts),
+  );
+
 export const getPipelineRun: GetPipelineRunAPI = (hostPath) => (opts, pipelineRunId) =>
   handlePipelineFailures(proxyGET(hostPath, `/apis/v2beta1/runs/${pipelineRunId}`, {}, opts));
 

frontend/src/components/EmptyStateErrorMessage.tsx

@@ -19,7 +19,12 @@ const EmptyStateErrorMessage: React.FC<EmptyStateErrorMessageProps> = ({
   bodyText,
   children,
 }) => (
-  <EmptyState headingLevel="h2" icon={PathMissingIcon} titleText={title}>
+  <EmptyState
+    headingLevel="h2"
+    icon={PathMissingIcon}
+    titleText={title}
+    data-testid="empty-state-title"
+  >
     <EmptyStateFooter>
       <Stack hasGutter>
         <StackItem>

frontend/src/concepts/pipelines/apiHooks/usePipelineByName.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import useFetchState, {
+  FetchState,
+  FetchStateCallbackPromise,
+  NotReadyError,
+} from '~/utilities/useFetchState';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { PipelineKF } from '~/concepts/pipelines/kfTypes';
+
+export const usePipelineByName = (pipelineName: string): FetchState<PipelineKF | null> => {
+  const { api } = usePipelinesAPI();
+  const call = React.useCallback<FetchStateCallbackPromise<PipelineKF | null>>(
+    async (opts) => {
+      if (!pipelineName) {
+        return Promise.reject(new NotReadyError('No pipeline name'));
+      }
+      const pipeline = await api.getPipelineByName(opts, pipelineName);
+      return pipeline;
+    },
+    [api, pipelineName],
+  );
+  return useFetchState(call, null);
+};

frontend/src/concepts/pipelines/content/modelCustomizationForm/modelCustomizationFormSchema/types.ts

@@ -0,0 +1,9 @@
+export enum ModelCustomizationRunType {
+  FULL_RUN = 'Full run',
+  SIMPLE_RUN = 'Simple run',
+}
+
+export enum ModelCustomizationEndpointType {
+  PUBLIC = 'Public',
+  PRIVATE = 'Private',
+}