gcp integration

dashboard/src/components/repo-selector/ActionConfEditor.tsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import github from '../../assets/github.png';
-import info from '../../assets/info.svg';
 
 import api from '../../shared/api';
 import { RepoType, ActionConfigType } from '../../shared/types';
@@ -59,6 +58,9 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
             }
           })
         }
+        if (res.data.length < 1) {
+          this.setState({ loading: false, error: false });
+        }
       }
     });
   }

dashboard/src/components/repo-selector/ActionDetails.tsx

@@ -65,7 +65,7 @@ export default class ActionDetails extends Component<PropsType, StateType> {
         />
         <InputRow
           label='Docker Image Repository'
-          placeholder='Image Repo URL (ex. gcr.io/porter/mr-p)'
+          placeholder='Image Repo URI (ex. my-repo/image)'
           type='text'
           width='100%'
           value={actionConfig.image_repo_uri}

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

@@ -49,7 +49,7 @@ export default class ECRForm extends Component<PropsType, StateType> {
       if (err) {
         console.log(err);
       } else {
-        api.createECR('<token>', {
+        api.connectECRRegistry('<token>', {
           name: credentialsName,
           aws_integration_id: res.data.id,
         }, { id: currentProject.id }, (err: any, res: any) => {

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

@@ -19,6 +19,7 @@ type StateType = {
   gcpRegion: string,
   serviceAccountKey: string,
   gcpProjectID: string,
+  url: string,
 };
 
 export default class GCRForm extends Component<PropsType, StateType> {
@@ -27,11 +28,12 @@ export default class GCRForm extends Component<PropsType, StateType> {
     gcpRegion: '',
     serviceAccountKey: '',
     gcpProjectID: '',
+    url: '',
   }
 
   isDisabled = (): boolean => {
-    let { gcpRegion, gcpProjectID, serviceAccountKey } = this.state;
-    if (gcpRegion  === '' || serviceAccountKey === '' || gcpProjectID === '') {
+    let { credentialsName, gcpRegion, gcpProjectID, serviceAccountKey } = this.state;
+    if (credentialsName === '' || gcpRegion  === '' || serviceAccountKey === '' || gcpProjectID === '') {
       return true;
     }
     return false;
@@ -50,14 +52,17 @@ export default class GCRForm extends Component<PropsType, StateType> {
       if (err) {
         console.log(err);
       } else {
-        api.createGCR('<token>', {
+        api.connectGCRRegistry('<token>', {
+          name: this.state.credentialsName,
           gcp_integration_id: res.data.id,
+          url: this.state.url,
         }, {
-          project_id: currentProject.id,
+          id: currentProject.id,
         }, (err: any, res: any) => {
           if (err) {
             console.log(err);
           } else {
+            console.log(res.data);
             this.props.closeForm();
           }
         })
@@ -69,19 +74,29 @@ export default class GCRForm extends Component<PropsType, StateType> {
     return ( 
       <StyledForm>
         <CredentialWrapper>
+          <Heading>Porter Settings</Heading>
+          <Helper>Give a name to this set of registry credentials (just for Porter).</Helper>
+          <InputRow
+            type='text'
+            value={this.state.credentialsName}
+            setValue={(credentialsName: string) => this.setState({ credentialsName })}
+            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={(x: string) => this.setState({ gcpRegion: x })}
+            setValue={(gcpRegion: string) => this.setState({ gcpRegion })}
             label='📍 GCP Region'
-            placeholder='ex: uranus-north-12'
+            placeholder='ex: uranus-north3'
             width='100%'
           />
           <TextArea
             value={this.state.serviceAccountKey}
-            setValue={(x: string) => this.setState({ serviceAccountKey: x })}
+            setValue={(serviceAccountKey: string) => this.setState({ serviceAccountKey })}
             label='🔑 Service Account Key (JSON)'
             placeholder='(Paste your JSON service account key here)'
             width='100%'
@@ -89,11 +104,19 @@ export default class GCRForm extends Component<PropsType, StateType> {
           <InputRow
             type='text'
             value={this.state.gcpProjectID}
-            setValue={(x: string) => this.setState({ gcpProjectID: x })}
+            setValue={(gcpProjectID: string) => this.setState({ gcpProjectID })}
             label='📝 GCP Project ID'
             placeholder='ex: skynet-dev-172969'
             width='100%'
           />
+          <InputRow
+            type='text'
+            value={this.state.url}
+            setValue={(url: string) => this.setState({ url })}
+            label='🔗 GCR URL'
+            placeholder='ex: gcr.io/skynet-dev-172969'
+            width='100%'
+          />
         </CredentialWrapper>
         <SaveButton
           text='Save Settings'

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

@@ -53,7 +53,7 @@ export default class IntegrationsModal extends Component<PropsType, StateType> {
       let { setCurrentIntegration } = this.context.currentModalData;
       return this.state.integrations.map((integration: any, i: number) => {
         let icon = integrationList[integration.service] && integrationList[integration.service].icon;
-        let disabled = integration.service === 'kube' || integration.service === 'docker' || integration.service === 'gcr';
+        let disabled = integration.service === 'kube' || integration.service === 'docker';
         return (
           <IntegrationOption 
             key={i}

dashboard/src/shared/api.tsx

@@ -13,6 +13,21 @@ import { StorageType } from './types';
 
 const checkAuth = baseApi('GET', '/api/auth/check');
 
+const connectECRRegistry = baseApi<{
+  name: string,
+  aws_integration_id: string,
+}, { id: number }>('POST', pathParams => {
+  return `/api/projects/${pathParams.id}/registries`;
+});
+
+const connectGCRRegistry = baseApi<{
+  name: string,
+  gcp_integration_id: string,
+  url: string,
+}, { id: number }>('POST', pathParams => {
+  return `/api/projects/${pathParams.id}/registries`;
+});
+
 const createAWSIntegration = baseApi<{
   aws_region: string,
   aws_cluster_id?: string,
@@ -42,13 +57,6 @@ const createDOKS = baseApi<{
   return `/api/projects/${pathParams.project_id}/provision/doks`;
 });
 
-const createECR = baseApi<{
-  name: string,
-  aws_integration_id: string,
-}, { id: number }>('POST', pathParams => {
-  return `/api/projects/${pathParams.id}/registries`;
-});
-
 const createGCPIntegration = baseApi<{
   gcp_region: string,
   gcp_key_data: string,
@@ -438,10 +446,11 @@ const upgradeChartValues = baseApi<{
 // Bundle export to allow default api import (api.<method> is more readable)
 export default {
   checkAuth,
+  connectECRRegistry,
+  connectGCRRegistry,
   createAWSIntegration,
   createDOCR,
   createDOKS,
-  createECR,
   createGCPIntegration,
   createGCR,
   createGHAction,