Add latest changes from gitlab-org/gitlab@master

2 files changed, 19 insertions, 6 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 dd470562f2d..ff7d14ed95a 100644
--- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue
+++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
@@ -10,6 +10,7 @@ import {
   TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL,
 } from '~/security_configuration/constants';
 import dismissUserCalloutMutation from '~/graphql_shared/mutations/dismiss_user_callout.mutation.graphql';
+import { updateSecurityTrainingOptimisticResponse } from '~/security_configuration/graphql/utils/optimistic_response';
 import securityTrainingProvidersQuery from '../graphql/security_training_providers.query.graphql';
 import configureSecurityTrainingProvidersMutation from '../graphql/configure_security_training_providers.mutation.graphql';
 
@@ -51,7 +52,6 @@ export default {
   data() {
     return {
       errorMessage: '',
-      providerLoadingId: null,
       securityTrainingProviders: [],
       hasTouchedConfiguration: false,
     };
@@ -99,8 +99,6 @@ export default {
       this.storeProvider({ ...provider, isEnabled: toggledIsEnabled });
     },
     async storeProvider({ id, isEnabled, isPrimary }) {
-      this.providerLoadingId = id;
-
       try {
         const {
           data: {
@@ -116,6 +114,11 @@ export default {
               isPrimary,
             },
           },
+          optimisticResponse: updateSecurityTrainingOptimisticResponse({
+            id,
+            isEnabled,
+            isPrimary,
+          }),
         });
 
         if (errors.length > 0) {
@@ -126,8 +129,6 @@ export default {
         this.hasTouchedConfiguration = true;
       } catch {
         this.errorMessage = this.$options.i18n.configMutationErrorMessage;
-      } finally {
-        this.providerLoadingId = null;
       }
     },
     trackProviderToggle(providerId, providerIsEnabled) {
@@ -173,7 +174,6 @@ export default {
               :value="provider.isEnabled"
               :label="__('Training mode')"
               label-position="hidden"
-              :is-loading="providerLoadingId === provider.id"
               @change="toggleProvider(provider)"
             />
             <div class="gl-ml-5">
diff --git a/app/assets/javascripts/security_configuration/graphql/utils/optimistic_response.js b/app/assets/javascripts/security_configuration/graphql/utils/optimistic_response.js
new file mode 100644
index 00000000000..8d1082d081a
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/graphql/utils/optimistic_response.js
@@ -0,0 +1,13 @@
+export const updateSecurityTrainingOptimisticResponse = (changes) => ({
+  // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  __typename: 'Mutation',
+  securityTrainingUpdate: {
+    __typename: 'SecurityTrainingUpdatePayload',
+    training: {
+      __typename: 'ProjectSecurityTraining',
+      ...changes,
+    },
+    errors: [],
+  },
+});