change to file editor instead of file upload

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

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import styled from "styled-components";
 import Modal from "../../main/home/modals/Modal";
 import LoadEnvGroupModal from "../../main/home/modals/LoadEnvGroupModal";
+import EnvEditorModal from "../../main/home/modals/EnvEditorModal";
 
 import sliders from "assets/sliders.svg";
 import upload from "assets/upload.svg";
@@ -22,12 +23,14 @@ type PropsType = {
 type StateType = {
   values: any[];
   showEnvModal: boolean;
+  showEditorModal: boolean;
 };
 
 export default class KeyValueArray extends Component<PropsType, StateType> {
   state = {
     values: [] as any[],
     showEnvModal: false,
+    showEditorModal: false,
   };
 
   componentDidMount() {
@@ -140,6 +143,23 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
     }
   };
 
+  renderEditorModal = () => {
+    if (this.state.showEditorModal) {
+      return (
+        <Modal
+          onRequestClose={() => this.setState({ showEditorModal: false })}
+          width="60%"
+          height="80%"
+        >
+          <EnvEditorModal
+            closeModal={() => this.setState({ showEditorModal: false })}
+            setEnvVariables={(envFile: string) => this.readFile(envFile)}
+          />
+        </Modal>
+      );
+    }
+  };
+
     // Parses src into an Object
   parseEnv = (src: any, options: any) => {
     const debug = Boolean(options && options.debug)
@@ -184,30 +204,26 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
     return obj
   }
 
-  readFile = (event: any) => {
-    event.preventDefault()
-    const reader = new FileReader()
-    reader.onload = async (e) => {
-      let text = (e.target.result)
-      let env = this.parseEnv(text, null)
-
-      for (let key in env) {
-        // filter duplicate keys
-        let dup = this.state.values.filter((el) => {
-          console.log(el, key)
-          if (el["key"] == key) {
-            return false
-          }
-        })
+  readFile = (env: string) => {
+    let envObj = this.parseEnv(env, null)
+    let push = true;
 
-        console.log(dup)
+    for (let key in envObj) {
+      for (var i = 0; i < this.state.values.length; i++) {
+        let existingKey = this.state.values[i]["key"]
+        if (key === existingKey) {
+          this.state.values[i]["value"] = envObj[key]
+          push = false;
+        }
+      }
 
-        this.state.values.push({ key, value: env[key] });
+      if (push) {
+        this.state.values.push({ key, value: envObj[key] });
       }
-      this.setState({ values: this.state.values });
+
     }
-    reader.readAsText(event.target.files[0], 'UTF-8')
 
+    this.setState({ values: this.state.values });
   }
 
   render() {
@@ -241,46 +257,22 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
               {this.props.fileUpload && (
                 <UploadButton
                   onClick={()=>{
-                    document.getElementById("file").click();
+                    this.setState({ showEditorModal: true });
                   }}
                 >
-                  <img src={upload} /> Upload from File
-                  <input id='file' hidden type="file" onChange={(event) => {
-                    this.readFile(event)
-                    event.currentTarget.value = null
-                  }}/>
+                  <img src={upload} /> Copy from File
                 </UploadButton>
               )}
             </InputWrapper>
           )}
         </StyledInputArray>
         {this.renderEnvModal()}
+        {this.renderEditorModal()}
       </>
     );
   }
 }
 
