Fixes award emoji not working with relative root URL

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/332010

app/assets/javascripts/emoji/awards_app/store/actions.js

 import * as Sentry from '@sentry/browser';
 import axios from '~/lib/utils/axios_utils';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
+import { joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import showToast from '~/vue_shared/plugins/global_toast';
 import {
@@ -16,7 +17,9 @@ export const fetchAwards = async ({ commit, dispatch, state }, page = '1') => {
   if (!window.gon?.current_user_id) return;
 
   try {
-    const { data, headers } = await axios.get(state.path, { params: { per_page: 100, page } });
+    const { data, headers } = await axios.get(joinPaths(gon.relative_url_root || '', state.path), {
+      params: { per_page: 100, page },
+    });
     const normalizedHeaders = normalizeHeaders(headers);
     const nextPage = normalizedHeaders['X-NEXT-PAGE'];
 
@@ -35,13 +38,15 @@ export const toggleAward = async ({ commit, state }, name) => {
 
   try {
     if (award) {
-      await axios.delete(`${state.path}/${award.id}`);
+      await axios.delete(joinPaths(gon.relative_url_root || '', `${state.path}/${award.id}`));
 
       commit(REMOVE_AWARD, award.id);
 
       showToast(__('Award removed'));
     } else {
-      const { data } = await axios.post(state.path, { name });
+      const { data } = await axios.post(joinPaths(gon.relative_url_root || '', state.path), {
+        name,
+      });
 
       commit(ADD_NEW_AWARD, data);
 

spec/frontend/emoji/awards_app/store/actions_spec.js

@@ -35,27 +35,36 @@ describe('Awards app actions', () => {
     });
 
     describe('success', () => {
-      beforeEach(() => {
-        mock
-          .onGet('/awards', { params: { per_page: 100, page: '1' } })
-          .reply(200, ['thumbsup'], { 'x-next-page': '2' });
-        mock.onGet('/awards', { params: { per_page: 100, page: '2' } }).reply(200, ['thumbsdown']);
-      });
+      describe.each`
+        relativeRootUrl
+        ${null}
+        ${'/gitlab'}
+      `('with relative_root_url as $relativeRootUrl', ({ relativeRootUrl }) => {
+        beforeEach(() => {
+          window.gon = { relative_url_root: relativeRootUrl };
+          mock
+            .onGet(`${relativeRootUrl || ''}/awards`, { params: { per_page: 100, page: '1' } })
+            .reply(200, ['thumbsup'], { 'x-next-page': '2' });
+          mock
+            .onGet(`${relativeRootUrl || ''}/awards`, { params: { per_page: 100, page: '2' } })
+            .reply(200, ['thumbsdown']);
+        });
 
-      it('commits FETCH_AWARDS_SUCCESS', async () => {
-        window.gon = { current_user_id: 1 };
+        it('commits FETCH_AWARDS_SUCCESS', async () => {
+          window.gon.current_user_id = 1;
 
-        await testAction(
-          actions.fetchAwards,
-          '1',
-          { path: '/awards' },
-          [{ type: 'FETCH_AWARDS_SUCCESS', payload: ['thumbsup'] }],
-          [{ type: 'fetchAwards', payload: '2' }],
-        );
-      });
+          await testAction(
+            actions.fetchAwards,
+            '1',
+            { path: '/awards' },
+            [{ type: 'FETCH_AWARDS_SUCCESS', payload: ['thumbsup'] }],
+            [{ type: 'fetchAwards', payload: '2' }],
+          );
+        });
 
-      it('does not commit FETCH_AWARDS_SUCCESS when user signed out', async () => {
-        await testAction(actions.fetchAwards, '1', { path: '/awards' }, [], []);
+        it('does not commit FETCH_AWARDS_SUCCESS when user signed out', async () => {
+          await testAction(actions.fetchAwards, '1', { path: '/awards' }, [], []);
+        });
       });
     });
 
@@ -85,81 +94,91 @@ describe('Awards app actions', () => {
       mock.restore();
     });
 
-    describe('adding new award', () => {
-      describe('success', () => {
-        beforeEach(() => {
-          mock.onPost('/awards').reply(200, { id: 1 });
-        });
-
-        it('commits ADD_NEW_AWARD', async () => {
-          testAction(actions.toggleAward, null, { path: '/awards', awards: [] }, [
-            { type: 'ADD_NEW_AWARD', payload: { id: 1 } },
-          ]);
-        });
-      });
-
-      describe('error', () => {
-        beforeEach(() => {
-          mock.onPost('/awards').reply(500);
-        });
-
-        it('calls Sentry.captureException', async () => {
-          await testAction(
-            actions.toggleAward,
-            null,
-            { path: '/awards', awards: [] },
-            [],
-            [],
-            () => {
-              expect(Sentry.captureException).toHaveBeenCalled();
-            },
-          );
-        });
+    describe.each`
+      relativeRootUrl
+      ${null}
+      ${'/gitlab'}
+    `('with relative_root_url as $relativeRootUrl', ({ relativeRootUrl }) => {
+      beforeEach(() => {
+        window.gon = { relative_url_root: relativeRootUrl };
       });
-    });
-
-    describe('removing a award', () => {
-      const mockData = { id: 1, name: 'thumbsup', user: { id: 1 } };
 
-      describe('success', () => {
-        beforeEach(() => {
-          mock.onDelete('/awards/1').reply(200);
+      describe('adding new award', () => {
+        describe('success', () => {
+          beforeEach(() => {
+            mock.onPost(`${relativeRootUrl || ''}/awards`).reply(200, { id: 1 });
+          });
+
+          it('commits ADD_NEW_AWARD', async () => {
+            testAction(actions.toggleAward, null, { path: '/awards', awards: [] }, [
+              { type: 'ADD_NEW_AWARD', payload: { id: 1 } },
+            ]);
+          });
         });
 
-        it('commits REMOVE_AWARD', async () => {
-          testAction(
-            actions.toggleAward,
-            'thumbsup',
-            {
-              path: '/awards',
-              currentUserId: 1,
-              awards: [mockData],
-            },
-            [{ type: 'REMOVE_AWARD', payload: 1 }],
-          );
+        describe('error', () => {
+          beforeEach(() => {
+            mock.onPost(`${relativeRootUrl || ''}/awards`).reply(500);
+          });
+
+          it('calls Sentry.captureException', async () => {
+            await testAction(
+              actions.toggleAward,
+              null,
+              { path: '/awards', awards: [] },
+              [],
+              [],
+              () => {
+                expect(Sentry.captureException).toHaveBeenCalled();
+              },
+            );
+          });
         });
       });
 
-      describe('error', () => {
-        beforeEach(() => {
-          mock.onDelete('/awards/1').reply(500);
+      describe('removing a award', () => {
+        const mockData = { id: 1, name: 'thumbsup', user: { id: 1 } };
+
+        describe('success', () => {
+          beforeEach(() => {
+            mock.onDelete(`${relativeRootUrl || ''}/awards/1`).reply(200);
+          });
+
+          it('commits REMOVE_AWARD', async () => {
+            testAction(
+              actions.toggleAward,
+              'thumbsup',
+              {
+                path: '/awards',
+                currentUserId: 1,
+                awards: [mockData],
+              },
+              [{ type: 'REMOVE_AWARD', payload: 1 }],
+            );
+          });
         });
 
-        it('calls Sentry.captureException', async () => {
-          await testAction(
-            actions.toggleAward,
-            'thumbsup',
-            {
-              path: '/awards',
-              currentUserId: 1,
-              awards: [mockData],
-            },
-            [],
-            [],
-            () => {
-              expect(Sentry.captureException).toHaveBeenCalled();
-            },
-          );
+        describe('error', () => {
+          beforeEach(() => {
+            mock.onDelete(`${relativeRootUrl || ''}/awards/1`).reply(500);
+          });
+
+          it('calls Sentry.captureException', async () => {
+            await testAction(
+              actions.toggleAward,
+              'thumbsup',
+              {
+                path: '/awards',
+                currentUserId: 1,
+                awards: [mockData],
+              },
+              [],
+              [],
+              () => {
+                expect(Sentry.captureException).toHaveBeenCalled();
+              },
+            );
+          });
         });
       });
     });