From c6e85d9d7c7414942e5e6413e6ad451d9f5f72b0 Mon Sep 17 00:00:00 2001
From: Yasser Elsayed <yasser.ebrahim@gmail.com>
Date: Tue, 4 Dec 2018 10:01:55 -0800
Subject: [PATCH] pr comments

---
 frontend/src/lib/RunUtils.ts           |  4 +-
 frontend/src/pages/PipelineDetails.tsx | 63 ++++++++++++++------------
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/RunUtils.ts b/frontend/src/lib/RunUtils.ts
index 5b0fe7e4027..4ccdc00fcf5 100644
--- a/frontend/src/lib/RunUtils.ts
+++ b/frontend/src/lib/RunUtils.ts
@@ -26,11 +26,11 @@ export interface MetricMetadata {
 }
 
 function getPipelineId(run?: ApiRun | ApiJob): string | null {
-  return run && run.pipeline_spec && run.pipeline_spec.pipeline_id || null;
+  return (run && run.pipeline_spec && run.pipeline_spec.pipeline_id) || null;
 }
 
 function getPipelineSpec(run?: ApiRun | ApiJob): string | null {
-  return run && run.pipeline_spec && run.pipeline_spec.workflow_manifest || null;
+  return (run && run.pipeline_spec && run.pipeline_spec.workflow_manifest) || null;
 }
 
 function getFirstExperimentReferenceId(run?: ApiRun | ApiJob): string | null {
diff --git a/frontend/src/pages/PipelineDetails.tsx b/frontend/src/pages/PipelineDetails.tsx
index 254d79bebe7..91ed78341a1 100644
--- a/frontend/src/pages/PipelineDetails.tsx
+++ b/frontend/src/pages/PipelineDetails.tsx
@@ -114,33 +114,40 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
 
   public getInitialToolbarState(): ToolbarProps {
     const fromRunId = new URLParser(this.props).get(QUERY_PARAMS.fromRunId);
-    return {
-      actions: !!fromRunId ? [] : [{
-        action: this._createNewExperiment.bind(this),
-        icon: AddIcon,
-        id: 'startNewExperimentBtn',
-        primary: true,
-        title: 'Start an experiment',
-        tooltip: 'Create a new experiment beginning with this pipeline',
-      }, {
-        action: () => this.props.updateDialog({
-          buttons: [
-            { onClick: () => this._deleteDialogClosed(true), text: 'Delete' },
-            { onClick: () => this._deleteDialogClosed(false), text: 'Cancel' },
-          ],
-          onClose: () => this._deleteDialogClosed(false),
-          title: 'Delete this pipeline?',
-        }),
-        id: 'deleteBtn',
-        title: 'Delete',
-        tooltip: 'Delete this pipeline',
-      }],
-      breadcrumbs: [!!fromRunId ?
-        { displayName: fromRunId, href: RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, fromRunId) } :
-        { displayName: 'Pipelines', href: RoutePage.PIPELINES }
-      ],
-      pageTitle: !!fromRunId ? 'Pipeline details' : this.props.match.params[RouteParams.pipelineId],
-    };
+    if (fromRunId) {
+      return {
+        actions: [],
+        breadcrumbs: [
+          { displayName: fromRunId, href: RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, fromRunId) }
+        ],
+        pageTitle: 'Pipeline details',
+      };
+    } else {
+      return {
+        actions: [{
+          action: this._createNewExperiment.bind(this),
+          icon: AddIcon,
+          id: 'startNewExperimentBtn',
+          primary: true,
+          title: 'Start an experiment',
+          tooltip: 'Create a new experiment beginning with this pipeline',
+        }, {
+          action: () => this.props.updateDialog({
+            buttons: [
+              { onClick: () => this._deleteDialogClosed(true), text: 'Delete' },
+              { onClick: () => this._deleteDialogClosed(false), text: 'Cancel' },
+            ],
+            onClose: () => this._deleteDialogClosed(false),
+            title: 'Delete this pipeline?',
+          }),
+          id: 'deleteBtn',
+          title: 'Delete',
+          tooltip: 'Delete this pipeline',
+        }],
+        breadcrumbs: [{ displayName: 'Pipelines', href: RoutePage.PIPELINES }],
+        pageTitle: this.props.match.params[RouteParams.pipelineId],
+      };
+    }
   }
 
   public render(): JSX.Element {
@@ -203,7 +210,7 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
                       Show summary
                       </Button>
                   )}
-                  <div className={classes(commonCss.flex, summaryShown && css.footerInfoOffset)}>
+                  <div className={classes(commonCss.flex, summaryShown && !!pipeline && css.footerInfoOffset)}>
                     <InfoIcon style={{ color: color.lowContrast, height: 16, width: 16 }} />
                     <span className={css.infoSpan}>Static pipeline graph</span>
                   </div>