Add latest changes from gitlab-org/gitlab@master

1 files changed, 36 insertions, 12 deletions

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 b70b25a5dc3..4db84746482 100644
--- a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
+++ b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
+import { GlAlert, GlButton, GlEmptyState, GlLink, GlSprintf, GlTable } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
-  components: { GlButton, GlEmptyState, GlTable },
+  components: { GlAlert, GlButton, GlEmptyState, GlLink, GlSprintf, GlTable },
   props: {
     list: {
       type: Array,
@@ -28,6 +28,22 @@ export default {
       ],
     };
   },
+  i18n: {
+    createServiceAccount: __('Create service account'),
+    found: __('✔'),
+    notFound: __('Not found'),
+    noServiceAccountsTitle: __('No service accounts'),
+    noServiceAccountsDescription: __(
+      'Service Accounts keys authorize GitLab to deploy your Google Cloud project',
+    ),
+    serviceAccountsTitle: __('Service accounts'),
+    serviceAccountsDescription: __(
+      'Service Accounts keys authorize GitLab to deploy your Google Cloud project',
+    ),
+    secretManagersDescription: __(
+      'Enhance security by storing service account keys in secret managers - learn more about %{docLinkStart}secret management with GitLab%{docLinkEnd}',
+    ),
+  },
 };
 </script>
 
@@ -35,31 +51,39 @@ export default {
   <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')
-      "
+      :title="$options.i18n.noServiceAccountsTitle"
+      :description="$options.i18n.noServiceAccountsDescription"
       :primary-button-link="createUrl"
-      :primary-button-text="__('Create service account')"
+      :primary-button-text="$options.i18n.createServiceAccount"
       :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>
+      <h2 class="gl-font-size-h2">{{ $options.i18n.serviceAccountsTitle }}</h2>
+      <p>{{ $options.i18n.serviceAccountsDescription }}</p>
 
       <gl-table :items="list" :fields="tableFields">
         <template #cell(service_account_exists)="{ value }">
-          {{ value ? '✔' : __('Not found') }}
+          {{ value ? $options.i18n.found : $options.i18n.notFound }}
         </template>
         <template #cell(service_account_key_exists)="{ value }">
-          {{ value ? '✔' : __('Not found') }}
+          {{ value ? $options.i18n.found : $options.i18n.notFound }}
         </template>
       </gl-table>
 
       <gl-button :href="createUrl" category="primary" variant="info">
-        {{ __('Create service account') }}
+        {{ $options.i18n.createServiceAccount }}
       </gl-button>
+
+      <gl-alert class="gl-mt-5" :dismissible="false" variant="tip">
+        <gl-sprintf :message="$options.i18n.secretManagersDescription">
+          <template #docLink="{ content }">
+            <gl-link href="https://docs.gitlab.com/ee/ci/secrets/">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
     </div>
   </div>
 </template>