-const CloseOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 999;
-  background: #202227;
-  animation: fadeIn 0.2s 0s;
-  opacity: 0;
-  animation-fill-mode: forwards;
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
 const Spacer = styled.div`
   width: 10px;
   height: 20px;

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

@@ -48,6 +48,32 @@ export default class GKEForm extends Component<PropsType, StateType> {
     // TODO: implement once api is restructured
   };
 
+  // readFile = (env: string) => {
+  //   console.log(env)
+  //   event.preventDefault()
+  //   const reader = new FileReader()
+  //   reader.onload = async (e) => {
+  //     let text = (e.target.result)
+  //     let env = this.parseEnv(text, null)
+
+  //     for (let key in env) {
+  //       // filter duplicate keys
+  //       let dup = this.state.values.filter((el) => {
+  //         console.log(el, key)
+  //         if (el["key"] == key) {
+  //           return false
+  //         }
+  //       })
+
+  //       console.log(dup)
+
+  //       this.state.values.push({ key, value: env[key] });
+  //     }
+  //     this.setState({ values: this.state.values });
+  //   }
+  //   reader.readAsText(event.target.files[0], 'UTF-8')
+  // }
+
   render() {
     return (
       <StyledForm>
@@ -94,6 +120,20 @@ export default class GKEForm extends Component<PropsType, StateType> {
           disabled={this.isDisabled()}
           onClick={this.isDisabled() ? null : this.handleSubmit}
         />
+
+              {/* <UploadButton
+      onClick={()=>{
+        // document.getElementById("file").click();
+        this.setState({ showEditorModal: true });
+      }}
+      >
+      <img src={upload} /> Copy from File
+      {<input id='file' hidden type="file" onChange={(event) => {
+        this.readFile(event)
+        event.currentTarget.value = null
+      }}/>}
+    </UploadButton> */}
+      
       </StyledForm>
     );
   }

dashboard/src/main/home/modals/EnvEditorModal.tsx

@@ -0,0 +1,155 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import close from "assets/close.png";
+import AceEditor from "react-ace";
+
+import "ace-builds/src-noconflict/mode-yaml";
+import "ace-builds/src-noconflict/theme-terminal";
+
+import { Context } from "shared/Context";
+
+import SaveButton from "components/SaveButton";
+
+type PropsType = {
+  closeModal: () => void;
+  setEnvVariables: (values: any) => void;
+};
+
+type StateType = {
+  error: boolean;
+  buttonStatus: string;
+  envFile: string;
+};
+
+export default class EnvEditorModal extends Component<PropsType, StateType> {
+    state = {
+    error: false,
+    buttonStatus: "",
+    envFile: "",
+  };
+
+  onSubmit = () => {
+    this.props.setEnvVariables(this.state.envFile)
+    this.props.closeModal();
+  };
+
+  onChange = (e: string) => { 
+      this.setState({envFile: e})
+  }
+
+  componentDidMount() {
+  }
+
+  render() {
+    return (
+      <StyledLoadEnvGroupModal>
+        <CloseButton onClick={this.props.closeModal}>
+          <CloseButtonImg src={close} />
+        </CloseButton>
+
+        <ModalTitle>Load from Environment Group</ModalTitle>
+        <Subtitle>
+          Copy paste your environment file.
+        </Subtitle>
+
+        <Editor onSubmit={(e: any) => {e.preventDefault()}} border={true}>
+          <AceEditor
+            mode="markdown"
+            value={this.state.envFile}
+            theme="terminal"
+            onChange={(e: string) => this.onChange(e)}
+            name="codeEditor"
+            editorProps={{ $blockScrolling: true }}
+            height="100%"
+            width="100%"
+            style={{    
+                borderRadius: "5px", 
+            }}
+            showPrintMargin={true}
+            showGutter={true}
+            highlightActiveLine={true}
+            fontSize={15}
+          />
+        </Editor>
+
+        <SaveButton
+          disabled={this.state.envFile == ""}
+          text="Submit"
+          status={
+            this.state.envFile == ""
+              ? "No env file detected"
+              : "Existing env variables will be overidden"
+          }
+          onClick={this.onSubmit}
+        />
+      </StyledLoadEnvGroupModal>
+    );
+  }
+}
+
+EnvEditorModal.contextType = Context;
+
+const Editor = styled.form`
+  margin-top: 20px;
+  border-radius: ${(props: { border: boolean }) => (props.border ? "5px" : "")};
+  border: ${(props: { border: boolean }) =>
+    props.border ? "1px solid #ffffff22" : ""};
+  height: 80%;
+  font-family: monospace !important;
+`;
+
+const Subtitle = styled.div`
+  margin-top: 15px;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #aaaabb;
+`;
+
+const ModalTitle = styled.div`
+  margin: 0px 0px 13px;
+  display: flex;
+  flex: 1;
+  font-family: "Assistant";
+  font-size: 18px;
+  color: #ffffff;
+  user-select: none;
+  font-weight: 700;
+  align-items: center;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 40px;
+  padding: 13px 0 12px 0;
+  z-index: 1;
+  text-align: center;
+  border-radius: 50%;
+  right: 15px;
+  top: 12px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+`;
+
+const CloseButtonImg = styled.img`
+  width: 14px;
+  margin: 0 auto;
+`;
+
+const StyledLoadEnvGroupModal = styled.div`
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  padding: 25px 30px;
+  overflow: hidden;
+  border-radius: 6px;
+  background: #202227;
+`;