diff options
Diffstat (limited to 'app/assets/javascripts/google_cloud/service_accounts/form.vue')
-rw-r--r-- | app/assets/javascripts/google_cloud/service_accounts/form.vue | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/app/assets/javascripts/google_cloud/service_accounts/form.vue b/app/assets/javascripts/google_cloud/service_accounts/form.vue new file mode 100644 index 00000000000..faec94e735b --- /dev/null +++ b/app/assets/javascripts/google_cloud/service_accounts/form.vue @@ -0,0 +1,77 @@ +<script> +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 }, + refs: { required: true, type: Array }, + cancelPath: { required: true, type: String }, + }, + i18n: { + 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', + ), + 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', + ), + }, +}; +</script> + +<template> + <div> + <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"> + <h2 class="gl-font-size-h1">{{ $options.i18n.title }}</h2> + </header> + <gl-form-group + label-for="gcp_project" + :label="$options.i18n.gcpProjectLabel" + :description="$options.i18n.gcpProjectDescription" + > + <gl-form-select id="gcp_project" name="gcp_project" required> + <option + v-for="gcpProject in gcpProjects" + :key="gcpProject.project_id" + :value="gcpProject.project_id" + > + {{ gcpProject.name }} + </option> + </gl-form-select> + </gl-form-group> + <gl-form-group + label-for="ref" + :label="$options.i18n.refsLabel" + :description="$options.i18n.refsDescription" + > + <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> + <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"> + {{ $options.i18n.submitLabel }} + </gl-button> + <gl-button class="gl-ml-1" :href="cancelPath">{{ $options.i18n.cancelLabel }}</gl-button> + </div> + </div> +</template> |