working checkpoint for integrations

dashboard/src/components/SaveButton.tsx

@@ -86,7 +86,7 @@ const StatusWrapper = styled.div`
     font-size: 18px;
     margin-right: 10px;
     color: ${(props: { successful: boolean }) =>
-      props.successful ? "#4797ff" : "#fcba03"};
+    props.successful ? "#4797ff" : "#fcba03"};
   }
 
   animation: statusFloatIn 0.5s;
@@ -129,6 +129,7 @@ const Button = styled.button`
   font-family: "Work Sans", sans-serif;
   color: white;
   padding: 6px 20px 7px 20px;
+  margin: 20px 20px 20px 20px;
   text-align: left;
   border: 0;
   border-radius: 5px;

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -41,7 +41,9 @@ export default class IntegrationList extends Component<PropsType, StateType> {
   };
 
   toggleDisplay = (event: MouseEvent, index: number) => {
-    event.stopPropagation();
+    if (event) {
+      event.stopPropagation();
+    }
     let x = this.state.displayExpanded;
     x[index] = !x[index];
     this.setState({ displayExpanded: x });
@@ -205,6 +207,7 @@ const Placeholder = styled.div`
 
 const StyledIntegrationList = styled.div`
   margin-top: 20px;
+  margin-bottom: 80px;
 `;
 
 const I = styled.i`

dashboard/src/main/home/integrations/IntegrationRow.tsx

@@ -1,11 +1,13 @@
 import styled from "styled-components";
-import React, { Component, MouseEventHandler } from "react";
+import React, { Component, MouseEvent, MouseEventHandler } from "react";
 
 import ImageList from "components/image-selector/ImageList";
 import RepoList from "components/repo-selector/RepoList";
 import { ActionConfigType } from "shared/types";
 import { integrationList } from "shared/common";
 
+import CreateIntegrationForm from "./create-integration/CreateIntegrationForm";
+
 type PropsType = {
   toggleCollapse: MouseEventHandler;
   label: string;
@@ -16,9 +18,32 @@ type PropsType = {
 };
 
 type StateType = {
+  editMode: boolean;
 };
 
 export default class IntegrationRow extends Component<PropsType, StateType> {
+  state = {
+    editMode: false
+  };
+
+  editButtonOnClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (!this.props.expanded) {
+      this.setState({
+        editMode: true
+      });
+      this.props.toggleCollapse(null);
+    }
+    else {
+      this.setState({
+        editMode: !this.state.editMode
+      });
+      if (this.state.editMode) {
+        this.props.toggleCollapse(null);
+      }
+    }
+  }
+
   render = () => {
     const icon =
       integrationList[this.props.integration] && integrationList[this.props.integration].icon;
@@ -37,7 +62,8 @@ export default class IntegrationRow extends Component<PropsType, StateType> {
           </Description>
         </Flex>
         <MaterialIconTray disabled={false}>
-          <i className="material-icons">more_vert</i>
+          {/* <i className="material-icons"
+            onClick={this.editButtonOnClick}>mode_edit</i> */}
           <I
             className="material-icons"
             showList={this.props.expanded}
@@ -47,7 +73,7 @@ export default class IntegrationRow extends Component<PropsType, StateType> {
           </I>
         </MaterialIconTray>
       </MainRow>
-      {this.props.expanded && (
+      {this.props.expanded && !this.state.editMode && (
         <ImageHodler adjustMargin={this.props.category !== "repo"}>
           {this.props.category !== "repo" ? (
             <ImageList
@@ -76,6 +102,14 @@ export default class IntegrationRow extends Component<PropsType, StateType> {
           )}
         </ImageHodler>
       )}
+      {
+        this.props.expanded && this.state.editMode && <CreateIntegrationForm
+          integrationName={this.props.integration}
+          closeForm={() => {
+            this.setState({ editMode: false });
+          }}
+        />
+      }
     </Integration>
   }
 
@@ -136,7 +170,7 @@ const MainRow = styled.div`
 `;
 
 const MaterialIconTray = styled.div`
-  width: 64px;
+  width: 32px;
   margin-right: -7px;
   display: flex;
   align-items: center;

dashboard/src/main/home/integrations/Integrations.tsx

@@ -8,7 +8,7 @@ import { Context } from "shared/Context";
 import { setSearchParam } from "shared/routing";
 import styled from "styled-components";
 
-import IntegrationForm from "./integration-form/IntegrationForm";
+import CreateIntegrationForm from "./create-integration/CreateIntegrationForm";
 import IntegrationList from "./IntegrationList";
 
 type PropsType = RouteComponentProps & {};
@@ -159,7 +159,7 @@ class Integrations extends Component<PropsType, StateType> {
       this.props.history.push("integrations");
     }
 
-    // TODO: Split integration page into separate component
+    // TODO: Split integration page into separate component / deprecate this flow
     if (currentIntegration) {
       let icon =
         integrationList[currentIntegration] &&
@@ -179,7 +179,7 @@ class Integrations extends Component<PropsType, StateType> {
             </Flex>
           </TitleSectionAlt>
           {this.renderIntegrationContents()}
-          <IntegrationForm
+          <CreateIntegrationForm
             integrationName={currentIntegration}
             closeForm={() => {
               this.setState({ currentIntegration: null });

dashboard/src/main/home/integrations/integration-form/IntegrationForm.tsx → dashboard/src/main/home/integrations/create-integration/CreateIntegrationForm.tsx

@@ -13,22 +13,21 @@ type PropsType = {
 
 type StateType = {};
 
-export default class IntegrationForm extends Component<PropsType, StateType> {
+export default class CreateIntegrationForm extends Component<PropsType, StateType> {
   state = {};
 
-  render() {
-    let { closeForm } = this.props;
+  render = () => {
     switch (this.props.integrationName) {
       case "docker-hub":
-        return <DockerHubForm closeForm={closeForm} />;
+        return <DockerHubForm closeForm={this.props.closeForm} />;
       case "gke":
-        return <GKEForm closeForm={closeForm} />;
+        return <GKEForm closeForm={this.props.closeForm} />;
       case "eks":
-        return <EKSForm closeForm={closeForm} />;
+        return <EKSForm closeForm={this.props.closeForm} />;
       case "ecr":
-        return <ECRForm closeForm={closeForm} />;
+        return <ECRForm closeForm={this.props.closeForm} />;
       case "gcr":
-        return <GCRForm closeForm={closeForm} />;
+        return <GCRForm closeForm={this.props.closeForm} />;
       default:
         return null;
     }