Add pipeline version support to frontend (#2667)

* FE changes for version ui

* sort methods; remove console

* format

* remove obsolete snapshots

* cosmetic change: simplify href link construction

* fix the clone run behavior when version present

* format

* run-integration-test

* frontend-integration-test: try to simulate uploading file

* fix frontend-integration-test

* address comments

* address comments and add one more unit test

frontend/src/components/CustomTable.tsx

@@ -674,6 +674,7 @@ const BodyRowSelectionSection: React.FC<BodyRowSelectionSectionProps> = ({
               expandState === ExpandState.EXPANDED && css.expandButtonExpanded,
             )}
             onClick={onExpand}
+            aria-label='Expand'
           >
             <ArrowRight />
           </IconButton>

frontend/src/components/Router.tsx

@@ -42,6 +42,7 @@ import Toolbar, { ToolbarProps } from './Toolbar';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { classes, stylesheet } from 'typestyle';
 import { commonCss } from '../Css';
+import NewPipelineVersion from '../pages/NewPipelineVersion';
 
 export type RouteConfig = { path: string; Component: React.ComponentType<any>; view?: any };
 
@@ -58,6 +59,7 @@ export enum QUERY_PARAMS {
   isRecurring = 'recurring',
   firstRunInExperiment = 'firstRunInExperiment',
   pipelineId = 'pipelineId',
+  pipelineVersionId = 'pipelineVersionId',
   fromRunId = 'fromRun',
   runlist = 'runlist',
   view = 'view',
@@ -66,6 +68,7 @@ export enum QUERY_PARAMS {
 export enum RouteParams {
   experimentId = 'eid',
   pipelineId = 'pid',
+  pipelineVersionId = 'vid',
   runId = 'rid',
   ARTIFACT_TYPE = 'artifactType',
   EXECUTION_TYPE = 'executionType',
@@ -91,9 +94,11 @@ export const RoutePage = {
   EXPERIMENTS: '/experiments',
   EXPERIMENT_DETAILS: `/experiments/details/:${RouteParams.experimentId}`,
   NEW_EXPERIMENT: '/experiments/new',
+  NEW_PIPELINE_VERSION: '/pipeline_versions/new',
   NEW_RUN: '/runs/new',
   PIPELINES: '/pipelines',
-  PIPELINE_DETAILS: `/pipelines/details/:${RouteParams.pipelineId}?`, // pipelineId is optional
+  PIPELINE_DETAILS: `/pipelines/details/:${RouteParams.pipelineId}/version/:${RouteParams.pipelineVersionId}?`,
+  PIPELINE_DETAILS_NO_VERSION: `/pipelines/details/:${RouteParams.pipelineId}?`, // pipelineId is optional
   RECURRING_RUN: `/recurringrun/details/:${RouteParams.runId}`,
   RUNS: '/runs',
   RUN_DETAILS: `/runs/details/:${RouteParams.runId}`,
@@ -149,9 +154,11 @@ const Router: React.FC<RouterProps> = ({ configs }) => {
     },
     { path: RoutePage.EXPERIMENT_DETAILS, Component: ExperimentDetails },
     { path: RoutePage.NEW_EXPERIMENT, Component: NewExperiment },
+    { path: RoutePage.NEW_PIPELINE_VERSION, Component: NewPipelineVersion },
     { path: RoutePage.NEW_RUN, Component: NewRun },
     { path: RoutePage.PIPELINES, Component: PipelineList },
     { path: RoutePage.PIPELINE_DETAILS, Component: PipelineDetails },
+    { path: RoutePage.PIPELINE_DETAILS_NO_VERSION, Component: PipelineDetails },
     { path: RoutePage.RUNS, Component: ExperimentsAndRuns, view: ExperimentsAndRunsTab.RUNS },
     { path: RoutePage.RECURRING_RUN, Component: RecurringRunDetails },
     { path: RoutePage.RUN_DETAILS, Component: RunDetails },

frontend/src/components/__snapshots__/CustomTable.test.tsx.snap

@@ -133,6 +133,7 @@ exports[`CustomTable renders a collapsed row 1`] = `
             color="primary"
           />
           <WithStyles(IconButton)
+            aria-label="Expand"
             className="expandButton"
             onClick={[Function]}
           >
@@ -356,6 +357,7 @@ exports[`CustomTable renders a collapsed row when selection is disabled 1`] = `
           className="cell selectionToggle"
         >
           <WithStyles(IconButton)
+            aria-label="Expand"
             className="expandButton"
             onClick={[Function]}
           >
@@ -1055,6 +1057,7 @@ exports[`CustomTable renders an expanded row with expanded component below it 1`
             color="primary"
           />
           <WithStyles(IconButton)
+            aria-label="Expand"
             className="expandButton expandButtonExpanded"
             onClick={[Function]}
           >