From ba8cedbd69ac276648ce85a39b7507b1edc480f6 Mon Sep 17 00:00:00 2001 From: Juntao Wang Date: Wed, 22 May 2024 17:00:54 -0400 Subject: [PATCH] Microcopy for pipelines v2 --- .../e2e/pipelines/PipelineCreateRuns.cy.ts | 10 +-- .../cypress/e2e/pipelines/PipelineRuns.cy.ts | 40 ++++++------ .../cypress/e2e/pipelines/Pipelines.cy.ts | 8 +-- .../e2e/pipelines/PipelinesTopology.cy.ts | 8 +-- .../pages/pipelines/pipelineFilterBar.ts | 4 +- .../pages/pipelines/pipelineRunTable.ts | 6 +- .../pages/pipelines/pipelineRunsGlobal.ts | 12 ++-- .../content/DeletePipelineRunsModal.tsx | 12 ++-- .../metricsSection/roc/RocCurveCompare.tsx | 2 +- .../content/createRun/CloneRunPage.tsx | 2 +- .../content/createRun/CreateRunPage.tsx | 2 +- .../pipelines/content/createRun/RunForm.tsx | 26 +++----- .../pipelines/content/createRun/RunPage.tsx | 12 ++-- .../content/createRun/RunPageFooter.tsx | 2 +- .../pipelines/content/createRun/const.ts | 6 +- .../contentSections/ExperimentSection.tsx | 41 ------------ .../ParamsSection/ParamsSection.tsx | 1 + .../ProjectAndExperimentSection.tsx | 56 ++++++++++++++++ .../contentSections/RunTypeSection.tsx | 64 ++++++++++--------- .../pipelines/content/createRun/types.ts | 6 +- .../pipeline/PipelineDetailsActions.tsx | 6 +- .../pipelineRun/PipelineRunDetails.tsx | 2 +- .../pipelineRunJob/PipelineRunJobDetails.tsx | 2 +- .../PipelineRunJobDetailsActions.tsx | 2 +- .../tables/pipeline/PipelinesTableRow.tsx | 2 +- .../tables/pipelineRun/PipelineRunTable.tsx | 8 +-- .../pipelineRun/PipelineRunTableRow.tsx | 2 +- .../pipelineRunJob/PipelineRunJobTable.tsx | 2 +- .../pipelineRunJob/PipelineRunJobTableRow.tsx | 2 +- .../PipelineRunJobTableToolbar.tsx | 2 +- .../PipelineVersionTableRow.tsx | 6 +- .../elyra/ElyraInvalidVersionAlerts.tsx | 4 +- .../GlobalPipelineExperimentsRoutes.tsx | 9 ++- .../experiments/ArchivedExperimentsList.tsx | 5 +- .../experiments/GlobalExperimentsTabs.tsx | 10 +-- .../experiments/GlobalNoExperiments.tsx | 10 +-- .../experiments/RestoreExperimentModal.tsx | 9 +-- .../ArtifactDetails/ArtifactDetails.tsx | 4 +- .../global/experiments/artifacts/utils.ts | 5 +- .../compareRuns/ManageRunsPage.tsx | 2 +- .../pipelines/global/experiments/const.ts | 8 +-- .../pipelines/global/runs/ActiveRuns.tsx | 8 +-- .../pipelines/global/runs/ArchiveRunModal.tsx | 6 +- .../pipelines/global/runs/ArchivedRuns.tsx | 10 +-- .../global/runs/GlobalPipelineRunsTabs.tsx | 28 ++++---- .../pipelines/global/runs/RestoreRunModal.tsx | 4 +- .../pipelines/global/runs/ScheduledRuns.tsx | 8 +-- .../src/pages/pipelines/global/runs/types.ts | 10 +-- .../imageSelector/ImageVersionSelector.tsx | 6 +- 49 files changed, 256 insertions(+), 246 deletions(-) delete mode 100644 frontend/src/concepts/pipelines/content/createRun/contentSections/ExperimentSection.tsx create mode 100644 frontend/src/concepts/pipelines/content/createRun/contentSections/ProjectAndExperimentSection.tsx diff --git a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts index bd930e820a..f58bf7b5fe 100644 --- a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts @@ -84,7 +84,7 @@ describe('Pipeline create runs', () => { verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create`); createRunPage.find(); createRunPage.findRunTypeSwitchLink().click(); - cy.url().should('include', '?runType=scheduled'); + cy.url().should('include', '?runType=schedules'); }); it('creates an active run', () => { @@ -487,10 +487,10 @@ describe('Pipeline create runs', () => { // Navigate to the 'Create run' page pipelineRunsGlobal.findScheduleRunButton().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=schedules`); createSchedulePage.find(); createSchedulePage.findRunTypeSwitchLink().click(); - cy.url().should('include', '?runType=active'); + cy.url().should('include', '?runType=runs'); }); it('creates a schedule', () => { @@ -518,7 +518,7 @@ describe('Pipeline create runs', () => { // Navigate to the 'Create run' page pipelineRunsGlobal.findScheduleRunButton().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=schedules`); createSchedulePage.find(); // Fill out the form with a schedule and submit @@ -594,7 +594,7 @@ describe('Pipeline create runs', () => { .findKebabAction('Duplicate') .click(); verifyRelativeURL( - `/pipelineRuns/${projectName}/pipelineRun/cloneJob/${mockRecurringRun.recurring_run_id}?runType=scheduled`, + `/pipelineRuns/${projectName}/pipelineRun/cloneJob/${mockRecurringRun.recurring_run_id}?runType=schedules`, ); // Verify pre-populated values & submit diff --git a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineRuns.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineRuns.cy.ts index 4022815c81..1bc80de854 100644 --- a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineRuns.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineRuns.cy.ts @@ -76,7 +76,7 @@ const mockActiveRuns = [ const mockExperimentIds = [...new Set(mockActiveRuns.map((mockRun) => mockRun.experiment_id))]; const mockVersionIds = [ ...new Set( - mockActiveRuns.map((mockRun) => mockRun.pipeline_version_reference.pipeline_version_id), + mockActiveRuns.map((mockRun) => mockRun.pipeline_version_reference?.pipeline_version_id), ), ]; const mockExperiments = mockExperimentIds.map((experimentId) => @@ -158,7 +158,7 @@ describe('Pipeline runs', () => { describe('empty state', () => { beforeEach(() => { activeRunsTable.mockGetActiveRuns([], projectName); - pipelineRunsGlobal.visit(projectName, 'active'); + pipelineRunsGlobal.visit(projectName, 'runs'); }); it('shows empty state', () => { @@ -167,7 +167,7 @@ describe('Pipeline runs', () => { it('navigate to create run page', () => { pipelineRunsGlobal.findCreateRunButton().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=active`); + verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=runs`); }); }); @@ -198,7 +198,7 @@ describe('Pipeline runs', () => { }, ).as('getActiveRuns'); - pipelineRunsGlobal.visit(projectName, 'active'); + pipelineRunsGlobal.visit(projectName, 'runs'); cy.wait('@getActiveRuns').then((interception) => { expect(interception.request.query).to.eql({ @@ -279,7 +279,7 @@ describe('Pipeline runs', () => { describe('with data', () => { beforeEach(() => { activeRunsTable.mockGetActiveRuns(mockActiveRuns, projectName); - pipelineRunsGlobal.visit(projectName, 'active'); + pipelineRunsGlobal.visit(projectName, 'runs'); }); it('renders the page with table data', () => { @@ -335,11 +335,11 @@ describe('Pipeline runs', () => { }); it('navigate between tabs', () => { pipelineRunsGlobal.findArchivedRunsTab().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}?runType=archived`); + verifyRelativeURL(`/pipelineRuns/${projectName}?runType=archive`); pipelineRunsGlobal.findActiveRunsTab().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}?runType=active`); + verifyRelativeURL(`/pipelineRuns/${projectName}?runType=runs`); pipelineRunsGlobal.findSchedulesTab().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectName}?runType=schedules`); }); it('navigate to run details page', () => { activeRunsTable @@ -355,7 +355,7 @@ describe('Pipeline runs', () => { const selectedVersion = mockVersions.find( (mockVersion) => mockVersion.pipeline_version_id === - mockActiveRuns[0].pipeline_version_reference.pipeline_version_id, + mockActiveRuns[0].pipeline_version_reference?.pipeline_version_id, ); if (!selectedVersion) { return; @@ -439,7 +439,7 @@ describe('Pipeline runs', () => { activeRunsTable.mockGetActiveRuns( mockActiveRuns.filter( (mockRun) => - mockRun.pipeline_version_reference.pipeline_version_id === 'test-version-1', + mockRun.pipeline_version_reference?.pipeline_version_id === 'test-version-1', ), projectName, 1, @@ -570,14 +570,14 @@ describe('Pipeline runs', () => { describe('Archived runs', () => { it('shows empty state', () => { archivedRunsTable.mockGetArchivedRuns([], projectName); - pipelineRunsGlobal.visit(projectName, 'archived'); + pipelineRunsGlobal.visit(projectName, 'archive'); archivedRunsTable.findEmptyState().should('exist'); }); describe('with data', () => { beforeEach(() => { archivedRunsTable.mockGetArchivedRuns(mockArchivedRuns, projectName); - pipelineRunsGlobal.visit(projectName, 'archived'); + pipelineRunsGlobal.visit(projectName, 'archive'); }); it('renders the page with table data', () => { @@ -688,7 +688,7 @@ describe('Pipeline runs', () => { archivedRunsTable.mockGetArchivedRuns( mockArchivedRuns.filter( (mockRun) => - mockRun.pipeline_version_reference.pipeline_version_id === 'test-version-1', + mockRun.pipeline_version_reference?.pipeline_version_id === 'test-version-1', ), projectName, 1, @@ -800,7 +800,7 @@ describe('Pipeline runs', () => { describe('empty state', () => { beforeEach(() => { pipelineRunJobTable.mockGetJobs([], projectName); - pipelineRunsGlobal.visit(projectName, 'scheduled'); + pipelineRunsGlobal.visit(projectName, 'schedules'); }); it('shows empty state', () => { @@ -809,13 +809,13 @@ describe('Pipeline runs', () => { it('navigate to create run page', () => { pipelineRunsGlobal.findScheduleRunButton().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=schedules`); }); }); it('shows empty state', () => { pipelineRunJobTable.mockGetJobs([], projectName); - pipelineRunsGlobal.visit(projectName, 'scheduled'); + pipelineRunsGlobal.visit(projectName, 'schedules'); pipelineRunJobTable.findEmptyState().should('exist'); }); @@ -844,7 +844,7 @@ describe('Pipeline runs', () => { next_page_token: 'page-2-token', }, ).as('getScheduledRuns'); - pipelineRunsGlobal.visit(projectName, 'scheduled'); + pipelineRunsGlobal.visit(projectName, 'schedules'); cy.wait('@getScheduledRuns').then((interception) => { expect(interception.request.query).to.eql({ @@ -977,7 +977,7 @@ describe('Pipeline runs', () => { describe('with data', () => { beforeEach(() => { pipelineRunJobTable.mockGetJobs(mockJobs, projectName); - pipelineRunsGlobal.visit(projectName, 'scheduled'); + pipelineRunsGlobal.visit(projectName, 'schedules'); }); it('renders the page with table rows', () => { @@ -999,7 +999,7 @@ describe('Pipeline runs', () => { describe('Navigation', () => { it('navigate to create scheduled run page', () => { pipelineRunsGlobal.findScheduleRunButton().click(); - verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=schedules`); }); it('navigate to clone scheduled run page', () => { pipelineRunJobTable @@ -1007,7 +1007,7 @@ describe('Pipeline runs', () => { .findKebabAction('Duplicate') .click(); verifyRelativeURL( - `/pipelineRuns/${projectName}/pipelineRun/cloneJob/${mockJobs[0].recurring_run_id}?runType=scheduled`, + `/pipelineRuns/${projectName}/pipelineRun/cloneJob/${mockJobs[0].recurring_run_id}?runType=schedules`, ); }); it('navigate to scheduled run details page', () => { diff --git a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/Pipelines.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/Pipelines.cy.ts index 00ada6a171..70d194a10f 100644 --- a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/Pipelines.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/Pipelines.cy.ts @@ -967,7 +967,7 @@ describe('Pipelines', () => { .findKebabAction('Schedule run') .click(); - verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create?runType=scheduled`); + verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create?runType=schedules`); }); it('navigate to create run page from pipeline version row', () => { @@ -997,7 +997,7 @@ describe('Pipelines', () => { .findKebabAction('Schedule run') .click(); - verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create?runType=scheduled`); + verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create?runType=schedules`); }); it('navigate to view runs page from pipeline version row', () => { @@ -1012,7 +1012,7 @@ describe('Pipelines', () => { .getPipelineVersionRowById(initialMockPipelineVersion.pipeline_version_id) .findKebabAction('View runs') .click(); - verifyRelativeURL(`/pipelineRuns/${projectName}?runType=active`); + verifyRelativeURL(`/pipelineRuns/${projectName}?runType=runs`); }); it('navigates to "Schedules" page from pipeline version row', () => { @@ -1026,7 +1026,7 @@ describe('Pipelines', () => { .getPipelineVersionRowById(initialMockPipelineVersion.pipeline_version_id) .findKebabAction('View schedules') .click(); - verifyRelativeURL(`/pipelineRuns/${projectName}?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectName}?runType=schedules`); }); it('Table pagination', () => { diff --git a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelinesTopology.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelinesTopology.cy.ts index f0240a21d4..6ab298bfeb 100644 --- a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelinesTopology.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelinesTopology.cy.ts @@ -188,17 +188,17 @@ describe('Pipeline topology', () => { it('navigates to "Schedule run" page on "Schedule run" click', () => { pipelineDetails.selectActionDropdownItem('Schedule run'); - verifyRelativeURL(`/pipelineRuns/${projectId}/pipelineRun/create?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectId}/pipelineRun/create?runType=schedules`); }); it('Test pipeline details view runs navigation', () => { pipelineDetails.selectActionDropdownItem('View runs'); - verifyRelativeURL(`/pipelineRuns/${projectId}?runType=active`); + verifyRelativeURL(`/pipelineRuns/${projectId}?runType=runs`); }); it('navigates to "Schedules" on "View schedules" click', () => { pipelineDetails.selectActionDropdownItem('View schedules'); - verifyRelativeURL(`/pipelineRuns/${projectId}?runType=scheduled`); + verifyRelativeURL(`/pipelineRuns/${projectId}?runType=schedules`); }); }); @@ -319,7 +319,7 @@ describe('Pipeline topology', () => { pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id); pipelineRunJobDetails.selectActionDropdownItem('Duplicate'); verifyRelativeURL( - `/pipelineRuns/${projectId}/pipelineRun/cloneJob/${mockJob.recurring_run_id}?runType=scheduled`, + `/pipelineRuns/${projectId}/pipelineRun/cloneJob/${mockJob.recurring_run_id}?runType=schedules`, ); }); diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineFilterBar.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineFilterBar.ts index 5cdbc82e4c..182e107770 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineFilterBar.ts +++ b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineFilterBar.ts @@ -32,7 +32,7 @@ class PipelineRunFilterBar extends PipelineFilterBar { } private findActiveRunsTable() { - return cy.findByTestId('active-runs-table'); + return cy.findByTestId('runs-runs-table'); } findSortButtonForArchive(name: string) { @@ -40,7 +40,7 @@ class PipelineRunFilterBar extends PipelineFilterBar { } private findArchiveRunsTable() { - return cy.findByTestId('archived-runs-table'); + return cy.findByTestId('archive-runs-table'); } findSortButtonforSchedules(name: string) { diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts index 662c31ea89..0d924c32d7 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts +++ b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts @@ -24,7 +24,7 @@ class PipelineRunsTable { protected emptyStateTestId = ''; - constructor(tab?: 'active-runs' | 'archived-runs' | 'schedules') { + constructor(tab?: 'runs-runs' | 'archive-runs' | 'schedules') { this.testId = `${tab}-table`; this.emptyStateTestId = `${tab}-empty-state`; } @@ -114,7 +114,7 @@ class PipelineRunsTable { class ActiveRunsTable extends PipelineRunsTable { constructor() { - super('active-runs'); + super('runs-runs'); } mockGetActiveRuns(runs: PipelineRunKFv2[], namespace: string, times?: number) { @@ -123,7 +123,7 @@ class ActiveRunsTable extends PipelineRunsTable { } class ArchivedRunsTable extends PipelineRunsTable { constructor() { - super('archived-runs'); + super('archive-runs'); } mockGetArchivedRuns(runs: PipelineRunKFv2[], namespace: string, times?: number) { diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunsGlobal.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunsGlobal.ts index 1eb390d88d..2834a9142d 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunsGlobal.ts +++ b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunsGlobal.ts @@ -2,7 +2,7 @@ import { PipelineRunSearchParam } from '~/concepts/pipelines/content/types'; import { DeleteModal } from '~/__tests__/cypress/cypress/pages/components/DeleteModal'; class PipelineRunsGlobal { - visit(projectName: string, runType?: 'active' | 'archived' | 'scheduled') { + visit(projectName: string, runType?: 'runs' | 'archive' | 'schedules') { cy.visit( `/pipelineRuns/${projectName}${ runType ? `?${PipelineRunSearchParam.RunType}=${runType}` : '' @@ -21,15 +21,15 @@ class PipelineRunsGlobal { } findSchedulesTab() { - return cy.findByTestId('schedules-tab'); + return cy.findByTestId('schedules-runs-tab'); } findActiveRunsTab() { - return cy.findByRole('tab', { name: 'Active tab' }); + return cy.findByTestId('active-runs-tab'); } findArchivedRunsTab() { - return cy.findByRole('tab', { name: 'Archived tab' }); + return cy.findByTestId('archived-runs-tab'); } findProjectSelect() { @@ -49,11 +49,11 @@ class PipelineRunsGlobal { } findActiveRunsToolbar() { - return cy.findByTestId('active-runs-table-toolbar'); + return cy.findByTestId('runs-runs-table-toolbar'); } findArchivedRunsToolbar() { - return cy.findByTestId('archived-runs-table-toolbar'); + return cy.findByTestId('archive-runs-table-toolbar'); } selectFilterByName(name: string) { diff --git a/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx b/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx index d69f43f1a0..d03e4a5206 100644 --- a/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx +++ b/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx @@ -13,11 +13,11 @@ type DeletePipelineRunsModalProps = { onClose: (deleted?: boolean) => void; } & ( | { - type: PipelineRunType.Archived; + type: PipelineRunType.Archive; toDeleteResources: PipelineRunKFv2[]; } | { - type: PipelineRunType.Scheduled; + type: PipelineRunType.Schedules; toDeleteResources: PipelineRunJobKFv2[]; } ); @@ -47,10 +47,10 @@ const DeletePipelineRunsModal: React.FC = ({ let callFunc: (opts: K8sAPIOptions, id: string) => Promise; switch (type) { - case PipelineRunType.Archived: + case PipelineRunType.Archive: callFunc = api.deletePipelineRun; break; - case PipelineRunType.Scheduled: + case PipelineRunType.Schedules: callFunc = api.deletePipelineRunJob; break; default: @@ -65,7 +65,7 @@ const DeletePipelineRunsModal: React.FC = ({ if (resourceCount === 1) { callFunc( { signal: abortSignal }, - type === PipelineRunType.Scheduled + type === PipelineRunType.Schedules ? toDeleteResources[0].recurring_run_id : toDeleteResources[0].run_id, ) @@ -81,7 +81,7 @@ const DeletePipelineRunsModal: React.FC = ({ toDeleteResources.map((_run, i) => callFunc( { signal: abortSignal }, - type === PipelineRunType.Scheduled + type === PipelineRunType.Schedules ? toDeleteResources[i].recurring_run_id : toDeleteResources[i].run_id, ), diff --git a/frontend/src/concepts/pipelines/content/compareRuns/metricsSection/roc/RocCurveCompare.tsx b/frontend/src/concepts/pipelines/content/compareRuns/metricsSection/roc/RocCurveCompare.tsx index 168bb596d0..628edf6422 100644 --- a/frontend/src/concepts/pipelines/content/compareRuns/metricsSection/roc/RocCurveCompare.tsx +++ b/frontend/src/concepts/pipelines/content/compareRuns/metricsSection/roc/RocCurveCompare.tsx @@ -111,7 +111,7 @@ const RocCurveCompare: React.FC = ({ runArtifacts, isLoade - ROC Curve: multiple artifacts + ROC curve: multiple artifacts diff --git a/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx index e465da1ba3..a314b38b41 100644 --- a/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx @@ -14,7 +14,7 @@ const CloneRunPage: React.FC = ({ breadcrumbPath, contextPath }) => { const [run, loaded, error] = useCloneRunData(); const { runType: runTypeString } = useGetSearchParamValues([PipelineRunSearchParam.RunType]); const runType = asEnumMember(runTypeString, PipelineRunType); - const title = `Duplicate ${runTypeCategory[runType || PipelineRunType.Active]}`; + const title = `Duplicate ${runTypeCategory[runType || PipelineRunType.Runs]}`; return ( = ({ breadcrumbPath, contextPath }) => { const { runType } = useGetSearchParamValues([PipelineRunSearchParam.RunType]); - const title = `${runType === PipelineRunType.Scheduled ? 'Schedule' : 'Create'} run`; + const title = `${runType === PipelineRunType.Schedules ? 'Schedule' : 'Create'} run`; return ( = ({ data, runType, onValueChange }) => { const [latestVersion] = useLatestPipelineVersion(data.pipeline?.pipeline_id); const selectedVersion = data.version || latestVersion; const paramsRef = React.useRef(data.params); - const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status; - const isSchedule = runType === PipelineRunType.Scheduled; + const isSchedule = runType === PipelineRunType.Schedules; const updateInputParams = React.useCallback( (version: PipelineVersionKFv2 | undefined) => @@ -55,19 +53,11 @@ const RunForm: React.FC = ({ data, runType, onValueChange }) => {
e.preventDefault()} maxWidth="500px"> - - {getProjectDisplayName(data.project)} - - - {isExperimentsAvailable && ( - onValueChange('experiment', experiment)} - /> - )} + onValueChange('experiment', experiment)} + /> = ({ cloneRun, contextPath, testId }) => { PipelineRunSearchParam.TriggerType, ]); const triggerType = asEnumMember(triggerTypeString, ScheduledType); - const isSchedule = runType === PipelineRunType.Scheduled; + const isSchedule = runType === PipelineRunType.Schedules; const cloneRunPipelineId = cloneRun?.pipeline_version_reference?.pipeline_id || ''; const cloneRunVersionId = cloneRun?.pipeline_version_reference?.pipeline_version_id || ''; @@ -54,12 +53,9 @@ const RunPage: React.FC = ({ cloneRun, contextPath, testId }) => { const [cloneRunPipeline] = usePipelineById(cloneRunPipelineId); const [runExperiment] = useExperimentById(cloneRunExperimentId || experimentId); - const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status; - const jumpToSections = Object.values(CreateRunPageSections).filter( (section) => !( - (section === CreateRunPageSections.EXPERIMENT && !isExperimentsAvailable) || (section === CreateRunPageSections.SCHEDULE_DETAILS && !isSchedule) || (section === CreateRunPageSections.RUN_DETAILS && isSchedule) ), @@ -67,7 +63,7 @@ const RunPage: React.FC = ({ cloneRun, contextPath, testId }) => { const runTypeData: RunType = React.useMemo( () => - runType === PipelineRunType.Scheduled + runType === PipelineRunType.Schedules ? { type: RunTypeOption.SCHEDULED, data: { @@ -90,9 +86,9 @@ const RunPage: React.FC = ({ cloneRun, contextPath, testId }) => { React.useEffect(() => { // set the data if the url run type is different from the form data run type if ( - (runType === PipelineRunType.Scheduled && + (runType === PipelineRunType.Schedules && formData.runType.type === RunTypeOption.ONE_TRIGGER) || - (runType !== PipelineRunType.Scheduled && formData.runType.type === RunTypeOption.SCHEDULED) + (runType !== PipelineRunType.Schedules && formData.runType.type === RunTypeOption.SCHEDULED) ) { setFormDataValue('runType', runTypeData); } diff --git a/frontend/src/concepts/pipelines/content/createRun/RunPageFooter.tsx b/frontend/src/concepts/pipelines/content/createRun/RunPageFooter.tsx index 84d63bd7a0..ff420fe122 100644 --- a/frontend/src/concepts/pipelines/content/createRun/RunPageFooter.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/RunPageFooter.tsx @@ -72,7 +72,7 @@ const RunPageFooter: React.FC = ({ data, contextPath }) => { }); }} > - {`${runType === PipelineRunType.Scheduled ? 'Schedule' : 'Create'} run`} + {`${runType === PipelineRunType.Schedules ? 'Schedule' : 'Create'} run`} diff --git a/frontend/src/concepts/pipelines/content/createRun/const.ts b/frontend/src/concepts/pipelines/content/createRun/const.ts index 0fb21101c0..5f693fe1c6 100644 --- a/frontend/src/concepts/pipelines/content/createRun/const.ts +++ b/frontend/src/concepts/pipelines/content/createRun/const.ts @@ -19,8 +19,7 @@ export const RUN_OPTION_LABEL_SIZE = 100; export enum CreateRunPageSections { RUN_TYPE = 'run-section-run-type', - PROJECT = 'run-section-project', - EXPERIMENT = 'run-section-experiment', + PROJECT_AND_EXPERIMENT = 'run-section-project-and-experiment', RUN_DETAILS = 'run-section-details', SCHEDULE_DETAILS = 'run-section-schedule-details', PIPELINE = 'run-section-pipeline', @@ -29,8 +28,7 @@ export enum CreateRunPageSections { export const runPageSectionTitles: Record = { [CreateRunPageSections.RUN_TYPE]: 'Run type', - [CreateRunPageSections.PROJECT]: 'Project', - [CreateRunPageSections.EXPERIMENT]: 'Experiment', + [CreateRunPageSections.PROJECT_AND_EXPERIMENT]: 'Project and experiment', [CreateRunPageSections.RUN_DETAILS]: 'Run details', [CreateRunPageSections.SCHEDULE_DETAILS]: 'Schedule details', [CreateRunPageSections.PIPELINE]: 'Pipeline', diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/ExperimentSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/ExperimentSection.tsx deleted file mode 100644 index 2e7e8b4340..0000000000 --- a/frontend/src/concepts/pipelines/content/createRun/contentSections/ExperimentSection.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import { FormGroup, FormSection, Stack, StackItem } from '@patternfly/react-core'; -import { PlusCircleIcon } from '@patternfly/react-icons'; -import { ExperimentKFv2 } from '~/concepts/pipelines/kfTypes'; -import { - CreateRunPageSections, - runPageSectionTitles, -} from '~/concepts/pipelines/content/createRun/const'; -import ExperimentSelector from '~/concepts/pipelines/content/experiment/ExperimentSelector'; -import CreateExperimentButton from '~/concepts/pipelines/content/experiment/CreateExperimentButton'; - -type ExperimentSectionProps = { - value: ExperimentKFv2 | null; - onChange: (experiment: ExperimentKFv2) => void; -}; - -const ExperimentSection: React.FC = ({ value, onChange }) => ( - - - - - - - - } - onCreate={(experiment) => onChange(experiment)} - > - Create new experiment - - - - - -); - -export default ExperimentSection; diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx index 93b84f9919..b52a0f92f7 100644 --- a/frontend/src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx @@ -108,6 +108,7 @@ export const ParamsSection: React.FC = ({ data-testid={CreateRunPageSections.PARAMS} title={runPageSectionTitles[CreateRunPageSections.PARAMS]} > + Specify parameters required by pipelines. {renderContent()} ); diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/ProjectAndExperimentSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/ProjectAndExperimentSection.tsx new file mode 100644 index 0000000000..c9d84fce57 --- /dev/null +++ b/frontend/src/concepts/pipelines/content/createRun/contentSections/ProjectAndExperimentSection.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { FormGroup, FormSection, Stack, StackItem, Text } from '@patternfly/react-core'; +import { PlusCircleIcon } from '@patternfly/react-icons'; +import { ExperimentKFv2 } from '~/concepts/pipelines/kfTypes'; +import { + CreateRunPageSections, + runPageSectionTitles, +} from '~/concepts/pipelines/content/createRun/const'; +import ExperimentSelector from '~/concepts/pipelines/content/experiment/ExperimentSelector'; +import CreateExperimentButton from '~/concepts/pipelines/content/experiment/CreateExperimentButton'; +import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas'; + +type ExperimentSectionProps = { + projectName: string; + value: ExperimentKFv2 | null; + onChange: (experiment: ExperimentKFv2) => void; +}; + +const ProjectAndExperimentSection: React.FC = ({ + projectName, + value, + onChange, +}) => { + const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status; + + return ( + + + {projectName} + + {isExperimentsAvailable && ( + + + + + + + } + onCreate={(experiment) => onChange(experiment)} + > + Create new experiment + + + + + )} + + ); +}; + +export default ProjectAndExperimentSection; diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx index db301b936b..6d39d3f577 100644 --- a/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Alert, AlertActionCloseButton, Button, FormSection } from '@patternfly/react-core'; -import { useNavigate, useParams } from 'react-router-dom'; +import { Alert, AlertActionCloseButton, FormSection } from '@patternfly/react-core'; +import { useParams, Link } from 'react-router-dom'; import { PipelineRunTabTitle, PipelineRunType } from '~/pages/pipelines/global/runs'; import { @@ -16,27 +16,43 @@ interface RunTypeSectionProps { } export const RunTypeSection: React.FC = ({ runType }) => { - const navigate = useNavigate(); const { namespace, experimentId } = useParams(); const [isAlertOpen, setIsAlertOpen] = React.useState(true); const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status; - let runTypeValue = 'Run once immediately after creation'; - let alertProps = { - title: 'Go to Schedules to create schedules that execute recurring runs', - label: `Go to ${PipelineRunTabTitle.Schedules}`, - search: '?runType=scheduled', - pathname: scheduleRunRoute(namespace, isExperimentsAvailable ? experimentId : undefined), - }; + const runTypeValue = 'Run once immediately after creation'; + let alertTitle = ( + <> + To create a schedule that executes recurring runs,{' '} + + go to the {PipelineRunTabTitle.Schedules} tab + + . + + ); - if (runType === PipelineRunType.Scheduled) { - runTypeValue = 'Schedule recurring run'; - alertProps = { - title: 'Go to Active runs to create a run that executes once immediately after creation.', - label: `Go to ${PipelineRunTabTitle.Active} runs`, - search: '?runType=active', - pathname: createRunRoute(namespace, isExperimentsAvailable ? experimentId : undefined), - }; + if (runType === PipelineRunType.Schedules) { + alertTitle = ( + <> + To create a non-recurring run,{' '} + + go to the {PipelineRunTabTitle.Runs} tab + + . + + ); } return ( @@ -50,17 +66,7 @@ export const RunTypeSection: React.FC = ({ runType }) => { navigate({ pathname: alertProps.pathname, search: alertProps.search })} - data-testid="run-type-section-alert-link" - > - {alertProps.label} - - } + title={alertTitle} actionClose={ setIsAlertOpen(false)} />} /> )} diff --git a/frontend/src/concepts/pipelines/content/createRun/types.ts b/frontend/src/concepts/pipelines/content/createRun/types.ts index 9dd1d52ae2..8d5209dc75 100644 --- a/frontend/src/concepts/pipelines/content/createRun/types.ts +++ b/frontend/src/concepts/pipelines/content/createRun/types.ts @@ -60,7 +60,7 @@ export type SafeRunFormData = RunFormData & { }; export const runTypeCategory: Record = { - [PipelineRunType.Active]: 'run', - [PipelineRunType.Archived]: 'run', - [PipelineRunType.Scheduled]: 'schedule', + [PipelineRunType.Runs]: 'run', + [PipelineRunType.Archive]: 'run', + [PipelineRunType.Schedules]: 'schedule', }; diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx index cd4159c6a7..46047d127c 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx @@ -68,7 +68,7 @@ const PipelineDetailsActions: React.FC = ({ navigate( { pathname: routePipelineRunCreateNamespace(namespace), - search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`, + search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Schedules}`, }, { state: { lastPipeline: pipeline, lastVersion: pipelineVersion }, @@ -85,7 +85,7 @@ const PipelineDetailsActions: React.FC = ({ navigate( { pathname: routePipelineRunsNamespace(namespace), - search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Active}`, + search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Runs}`, }, { state: { lastVersion: pipelineVersion }, @@ -101,7 +101,7 @@ const PipelineDetailsActions: React.FC = ({ navigate( { pathname: routePipelineRunsNamespace(namespace), - search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`, + search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Schedules}`, }, { state: { lastVersion: pipelineVersion }, diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx index fc6ff9ce51..12df1daf92 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx @@ -192,7 +192,7 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath, { if (deleteComplete) { diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx index 81e1934919..4b310926ab 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx @@ -158,7 +158,7 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({ { if (deleteComplete) { diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetailsActions.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetailsActions.tsx index c472f90ad3..64a0969dce 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetailsActions.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetailsActions.tsx @@ -52,7 +52,7 @@ const PipelineRunJobDetailsActions: React.FC job.recurring_run_id, isExperimentsAvailable ? experimentId : undefined, ), - search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`, + search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Schedules}`, }) } > diff --git a/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx index 4fc07f0eb1..ce1bace2a7 100644 --- a/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx +++ b/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx @@ -120,7 +120,7 @@ const PipelinesTableRow: React.FC = ({ navigate( { pathname: routePipelineRunCreateNamespacePipelinesPage(namespace), - search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`, + search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Schedules}`, }, { state: { lastPipeline: pipeline }, diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx index 826e58c869..a4953590c8 100644 --- a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx +++ b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx @@ -34,7 +34,7 @@ type PipelineRunTableProps = { setSortField: (field: string) => void; setSortDirection: (dir: 'asc' | 'desc') => void; setFilter: (filter?: PipelinesFilter) => void; - runType: PipelineRunType.Active | PipelineRunType.Archived; + runType: PipelineRunType.Runs | PipelineRunType.Archive; }; const PipelineRunTable: React.FC = ({ @@ -75,7 +75,7 @@ const PipelineRunTable: React.FC = ({ }, []); const primaryToolbarAction = React.useMemo(() => { - if (runType === PipelineRunType.Archived) { + if (runType === PipelineRunType.Archive) { return ( diff --git a/frontend/src/pages/pipelines/global/runs/types.ts b/frontend/src/pages/pipelines/global/runs/types.ts index b85e9324d2..3cab258ee7 100644 --- a/frontend/src/pages/pipelines/global/runs/types.ts +++ b/frontend/src/pages/pipelines/global/runs/types.ts @@ -1,11 +1,11 @@ export enum PipelineRunType { - Active = 'active', - Archived = 'archived', - Scheduled = 'scheduled', + Runs = 'runs', + Archive = 'archive', + Schedules = 'schedules', } export enum PipelineRunTabTitle { - Active = 'Active', - Archived = 'Archived', + Runs = 'Runs', + Archive = 'Archive', Schedules = 'Schedules', } diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx index 977e1d36f5..500cea7b03 100644 --- a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx +++ b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx @@ -104,14 +104,12 @@ const ImageVersionSelector: React.FC = ({ variant="info" isInline isPlain - title="A new image version is available. Select the latest image version to use Elyra for pipelines." + title="A new image version is available. Select the recommended version to use Elyra for pipelines." /> )} - - Hover an option to learn more information about the packages included. - + Hover over a version to view its included packages.