diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-22 18:14:10 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-22 18:14:10 +0300 |
commit | 60d2a60617c9251049fbd5708465d01d25179a98 (patch) | |
tree | d95e0dc1c2f29c9958cb80c0d3907f889f6ee6fd /app/assets/javascripts/security_configuration | |
parent | 96891fec6dfa20a8342a3daa25935213cfddae22 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/security_configuration')
4 files changed, 106 insertions, 30 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 509377a63e8..c574412096a 100644 --- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue +++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue @@ -1,6 +1,7 @@ <script> import { GlCard, GlToggle, GlLink, GlSkeletonLoader } from '@gitlab/ui'; import securityTrainingProvidersQuery from '../graphql/security_training_providers.query.graphql'; +import configureSecurityTrainingProvidersMutation from '../graphql/configure_security_training_providers.mutation.graphql'; export default { components: { @@ -9,6 +10,7 @@ export default { GlLink, GlSkeletonLoader, }, + inject: ['projectPath'], apollo: { securityTrainingProviders: { query: securityTrainingProvidersQuery, @@ -16,6 +18,7 @@ export default { }, data() { return { + toggleLoading: false, securityTrainingProviders: [], }; }, @@ -24,6 +27,37 @@ export default { return this.$apollo.queries.securityTrainingProviders.loading; }, }, + methods: { + toggleProvider(selectedProviderId) { + const toggledProviders = this.securityTrainingProviders.map((provider) => ({ + ...provider, + ...(provider.id === selectedProviderId && { isEnabled: !provider.isEnabled }), + })); + + this.storeEnabledProviders(toggledProviders); + }, + storeEnabledProviders(toggledProviders) { + const enabledProviderIds = toggledProviders + .filter(({ isEnabled }) => isEnabled) + .map(({ id }) => id); + + this.toggleLoading = true; + + return this.$apollo + .mutate({ + mutation: configureSecurityTrainingProvidersMutation, + variables: { + input: { + enabledProviders: enabledProviderIds, + fullPath: this.projectPath, + }, + }, + }) + .then(() => { + this.toggleLoading = false; + }); + }, + }, }; </script> @@ -46,7 +80,13 @@ export default { > <gl-card> <div class="gl-display-flex"> - <gl-toggle :value="isEnabled" :label="__('Training mode')" label-position="hidden" /> + <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> 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 new file mode 100644 index 00000000000..df8c7c9e30a --- /dev/null +++ b/app/assets/javascripts/security_configuration/graphql/configure_security_training_providers.mutation.graphql @@ -0,0 +1,8 @@ +mutation configureSecurityTrainingProviders($input: configureSecurityTrainingProvidersInput!) { + configureSecurityTrainingProviders(input: $input) @client { + securityTrainingProviders { + id + isEnabled + } + } +} diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js index c86ff1a58f2..24c0585e077 100644 --- a/app/assets/javascripts/security_configuration/index.js +++ b/app/assets/javascripts/security_configuration/index.js @@ -2,38 +2,10 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils'; -import { __ } from '~/locale'; import SecurityConfigurationApp from './components/app.vue'; import { securityFeatures, complianceFeatures } from './components/constants'; import { augmentFeatures } from './utils'; - -// Note: this is behind a feature flag and only a placeholder -// until the actual GraphQL fields have been added -// https://gitlab.com/gitlab-org/gi tlab/-/issues/346480 -export const tempResolvers = { - Query: { - securityTrainingProviders() { - return [ - { - __typename: 'SecurityTrainingProvider', - id: 101, - name: __('Kontra'), - description: __('Interactive developer security education.'), - url: 'https://application.security/', - isEnabled: false, - }, - { - __typename: 'SecurityTrainingProvider', - id: 102, - name: __('SecureCodeWarrior'), - description: __('Security training with guide and learning pathways.'), - url: 'https://www.securecodewarrior.com/', - isEnabled: true, - }, - ]; - }, - }, -}; +import tempResolvers from './resolver'; export const initSecurityConfiguration = (el) => { if (!el) { diff --git a/app/assets/javascripts/security_configuration/resolver.js b/app/assets/javascripts/security_configuration/resolver.js new file mode 100644 index 00000000000..93175d4a3d1 --- /dev/null +++ b/app/assets/javascripts/security_configuration/resolver.js @@ -0,0 +1,56 @@ +import produce from 'immer'; +import { __ } from '~/locale'; +import securityTrainingProvidersQuery from './graphql/security_training_providers.query.graphql'; + +// Note: this is behind a feature flag and only a placeholder +// until the actual GraphQL fields have been added +// https://gitlab.com/gitlab-org/gi tlab/-/issues/346480 +export default { + Query: { + securityTrainingProviders() { + return [ + { + __typename: 'SecurityTrainingProvider', + id: 101, + name: __('Kontra'), + description: __('Interactive developer security education.'), + url: 'https://application.security/', + isEnabled: false, + }, + { + __typename: 'SecurityTrainingProvider', + id: 102, + name: __('SecureCodeWarrior'), + description: __('Security training with guide and learning pathways.'), + url: 'https://www.securecodewarrior.com/', + isEnabled: true, + }, + ]; + }, + }, + + Mutation: { + configureSecurityTrainingProviders: ( + _, + { input: { enabledProviders, primaryProvider } }, + { cache }, + ) => { + const sourceData = cache.readQuery({ + query: securityTrainingProvidersQuery, + }); + + const data = produce(sourceData.securityTrainingProviders, (draftData) => { + /* eslint-disable no-param-reassign */ + draftData.forEach((provider) => { + provider.isPrimary = provider.id === primaryProvider; + provider.isEnabled = + provider.id === primaryProvider || enabledProviders.includes(provider.id); + }); + }); + return { + __typename: 'configureSecurityTrainingProvidersPayload', + securityTrainingProviders: data, + }; + }, + }, +}; |