diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-10 15:15:34 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-10 15:15:34 +0300 |
commit | d85be261b2898166676be4f329a548f61e2917f4 (patch) | |
tree | 393faefd792483f15860dd184b524ac597295ae1 /app/assets/javascripts/security_configuration | |
parent | 75330c963b9e949443b1e4ab2e5770879d395158 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/security_configuration')
2 files changed, 76 insertions, 43 deletions
diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue index c574412096a..ca4596e16b3 100644 --- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue +++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue @@ -1,10 +1,21 @@ <script> -import { GlCard, GlToggle, GlLink, GlSkeletonLoader } from '@gitlab/ui'; +import { GlAlert, GlCard, GlToggle, GlLink, GlSkeletonLoader } from '@gitlab/ui'; +import { __ } from '~/locale'; import securityTrainingProvidersQuery from '../graphql/security_training_providers.query.graphql'; import configureSecurityTrainingProvidersMutation from '../graphql/configure_security_training_providers.mutation.graphql'; +const i18n = { + providerQueryErrorMessage: __( + 'Could not fetch training providers. Please refresh the page, or try again later.', + ), + configMutationErrorMessage: __( + 'Could not save configuration. Please refresh the page, or try again later.', + ), +}; + export default { components: { + GlAlert, GlCard, GlToggle, GlLink, @@ -14,10 +25,14 @@ export default { apollo: { securityTrainingProviders: { query: securityTrainingProvidersQuery, + error() { + this.errorMessage = this.$options.i18n.providerQueryErrorMessage; + }, }, }, data() { return { + errorMessage: '', toggleLoading: false, securityTrainingProviders: [], }; @@ -34,17 +49,21 @@ export default { ...(provider.id === selectedProviderId && { isEnabled: !provider.isEnabled }), })); - this.storeEnabledProviders(toggledProviders); - }, - storeEnabledProviders(toggledProviders) { const enabledProviderIds = toggledProviders .filter(({ isEnabled }) => isEnabled) .map(({ id }) => id); + this.storeEnabledProviders(toggledProviders, enabledProviderIds); + }, + async storeEnabledProviders(toggledProviders, enabledProviderIds) { this.toggleLoading = true; - return this.$apollo - .mutate({ + try { + const { + data: { + configureSecurityTrainingProviders: { errors = [] }, + }, + } = await this.$apollo.mutate({ mutation: configureSecurityTrainingProvidersMutation, variables: { input: { @@ -52,50 +71,63 @@ export default { fullPath: this.projectPath, }, }, - }) - .then(() => { - this.toggleLoading = false; }); + + if (errors.length > 0) { + // throwing an error here means we can handle scenarios within the `catch` block below + throw new Error(); + } + } catch { + this.errorMessage = this.$options.i18n.configMutationErrorMessage; + } finally { + this.toggleLoading = false; + } }, }, + i18n, }; </script> <template> - <div - v-if="isLoading" - class="gl-bg-white gl-py-6 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100" - > - <gl-skeleton-loader :width="350" :height="44"> - <rect width="200" height="8" x="10" y="0" rx="4" /> - <rect width="300" height="8" x="10" y="15" rx="4" /> - <rect width="100" height="8" x="10" y="35" rx="4" /> - </gl-skeleton-loader> - </div> - <ul v-else class="gl-list-style-none gl-m-0 gl-p-0"> - <li - v-for="{ id, isEnabled, name, description, url } in securityTrainingProviders" - :key="id" - class="gl-mb-6" + <div> + <gl-alert v-if="errorMessage" variant="danger" :dismissible="false" class="gl-mb-6"> + {{ errorMessage }} + </gl-alert> + <div + v-if="isLoading" + class="gl-bg-white gl-py-6 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100" > - <gl-card> - <div class="gl-display-flex"> - <gl-toggle - :value="isEnabled" - :label="__('Training mode')" - label-position="hidden" - :is-loading="toggleLoading" - @change="toggleProvider(id)" - /> - <div class="gl-ml-5"> - <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ name }}</h3> - <p> - {{ description }} - <gl-link :href="url" target="_blank">{{ __('Learn more.') }}</gl-link> - </p> + <gl-skeleton-loader :width="350" :height="44"> + <rect width="200" height="8" x="10" y="0" rx="4" /> + <rect width="300" height="8" x="10" y="15" rx="4" /> + <rect width="100" height="8" x="10" y="35" rx="4" /> + </gl-skeleton-loader> + </div> + <ul v-else class="gl-list-style-none gl-m-0 gl-p-0"> + <li + v-for="{ id, isEnabled, name, description, url } in securityTrainingProviders" + :key="id" + class="gl-mb-6" + > + <gl-card> + <div class="gl-display-flex"> + <gl-toggle + :value="isEnabled" + :label="__('Training mode')" + label-position="hidden" + :is-loading="toggleLoading" + @change="toggleProvider(id)" + /> + <div class="gl-ml-5"> + <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ name }}</h3> + <p> + {{ description }} + <gl-link :href="url" target="_blank">{{ __('Learn more.') }}</gl-link> + </p> + </div> </div> - </div> - </gl-card> - </li> - </ul> + </gl-card> + </li> + </ul> + </div> </template> diff --git a/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql b/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql index df8c7c9e30a..660e0fadafb 100644 --- a/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql +++ b/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql @@ -1,5 +1,6 @@ mutation configureSecurityTrainingProviders($input: configureSecurityTrainingProvidersInput!) { configureSecurityTrainingProviders(input: $input) @client { + errors securityTrainingProviders { id isEnabled |