Merge pull request #562 from porter-dev/0.2.0-gke-service-account-file-upload

[0.2.0] GKE service account file upload

dashboard/src/components/values-form/UploadArea.tsx

@@ -0,0 +1,118 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import upload from "assets/upload.svg";
+
+type PropsType = {
+  label?: string;
+  setValue: (x: any) => void;
+  width?: string;
+  height?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+};
+
+type StateType = {
+    fileName: string;
+};
+
+export default class UploadArea extends Component<PropsType, StateType> {
+    state = {
+        fileName: null as string,
+    }
+    handleChange = (e: any) => {
+    this.props.setValue(e.target.value);
+  };
+
+  readFile = (file: any) => {
+    const reader = new FileReader()
+    reader.onload = async (e) => {
+      let text = (e.target.result)
+      this.props.setValue(text);
+    }
+    reader.readAsText(file, 'UTF-8')
+    this.setState({ fileName: file.name });
+  }
+
+  render() {
+    let { label, placeholder } = this.props;
+    console.log(this.state.fileName)
+    if (this.state.fileName) {
+        placeholder = `Uploaded ${this.state.fileName}`
+    }
+
+    return (
+      <StyledUploadArea>
+        <Label>
+            {label}
+            <Required>{this.props.isRequired ? " *" : null}</Required>
+        </Label> 
+        <DNDArea 
+        onDragOver={(e: any) => {e.preventDefault()}}
+        onDragEnter={(e: any) => {e.preventDefault()}}
+        onDragLeave={(e: any) => {e.preventDefault()}}
+        onDrop={(e: any) => {
+            e.preventDefault();
+            const files = e.dataTransfer.files;
+            this.readFile(files[0])
+        }}
+        onClick={() => {
+            document.getElementById("file").click();
+        }}>
+        <input id='file' hidden type="file" accept=".json" onChange={(event) => {
+            event.preventDefault();
+            this.readFile(event.target.files[0]);
+            event.currentTarget.value = null
+        }}/>
+        <Message>
+            <img src={upload} style={{ marginRight: "6px", height: "16px"}} /> {placeholder}
+        </Message>
+        </DNDArea>
+      </StyledUploadArea>
+    );
+  }
+}
+
+const Message = styled.div`
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+`
+
+const Required = styled.div`
+  margin-left: 8px;
+  color: #fc4976;
+`;
+
+const DNDArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  border: none;
+  resize: none;
+  font-size: 14px;
+  background: #ffffff11;
+  border: 1px solid #ffffff55;
+  border-radius: 3px;
+  color: grey;
+  padding: 5px 10px;
+  margin-right: 8px;
+  width: 100%;
+  height: 150px;
+  cursor: pointer;
+`;
+
+const Label = styled.div`
+  color: #ffffff;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-family: "Work Sans", sans-serif;
+`;
+
+
+const StyledUploadArea = styled.div`
+  margin-top: 20px;
+`;

dashboard/src/main/home/integrations/create-integration/GCRForm.tsx

@@ -5,7 +5,7 @@ import { Context } from "shared/Context";
 import api from "shared/api";
 
 import InputRow from "components/values-form/InputRow";
-import TextArea from "components/values-form/TextArea";
+import UploadArea from "components/values-form/UploadArea";
 import SaveButton from "components/SaveButton";
 import Heading from "components/values-form/Heading";
 import Helper from "components/values-form/Helper";
@@ -33,16 +33,12 @@ export default class GCRForm extends Component<PropsType, StateType> {
 
   isDisabled = (): boolean => {
     let {
-      credentialsName,
-      gcpRegion,
-      gcpProjectID,
       serviceAccountKey,
+      credentialsName
     } = this.state;
     if (
-      credentialsName === "" ||
-      gcpRegion === "" ||
       serviceAccountKey === "" ||
-      gcpProjectID === ""
+      credentialsName === ""
     ) {
       return true;
     }
@@ -99,37 +95,22 @@ export default class GCRForm extends Component<PropsType, StateType> {
             setValue={(credentialsName: string) =>
               this.setState({ credentialsName })
             }
+            isRequired={true}
             label="🏷️ Registry Name"
             placeholder="ex: paper-straw"
             width="100%"
           />
           <Heading>GCP Settings</Heading>
           <Helper>Service account credentials for GCP permissions.</Helper>
-          <InputRow
-            type="text"
-            value={this.state.gcpRegion}
-            setValue={(gcpRegion: string) => this.setState({ gcpRegion })}
-            label="📍 GCP Region"
-            placeholder="ex: uranus-north3"
-            width="100%"
-          />
-          <TextArea
-            value={this.state.serviceAccountKey}
-            setValue={(serviceAccountKey: string) =>
-              this.setState({ serviceAccountKey })
-            }
-            label="🔑 Service Account Key (JSON)"
-            placeholder="(Paste your JSON service account key here)"
-            width="100%"
-          />
-          <InputRow
-            type="text"
-            value={this.state.gcpProjectID}
-            setValue={(gcpProjectID: string) => this.setState({ gcpProjectID })}
-            label="📝 GCP Project ID"
-            placeholder="ex: skynet-dev-172969"
+          <UploadArea
+            setValue={(x: any) => this.setState({ serviceAccountKey: x })}
+            label="🔒 GCP Key Data (JSON)"
+            placeholder="Choose a file or drag it here."
             width="100%"
+            height="100%"
+            isRequired={true}
           />
+          <Helper>GCR URI, in the form <CodeBlock>[gcr_domain]/[gcp_project_id]</CodeBlock>. For example, <CodeBlock>gcr.io/skynet-dev-172969</CodeBlock>.</Helper>
           <InputRow
             type="text"
             value={this.state.url}
@@ -137,6 +118,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
             label="🔗 GCR URL"
             placeholder="ex: gcr.io/skynet-dev-172969"
             width="100%"
+            isRequired={true}
           />
         </CredentialWrapper>
         <SaveButton
@@ -162,3 +144,14 @@ const StyledForm = styled.div`
   position: relative;
   padding-bottom: 75px;
 `;
+
+const CodeBlock = styled.span`
+  display: inline-block; 
+  background-color: #1b1d26;
+  color: white; 
+  border-radius: 5px; 
+  font-family: monospace;
+  padding: 2px 3px; 
+  margin-top: -2px; 
+  user-select: text;
+`

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -7,6 +7,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { InfraType } from "shared/types";
 
+import UploadArea from "components/values-form/UploadArea";
 import SelectRow from "components/values-form/SelectRow";
 import CheckboxRow from "components/values-form/CheckboxRow";
 import InputRow from "components/values-form/InputRow";
@@ -26,7 +27,7 @@ type PropsType = RouteComponentProps & {
 type StateType = {
   gcpRegion: string;
   gcpProjectId: string;
-  gcpKeyData: string;
+  gcpKeyData: any;
   clusterName: string;
   clusterNameSet: boolean;
   selectedInfras: { value: string; label: string }[];
@@ -318,7 +319,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
   render() {
     let { setSelectedProvisioner } = this.props;
     let { gcpRegion, gcpProjectId, gcpKeyData, selectedInfras } = this.state;
-
+    console.log('gcpkeydata', gcpKeyData)
     return (
       <StyledGCPFormSection>
         <FormSection>
@@ -352,15 +353,15 @@ class GCPFormSection extends Component<PropsType, StateType> {
             width="100%"
             isRequired={true}
           />
-          <InputRow
-            type="password"
-            value={gcpKeyData}
-            setValue={(x: string) => this.setState({ gcpKeyData: x })}
+          <UploadArea
+            setValue={(x: any) => this.setState({ gcpKeyData: x })}
             label="🔒 GCP Key Data (JSON)"
-            placeholder="○ ○ ○ ○ ○ ○ ○ ○ ○"
+            placeholder="Choose a file or drag it here."
             width="100%"
+            height="100%"
             isRequired={true}
           />
+
           <Br />
           <Heading>GCP Resources</Heading>
           <Helper>