Add latest changes from gitlab-org/gitlab@master

23 files changed, 329 insertions, 226 deletions

diff --git a/app/assets/javascripts/google_cloud/components/app.vue b/app/assets/javascripts/google_cloud/components/app.vue
deleted file mode 100644
index b3d773e6bee..00000000000
--- a/app/assets/javascripts/google_cloud/components/app.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-import { __ } from '~/locale';
-
-import Home from './home.vue';
-import IncubationBanner from './incubation_banner.vue';
-import ServiceAccountsForm from './service_accounts_form.vue';
-import GcpRegionsForm from './gcp_regions_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';
-const SCREEN_GCP_REGIONS_FORM = 'gcp_regions_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;
-        case SCREEN_GCP_REGIONS_FORM:
-          return GcpRegionsForm;
-        default:
-          throw new Error(__('Unknown screen'));
-      }
-    },
-  },
-  methods: {
-    feedbackUrl(template) {
-      return `https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/feedback/-/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/errors/gcp_error.vue b/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue
deleted file mode 100644
index 90aa0e1ae68..00000000000
--- a/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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
deleted file mode 100644
index da229ac3f0e..00000000000
--- a/app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<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/google_cloud_menu.vue b/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
new file mode 100644
index 00000000000..d6b7c702b54
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
@@ -0,0 +1,85 @@
+<script>
+import { s__ } from '~/locale';
+
+const CONFIGURATION_KEY = 'configuration';
+const DEPLOYMENTS_KEY = 'deployments';
+const DATABASES_KEY = 'databases';
+
+const i18n = {
+  configuration: { title: s__('CloudSeed|Configuration') },
+  deployments: { title: s__('CloudSeed|Deployments') },
+  databases: { title: s__('CloudSeed|Databases') },
+};
+
+export default {
+  props: {
+    active: {
+      type: String,
+      required: true,
+    },
+    configurationUrl: {
+      type: String,
+      required: true,
+    },
+    deploymentsUrl: {
+      type: String,
+      required: true,
+    },
+    databasesUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isConfigurationActive() {
+      return this.active === CONFIGURATION_KEY;
+    },
+    isDeploymentsActive() {
+      return this.active === DEPLOYMENTS_KEY;
+    },
+    isDatabasesActive() {
+      return this.active === DATABASES_KEY;
+    },
+  },
+  i18n,
+};
+</script>
+<template>
+  <div class="tabs gl-tabs">
+    <ul role="tablist" class="nav gl-tabs-nav">
+      <li role="presentation" class="nav-item">
+        <a
+          data-testid="configurationLink"
+          role="tab"
+          :href="configurationUrl"
+          class="nav-link gl-tab-nav-item"
+          :class="{ 'gl-tab-nav-item-active': isConfigurationActive }"
+        >
+          {{ $options.i18n.configuration.title }}</a
+        >
+      </li>
+      <li role="presentation" class="nav-item">
+        <a
+          data-testid="deploymentsLink"
+          role="tab"
+          :href="deploymentsUrl"
+          class="nav-link gl-tab-nav-item"
+          :class="{ 'gl-tab-nav-item-active': isDeploymentsActive }"
+        >
+          {{ $options.i18n.deployments.title }}
+        </a>
+      </li>
+      <li role="presentation" class="nav-item">
+        <a
+          data-testid="databasesLink"
+          role="tab"
+          :href="databasesUrl"
+          class="nav-link gl-tab-nav-item"
+          :class="{ 'gl-tab-nav-item-active': isDatabasesActive }"
+        >
+          {{ $options.i18n.databases.title }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue
deleted file mode 100644
index e41337e2679..00000000000
--- a/app/assets/javascripts/google_cloud/components/home.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-import { GlTabs, GlTab } from '@gitlab/ui';
-import DeploymentsServiceTable from './deployments_service_table.vue';
-import RevokeOauth from './revoke_oauth.vue';
-import ServiceAccountsList from './service_accounts_list.vue';
-import GcpRegionsList from './gcp_regions_list.vue';
-
-export default {
-  components: {
-    GlTabs,
-    GlTab,
-    DeploymentsServiceTable,
-    RevokeOauth,
-    ServiceAccountsList,
-    GcpRegionsList,
-  },
-  props: {
-    serviceAccounts: {
-      type: Array,
-      required: true,
-    },
-    createServiceAccountUrl: {
-      type: String,
-      required: true,
-    },
-    configureGcpRegionsUrl: {
-      type: String,
-      required: true,
-    },
-    emptyIllustrationUrl: {
-      type: String,
-      required: true,
-    },
-    enableCloudRunUrl: {
-      type: String,
-      required: true,
-    },
-    enableCloudStorageUrl: {
-      type: String,
-      required: true,
-    },
-    gcpRegions: {
-      type: Array,
-      required: true,
-    },
-    revokeOauthUrl: {
-      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"
-      />
-      <hr />
-      <gcp-regions-list
-        class="gl-mx-4"
-        :empty-illustration-url="emptyIllustrationUrl"
-        :create-url="configureGcpRegionsUrl"
-        :list="gcpRegions"
-      />
-      <hr v-if="revokeOauthUrl" />
-      <revoke-oauth v-if="revokeOauthUrl" :url="revokeOauthUrl" />
-    </gl-tab>
-    <gl-tab :title="__('Deployments')">
-      <deployments-service-table
-        :cloud-run-url="enableCloudRunUrl"
-        :cloud-storage-url="enableCloudStorageUrl"
-      />
-    </gl-tab>
-    <gl-tab :title="__('Services')" disabled />
-  </gl-tabs>
-</template>
diff --git a/app/assets/javascripts/google_cloud/components/incubation_banner.vue b/app/assets/javascripts/google_cloud/components/incubation_banner.vue
index 652b8c1aecb..128b3dcb1d9 100644
--- a/app/assets/javascripts/google_cloud/components/incubation_banner.vue
+++ b/app/assets/javascripts/google_cloud/components/incubation_banner.vue
@@ -1,22 +1,20 @@
 <script>
 import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 
+const FEATURE_REQUEST_KEY = 'feature_request';
+const REPORT_BUG_KEY = 'report_bug';
+const GENERAL_FEEDBACK_KEY = 'general_feedback';
+
 export default {
   components: { GlAlert, GlLink, GlSprintf },
-  props: {
-    shareFeedbackUrl: {
-      required: true,
-      type: String,
-    },
-    reportBugUrl: {
-      required: true,
-      type: String,
-    },
-    featureRequestUrl: {
-      required: true,
-      type: String,
+  methods: {
+    feedbackUrl(template) {
+      return `https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/feedback/-/issues/new?issuable_template=${template}`;
     },
   },
+  FEATURE_REQUEST_KEY,
+  REPORT_BUG_KEY,
+  GENERAL_FEEDBACK_KEY,
 };
 </script>
 
@@ -31,13 +29,13 @@ export default {
       "
     >
       <template #featureLink="{ content }">
-        <gl-link :href="featureRequestUrl">{{ content }}</gl-link>
+        <gl-link :href="feedbackUrl($options.FEATURE_REQUEST_KEY)">{{ content }}</gl-link>
       </template>
       <template #bugLink="{ content }">
-        <gl-link :href="reportBugUrl">{{ content }}</gl-link>
+        <gl-link :href="feedbackUrl($options.REPORT_BUG_KEY)">{{ content }}</gl-link>
       </template>
       <template #feedbackLink="{ content }">
-        <gl-link :href="shareFeedbackUrl">{{ content }}</gl-link>
+        <gl-link :href="feedbackUrl($options.GENERAL_FEEDBACK_KEY)">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
   </gl-alert>
diff --git a/app/assets/javascripts/google_cloud/configuration/index.js b/app/assets/javascripts/google_cloud/configuration/index.js
new file mode 100644
index 00000000000..580315588d0
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/configuration/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Panel from './panel.vue';
+
+export default (containerId = '#js-google-cloud-configuration') => {
+  const element = document.querySelector(containerId);
+  const { ...attrs } = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(Panel, { attrs }),
+  });
+};
diff --git a/app/assets/javascripts/google_cloud/configuration/panel.vue b/app/assets/javascripts/google_cloud/configuration/panel.vue
new file mode 100644
index 00000000000..ee046eb1988
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/configuration/panel.vue
@@ -0,0 +1,88 @@
+<script>
+import GcpRegionsList from '../gcp_regions/list.vue';
+import GoogleCloudMenu from '../components/google_cloud_menu.vue';
+import IncubationBanner from '../components/incubation_banner.vue';
+import RevokeOauth from '../components/revoke_oauth.vue';
+import ServiceAccountsList from '../service_accounts/list.vue';
+
+export default {
+  components: {
+    GcpRegionsList,
+    GoogleCloudMenu,
+    IncubationBanner,
+    RevokeOauth,
+    ServiceAccountsList,
+  },
+  props: {
+    configurationUrl: {
+      type: String,
+      required: true,
+    },
+    deploymentsUrl: {
+      type: String,
+      required: true,
+    },
+    databasesUrl: {
+      type: String,
+      required: true,
+    },
+    serviceAccounts: {
+      type: Array,
+      required: true,
+    },
+    createServiceAccountUrl: {
+      type: String,
+      required: true,
+    },
+    emptyIllustrationUrl: {
+      type: String,
+      required: true,
+    },
+    configureGcpRegionsUrl: {
+      type: String,
+      required: true,
+    },
+    gcpRegions: {
+      type: Array,
+      required: true,
+    },
+    revokeOauthUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <incubation-banner />
+
+    <google-cloud-menu
+      active="configuration"
+      :configuration-url="configurationUrl"
+      :deployments-url="deploymentsUrl"
+      :databases-url="databasesUrl"
+    />
+
+    <service-accounts-list
+      class="gl-mx-4"
+      :list="serviceAccounts"
+      :create-url="createServiceAccountUrl"
+      :empty-illustration-url="emptyIllustrationUrl"
+    />
+
+    <hr />
+
+    <gcp-regions-list
+      class="gl-mx-4"
+      :empty-illustration-url="emptyIllustrationUrl"
+      :create-url="configureGcpRegionsUrl"
+      :list="gcpRegions"
+    />
+
+    <hr v-if="revokeOauthUrl" />
+
+    <revoke-oauth v-if="revokeOauthUrl" :url="revokeOauthUrl" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/cloudsql/create_instance_form.vue b/app/assets/javascripts/google_cloud/databases/cloudsql/create_instance_form.vue
index 0ac561b6132..0ac561b6132 100644
--- a/app/assets/javascripts/google_cloud/components/cloudsql/create_instance_form.vue
+++ b/app/assets/javascripts/google_cloud/databases/cloudsql/create_instance_form.vue
diff --git a/app/assets/javascripts/google_cloud/components/cloudsql/instance_table.vue b/app/assets/javascripts/google_cloud/databases/cloudsql/instance_table.vue
index 823895214df..823895214df 100644
--- a/app/assets/javascripts/google_cloud/components/cloudsql/instance_table.vue
+++ b/app/assets/javascripts/google_cloud/databases/cloudsql/instance_table.vue
diff --git a/app/assets/javascripts/google_cloud/databases/index.js b/app/assets/javascripts/google_cloud/databases/index.js
new file mode 100644
index 00000000000..e240a1116e8
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/databases/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Panel from './panel.vue';
+
+export default (containerId = '#js-google-cloud-databases') => {
+  const element = document.querySelector(containerId);
+  const { ...attrs } = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(Panel, { attrs }),
+  });
+};
diff --git a/app/assets/javascripts/google_cloud/databases/panel.vue b/app/assets/javascripts/google_cloud/databases/panel.vue
new file mode 100644
index 00000000000..e2f18c286a5
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/databases/panel.vue
@@ -0,0 +1,38 @@
+<script>
+import GoogleCloudMenu from '../components/google_cloud_menu.vue';
+import IncubationBanner from '../components/incubation_banner.vue';
+
+export default {
+  components: {
+    IncubationBanner,
+    GoogleCloudMenu,
+  },
+  props: {
+    configurationUrl: {
+      type: String,
+      required: true,
+    },
+    deploymentsUrl: {
+      type: String,
+      required: true,
+    },
+    databasesUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <incubation-banner />
+
+    <google-cloud-menu
+      active="databases"
+      :configuration-url="configurationUrl"
+      :deployments-url="deploymentsUrl"
+      :databases-url="databasesUrl"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/databases/service_table.vue b/app/assets/javascripts/google_cloud/databases/service_table.vue
index 80bd6ef28fb..80bd6ef28fb 100644
--- a/app/assets/javascripts/google_cloud/components/databases/service_table.vue
+++ b/app/assets/javascripts/google_cloud/databases/service_table.vue
diff --git a/app/assets/javascripts/google_cloud/deployments/index.js b/app/assets/javascripts/google_cloud/deployments/index.js
new file mode 100644
index 00000000000..fcbb2209c40
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/deployments/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Panel from './panel.vue';
+
+export default (containerId = '#js-google-cloud-deployments') => {
+  const element = document.querySelector(containerId);
+  const { ...attrs } = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(Panel, { attrs }),
+  });
+};
diff --git a/app/assets/javascripts/google_cloud/deployments/panel.vue b/app/assets/javascripts/google_cloud/deployments/panel.vue
new file mode 100644
index 00000000000..89db132ad5e
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/deployments/panel.vue
@@ -0,0 +1,50 @@
+<script>
+import GoogleCloudMenu from '../components/google_cloud_menu.vue';
+import IncubationBanner from '../components/incubation_banner.vue';
+import ServiceTable from './service_table.vue';
+
+export default {
+  components: {
+    ServiceTable,
+    IncubationBanner,
+    GoogleCloudMenu,
+  },
+  props: {
+    configurationUrl: {
+      type: String,
+      required: true,
+    },
+    deploymentsUrl: {
+      type: String,
+      required: true,
+    },
+    databasesUrl: {
+      type: String,
+      required: true,
+    },
+    enableCloudRunUrl: {
+      type: String,
+      required: true,
+    },
+    enableCloudStorageUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <incubation-banner />
+
+    <google-cloud-menu
+      active="deployments"
+      :configuration-url="configurationUrl"
+      :deployments-url="deploymentsUrl"
+      :databases-url="databasesUrl"
+    />
+
+    <service-table :cloud-run-url="enableCloudRunUrl" :cloud-storage-url="enableCloudStorageUrl" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/deployments_service_table.vue b/app/assets/javascripts/google_cloud/deployments/service_table.vue
index 26c9fd14dc6..26c9fd14dc6 100644
--- a/app/assets/javascripts/google_cloud/components/deployments_service_table.vue
+++ b/app/assets/javascripts/google_cloud/deployments/service_table.vue
diff --git a/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue b/app/assets/javascripts/google_cloud/gcp_regions/form.vue
index 23011e5a5b0..23011e5a5b0 100644
--- a/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue
+++ b/app/assets/javascripts/google_cloud/gcp_regions/form.vue
diff --git a/app/assets/javascripts/google_cloud/gcp_regions/index.js b/app/assets/javascripts/google_cloud/gcp_regions/index.js
new file mode 100644
index 00000000000..da37c612805
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/gcp_regions/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Form from './form.vue';
+
+export default (containerId = '#js-google-cloud-gcp-regions') => {
+  const element = document.querySelector(containerId);
+  const { ...attrs } = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(Form, { attrs }),
+  });
+};
diff --git a/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue b/app/assets/javascripts/google_cloud/gcp_regions/list.vue
index 5d403d5cd65..5d403d5cd65 100644
--- a/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue
+++ b/app/assets/javascripts/google_cloud/gcp_regions/list.vue
diff --git a/app/assets/javascripts/google_cloud/index.js b/app/assets/javascripts/google_cloud/index.js
deleted file mode 100644
index ab9e8227812..00000000000
--- a/app/assets/javascripts/google_cloud/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Vue from 'vue';
-import App from './components/app.vue';
-
-export default () => {
-  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 }),
-  });
-};
diff --git a/app/assets/javascripts/google_cloud/components/service_accounts_form.vue b/app/assets/javascripts/google_cloud/service_accounts/form.vue
index faec94e735b..faec94e735b 100644
--- a/app/assets/javascripts/google_cloud/components/service_accounts_form.vue
+++ b/app/assets/javascripts/google_cloud/service_accounts/form.vue
diff --git a/app/assets/javascripts/google_cloud/service_accounts/index.js b/app/assets/javascripts/google_cloud/service_accounts/index.js
new file mode 100644
index 00000000000..5207b44deac
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/service_accounts/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Form from './form.vue';
+
+export default (containerId = '#js-google-cloud-service-accounts') => {
+  const element = document.querySelector(containerId);
+  const { ...attrs } = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(Form, { attrs }),
+  });
+};
diff --git a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue b/app/assets/javascripts/google_cloud/service_accounts/list.vue
index 4b580c594f5..4b580c594f5 100644
--- a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
+++ b/app/assets/javascripts/google_cloud/service_accounts/list.vue