Fix erroneous all warning from race condition

If you edited the text while the initial message was loading
it was possible to get in a state where the warning was shown
when it should have been removed

This adds another sentinel value to mark if we delete the reference
to all users while it is loading the preview. If we had, then we
clear the user count after fetching the markdown

Changelog: fixed

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -118,6 +118,7 @@ export default {
       markdownPreviewLoading: false,
       previewMarkdown: false,
       suggestions: this.note.suggestions || [],
+      debouncedFetchMarkdownLoading: false,
     };
   },
   computed: {
@@ -203,8 +204,10 @@ export default {
         const justRemovedAll = hadAll && !hasAll;
 
         if (justAddedAll) {
+          this.debouncedFetchMarkdownLoading = false;
           this.debouncedFetchMarkdown();
         } else if (justRemovedAll) {
+          this.debouncedFetchMarkdownLoading = true;
           this.referencedUsers = [];
         }
       },
@@ -284,7 +287,12 @@ export default {
     },
 
     debouncedFetchMarkdown: debounce(function debouncedFetchMarkdown() {
-      return this.fetchMarkdown();
+      return this.fetchMarkdown().then(() => {
+        if (this.debouncedFetchMarkdownLoading) {
+          this.referencedUsers = [];
+          this.debouncedFetchMarkdownLoading = false;
+        }
+      });
     }, 400),
 
     renderMarkdown(data = {}) {

spec/frontend/vue_shared/components/markdown/field_spec.js

@@ -268,6 +268,24 @@ describe('Markdown field component', () => {
             'You are about to add 11 people to the discussion. They will all receive a notification.',
           );
         });
+
+        it('removes warning when all mention is removed while endpoint is loading', async () => {
+          axiosMock.onPost(markdownPreviewPath).reply(200, { references: { users } });
+          jest.spyOn(axios, 'post');
+
+          subject.setProps({ textareaValue: 'hello @all' });
+
+          await nextTick();
+
+          subject.setProps({ textareaValue: 'hello @allan' });
+
+          await axios.waitFor(markdownPreviewPath);
+
+          expect(axios.post).toHaveBeenCalled();
+          expect(subject.text()).not.toContain(
+            'You are about to add 11 people to the discussion. They will all receive a notification.',
+          );
+        });
       });
     });
   });