Moved cli button to title

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -26,6 +26,8 @@ import { RouteComponentProps, withRouter } from "react-router";
 import Banner from "components/Banner";
 import KeyValueArray from "components/form-components/KeyValueArray";
 import { onlyInLeft } from "shared/array_utils";
+import CommandLineIcon from "assets/command-line-icon";
+import ConnectToJobInstructionsModal from "./jobs/ConnectToJobInstructionsModal";
 
 type PropsType = WithAuthProps &
   RouteComponentProps & {
@@ -54,6 +56,7 @@ type StateType = {
   upgradeVersion: string;
   expandedJobRun: any;
   pods: any;
+  showConnectionModal: boolean;
 };
 
 class ExpandedJobChart extends Component<PropsType, StateType> {
@@ -76,6 +79,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
 
     expandedJobRun: null as any,
     pods: null as any,
+    showConnectionModal: false,
   };
 
   getPods = (job: any, callback?: () => void) => {
@@ -807,6 +811,12 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
               <TagWrapper>
                 Namespace <NamespaceTag>{chart.namespace}</NamespaceTag>
               </TagWrapper>
+              <CLIModalIcon
+                onClick={(e) => {
+                  e.preventDefault();
+                  this.setState({ showConnectionModal: true });
+                }}
+              />
             </TitleSection>
 
             <InfoWrapper>
@@ -978,6 +988,12 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
           >
             {chart.name}{" "}
             <Gray>at {this.readableDate(run.status.startTime)}</Gray>
+            <CLIModalIcon
+              onClick={(e) => {
+                e.preventDefault();
+                this.setState({ showConnectionModal: true });
+              }}
+            />
           </TitleSection>
 
           <InfoWrapper>
@@ -1035,6 +1051,12 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
         ) : (
           <>{this.renderExpandedJobRun()}</>
         )}
+
+        <ConnectToJobInstructionsModal
+          show={this.state.showConnectionModal}
+          onClose={() => this.setState({ showConnectionModal: false })}
+          chart={this.state.currentChart}
+        />
       </>
     );
   }
@@ -1352,3 +1374,25 @@ const A = styled.a`
   margin-left: 5px;
   cursor: pointer;
 `;
+
+const CLIModalIcon = styled(CommandLineIcon)`
+  width: 25px;
+  padding: 5px;
+  margin: 0 5px;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  background: #ffffff11;
+  color: white;
+  margin-bottom: -3px;
+  :hover {
+    cursor: pointer;
+    background: #ffffff22;
+    > path {
+      fill: #ffffff77;
+    }
+  }
+
+  > path {
+    fill: #ffffff99;
+  }
+`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/ConnectToJobInstructionsModal.tsx

@@ -1,12 +1,13 @@
 import Modal from "main/home/modals/Modal";
 import React from "react";
+import { ChartType } from "shared/types";
 import styled from "styled-components";
 
 const ConnectToJobInstructionsModal: React.FC<{
   show: boolean;
   onClose: () => void;
-  job: any;
-}> = ({ show, job, onClose }) => {
+  chart: ChartType;
+}> = ({ show, chart, onClose }) => {
   if (!show) {
     return null;
   }
@@ -28,10 +29,7 @@ const ConnectToJobInstructionsModal: React.FC<{
       <br />
       Run the following line of code, and make sure to change the command to
       something your container can run:
-      <Code>
-        porter run {job?.metadata?.labels["meta.helm.sh/release-name"]} --
-        [COMMAND]
-      </Code>
+      <Code>porter run {chart?.name || "[APP-NAME]"} -- [COMMAND]</Code>
       Note that this will create a copy of the most recent job run for this
       template.
     </Modal>

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -290,12 +290,6 @@ export default class JobResource extends Component<PropsType, StateType> {
               <CommandString>{commandString}</CommandString>
               {this.renderStatus()}
               <MaterialIconTray disabled={false}>
-                <CLIModalIcon
-                  onClick={(e) => {
-                    e.preventDefault();
-                    this.setState({ showConnectionModal: true });
-                  }}
-                />
                 {this.renderStopButton()}
                 {!this.props.readOnly && (
                   <i
@@ -319,11 +313,6 @@ export default class JobResource extends Component<PropsType, StateType> {
           </MainRow>
           {this.renderLogsSection()}
         </StyledJob>
-        <ConnectToJobInstructionsModal
-          show={this.state.showConnectionModal}
-          onClose={() => this.setState({ showConnectionModal: false })}
-          job={this.props.job}
-        />
       </>
     );
   }
@@ -405,19 +394,6 @@ const Icon = styled.img`
   margin-right: 18px;
 `;
 
-const CLIModalIcon = styled(CommandLineIcon)`
-  border-radius: 20px;
-  width: 26px;
-  padding: 5px;
-  margin: 0 5px;
-  :hover {
-    background: #ffffff11;
-  }
-  > path {
-    fill: #ffffff44;
-  }
-`;
-
 const Flex = styled.div`
   display: flex;
   align-items: center;