From 41fe97390ceddf945f3d967b8fdb3de4c66b7dea Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Fri, 18 Mar 2022 20:02:30 +0000
Subject: Add latest changes from gitlab-org/gitlab@14-9-stable-ee

---
 .../javascripts/google_cloud/components/app.vue    |  4 ++
 .../google_cloud/components/gcp_regions_form.vue   | 62 ++++++++++++++++++++++
 .../google_cloud/components/gcp_regions_list.vue   | 56 +++++++++++++++++++
 .../javascripts/google_cloud/components/home.vue   | 25 +++++++++
 .../google_cloud/components/revoke_oauth.vue       | 38 +++++++++++++
 .../components/service_accounts_form.vue           | 47 ++++++++--------
 .../components/service_accounts_list.vue           | 18 +++----
 7 files changed, 215 insertions(+), 35 deletions(-)
 create mode 100644 app/assets/javascripts/google_cloud/components/gcp_regions_form.vue
 create mode 100644 app/assets/javascripts/google_cloud/components/gcp_regions_list.vue
 create mode 100644 app/assets/javascripts/google_cloud/components/revoke_oauth.vue

(limited to 'app/assets/javascripts/google_cloud/components')

diff --git a/app/assets/javascripts/google_cloud/components/app.vue b/app/assets/javascripts/google_cloud/components/app.vue
index 64784755b66..03b256297f6 100644
--- a/app/assets/javascripts/google_cloud/components/app.vue
+++ b/app/assets/javascripts/google_cloud/components/app.vue
@@ -4,6 +4,7 @@ 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';
 
