Frontend for GoogleCloud :: Deployments tab

This commit makes the following updates to the `project :: infra :: google cloud` page:

- `Deployments` tab is enabled
- `DeploymentsServiceTable` is introduced and rendered
- `DeploymentsServiceTable` contains two disabled buttons for `Cloud Run` and `Cloud Storage`

app/assets/javascripts/google_cloud/components/deployments_service_table.vue

+<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>

app/assets/javascripts/google_cloud/components/home.vue

 <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>

locale/gitlab.pot

@@ -7485,6 +7485,12 @@ msgstr ""
 msgid "Closes this %{quick_action_target}."
 msgstr ""
 
+msgid "Cloud Run"
+msgstr ""
+
+msgid "Cloud Storage"
+msgstr ""
+
 msgid "Cluster"
 msgstr ""
 
@@ -9034,6 +9040,9 @@ msgstr ""
 msgid "Configure existing installation"
 msgstr ""
 
+msgid "Configure pipelines to deploy web apps, backend services, APIs and static resources to Google Cloud"
+msgstr ""
+
 msgid "Configure repository mirroring."
 msgstr ""
 
@@ -9061,6 +9070,9 @@ msgstr ""
 msgid "Configure the way a user creates a new account."
 msgstr ""
 
+msgid "Configure via Merge Request"
+msgstr ""
+
 msgid "Configure which lists are shown for anyone who visits this board"
 msgstr ""
 
@@ -11737,6 +11749,9 @@ msgstr[1] ""
 msgid "Deploy Keys"
 msgstr ""
 
+msgid "Deploy container based web apps on Google managed clusters"
+msgstr ""
+
 msgid "Deploy freezes"
 msgstr ""
 
@@ -11752,6 +11767,9 @@ msgstr ""
 msgid "Deploy progress not found. To see pods, ensure your environment matches %{linkStart}deploy board criteria%{linkEnd}."
 msgstr ""
 
+msgid "Deploy static assets and resources to Google managed CDN"
+msgstr ""
+
 msgid "Deploy to..."
 msgstr ""
 

spec/frontend/google_cloud/components/app_spec.js

@@ -24,6 +24,8 @@ const HOME_PROPS = {
   serviceAccounts: [{}, {}],
   createServiceAccountUrl: '#url-create-service-account',
   emptyIllustrationUrl: '#url-empty-illustration',
+  deploymentsCloudRunUrl: '#url-deployments-cloud-run',
+  deploymentsCloudStorageUrl: '#deploymentsCloudStorageUrl',
 };
 
 describe('google_cloud App component', () => {

spec/frontend/google_cloud/components/deployments_service_table_spec.js

+import { mount } from '@vue/test-utils';
+import { GlButton, GlTable } from '@gitlab/ui';
+import DeploymentsServiceTable from '~/google_cloud/components/deployments_service_table.vue';
+
+describe('google_cloud DeploymentsServiceTable component', () => {
+  let wrapper;
+
+  const findTable = () => wrapper.findComponent(GlTable);
+  const findButtons = () => findTable().findAllComponents(GlButton);
+  const findCloudRunButton = () => findButtons().at(0);
+  const findCloudStorageButton = () => findButtons().at(1);
+
+  beforeEach(() => {
+    const propsData = {
+      cloudRunUrl: '#url-deployments-cloud-run',
+      cloudStorageUrl: '#url-deployments-cloud-storage',
+    };
+    wrapper = mount(DeploymentsServiceTable, { propsData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should contain a table', () => {
+    expect(findTable().exists()).toBe(true);
+  });
+
+  it('should contain configure cloud run button', () => {
+    const cloudRunButton = findCloudRunButton();
+    expect(cloudRunButton.exists()).toBe(true);
+    expect(cloudRunButton.props().disabled).toBe(true);
+  });
+
+  it('should contain configure cloud storage button', () => {
+    const cloudStorageButton = findCloudStorageButton();
+    expect(cloudStorageButton.exists()).toBe(true);
+    expect(cloudStorageButton.props().disabled).toBe(true);
+  });
+});

spec/frontend/google_cloud/components/home_spec.js

@@ -20,6 +20,8 @@ describe('google_cloud Home component', () => {
     serviceAccounts: [{}, {}],
     createServiceAccountUrl: '#url-create-service-account',
     emptyIllustrationUrl: '#url-empty-illustration',
+    deploymentsCloudRunUrl: '#url-deployments-cloud-run',
+    deploymentsCloudStorageUrl: '#deploymentsCloudStorageUrl',
   };
 
   beforeEach(() => {
@@ -42,7 +44,7 @@ describe('google_cloud Home component', () => {
     it('should contain three tab items', () => {
       expect(findTabItemsModel()).toEqual([
         { title: 'Configuration', disabled: undefined },
-        { title: 'Deployments', disabled: '' },
+        { title: 'Deployments', disabled: undefined },
         { title: 'Services', disabled: '' },
       ]);
     });