Move page path functions out of commons file

This change removes functions that read the current page path but
should not be part of common_utils to a separate file where they
are used.

app/assets/javascripts/lib/utils/common_utils.js

@@ -11,31 +11,10 @@ import { isObject } from './type_utility';
 import { getLocationHash } from './url_utility';
 
 export const getPagePath = (index = 0) => {
-  const page = $('body').attr('data-page') || '';
-
+  const { page = '' } = document?.body?.dataset;
   return page.split(':')[index];
 };
 
-export const getDashPath = (path = window.location.pathname) => path.split('/-/')[1] || null;
-
-export const isInGroupsPage = () => getPagePath() === 'groups';
-
-export const isInProjectPage = () => getPagePath() === 'projects';
-
-export const getProjectSlug = () => {
-  if (isInProjectPage()) {
-    return $('body').data('project');
-  }
-  return null;
-};
-
-export const getGroupSlug = () => {
-  if (isInProjectPage() || isInGroupsPage()) {
-    return $('body').data('group');
-  }
-  return null;
-};
-
 export const checkPageAndAction = (page, action) => {
   const pagePath = getPagePath(1);
   const actionPath = getPagePath(2);
@@ -49,6 +28,8 @@ export const isInDesignPage = () => checkPageAndAction('issues', 'designs');
 export const isInMRPage = () => checkPageAndAction('merge_requests', 'show');
 export const isInEpicPage = () => checkPageAndAction('epics', 'show');
 
+export const getDashPath = (path = window.location.pathname) => path.split('/-/')[1] || null;
+
 export const getCspNonceValue = () => {
   const metaTag = document.querySelector('meta[name=csp-nonce]');
   return metaTag && metaTag.content;
@@ -328,8 +309,8 @@ export const insertText = (target, text) => {
 };
 
 /**
-  this will take in the headers from an API response and normalize them
-  this way we don't run into production issues when nginx gives us lowercased header keys
+   this will take in the headers from an API response and normalize them
+   this way we don't run into production issues when nginx gives us lowercased header keys
 */
 export const normalizeHeaders = (headers) => {
   const upperCaseHeaders = {};

app/assets/javascripts/search_autocomplete.js

@@ -8,13 +8,13 @@ import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { s__, __, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import axios from './lib/utils/axios_utils';
+import { spriteIcon } from './lib/utils/common_utils';
 import {
   isInGroupsPage,
   isInProjectPage,
   getGroupSlug,
   getProjectSlug,
-  spriteIcon,
-} from './lib/utils/common_utils';
+} from './search_autocomplete_utils';
 
 /**
  * Search input in top navigation bar.

app/assets/javascripts/search_autocomplete_utils.js

+import { getPagePath } from './lib/utils/common_utils';
+
+export const isInGroupsPage = () => getPagePath() === 'groups';
+
+export const isInProjectPage = () => getPagePath() === 'projects';
+
+export const getProjectSlug = () => {
+  if (isInProjectPage()) {
+    return document?.body?.dataset?.project;
+  }
+  return null;
+};
+
+export const getGroupSlug = () => {
+  if (isInProjectPage() || isInGroupsPage()) {
+    return document?.body?.dataset?.group;
+  }
+  return null;
+};

spec/frontend/lib/utils/common_utils_spec.js

 import * as commonUtils from '~/lib/utils/common_utils';
 
 describe('common_utils', () => {
+  describe('getPagePath', () => {
+    const { getPagePath } = commonUtils;
+
+    let originalBody;
+
+    beforeEach(() => {
+      originalBody = document.body;
+      document.body = document.createElement('body');
+    });
+
+    afterEach(() => {
+      document.body = originalBody;
+    });
+
+    it('returns an empty path if none is defined', () => {
+      expect(getPagePath()).toBe('');
+      expect(getPagePath(0)).toBe('');
+    });
+
+    describe('returns a path', () => {
+      const mockSection = 'my_section';
+      const mockSubSection = 'my_sub_section';
+      const mockPage = 'my_page';
+
+      it('returns a page', () => {
+        document.body.dataset.page = mockPage;
+
+        expect(getPagePath()).toBe(mockPage);
+        expect(getPagePath(0)).toBe(mockPage);
+      });
+
+      it('returns a section and page', () => {
+        document.body.dataset.page = `${mockSection}:${mockPage}`;
+
+        expect(getPagePath()).toBe(mockSection);
+        expect(getPagePath(0)).toBe(mockSection);
+        expect(getPagePath(1)).toBe(mockPage);
+      });
+
+      it('returns a section and subsection', () => {
+        document.body.dataset.page = `${mockSection}:${mockSubSection}:${mockPage}`;
+
+        expect(getPagePath()).toBe(mockSection);
+        expect(getPagePath(0)).toBe(mockSection);
+        expect(getPagePath(1)).toBe(mockSubSection);
+        expect(getPagePath(2)).toBe(mockPage);
+      });
+    });
+  });
+
   describe('parseUrl', () => {
     it('returns an anchor tag with url', () => {
       expect(commonUtils.parseUrl('/some/absolute/url').pathname).toContain('some/absolute/url');

spec/frontend/search_autocomplete_spec.js

-/* eslint-disable no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign */
 import AxiosMockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
@@ -22,31 +21,33 @@ describe('Search autocomplete dropdown', () => {
   const groupName = 'Gitlab Org';
 
   const removeBodyAttributes = () => {
-    const $body = $('body');
+    const { body } = document;
 
-    $body.removeAttr('data-page');
-    $body.removeAttr('data-project');
-    $body.removeAttr('data-group');
+    delete body.dataset.page;
+    delete body.dataset.project;
+    delete body.dataset.group;
   };
 
   // Add required attributes to body before starting the test.
   // section would be dashboard|group|project
-  const addBodyAttributes = (section) => {
-    if (section == null) {
-      section = 'dashboard';
-    }
-
-    const $body = $('body');
+  const addBodyAttributes = (section = 'dashboard') => {
     removeBodyAttributes();
+
+    const { body } = document;
     switch (section) {
       case 'dashboard':
-        return $body.attr('data-page', 'root:index');
+        body.dataset.page = 'root:index';
+        break;
       case 'group':
-        $body.attr('data-page', 'groups:show');
-        return $body.data('group', 'gitlab-org');
+        body.dataset.page = 'groups:show';
+        body.dataset.group = 'gitlab-org';
+        break;
       case 'project':
-        $body.attr('data-page', 'projects:show');
-        return $body.data('project', 'gitlab-ce');
+        body.dataset.page = 'projects:show';
+        body.dataset.project = 'gitlab-ce';
+        break;
+      default:
+        break;
     }
   };
 
@@ -56,34 +57,31 @@ describe('Search autocomplete dropdown', () => {
 
   // Mock `gl` object in window for dashboard specific page. App code will need it.
   const mockDashboardOptions = () => {
-    window.gl || (window.gl = {});
-    return (window.gl.dashboardOptions = {
+    window.gl.dashboardOptions = {
       issuesPath: dashboardIssuesPath,
       mrPath: dashboardMRsPath,
-    });
+    };
   };
 
   // Mock `gl` object in window for project specific page. App code will need it.
   const mockProjectOptions = () => {
-    window.gl || (window.gl = {});
-    return (window.gl.projectOptions = {
+    window.gl.projectOptions = {
       'gitlab-ce': {
         issuesPath: projectIssuesPath,
         mrPath: projectMRsPath,
         projectName,
       },
-    });
+    };
   };
 
   const mockGroupOptions = () => {
-    window.gl || (window.gl = {});
-    return (window.gl.groupOptions = {
+    window.gl.groupOptions = {
       'gitlab-org': {
         issuesPath: groupIssuesPath,
         mrPath: groupMRsPath,
         projectName: groupName,
       },
-    });
+    };
   };
 
   const assertLinks = (list, issuesPath, mrsPath) => {
@@ -113,7 +111,7 @@ describe('Search autocomplete dropdown', () => {
     window.gon.current_username = userName;
     window.gl = window.gl || (window.gl = {});
 
-    return (widget = initSearchAutocomplete({ autocompletePath }));
+    widget = initSearchAutocomplete({ autocompletePath });
   });
 
   afterEach(() => {

spec/frontend/search_autocomplete_utils_spec.js

+import {
+  isInGroupsPage,
+  isInProjectPage,
+  getGroupSlug,
+  getProjectSlug,
+} from '~/search_autocomplete_utils';
+
+describe('search_autocomplete_utils', () => {
+  let originalBody;
+
+  beforeEach(() => {
+    originalBody = document.body;
+    document.body = document.createElement('body');
+  });
+
+  afterEach(() => {
+    document.body = originalBody;
+  });
+
+  describe('isInGroupsPage', () => {
+    it.each`
+      page               | result
+      ${'groups:index'}  | ${true}
+      ${'groups:show'}   | ${true}
+      ${'projects:show'} | ${false}
+    `(`returns $result in for page $page`, ({ page, result }) => {
+      document.body.dataset.page = page;
+
+      expect(isInGroupsPage()).toBe(result);
+    });
+  });
+
+  describe('isInProjectPage', () => {
+    it.each`
+      page                | result
+      ${'projects:index'} | ${true}
+      ${'projects:show'}  | ${true}
+      ${'groups:show'}    | ${false}
+    `(`returns $result in for page $page`, ({ page, result }) => {
+      document.body.dataset.page = page;
+
+      expect(isInProjectPage()).toBe(result);
+    });
+  });
+
+  describe('getProjectSlug', () => {
+    it('returns null when no project is present or on project page', () => {
+      expect(getProjectSlug()).toBe(null);
+    });
+
+    it('returns null when not on project page', () => {
+      document.body.dataset.project = 'gitlab';
+
+      expect(getProjectSlug()).toBe(null);
+    });
+
+    it('returns null when project is missing', () => {
+      document.body.dataset.page = 'projects';
+
+      expect(getProjectSlug()).toBe(undefined);
+    });
+
+    it('returns project', () => {
+      document.body.dataset.page = 'projects';
+      document.body.dataset.project = 'gitlab';
+
+      expect(getProjectSlug()).toBe('gitlab');
+    });
+
+    it('returns project in edit page', () => {
+      document.body.dataset.page = 'projects:edit';
+      document.body.dataset.project = 'gitlab';
+
+      expect(getProjectSlug()).toBe('gitlab');
+    });
+  });
+
+  describe('getGroupSlug', () => {
+    it('returns null when no group is present or on group page', () => {
+      expect(getGroupSlug()).toBe(null);
+    });
+
+    it('returns null when not on group page', () => {
+      document.body.dataset.group = 'gitlab-org';
+
+      expect(getGroupSlug()).toBe(null);
+    });
+
+    it('returns null when group is missing on groups page', () => {
+      document.body.dataset.page = 'groups';
+
+      expect(getGroupSlug()).toBe(undefined);
+    });
+
+    it('returns null when group is missing on project page', () => {
+      document.body.dataset.page = 'project';
+
+      expect(getGroupSlug()).toBe(null);
+    });
+
+    it.each`
+      page
+      ${'groups'}
+      ${'groups:edit'}
+      ${'projects'}
+      ${'projects:edit'}
+    `(`returns group in page $page`, ({ page }) => {
+      document.body.dataset.page = page;
+      document.body.dataset.group = 'gitlab-org';
+
+      expect(getGroupSlug()).toBe('gitlab-org');
+    });
+  });
+});