diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 23:02:30 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 23:02:30 +0300 |
commit | 41fe97390ceddf945f3d967b8fdb3de4c66b7dea (patch) | |
tree | 9c8d89a8624828992f06d892cd2f43818ff5dcc8 /app/assets/javascripts/google_cloud/components | |
parent | 0804d2dc31052fb45a1efecedc8e06ce9bc32862 (diff) |
Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42
Diffstat (limited to 'app/assets/javascripts/google_cloud/components')
7 files changed, 215 insertions, 35 deletions
diff --git a/app/assets/javascripts/google_cloud/components/app.vue b/app/assets/javascripts/google_cloud/components/app.vue index 64784755b66..03b256297f6 100644 --- a/app/assets/javascripts/google_cloud/components/app.vue +++ b/app/assets/javascripts/google_cloud/components/app.vue @@ -4,6 +4,7 @@ import { __ } from '~/locale'; import Home from './home.vue'; import IncubationBanner from './incubation_banner.vue'; import ServiceAccountsForm from './service_accounts_form.vue'; +import GcpRegionsForm from './gcp_regions_form.vue'; import NoGcpProjects from './errors/no_gcp_projects.vue'; import GcpError from './errors/gcp_error.vue'; @@ -11,6 +12,7 @@ const SCREEN_GCP_ERROR = 'gcp_error'; const SCREEN_HOME = 'home'; const SCREEN_NO_GCP_PROJECTS = 'no_gcp_projects'; const SCREEN_SERVICE_ACCOUNTS_FORM = 'service_accounts_form'; +const SCREEN_GCP_REGIONS_FORM = 'gcp_regions_form'; export default { components: { @@ -34,6 +36,8 @@ export default { return NoGcpProjects; case SCREEN_SERVICE_ACCOUNTS_FORM: return ServiceAccountsForm; + case SCREEN_GCP_REGIONS_FORM: + return GcpRegionsForm; default: throw new Error(__('Unknown screen')); } diff --git a/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue b/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue new file mode 100644 index 00000000000..23011e5a5b0 --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/gcp_regions_form.vue @@ -0,0 +1,62 @@ +<script> +import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; + +export default { + components: { GlButton, GlFormGroup, GlFormSelect }, + props: { + availableRegions: { required: true, type: Array }, + refs: { required: true, type: Array }, + cancelPath: { required: true, type: String }, + }, + i18n: { + title: __('Configure region for environment'), + gcpRegionLabel: __('Region'), + gcpRegionDescription: __('List of suitable GCP locations'), + refsLabel: s__('GoogleCloud|Refs'), + refsDescription: s__('GoogleCloud|Configured region is linked to the selected branch or tag'), + submitLabel: __('Configure region'), + cancelLabel: __('Cancel'), + }, +}; +</script> + +<template> + <div> + <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"> + <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1> + </header> + + <gl-form-group + label-for="ref" + :label="$options.i18n.refsLabel" + :description="$options.i18n.refsDescription" + > + <gl-form-select id="ref" name="ref" required> + <option value="*">{{ __('All') }}</option> + <option v-for="ref in refs" :key="ref" :value="ref"> + {{ ref }} + </option> + </gl-form-select> + </gl-form-group> + + <gl-form-group + label-for="gcp_region" + :label="$options.i18n.gcpRegionLabel" + :description="$options.i18n.gcpRegionDescription" + > + <gl-form-select id="gcp_region" name="gcp_region" required :list="availableRegions"> + <option v-for="(region, index) in availableRegions" :key="index" :value="region"> + {{ region }} + </option> + </gl-form-select> + </gl-form-group> + + <div class="form-actions row"> + <gl-button type="submit" category="primary" variant="confirm"> + {{ $options.i18n.submitLabel }} + </gl-button> + <gl-button class="gl-ml-1" :href="cancelPath">{{ $options.i18n.cancelLabel }}</gl-button> + </div> + </div> +</template> diff --git a/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue b/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue new file mode 100644 index 00000000000..1cc5a85198a --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue @@ -0,0 +1,56 @@ +<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, + }, + }, + tableFields: [ + { key: 'environment', label: __('Environment'), sortable: true }, + { key: 'gcp_region', label: __('Region'), sortable: true }, + ], + i18n: { + emptyStateTitle: __('No regions configured'), + description: __('Configure your environments to be deployed to specific geographical regions'), + emptyStateAction: __('Add a GCP region'), + configureRegions: __('Configure regions'), + listTitle: __('Regions'), + }, +}; +</script> + +<template> + <div> + <gl-empty-state + v-if="list.length === 0" + :title="$options.i18n.emptyStateTitle" + :description="$options.i18n.description" + :primary-button-link="createUrl" + :primary-button-text="$options.i18n.configureRegions" + /> + + <div v-else> + <h2 class="gl-font-size-h2">{{ $options.i18n.listTitle }}</h2> + <p>{{ $options.i18n.description }}</p> + + <gl-table :items="list" :fields="$options.tableFields" /> + + <gl-button :href="createUrl" category="primary" variant="info"> + {{ $options.i18n.configureRegions }} + </gl-button> + </div> + </div> +</template> diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue index c08d8bb7c51..e41337e2679 100644 --- a/app/assets/javascripts/google_cloud/components/home.vue +++ b/app/assets/javascripts/google_cloud/components/home.vue @@ -1,14 +1,18 @@ <script> import { GlTabs, GlTab } from '@gitlab/ui'; import DeploymentsServiceTable from './deployments_service_table.vue'; +import RevokeOauth from './revoke_oauth.vue'; import ServiceAccountsList from './service_accounts_list.vue'; +import GcpRegionsList from './gcp_regions_list.vue'; export default { components: { GlTabs, GlTab, DeploymentsServiceTable, + RevokeOauth, ServiceAccountsList, + GcpRegionsList, }, props: { serviceAccounts: { @@ -19,6 +23,10 @@ export default { type: String, required: true, }, + configureGcpRegionsUrl: { + type: String, + required: true, + }, emptyIllustrationUrl: { type: String, required: true, @@ -31,6 +39,14 @@ export default { type: String, required: true, }, + gcpRegions: { + type: Array, + required: true, + }, + revokeOauthUrl: { + type: String, + required: true, + }, }, }; </script> @@ -44,6 +60,15 @@ export default { :create-url="createServiceAccountUrl" :empty-illustration-url="emptyIllustrationUrl" /> + <hr /> + <gcp-regions-list + class="gl-mx-4" + :empty-illustration-url="emptyIllustrationUrl" + :create-url="configureGcpRegionsUrl" + :list="gcpRegions" + /> + <hr v-if="revokeOauthUrl" /> + <revoke-oauth v-if="revokeOauthUrl" :url="revokeOauthUrl" /> </gl-tab> <gl-tab :title="__('Deployments')"> <deployments-service-table diff --git a/app/assets/javascripts/google_cloud/components/revoke_oauth.vue b/app/assets/javascripts/google_cloud/components/revoke_oauth.vue new file mode 100644 index 00000000000..07d966894f6 --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/revoke_oauth.vue @@ -0,0 +1,38 @@ +<script> +import { GlButton, GlForm } from '@gitlab/ui'; +import csrf from '~/lib/utils/csrf'; +import { s__ } from '~/locale'; + +export const GOOGLE_CLOUD_REVOKE_TITLE = s__('GoogleCloud|Revoke authorizations'); +export const GOOGLE_CLOUD_REVOKE_DESCRIPTION = s__( + 'GoogleCloud|Revoke authorizations granted to GitLab. This does not invalidate service accounts.', +); + +export default { + components: { GlButton, GlForm }, + csrf, + props: { + url: { + type: String, + required: true, + }, + }, + i18n: { + title: GOOGLE_CLOUD_REVOKE_TITLE, + description: GOOGLE_CLOUD_REVOKE_DESCRIPTION, + }, +}; +</script> + +<template> + <div class="gl-mx-4"> + <h2 class="gl-font-size-h2">{{ $options.i18n.title }}</h2> + <p>{{ $options.i18n.description }}</p> + <gl-form :action="url" method="post"> + <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> + <gl-button category="secondary" variant="warning" type="submit"> + {{ $options.i18n.title }} + </gl-button> + </gl-form> + </div> +</template> 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 551783e6c50..faec94e735b 100644 --- a/app/assets/javascripts/google_cloud/components/service_accounts_form.vue +++ b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue @@ -1,26 +1,29 @@ <script> -import { GlButton, GlFormGroup, GlFormSelect, GlFormCheckbox } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { GlButton, GlFormCheckbox, GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { s__ } from '~/locale'; export default { + ALL_REFS: '*', components: { GlButton, GlFormGroup, GlFormSelect, GlFormCheckbox }, props: { gcpProjects: { required: true, type: Array }, - environments: { required: true, type: Array }, + refs: { required: true, type: Array }, cancelPath: { required: true, type: String }, }, i18n: { - title: __('Create service account'), - gcpProjectLabel: __('Google Cloud project'), - gcpProjectDescription: __( - 'New service account is generated for the selected Google Cloud project', + title: s__('GoogleCloud|Create service account'), + gcpProjectLabel: s__('GoogleCloud|Google Cloud project'), + gcpProjectDescription: s__( + 'GoogleCloud|New service account is generated for the selected Google Cloud project', ), - environmentLabel: __('Environment'), - 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', + refsLabel: s__('GoogleCloud|Refs'), + refsDescription: s__( + 'GoogleCloud|Generated service account is linked to the selected branch or tag', + ), + submitLabel: s__('GoogleCloud|Create service account'), + cancelLabel: s__('GoogleCloud|Cancel'), + checkboxLabel: s__( + 'GoogleCloud|I understand the responsibilities involved with managing service account keys', ), }, }; @@ -47,18 +50,14 @@ export default { </gl-form-select> </gl-form-group> <gl-form-group - label-for="environment" - :label="$options.i18n.environmentLabel" - :description="$options.i18n.environmentDescription" + label-for="ref" + :label="$options.i18n.refsLabel" + :description="$options.i18n.refsDescription" > - <gl-form-select id="environment" name="environment" required> - <option value="*">{{ __('All') }}</option> - <option - v-for="environment in environments" - :key="environment.name" - :value="environment.name" - > - {{ environment.name }} + <gl-form-select id="ref" name="ref" required> + <option :value="$options.ALL_REFS">{{ __('All') }}</option> + <option v-for="ref in refs" :key="ref" :value="ref"> + {{ ref }} </option> </gl-form-select> </gl-form-group> 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 4db84746482..37b716d7be5 100644 --- a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue +++ b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue @@ -18,16 +18,12 @@ export default { 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 }, - ], - }; - }, + tableFields: [ + { key: 'ref', 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 }, + ], i18n: { createServiceAccount: __('Create service account'), found: __('✔'), @@ -62,7 +58,7 @@ export default { <h2 class="gl-font-size-h2">{{ $options.i18n.serviceAccountsTitle }}</h2> <p>{{ $options.i18n.serviceAccountsDescription }}</p> - <gl-table :items="list" :fields="tableFields"> + <gl-table :items="list" :fields="$options.tableFields"> <template #cell(service_account_exists)="{ value }"> {{ value ? $options.i18n.found : $options.i18n.notFound }} </template> |