Moved CLI modal icon next to run job button

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

@@ -26,8 +26,6 @@ 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 & {
@@ -596,6 +594,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
               isAuthorized={this.props.isAuthorized}
               saveValuesStatus={this.state.saveValuesStatus}
               expandJob={(job: any) => this.setJobRun(job)}
+              chartName={this.state.currentChart?.name}
             />
           </TabWrapper>
         );
@@ -811,12 +810,6 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
               <TagWrapper>
                 Namespace <NamespaceTag>{chart.namespace}</NamespaceTag>
               </TagWrapper>
-              <CLIModalIcon
-                onClick={(e) => {
-                  e.preventDefault();
-                  this.setState({ showConnectionModal: true });
-                }}
-              />
             </TitleSection>
 
             <InfoWrapper>
@@ -988,12 +981,6 @@ 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>
@@ -1051,12 +1038,6 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
         ) : (
           <>{this.renderExpandedJobRun()}</>
         )}
-
-        <ConnectToJobInstructionsModal
-          show={this.state.showConnectionModal}
-          onClose={() => this.setState({ showConnectionModal: false })}
-          chart={this.state.currentChart}
-        />
       </>
     );
   }
@@ -1374,25 +1355,3 @@ 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

@@ -6,8 +6,8 @@ import styled from "styled-components";
 const ConnectToJobInstructionsModal: React.FC<{
   show: boolean;
   onClose: () => void;
-  chart: ChartType;
-}> = ({ show, chart, onClose }) => {
+  chartName: string;
+}> = ({ show, chartName, onClose }) => {
   if (!show) {
     return null;
   }
@@ -29,7 +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 {chart?.name || "[APP-NAME]"} -- [COMMAND]</Code>
+      <Code>porter run {chartName || "[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/TempJobList.tsx

@@ -4,6 +4,8 @@ import styled from "styled-components";
 import { PorterFormContext } from "components/porter-form/PorterFormContextProvider";
 import JobList from "./JobList";
 import SaveButton from "components/SaveButton";
+import CommandLineIcon from "assets/command-line-icon";
+import ConnectToJobInstructionsModal from "./ConnectToJobInstructionsModal";
 
 interface Props {
   isAuthorized: any;
@@ -12,6 +14,7 @@ interface Props {
   jobs: any;
   handleSaveValues: any;
   expandJob: any;
+  chartName: string;
 }
 
 /**
@@ -20,6 +23,7 @@ interface Props {
  */
 const TempJobList: React.FC<Props> = (props) => {
   const { getSubmitValues } = useContext(PorterFormContext);
+  const [showConnectionModal, setShowConnectionModal] = useState(false);
   const [searchInput, setSearchInput] = useState("");
 
   let saveButton = (
@@ -36,6 +40,12 @@ const TempJobList: React.FC<Props> = (props) => {
       >
         <i className="material-icons">play_arrow</i> Run Job
       </SaveButton>
+      <CLIModalIcon
+        onClick={(e) => {
+          e.preventDefault();
+          setShowConnectionModal(true);
+        }}
+      />
     </ButtonWrapper>
   );
 
@@ -51,6 +61,11 @@ const TempJobList: React.FC<Props> = (props) => {
         setJobs={props.setJobs}
         expandJob={props.expandJob}
       />
+      <ConnectToJobInstructionsModal
+        show={showConnectionModal}
+        onClose={() => setShowConnectionModal(false)}
+        chartName={props.chartName}
+      />
     </>
   );
 };
@@ -60,3 +75,25 @@ export default TempJobList;
 const ButtonWrapper = styled.div`
   margin: 5px 0 35px;
 `;
+
+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;
+  }
+`;