Add latest changes from gitlab-org/gitlab@14-7-stable-eev14.7.0-rc42

2 files changed, 77 insertions, 1 deletions

diff --git a/app/assets/javascripts/google_cloud/components/deployments_service_table.vue b/app/assets/javascripts/google_cloud/components/deployments_service_table.vue
new file mode 100644
index 00000000000..7d27d7cf6b2
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/deployments_service_table.vue
@@ -0,0 +1,61 @@
+<script>
+import { GlButton, GlTable } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const i18n = {
+  cloudRun: __('Cloud Run'),
+  cloudRunDescription: __('Deploy container based web apps on Google managed clusters'),
+  cloudStorage: __('Cloud Storage'),
+  cloudStorageDescription: __('Deploy static assets and resources to Google managed CDN'),
+  deployments: __('Deployments'),
+  deploymentsDescription: __(
+    'Configure pipelines to deploy web apps, backend services, APIs and static resources to Google Cloud',
+  ),
+  configureViaMergeRequest: __('Configure via Merge Request'),
+  service: __('Service'),
+  description: __('Description'),
+};
+
+export default {
+  components: { GlButton, GlTable },
+  props: {
+    cloudRunUrl: {
+      type: String,
+      required: true,
+    },
+    cloudStorageUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  fields: [
+    { key: 'title', label: i18n.service },
+    { key: 'description', label: i18n.description },
+    { key: 'action', label: '' },
+  ],
+  items: [
+    {
+      title: i18n.cloudRun,
+      description: i18n.cloudRunDescription,
+      action: { title: i18n.configureViaMergeRequest, disabled: true },
+    },
+    {
+      title: i18n.cloudStorage,
+      description: i18n.cloudStorageDescription,
+      action: { title: i18n.configureViaMergeRequest, disabled: true },
+    },
+  ],
+  i18n,
+};
+</script>
+<template>
+  <div class="gl-mx-3">
+    <h2 class="gl-font-size-h2">{{ $options.i18n.deployments }}</h2>
+    <p>{{ $options.i18n.deploymentsDescription }}</p>
+    <gl-table :fields="$options.fields" :items="$options.items">
+      <template #cell(action)="{ value }">
+        <gl-button :disabled="value.disabled">{{ value.title }}</gl-button>
+      </template>
+    </gl-table>
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue
index 05f39de66ee..8ef110dcf22 100644
--- a/app/assets/javascripts/google_cloud/components/home.vue
+++ b/app/assets/javascripts/google_cloud/components/home.vue
@@ -1,11 +1,13 @@
 <script>
 import { GlTabs, GlTab } from '@gitlab/ui';
+import DeploymentsServiceTable from './deployments_service_table.vue';
 import ServiceAccountsList from './service_accounts_list.vue';
 
 export default {
   components: {
     GlTabs,
     GlTab,
+    DeploymentsServiceTable,
     ServiceAccountsList,
   },
   props: {
@@ -21,6 +23,14 @@ export default {
       type: String,
       required: true,
     },
+    deploymentsCloudRunUrl: {
+      type: String,
+      required: true,
+    },
+    deploymentsCloudStorageUrl: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
@@ -35,7 +45,12 @@ export default {
         :empty-illustration-url="emptyIllustrationUrl"
       />
     </gl-tab>
-    <gl-tab :title="__('Deployments')" disabled />
+    <gl-tab :title="__('Deployments')">
+      <deployments-service-table
+        :cloud-run-url="deploymentsCloudRunUrl"
+        :cloud-storage-url="deploymentsCloudStorageUrl"
+      />
+    </gl-tab>
     <gl-tab :title="__('Services')" disabled />
   </gl-tabs>
 </template>