Merge branch 'tor/defect/overview-placeholder-message/data-load' into 'master'

Load MR Metadata when the MR Notes (Overview) app starts

See merge request gitlab-org/gitlab!56594

app/assets/javascripts/mr_notes/init_notes.js

@@ -58,6 +58,8 @@ export default () => {
     created() {
       this.setActiveTab(window.mrTabs.getCurrentAction());
       this.setEndpoints(this.endpoints);
+
+      this.fetchMrMetadata();
     },
     mounted() {
       this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge');
@@ -69,7 +71,7 @@ export default () => {
       window.mrTabs.eventHub.$off('MergeRequestTabChange', this.setActiveTab);
     },
     methods: {
-      ...mapActions(['setActiveTab', 'setEndpoints']),
+      ...mapActions(['setActiveTab', 'setEndpoints', 'fetchMrMetadata']),
       updateDiscussionTabCounter() {
         this.notesCountBadge.text(this.discussionTabCounter);
       },

app/assets/javascripts/mr_notes/stores/actions.js

+import axios from '~/lib/utils/axios_utils';
+
 import types from './mutation_types';
 
 export function setActiveTab({ commit }, tab) {
@@ -7,3 +9,24 @@ export function setActiveTab({ commit }, tab) {
 export function setEndpoints({ commit }, endpoints) {
   commit(types.SET_ENDPOINTS, endpoints);
 }
+
+export function setMrMetadata({ commit }, metadata) {
+  commit(types.SET_MR_METADATA, metadata);
+}
+
+export function fetchMrMetadata({ dispatch, state }) {
+  if (state.endpoints?.metadata) {
+    axios
+      .get(state.endpoints.metadata)
+      .then((response) => {
+        dispatch('setMrMetadata', response.data);
+      })
+      .catch(() => {
+        // https://gitlab.com/gitlab-org/gitlab/-/issues/324740
+        // We can't even do a simple console warning here because
+        // the pipeline will fail. However, the issue above will
+        // eventually handle errors appropriately.
+        // console.warn('Failed to load MR Metadata for the Overview tab.');
+      });
+  }
+}

app/assets/javascripts/mr_notes/stores/modules/index.js

@@ -6,6 +6,7 @@ export default () => ({
   state: {
     endpoints: {},
     activeTab: null,
+    mrMetadata: {},
   },
   actions,
   getters,

app/assets/javascripts/mr_notes/stores/mutation_types.js

 export default {
   SET_ACTIVE_TAB: 'SET_ACTIVE_TAB',
   SET_ENDPOINTS: 'SET_ENDPOINTS',
+  SET_MR_METADATA: 'SET_MR_METADATA',
 };

app/assets/javascripts/mr_notes/stores/mutations.js

@@ -7,4 +7,7 @@ export default {
   [types.SET_ENDPOINTS](state, endpoints) {
     Object.assign(state, { endpoints });
   },
+  [types.SET_MR_METADATA](state, metadata) {
+    Object.assign(state, { mrMetadata: metadata });
+  },
 };

spec/frontend/mr_notes/stores/actions_spec.js

+import MockAdapter from 'axios-mock-adapter';
+
 import testAction from 'helpers/vuex_action_helper';
-import { setEndpoints } from '~/mr_notes/stores/actions';
+import axios from '~/lib/utils/axios_utils';
+
+import { setEndpoints, setMrMetadata, fetchMrMetadata } from '~/mr_notes/stores/actions';
 import mutationTypes from '~/mr_notes/stores/mutation_types';
 
 describe('MR Notes Mutator Actions', () => {
@@ -22,4 +26,67 @@ describe('MR Notes Mutator Actions', () => {
       );
     });
   });
+
+  describe('setMrMetadata', () => {
+    it('should trigger the SET_MR_METADATA state mutation', async () => {
+      const mrMetadata = { propA: 'a', propB: 'b' };
+
+      await testAction(
+        setMrMetadata,
+        mrMetadata,
+        {},
+        [
+          {
+            type: mutationTypes.SET_MR_METADATA,
+            payload: mrMetadata,
+          },
+        ],
+        [],
+      );
+    });
+  });
+
+  describe('fetchMrMetadata', () => {
+    const mrMetadata = { meta: true, data: 'foo' };
+    const state = {
+      endpoints: {
+        metadata: 'metadata',
+      },
+    };
+    let mock;
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      mock.onGet(state.endpoints.metadata).reply(200, mrMetadata);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('should fetch the data from the API', async () => {
+      await fetchMrMetadata({ state, dispatch: () => {} });
+
+      await axios.waitForAll();
+
+      expect(mock.history.get).toHaveLength(1);
+      expect(mock.history.get[0].url).toBe(state.endpoints.metadata);
+    });
+
+    it('should set the fetched data into state', () => {
+      return testAction(
+        fetchMrMetadata,
+        {},
+        state,
+        [],
+        [
+          {
+            type: 'setMrMetadata',
+            payload: mrMetadata,
+          },
+        ],
+      );
+    });
+  });
 });

spec/frontend/mr_notes/stores/mutations_spec.js

@@ -12,4 +12,16 @@ describe('MR Notes Mutations', () => {
       expect(state.endpoints).toEqual(endpoints);
     });
   });
+
+  describe(mutationTypes.SET_MR_METADATA, () => {
+    it('store the provided MR Metadata in the state', () => {
+      const state = {};
+      const metadata = { propA: 'A', propB: 'B' };
+
+      mutations[mutationTypes.SET_MR_METADATA](state, metadata);
+
+      expect(state.mrMetadata.propA).toBe('A');
+      expect(state.mrMetadata.propB).toBe('B');
+    });
+  });
 });