Add ilab project selector modal

[caponetto]

Description

See https://issues.redhat.com/browse/RHOAIENG-20120

Note: I'm seeing Error communicating with pipeline server as the value of ilabPipelineLoadError while the ilab pipeline is being loaded. This makes one of the warning alerts to be shown temporarily. See the video below when I select the ilab project:

RHOAIENG-20120.mov

How Has This Been Tested?

Add the StartRunModal component somewhere in the code and select the projects.

import StartRunModal from '~/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal';
...
<StartRunModal onSubmit={(selectedProject) => {}} onCancel={() => {}} />
...

Test Impact

Test coverage is included for the relevant code.

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[codecov]

Codecov Report

Attention: Patch coverage is 73.68421% with 15 lines in your changes missing coverage. Please review.

Project coverage is 84.62%. Comparing base (aa9a0f1) to head (3fc40f9).
Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
...modelCustomization/startRunModal/StartRunModal.tsx	0.00%	15 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3809      +/-   ##
==========================================
- Coverage   84.62%   84.62%   -0.01%     
==========================================
  Files        1523     1526       +3     
  Lines       35324    35379      +55     
  Branches     9885     9902      +17     
==========================================
+ Hits        29894    29940      +46     
- Misses       5430     5439       +9     

Files with missing lines	Coverage Δ
.../content/modelCustomizationForm/useIlabPipeline.ts	88.88% <100.00%> (+1.38%)	⬆️
frontend/src/concepts/projects/ProjectSelector.tsx	93.61% <100.00%> (+0.28%)	⬆️
...tomization/startRunModal/MissingConditionAlert.tsx	100.00% <100.00%> (ø)
...elCustomization/startRunModal/useContinueState.tsx	100.00% <100.00%> (ø)
...modelCustomization/startRunModal/StartRunModal.tsx	0.00% <0.00%> (ø)

... and 11 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update aa9a0f1...3fc40f9. Read the comment docs.

[Gkrumbach07]

SO that error comes up because the pipeline server is not ready and you are trying to make calls within it. Usually we wrap components that use these pipeline calls in EnsureAPIAvailability component which will only render the children if !apiAvailable && pipelinesServer.compatible

I think you need to only call the useIlab hook if it is ready, so you could

export const useIlabPipeline = (): FetchState<PipelineVersionKF | null> => {
  const { pipelinesServer } = usePipelinesAPI();
  const [ilabPipeline, ilabPipelineLoaded, ilabPipelineLoadError, refreshIlabPipeline] =
    usePipelineByName(
      pipelinesServer.compatible && pipelinesServer.installed ? ILAB_PIPELINE_NAME : '',
    );

this will stop the ilab from calling if the pipeline server is not ready

[caponetto]

@Gkrumbach07 thank you for the tip! It does help reduce the number of unnecessary requests, but the issue persists. Anyway, I'm leaving this PR ready to go in case we want to merge it and address that issue in a different ticket.

EDIT: When the error happens, apiAvailable is false! Including a check for apiAvailable resolves the issue. However, this change broke two tests in modelCustomizationForm.cy.ts.

[Gkrumbach07]

ok i logged a follow up so we can unblock

https://issues.redhat.com/browse/RHOAIENG-20647

/lgtm
/approve

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: Gkrumbach07

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [Gkrumbach07]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment