diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
commit | aee0a117a889461ce8ced6fcf73207fe017f1d99 (patch) | |
tree | 891d9ef189227a8445d83f35c1b0fc99573f4380 /app/assets/javascripts/google_cloud | |
parent | 8d46af3258650d305f53b819eabf7ab18d22f59e (diff) |
Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/google_cloud')
-rw-r--r-- | app/assets/javascripts/google_cloud/components/app.vue | 55 | ||||
-rw-r--r-- | app/assets/javascripts/google_cloud/components/errors/gcp_error.vue | 29 | ||||
-rw-r--r-- | app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue | 26 | ||||
-rw-r--r-- | app/assets/javascripts/google_cloud/components/home.vue | 41 | ||||
-rw-r--r-- | app/assets/javascripts/google_cloud/components/service_accounts_form.vue | 70 | ||||
-rw-r--r-- | app/assets/javascripts/google_cloud/components/service_accounts_list.vue (renamed from app/assets/javascripts/google_cloud/components/service_accounts.vue) | 0 | ||||
-rw-r--r-- | app/assets/javascripts/google_cloud/index.js | 13 |
7 files changed, 205 insertions, 29 deletions
diff --git a/app/assets/javascripts/google_cloud/components/app.vue b/app/assets/javascripts/google_cloud/components/app.vue index 1e5be9df019..64784755b66 100644 --- a/app/assets/javascripts/google_cloud/components/app.vue +++ b/app/assets/javascripts/google_cloud/components/app.vue @@ -1,22 +1,42 @@ <script> -import { GlTab, GlTabs } from '@gitlab/ui'; +import { __ } from '~/locale'; + +import Home from './home.vue'; import IncubationBanner from './incubation_banner.vue'; -import ServiceAccounts from './service_accounts.vue'; +import ServiceAccountsForm from './service_accounts_form.vue'; +import NoGcpProjects from './errors/no_gcp_projects.vue'; +import GcpError from './errors/gcp_error.vue'; + +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'; export default { - components: { GlTab, GlTabs, IncubationBanner, ServiceAccounts }, + components: { + IncubationBanner, + }, + inheritAttrs: false, props: { - serviceAccounts: { - type: Array, + screen: { required: true, - }, - createServiceAccountUrl: { type: String, - required: true, }, - emptyIllustrationUrl: { - type: String, - required: true, + }, + computed: { + mainComponent() { + switch (this.screen) { + case SCREEN_HOME: + return Home; + case SCREEN_GCP_ERROR: + return GcpError; + case SCREEN_NO_GCP_PROJECTS: + return NoGcpProjects; + case SCREEN_SERVICE_ACCOUNTS_FORM: + return ServiceAccountsForm; + default: + throw new Error(__('Unknown screen')); + } }, }, methods: { @@ -34,17 +54,6 @@ export default { :report-bug-url="feedbackUrl('report_bug')" :feature-request-url="feedbackUrl('feature_request')" /> - <gl-tabs> - <gl-tab :title="__('Configuration')"> - <service-accounts - class="gl-mx-3" - :list="serviceAccounts" - :create-url="createServiceAccountUrl" - :empty-illustration-url="emptyIllustrationUrl" - /> - </gl-tab> - <gl-tab :title="__('Deployments')" disabled /> - <gl-tab :title="__('Services')" disabled /> - </gl-tabs> + <component :is="mainComponent" v-bind="$attrs" /> </div> </template> diff --git a/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue b/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue new file mode 100644 index 00000000000..90aa0e1ae68 --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/errors/gcp_error.vue @@ -0,0 +1,29 @@ +<script> +import { GlAlert } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { GlAlert }, + props: { + error: { + type: String, + required: true, + }, + }, + i18n: { + title: __('Google Cloud project misconfigured'), + description: __( + 'GitLab and Google Cloud configuration seems to be incomplete. This probably can be fixed by your GitLab administration team. You may share these logs with them:', + ), + }, +}; +</script> + +<template> + <gl-alert :dismissible="false" variant="warning" :title="$options.i18n.title"> + {{ $options.i18n.description }} + <blockquote> + <code>{{ error }}</code> + </blockquote> + </gl-alert> +</template> diff --git a/app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue b/app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue new file mode 100644 index 00000000000..da229ac3f0e --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/errors/no_gcp_projects.vue @@ -0,0 +1,26 @@ +<script> +import { GlAlert, GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { GlAlert, GlButton }, + i18n: { + title: __('Google Cloud project required'), + description: __( + 'You do not have any Google Cloud projects. Please create a Google Cloud project and then reload this page.', + ), + createLabel: __('Create Google Cloud project'), + }, +}; +</script> + +<template> + <gl-alert :dismissible="false" variant="warning" :title="$options.i18n.title"> + {{ $options.i18n.description }} + <template #actions> + <gl-button href="https://console.cloud.google.com/projectcreate" target="_blank"> + {{ $options.i18n.createLabel }} + </gl-button> + </template> + </gl-alert> +</template> diff --git a/app/assets/javascripts/google_cloud/components/home.vue b/app/assets/javascripts/google_cloud/components/home.vue new file mode 100644 index 00000000000..05f39de66ee --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/home.vue @@ -0,0 +1,41 @@ +<script> +import { GlTabs, GlTab } from '@gitlab/ui'; +import ServiceAccountsList from './service_accounts_list.vue'; + +export default { + components: { + GlTabs, + GlTab, + ServiceAccountsList, + }, + props: { + serviceAccounts: { + type: Array, + required: true, + }, + createServiceAccountUrl: { + type: String, + required: true, + }, + emptyIllustrationUrl: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <gl-tabs> + <gl-tab :title="__('Configuration')"> + <service-accounts-list + class="gl-mx-4" + :list="serviceAccounts" + :create-url="createServiceAccountUrl" + :empty-illustration-url="emptyIllustrationUrl" + /> + </gl-tab> + <gl-tab :title="__('Deployments')" disabled /> + <gl-tab :title="__('Services')" disabled /> + </gl-tabs> +</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 new file mode 100644 index 00000000000..e7a09668473 --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/service_accounts_form.vue @@ -0,0 +1,70 @@ +<script> +import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { GlButton, GlFormGroup, GlFormSelect }, + props: { + gcpProjects: { required: true, type: Array }, + environments: { 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', + ), + environmentLabel: __('Environment'), + environmentDescription: __('Generated service account is linked to the selected environment'), + submitLabel: __('Create service account'), + cancelLabel: __('Cancel'), + }, +}; +</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="environment" + :label="$options.i18n.environmentLabel" + :description="$options.i18n.environmentDescription" + > + <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 }} + </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/service_accounts.vue b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue index b70b25a5dc3..b70b25a5dc3 100644 --- a/app/assets/javascripts/google_cloud/components/service_accounts.vue +++ b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue diff --git a/app/assets/javascripts/google_cloud/index.js b/app/assets/javascripts/google_cloud/index.js index a156a632e9a..ab9e8227812 100644 --- a/app/assets/javascripts/google_cloud/index.js +++ b/app/assets/javascripts/google_cloud/index.js @@ -1,11 +1,12 @@ import Vue from 'vue'; import App from './components/app.vue'; -const elementRenderer = (element, props = {}) => (createElement) => - createElement(element, { props }); - export default () => { - const root = document.querySelector('#js-google-cloud'); - const props = JSON.parse(root.getAttribute('data')); - return new Vue({ el: root, render: elementRenderer(App, props) }); + const root = '#js-google-cloud'; + const element = document.querySelector(root); + const { screen, ...attrs } = JSON.parse(element.getAttribute('data')); + return new Vue({ + el: element, + render: (createElement) => createElement(App, { props: { screen }, attrs }), + }); }; |