Fix serializing cloned embedded pipeline (#474)

* fix serializing cloned pipeline

* fix tests

* fix mock backend data

* add View pipeline link to new run page

* fix test snapshots

frontend/mock-backend/fixed-data.ts

@@ -532,21 +532,7 @@ const runs: ApiRunDetail[] = [
           { name: 'paramName1', value: 'paramVal1' },
           { name: 'paramName2', value: 'paramVal2' },
         ],
-        workflow_manifest: `
-apiVersion: argoproj.io/v1alpha1
-kind: Workflow
-metadata:
-  generateName: hello-world-
-spec:
-  entrypoint: whalesay
-  serviceAccountName: pipeline-runner
-  templates:
-  - name: whalesay
-    container:
-      image: docker/whalesay:latest
-      command: [cowsay]
-      args: ["hello world"]
-`,
+        workflow_manifest: JSON.stringify(helloWorldRun),
       },
       resource_references: [{
         key: {

frontend/src/pages/NewRun.test.tsx

@@ -619,7 +619,7 @@ describe('NewRun', () => {
     it('loads and selects embedded pipeline from run', async () => {
       const runDetail = newMockRunDetail();
       delete runDetail.run!.pipeline_spec!.pipeline_id;
-      runDetail.run!.pipeline_spec!.workflow_manifest = 'parameters: []';
+      runDetail.run!.pipeline_spec!.workflow_manifest = '{"parameters": []}';
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`;
 
@@ -638,7 +638,7 @@ describe('NewRun', () => {
       ' and hides pipeline selector', async () => {
         const runDetail = newMockRunDetail();
         delete runDetail.run!.pipeline_spec!.pipeline_id;
-        runDetail.run!.pipeline_spec!.workflow_manifest = 'parameters: []';
+        runDetail.run!.pipeline_spec!.workflow_manifest = '{"parameters": []}';
         const props = generateProps();
         props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`;
 
@@ -653,7 +653,7 @@ describe('NewRun', () => {
     it('shows pipeline selector when switching from embedded pipeline to select pipeline', async () => {
       const runDetail = newMockRunDetail();
       delete runDetail.run!.pipeline_spec!.pipeline_id;
-      runDetail.run!.pipeline_spec!.workflow_manifest = 'parameters: []';
+      runDetail.run!.pipeline_spec!.workflow_manifest = '{"parameters": []}';
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`;
 
@@ -669,7 +669,7 @@ describe('NewRun', () => {
     it('resets selected pipeline from embedded when switching to select from pipeline list, and back', async () => {
       const runDetail = newMockRunDetail();
       delete runDetail.run!.pipeline_spec!.pipeline_id;
-      runDetail.run!.pipeline_spec!.workflow_manifest = 'parameters: []';
+      runDetail.run!.pipeline_spec!.workflow_manifest = '{"parameters": []}';
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`;
 
@@ -876,7 +876,7 @@ describe('NewRun', () => {
     it('copies pipeline from run in the create API call when cloning a run with embedded pipeline', async () => {
       const runDetail = newMockRunDetail();
       delete runDetail.run!.pipeline_spec!.pipeline_id;
-      runDetail.run!.pipeline_spec!.workflow_manifest = 'parameters: []';
+      runDetail.run!.pipeline_spec!.workflow_manifest = '{"parameters": []}';
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`;
 
@@ -894,7 +894,7 @@ describe('NewRun', () => {
         pipeline_spec: {
           parameters: [],
           pipeline_id: undefined,
-          workflow_manifest: 'parameters: []\n', // JsYaml.dump adds a new line after each property
+          workflow_manifest: '{"parameters":[]}',
         },
       }));
       expect(tree).toMatchSnapshot();

frontend/src/pages/NewRun.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import * as JsYaml from 'js-yaml';
 import * as React from 'react';
 import BusyButton from '../atoms/BusyButton';
 import Button from '@material-ui/core/Button';
@@ -35,6 +34,7 @@ import { ApiPipeline } from '../apis/pipeline';
 import { ApiRun, ApiResourceReference, ApiRelationship, ApiResourceType, ApiRunDetail } from '../apis/run';
 import { ApiTrigger, ApiJob } from '../apis/job';
 import { Apis } from '../lib/Apis';
+import { Link } from 'react-router-dom';
 import { Page } from './Page';
 import { RoutePage, RouteParams, QUERY_PARAMS } from '../components/Router';
 import { ToolbarProps } from '../components/Toolbar';
@@ -116,6 +116,11 @@ class NewRun extends Page<{}, NewRunState> {
       unconfirmedDialogPipelineId,
     } = this.state;
 
+    const originalRunId = new URLParser(this.props).get(QUERY_PARAMS.cloneFromRun);
+    const pipelineDetailsUrl = originalRunId ?
+      RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId + '?', '') +
+      new URLParser(this.props).build({ [QUERY_PARAMS.fromRunId]: originalRunId }) : '';
+
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
         <div className={commonCss.scrollContainer}>
@@ -126,6 +131,7 @@ class NewRun extends Page<{}, NewRunState> {
             <FormControlLabel label='Use pipeline from cloned run' control={<Radio color='primary' />}
               onChange={() => this.setStateSafe({ pipeline: clonedRunPipeline, usePipelineFromClonedRun: true })}
               checked={usePipelineFromClonedRun} />
+            {!!originalRunId && <Link to={pipelineDetailsUrl}>[View pipeline]</Link>}
             <FormControlLabel label='Select a pipeline from list' control={<Radio color='primary' />}
               onChange={() => this.setStateSafe({ pipeline: undefined, usePipelineFromClonedRun: false })}
               checked={!usePipelineFromClonedRun} />
@@ -359,7 +365,7 @@ class NewRun extends Page<{}, NewRunState> {
       }
     } else if (embeddedPipelineSpec) {
       try {
-        pipeline = JsYaml.safeLoad(embeddedPipelineSpec);
+        pipeline = JSON.parse(embeddedPipelineSpec);
       } catch (err) {
         await this.showPageError('Error: failed to read the clone run\'s pipeline definition.', err);
         return;
@@ -436,7 +442,7 @@ class NewRun extends Page<{}, NewRunState> {
       pipeline_spec: {
         parameters: pipeline.parameters,
         pipeline_id: usePipelineFromClonedRun ? undefined : pipeline.id,
-        workflow_manifest: usePipelineFromClonedRun ? JsYaml.safeDump(clonedRunPipeline) : undefined,
+        workflow_manifest: usePipelineFromClonedRun ? JSON.stringify(clonedRunPipeline) : undefined,
       },
       resource_references: references,
     };

frontend/src/pages/__snapshots__/NewRun.test.tsx.snap

@@ -232,6 +232,12 @@ exports[`NewRun cloning from a run shows pipeline selector when switching from e
       label="Use pipeline from cloned run"
       onChange={[Function]}
     />
+    <Link
+      replace={false}
+      to="/pipelines/details/?fromRun=some-mock-run-id"
+    >
+      [View pipeline]
+    </Link>
     <WithStyles(FormControlLabel)
       checked={true}
       control={
@@ -445,6 +451,12 @@ exports[`NewRun cloning from a run shows switching controls when run has embedde
       label="Use pipeline from cloned run"
       onChange={[Function]}
     />
+    <Link
+      replace={false}
+      to="/pipelines/details/?fromRun=some-mock-run-id"
+    >
+      [View pipeline]
+    </Link>
     <WithStyles(FormControlLabel)
       checked={false}
       control={
@@ -833,6 +845,12 @@ exports[`NewRun creating a new run copies pipeline from run in the create API ca
       label="Use pipeline from cloned run"
       onChange={[Function]}
     />
+    <Link
+      replace={false}
+      to="/pipelines/details/?fromRun=some-mock-run-id"
+    >
+      [View pipeline]
+    </Link>
     <WithStyles(FormControlLabel)
       checked={false}
       control={