Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

3 files changed, 159 insertions, 0 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..1e5be9df019
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/app.vue
@@ -0,0 +1,50 @@
+<script>
+import { GlTab, GlTabs } from '@gitlab/ui';
+import IncubationBanner from './incubation_banner.vue';
+import ServiceAccounts from './service_accounts.vue';
+
+export default {
+  components: { GlTab, GlTabs, IncubationBanner, ServiceAccounts },
+  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
+          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/incubation_banner.vue b/app/assets/javascripts/google_cloud/components/incubation_banner.vue
new file mode 100644
index 00000000000..652b8c1aecb
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/incubation_banner.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+
+export default {
+  components: { GlAlert, GlLink, GlSprintf },
+  props: {
+    shareFeedbackUrl: {
+      required: true,
+      type: String,
+    },
+    reportBugUrl: {
+      required: true,
+      type: String,
+    },
+    featureRequestUrl: {
+      required: true,
+      type: String,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert :dismissible="false" variant="info">
+    {{ __('This is an experimental feature developed by GitLab Incubation Engineering.') }}
+    <gl-sprintf
+      :message="
+        __(
+          'We invite you to %{featureLinkStart}request a feature%{featureLinkEnd}, %{bugLinkStart}report a bug%{bugLinkEnd} or %{feedbackLinkStart}share feedback%{feedbackLinkEnd}',
+        )
+      "
+    >
+      <template #featureLink="{ content }">
+        <gl-link :href="featureRequestUrl">{{ content }}</gl-link>
+      </template>
+      <template #bugLink="{ content }">
+        <gl-link :href="reportBugUrl">{{ content }}</gl-link>
+      </template>
+      <template #feedbackLink="{ content }">
+        <gl-link :href="shareFeedbackUrl">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/service_accounts.vue b/app/assets/javascripts/google_cloud/components/service_accounts.vue
new file mode 100644
index 00000000000..b70b25a5dc3
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/service_accounts.vue
@@ -0,0 +1,65 @@
+<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,
+    },
+  },
+  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 },
+      ],
+    };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-empty-state
+      v-if="list.length === 0"
+      :title="__('No service accounts')"
+      :description="
+        __('Service Accounts keys authorize GitLab to deploy your Google Cloud project')
+      "
+      :primary-button-link="createUrl"
+      :primary-button-text="__('Create service account')"
+      :svg-path="emptyIllustrationUrl"
+    />
+
+    <div v-else>
+      <h2 class="gl-font-size-h2">{{ __('Service Accounts') }}</h2>
+      <p>{{ __('Service Accounts keys authorize GitLab to deploy your Google Cloud project') }}</p>
+
+      <gl-table :items="list" :fields="tableFields">
+        <template #cell(service_account_exists)="{ value }">
+          {{ value ? '✔' : __('Not found') }}
+        </template>
+        <template #cell(service_account_key_exists)="{ value }">
+          {{ value ? '✔' : __('Not found') }}
+        </template>
+      </gl-table>
+
+      <gl-button :href="createUrl" category="primary" variant="info">
+        {{ __('Create service account') }}
+      </gl-button>
+    </div>
+  </div>
+</template>