idk

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

@@ -46,7 +46,12 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     subdirectory: '',
     webhookToken: '',
     highlightCopyButton: false,
-    action: null as ActionConfigType,
+    action: {
+      git_repo: '',
+      image_repo_uri: '',
+      git_repo_id: 0,
+      dockerfile_path: '',
+    } as ActionConfigType,
   }
 
   // TODO: read in set image from form context instead of config

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

@@ -25,7 +25,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
         let icon = integrationList[integration] && integrationList[integration].icon;
         let subtitle = integrationList[integration] && integrationList[integration].label;
         let label = titles[i];
-        let disabled = integration === 'kubernetes';
+        let disabled = integration === 'kubernetes' || integration === 'repo';
         return (
           <Integration
             key={i}
@@ -48,7 +48,7 @@ export default class IntegrationList extends Component<PropsType, StateType> {
       return integrations.map((integration: string, i: number) => {
         let icon = integrationList[integration] && integrationList[integration].icon;
         let label = integrationList[integration] && integrationList[integration].label;
-        let disabled = integration === 'kubernetes';
+        let disabled = integration === 'kubernetes' || integration === 'repo';
         return (
           <Integration
             key={i}

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

@@ -16,13 +16,17 @@ type PropsType = {
 
 type StateType = {
   credentialsName: string,
+  gcpRegion: string,
   serviceAccountKey: string,
+  gcpProjectID: string,
 };
 
 export default class GCRForm extends Component<PropsType, StateType> {
   state = {
     credentialsName: '',
+    gcpRegion: '',
     serviceAccountKey: '',
+    gcpProjectID: '',
   }
 
   isDisabled = (): boolean => {
@@ -34,7 +38,21 @@ export default class GCRForm extends Component<PropsType, StateType> {
   }
   
   handleSubmit = () => {
-    // TODO: implement once api is restructured
+    let { currentProject } = this.context;
+
+    api.createGCPIntegration('<token>', {
+      gcp_region: this.state.gcpRegion,
+      gcp_key_data: this.state.serviceAccountKey,
+      gcp_project_id: this.state.gcpProjectID,
+    }, {
+      project_id: currentProject.id,
+    }, (err: any, res: any) => {
+      if (err) {
+        console.log(err);
+      } else {
+        console.log(res.data);
+      }
+    })
   }
 
   render() {
@@ -53,6 +71,14 @@ export default class GCRForm extends Component<PropsType, StateType> {
           />
           <Heading>GCP Settings</Heading>
           <Helper>Service account credentials for GCP permissions.</Helper>
+          <InputRow
+            type='text'
+            value={this.state.gcpRegion}
+            setValue={(x: string) => this.setState({ gcpRegion: x })}
+            label='📍 GCP Region'
+            placeholder='ex: uranus-north-12'
+            width='100%'
+          />
           <TextArea
             value={this.state.serviceAccountKey}
             setValue={(x: string) => this.setState({ serviceAccountKey: x })}
@@ -60,6 +86,14 @@ export default class GCRForm extends Component<PropsType, StateType> {
             placeholder='(Paste your JSON service account key here)'
             width='100%'
           />
+          <InputRow
+            type='text'
+            value={this.state.gcpProjectID}
+            setValue={(x: string) => this.setState({ gcpProjectID: x })}
+            label='GCP Project ID'
+            placeholder='ex: porter-dev-273614'
+            width='100%'
+          />
         </CredentialWrapper>
         <SaveButton
           text='Save Settings'
@@ -72,6 +106,8 @@ export default class GCRForm extends Component<PropsType, StateType> {
   }
 }
 
+GCRForm.contextType = Context;
+
 const CredentialWrapper = styled.div`
   padding: 5px 40px 25px;
   background: #ffffff11;