7 files changed, 205 insertions, 29 deletions

diff --git a/app/assets/javascripts/google_cloud/components/app.vue b/app/assets/javascripts/google_cloud/components/app.vue
index 1e5be9df019..64784755b66 100644
--- a/app/assets/javascripts/google_cloud/components/app.vue
+++ b/app/assets/javascripts/google_cloud/components/app.vue
@@ -1,22 +1,42 @@
 <script>
-import { GlTab, GlTabs } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+import Home from './home.vue';
 import IncubationBanner from './incubation_banner.vue';
-import ServiceAccounts from './service_accounts.vue';
+import ServiceAccountsForm from './service_accounts_form.vue';
+import NoGcpProjects from './errors/no_gcp_projects.vue';
+import GcpError from './errors/gcp_error.vue';
+
+const SCREEN_GCP_ERROR = 'gcp_error';
+const SCREEN_HOME = 'home';
+const SCREEN_NO_GCP_PROJECTS = 'no_gcp_projects';
+const SCREEN_SERVICE_ACCOUNTS_FORM = 'service_accounts_form';
 
 export default {
-  components: { GlTab, GlTabs, IncubationBanner, ServiceAccounts },
+  components: {
+    IncubationBanner,
+  },
+  inheritAttrs: false,
   props: {
-    serviceAccounts: {
-      type: Array,
+    screen: {
       required: true,
-    },
-    createServiceAccountUrl: {
       type: String,
-      required: true,
     },
-    emptyIllustrationUrl: {
-      type: String,
-      required: true,
+  },
+  computed: {
+    mainComponent() {
+      switch (this.screen) {
+        case SCREEN_HOME:
+          return Home;
+        case SCREEN_GCP_ERROR:
+          return GcpError;
+        case SCREEN_NO_GCP_PROJECTS:
+          return NoGcpProjects;
+        case SCREEN_SERVICE_ACCOUNTS_FORM:
+          return ServiceAccountsForm;
+        default:
+          throw new Error(__('Unknown screen'));
+      }
     },
   },
   methods: {
@@ -34,17 +54,6 @@ export default {
       :report-bug-url="feedbackUrl('report_bug')"
       :feature-request-url="feedbackUrl('feature_request')"
     />
-    <gl-tabs>
-      <gl-tab :title="__('Configuration')">
-        <service-accounts
-          class="gl-mx-3"
-          :list="serviceAccounts"
-          :create-url="createServiceAccountUrl"
-          :empty-illustration-url="emptyIllustrationUrl"
-        />
-      </gl-tab>
-      <gl-tab :title="__('Deployments')" disabled />
-      <gl-tab :title="__('Services')" disabled />
-    </gl-tabs>
+    <component :is="mainComponent" v-bind="$attrs" />
   </div>
 </template>
diff --git a/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue b/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue
new file mode 100644
index 00000000000..90aa0e1ae68
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue
@@ -0,0 +1,29 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: { GlAlert },
+  props: {
+    error: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    title: __('Google Cloud project misconfigured'),
+    description: __(
+      'GitLab and Google Cloud configuration seems to be incomplete. This probably can be fixed by your GitLab administration team. You may share these logs with them:',
+    ),
+  },
+};
+</script>
+
+<template>
+  <gl-alert :dismissible="false" variant="warning" :title="$options.i18n.title">
+    {{ $options.i18n.description }}
+    <blockquote>
+      <code>{{ error }}</code>
+    </blockquote>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue b/app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue
new file mode 100644
index 00000000000..da229ac3f0e
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue
@@ -0,0 +1,26 @@
+<script>
+import { GlAlert, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: { GlAlert, GlButton },
+  i18n: {
+    title: __('Google Cloud project required'),
+    description: __(
+      'You do not have any Google Cloud projects. Please create a Google Cloud project and then reload this page.',
+    ),
+    createLabel: __('Create Google Cloud project'),
+  },
+};
+</script>
+
+<template>
+  <gl-alert :dismissible="false" variant="warning" :title="$options.i18n.title">
+    {{ $options.i18n.description }}
+    <template #actions>
+      <gl-button href="https://console.cloud.google.com/projectcreate" target="_blank">
+        {{ $options.i18n.createLabel }}
+      </gl-button>
+    </template>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue
new file mode 100644
index 00000000000..05f39de66ee
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/home.vue
@@ -0,0 +1,41 @@
+<script>
+import { GlTabs, GlTab } from '@gitlab/ui';
+import ServiceAccountsList from './service_accounts_list.vue';
+
+export default {
+  components: {
+    GlTabs,
+    GlTab,
+    ServiceAccountsList,
+  },
+  props: {
+    serviceAccounts: {
+      type: Array,
+      required: true,
+    },
+    createServiceAccountUrl: {
+      type: String,
+      required: true,
+    },
+    emptyIllustrationUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-tabs>
+    <gl-tab :title="__('Configuration')">
+      <service-accounts-list
+        class="gl-mx-4"
+        :list="serviceAccounts"
+        :create-url="createServiceAccountUrl"
+        :empty-illustration-url="emptyIllustrationUrl"
+      />
+    </gl-tab>
+    <gl-tab :title="__('Deployments')" disabled />
+    <gl-tab :title="__('Services')" disabled />
+  </gl-tabs>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/service_accounts_form.vue b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue
new file mode 100644
index 00000000000..e7a09668473
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue
@@ -0,0 +1,70 @@
+<script>
+import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: { GlButton, GlFormGroup, GlFormSelect },
+  props: {
+    gcpProjects: { required: true, type: Array },
+    environments: { required: true, type: Array },
+    cancelPath: { required: true, type: String },
+  },
+  i18n: {
+    title: __('Create service account'),
+    gcpProjectLabel: __('Google Cloud project'),
+    gcpProjectDescription: __(
+      'New service account is generated for the selected Google Cloud project',
+    ),
+    environmentLabel: __('Environment'),
+    environmentDescription: __('Generated service account is linked to the selected environment'),
+    submitLabel: __('Create service account'),
+    cancelLabel: __('Cancel'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+      <h2 class="gl-font-size-h1">{{ $options.i18n.title }}</h2>
+    </header>
+    <gl-form-group
+      label-for="gcp_project"
+      :label="$options.i18n.gcpProjectLabel"
+      :description="$options.i18n.gcpProjectDescription"
+    >
+      <gl-form-select id="gcp_project" name="gcp_project" required>
+        <option
+          v-for="gcpProject in gcpProjects"
+          :key="gcpProject.project_id"
+          :value="gcpProject.project_id"
+        >
+          {{ gcpProject.name }}
+        </option>
+      </gl-form-select>
+    </gl-form-group>
+    <gl-form-group
+      label-for="environment"
+      :label="$options.i18n.environmentLabel"
+      :description="$options.i18n.environmentDescription"
+    >
+      <gl-form-select id="environment" name="environment" required>
+        <option value="*">{{ __('All') }}</option>
+        <option
+          v-for="environment in environments"
+          :key="environment.name"
+          :value="environment.name"
+        >
+          {{ environment.name }}
+        </option>
+      </gl-form-select>
+    </gl-form-group>
+
+    <div class="form-actions row">
+      <gl-button type="submit" category="primary" variant="confirm">
+        {{ $options.i18n.submitLabel }}
+      </gl-button>
+      <gl-button class="gl-ml-1" :href="cancelPath">{{ $options.i18n.cancelLabel }}</gl-button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/service_accounts.vue b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
index b70b25a5dc3..b70b25a5dc3 100644
--- a/app/assets/javascripts/google_cloud/components/service_accounts.vue
+++ b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
diff --git a/app/assets/javascripts/google_cloud/index.js b/app/assets/javascripts/google_cloud/index.js
index a156a632e9a..ab9e8227812 100644
--- a/app/assets/javascripts/google_cloud/index.js
+++ b/app/assets/javascripts/google_cloud/index.js
@@ -1,11 +1,12 @@
 import Vue from 'vue';
 import App from './components/app.vue';
 
-const elementRenderer = (element, props = {}) => (createElement) =>
-  createElement(element, { props });
-
 export default () => {
-  const root = document.querySelector('#js-google-cloud');
-  const props = JSON.parse(root.getAttribute('data'));
-  return new Vue({ el: root, render: elementRenderer(App, props) });
+  const root = '#js-google-cloud';
+  const element = document.querySelector(root);
+  const { screen, ...attrs } = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(App, { props: { screen }, attrs }),
+  });
 };