diff options
Diffstat (limited to 'app/assets/javascripts/google_cloud/components')
4 files changed, 72 insertions, 21 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 index 7d27d7cf6b2..26c9fd14dc6 100644 --- a/app/assets/javascripts/google_cloud/components/deployments_service_table.vue +++ b/app/assets/javascripts/google_cloud/components/deployments_service_table.vue @@ -2,6 +2,9 @@ import { GlButton, GlTable } from '@gitlab/ui'; import { __ } from '~/locale'; +const cloudRun = 'cloudRun'; +const cloudStorage = 'cloudStorage'; + const i18n = { cloudRun: __('Cloud Run'), cloudRunDescription: __('Deploy container based web apps on Google managed clusters'), @@ -28,6 +31,13 @@ export default { required: true, }, }, + methods: { + actionUrl(key) { + if (key === cloudRun) return this.cloudRunUrl; + else if (key === cloudStorage) return this.cloudStorageUrl; + return '#'; + }, + }, fields: [ { key: 'title', label: i18n.service }, { key: 'description', label: i18n.description }, @@ -37,12 +47,19 @@ export default { { title: i18n.cloudRun, description: i18n.cloudRunDescription, - action: { title: i18n.configureViaMergeRequest, disabled: true }, + action: { + key: cloudRun, + title: i18n.configureViaMergeRequest, + }, }, { title: i18n.cloudStorage, description: i18n.cloudStorageDescription, - action: { title: i18n.configureViaMergeRequest, disabled: true }, + action: { + key: cloudStorage, + title: i18n.configureViaMergeRequest, + disabled: true, + }, }, ], i18n, @@ -54,7 +71,9 @@ export default { <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> + <gl-button :disabled="value.disabled" :href="actionUrl(value.key)"> + {{ value.title }} + </gl-button> </template> </gl-table> </div> diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue index 8ef110dcf22..c08d8bb7c51 100644 --- a/app/assets/javascripts/google_cloud/components/home.vue +++ b/app/assets/javascripts/google_cloud/components/home.vue @@ -23,11 +23,11 @@ export default { type: String, required: true, }, - deploymentsCloudRunUrl: { + enableCloudRunUrl: { type: String, required: true, }, - deploymentsCloudStorageUrl: { + enableCloudStorageUrl: { type: String, required: true, }, @@ -47,8 +47,8 @@ export default { </gl-tab> <gl-tab :title="__('Deployments')"> <deployments-service-table - :cloud-run-url="deploymentsCloudRunUrl" - :cloud-storage-url="deploymentsCloudStorageUrl" + :cloud-run-url="enableCloudRunUrl" + :cloud-storage-url="enableCloudStorageUrl" /> </gl-tab> <gl-tab :title="__('Services')" disabled /> 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 e7a09668473..551783e6c50 100644 --- a/app/assets/javascripts/google_cloud/components/service_accounts_form.vue +++ b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue @@ -1,9 +1,9 @@ <script> -import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { GlButton, GlFormGroup, GlFormSelect, GlFormCheckbox } from '@gitlab/ui'; import { __ } from '~/locale'; export default { - components: { GlButton, GlFormGroup, GlFormSelect }, + components: { GlButton, GlFormGroup, GlFormSelect, GlFormCheckbox }, props: { gcpProjects: { required: true, type: Array }, environments: { required: true, type: Array }, @@ -19,6 +19,9 @@ export default { 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', + ), }, }; </script> @@ -59,6 +62,11 @@ export default { </option> </gl-form-select> </gl-form-group> + <gl-form-group> + <gl-form-checkbox name="confirmation" required> + {{ $options.i18n.checkboxLabel }} + </gl-form-checkbox> + </gl-form-group> <div class="form-actions row"> <gl-button type="submit" category="primary" variant="confirm"> 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> |