@@ -11,6 +12,7 @@ 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: {
@@ -34,6 +36,8 @@ export default {
           return NoGcpProjects;
         case SCREEN_SERVICE_ACCOUNTS_FORM:
           return ServiceAccountsForm;
+        case SCREEN_GCP_REGIONS_FORM:
+          return GcpRegionsForm;
         default:
           throw new Error(__('Unknown screen'));
       }
diff --git a/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue b/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue
new file mode 100644
index 00000000000..23011e5a5b0
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue
@@ -0,0 +1,62 @@
+<script>
+import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+
+export default {
+  components: { GlButton, GlFormGroup, GlFormSelect },
+  props: {
+    availableRegions: { required: true, type: Array },
+    refs: { required: true, type: Array },
+    cancelPath: { required: true, type: String },
+  },
+  i18n: {
+    title: __('Configure region for environment'),
+    gcpRegionLabel: __('Region'),
+    gcpRegionDescription: __('List of suitable GCP locations'),
+    refsLabel: s__('GoogleCloud|Refs'),
+    refsDescription: s__('GoogleCloud|Configured region is linked to the selected branch or tag'),
+    submitLabel: __('Configure region'),
+    cancelLabel: __('Cancel'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+      <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
+    </header>
+
+    <gl-form-group
+      label-for="ref"
+      :label="$options.i18n.refsLabel"
+      :description="$options.i18n.refsDescription"
+    >
+      <gl-form-select id="ref" name="ref" required>
+        <option value="*">{{ __('All') }}</option>
+        <option v-for="ref in refs" :key="ref" :value="ref">
+          {{ ref }}
+        </option>
+      </gl-form-select>
+    </gl-form-group>
+
+    <gl-form-group
+      label-for="gcp_region"
+      :label="$options.i18n.gcpRegionLabel"
+      :description="$options.i18n.gcpRegionDescription"
+    >
+      <gl-form-select id="gcp_region" name="gcp_region" required :list="availableRegions">
+        <option v-for="(region, index) in availableRegions" :key="index" :value="region">
+          {{ region }}
+        </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/gcp_regions_list.vue b/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue
new file mode 100644
index 00000000000..1cc5a85198a
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue
@@ -0,0 +1,56 @@
+<script>
+import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: { GlButton, GlEmptyState, GlTable },
+  props: {
+    list: {
+      type: Array,
+      required: true,
+    },
+    createUrl: {
+      type: String,
+      required: true,
+    },
+    emptyIllustrationUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  tableFields: [
+    { key: 'environment', label: __('Environment'), sortable: true },
+    { key: 'gcp_region', label: __('Region'), sortable: true },
+  ],
+  i18n: {
+    emptyStateTitle: __('No regions configured'),
+    description: __('Configure your environments to be deployed to specific geographical regions'),
+    emptyStateAction: __('Add a GCP region'),
+    configureRegions: __('Configure regions'),
+    listTitle: __('Regions'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-empty-state
+      v-if="list.length === 0"
+      :title="$options.i18n.emptyStateTitle"
+      :description="$options.i18n.description"
+      :primary-button-link="createUrl"
+      :primary-button-text="$options.i18n.configureRegions"
+    />
+
+    <div v-else>
+      <h2 class="gl-font-size-h2">{{ $options.i18n.listTitle }}</h2>
+      <p>{{ $options.i18n.description }}</p>
+
+      <gl-table :items="list" :fields="$options.tableFields" />
+
+      <gl-button :href="createUrl" category="primary" variant="info">
+        {{ $options.i18n.configureRegions }}
+      </gl-button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue
index c08d8bb7c51..e41337e2679 100644
--- a/app/assets/javascripts/google_cloud/components/home.vue
+++ b/app/assets/javascripts/google_cloud/components/home.vue
@@ -1,14 +1,18 @@
 <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: {
@@ -19,6 +23,10 @@ export default {
       type: String,
       required: true,
     },
+    configureGcpRegionsUrl: {
+      type: String,
+      required: true,
+    },
     emptyIllustrationUrl: {
       type: String,
       required: true,
@@ -31,6 +39,14 @@ export default {
       type: String,
       required: true,
     },
+    gcpRegions: {
+      type: Array,
+      required: true,
+    },
+    revokeOauthUrl: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
@@ -44,6 +60,15 @@ export default {
         :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
diff --git a/app/assets/javascripts/google_cloud/components/revoke_oauth.vue b/app/assets/javascripts/google_cloud/components/revoke_oauth.vue
new file mode 100644
index 00000000000..07d966894f6
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/revoke_oauth.vue
@@ -0,0 +1,38 @@
+<script>
+import { GlButton, GlForm } from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+import { s__ } from '~/locale';
+
+export const GOOGLE_CLOUD_REVOKE_TITLE = s__('GoogleCloud|Revoke authorizations');
+export const GOOGLE_CLOUD_REVOKE_DESCRIPTION = s__(
+  'GoogleCloud|Revoke authorizations granted to GitLab. This does not invalidate service accounts.',
+);
+
+export default {
+  components: { GlButton, GlForm },
+  csrf,
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    title: GOOGLE_CLOUD_REVOKE_TITLE,
+    description: GOOGLE_CLOUD_REVOKE_DESCRIPTION,
+  },
+};
+</script>
+
+<template>
+  <div class="gl-mx-4">
+    <h2 class="gl-font-size-h2">{{ $options.i18n.title }}</h2>
+    <p>{{ $options.i18n.description }}</p>
+    <gl-form :action="url" method="post">
+      <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+      <gl-button category="secondary" variant="warning" type="submit">
+        {{ $options.i18n.title }}
+      </gl-button>
+    </gl-form>
+  </div>
+</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
index 551783e6c50..faec94e735b 100644
--- a/app/assets/javascripts/google_cloud/components/service_accounts_form.vue
+++ b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue
@@ -1,26 +1,29 @@
 <script>
-import { GlButton, GlFormGroup, GlFormSelect, GlFormCheckbox } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlButton, GlFormCheckbox, GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 export default {
+  ALL_REFS: '*',
   components: { GlButton, GlFormGroup, GlFormSelect, GlFormCheckbox },
   props: {
     gcpProjects: { required: true, type: Array },
-    environments: { required: true, type: Array },
+    refs: { 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',
+    title: s__('GoogleCloud|Create service account'),
+    gcpProjectLabel: s__('GoogleCloud|Google Cloud project'),
+    gcpProjectDescription: s__(
+      'GoogleCloud|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'),
-    checkboxLabel: __(
-      'I understand the responsibilities involved with managing service account keys',
+    refsLabel: s__('GoogleCloud|Refs'),
+    refsDescription: s__(
+      'GoogleCloud|Generated service account is linked to the selected branch or tag',
+    ),
+    submitLabel: s__('GoogleCloud|Create service account'),
+    cancelLabel: s__('GoogleCloud|Cancel'),
+    checkboxLabel: s__(
+      'GoogleCloud|I understand the responsibilities involved with managing service account keys',
     ),
   },
 };
@@ -47,18 +50,14 @@ export default {
       </gl-form-select>
     </gl-form-group>
     <gl-form-group
-      label-for="environment"
-      :label="$options.i18n.environmentLabel"
-      :description="$options.i18n.environmentDescription"
+      label-for="ref"
+      :label="$options.i18n.refsLabel"
+      :description="$options.i18n.refsDescription"
     >
-      <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 }}
+      <gl-form-select id="ref" name="ref" required>
+        <option :value="$options.ALL_REFS">{{ __('All') }}</option>
+        <option v-for="ref in refs" :key="ref" :value="ref">
+          {{ ref }}
         </option>
       </gl-form-select>
     </gl-form-group>
diff --git a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
index 4db84746482..37b716d7be5 100644
--- a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
+++ b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
@@ -18,16 +18,12 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      tableFields: [
-        { key: 'environment', label: __('Environment'), sortable: true },
-        { key: 'gcp_project', label: __('Google Cloud Project'), sortable: true },
-        { key: 'service_account_exists', label: __('Service Account'), sortable: true },
-        { key: 'service_account_key_exists', label: __('Service Account Key'), sortable: true },
-      ],
-    };
-  },
+  tableFields: [
+    { key: 'ref', label: __('Environment'), sortable: true },
+    { key: 'gcp_project', label: __('Google Cloud Project'), sortable: true },
+    { key: 'service_account_exists', label: __('Service Account'), sortable: true },
+    { key: 'service_account_key_exists', label: __('Service Account Key'), sortable: true },
+  ],
   i18n: {
     createServiceAccount: __('Create service account'),
     found: __('✔'),
@@ -62,7 +58,7 @@ export default {
       <h2 class="gl-font-size-h2">{{ $options.i18n.serviceAccountsTitle }}</h2>
       <p>{{ $options.i18n.serviceAccountsDescription }}</p>
 
-      <gl-table :items="list" :fields="tableFields">
+      <gl-table :items="list" :fields="$options.tableFields">
         <template #cell(service_account_exists)="{ value }">
           {{ value ? $options.i18n.found : $options.i18n.notFound }}
         </template>
-- 
cgit v1.2.3