Add latest changes from gitlab-org/gitlab@master

5 files changed, 109 insertions, 98 deletions

diff --git a/app/assets/javascripts/google_cloud/components/app.vue b/app/assets/javascripts/google_cloud/components/app.vue
new file mode 100644
index 00000000000..64784755b66
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/app.vue
@@ -0,0 +1,59 @@
+<script>
+import { __ } from '~/locale';
+
+import Home from './home.vue';
+import IncubationBanner from './incubation_banner.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: {
+    IncubationBanner,
+  },
+  inheritAttrs: false,
+  props: {
+    screen: {
+      required: true,
+      type: String,
+    },
+  },
+  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: {
+    feedbackUrl(template) {
+      return `https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/meta/-/issues/new?issuable_template=${template}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <incubation-banner
+      :share-feedback-url="feedbackUrl('general_feedback')"
+      :report-bug-url="feedbackUrl('report_bug')"
+      :feature-request-url="feedbackUrl('feature_request')"
+    />
+    <component :is="mainComponent" v-bind="$attrs" />
+  </div>
+</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/screens/app.vue b/app/assets/javascripts/google_cloud/components/screens/app.vue
deleted file mode 100644
index 52c9b478916..00000000000
--- a/app/assets/javascripts/google_cloud/components/screens/app.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-import { GlTab, GlTabs } from '@gitlab/ui';
-import IncubationBanner from '../incubation_banner.vue';
-import ServiceAccountsList from '../service_accounts_list.vue';
-
-export default {
-  components: { GlTab, GlTabs, IncubationBanner, ServiceAccountsList },
-  props: {
-    serviceAccounts: {
-      type: Array,
-      required: true,
-    },
-    createServiceAccountUrl: {
-      type: String,
-      required: true,
-    },
-    emptyIllustrationUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    feedbackUrl(template) {
-      return `https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/meta/-/issues/new?issuable_template=${template}`;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <incubation-banner
-      :share-feedback-url="feedbackUrl('general_feedback')"
-      :report-bug-url="feedbackUrl('report_bug')"
-      :feature-request-url="feedbackUrl('feature_request')"
-    />
-    <gl-tabs>
-      <gl-tab :title="__('Configuration')">
-        <service-accounts-list
-          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>
-  </div>
-</template>
diff --git a/app/assets/javascripts/google_cloud/components/screens/service_accounts_form.vue b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue
index 6aead296918..e7a09668473 100644
--- a/app/assets/javascripts/google_cloud/components/screens/service_accounts_form.vue
+++ b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue
@@ -1,20 +1,14 @@
 <script>
 import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui';
 import { __ } from '~/locale';
-import IncubationBanner from '../incubation_banner.vue';
 
 export default {
-  components: { GlButton, GlFormGroup, GlFormSelect, IncubationBanner },
+  components: { GlButton, GlFormGroup, GlFormSelect },
   props: {
     gcpProjects: { required: true, type: Array },
     environments: { required: true, type: Array },
     cancelPath: { required: true, type: String },
   },
-  methods: {
-    feedbackUrl(template) {
-      return `https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/meta/-/issues/new?issuable_template=${template}`;
-    },
-  },
   i18n: {
     title: __('Create service account'),
     gcpProjectLabel: __('Google Cloud project'),
@@ -31,11 +25,6 @@ export default {
 
 <template>
   <div>
-    <incubation-banner
-      :share-feedback-url="feedbackUrl('general_feedback')"
-      :report-bug-url="feedbackUrl('report_bug')"
-      :feature-request-url="feedbackUrl('feature_request')"
-    />
     <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>
diff --git a/app/assets/javascripts/google_cloud/index.js b/app/assets/javascripts/google_cloud/index.js
index ba67877e005..ab9e8227812 100644
--- a/app/assets/javascripts/google_cloud/index.js
+++ b/app/assets/javascripts/google_cloud/index.js
@@ -1,40 +1,12 @@
 import Vue from 'vue';
-import { __ } from '~/locale';
-import App from './components/screens/app.vue';
-import ServiceAccountsForm from './components/screens/service_accounts_form.vue';
-import ErrorNoGcpProjects from './components/errors/no_gcp_projects.vue';
-import ErrorGcpError from './components/errors/gcp_error.vue';
-
-const elementRenderer = (element, props = {}) => (createElement) =>
-  createElement(element, { props });
-
-const rootComponentMap = [
-  {
-    root: '#js-google-cloud-error-no-gcp-projects',
-    component: ErrorNoGcpProjects,
-  },
-  {
-    root: '#js-google-cloud-error-gcp-error',
-    component: ErrorGcpError,
-  },
-  {
-    root: '#js-google-cloud-service-accounts',
-    component: ServiceAccountsForm,
-  },
-  {
-    root: '#js-google-cloud',
-    component: App,
-  },
-];
+import App from './components/app.vue';
 
 export default () => {
-  for (let i = 0; i < rootComponentMap.length; i += 1) {
-    const { root, component } = rootComponentMap[i];
-    const element = document.querySelector(root);
-    if (element) {
-      const props = JSON.parse(element.getAttribute('data'));
-      return new Vue({ el: root, render: elementRenderer(component, props) });
-    }
-  }
-  throw new Error(__('Unknown root'));
+  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 }),
+  });
 };