Merge branch 'mw-gl-breakpoints-12' into 'master'

Replace breakpoints with GlBreakpointInstance in frequent_items/utils.js

See merge request gitlab-org/gitlab!22019

app/assets/javascripts/frequent_items/utils.js

 import _ from 'underscore';
-import bp from '~/breakpoints';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { FREQUENT_ITEMS, HOUR_IN_MS } from './constants';
 
-export const isMobile = () => {
-  const screenSize = bp.getBreakpointSize();
-
-  return screenSize === 'sm' || screenSize === 'xs';
-};
+export const isMobile = () => ['md', 'sm', 'xs'].includes(bp.getBreakpointSize());
 
 export const getTopFrequentItems = items => {
   if (!items) {

spec/javascripts/frequent_items/utils_spec.js

-import bp from '~/breakpoints';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { isMobile, getTopFrequentItems, updateExistingFrequentItem } from '~/frequent_items/utils';
 import { HOUR_IN_MS, FREQUENT_ITEMS } from '~/frequent_items/constants';
 import { mockProject, unsortedFrequentItems, sortedFrequentItems } from './mock_data';
 
 describe('Frequent Items utils spec', () => {
   describe('isMobile', () => {
+    it('returns true when the screen is medium ', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('md');
+
+      expect(isMobile()).toBe(true);
+    });
+
     it('returns true when the screen is small ', () => {
       spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
 
@@ -17,8 +23,8 @@ describe('Frequent Items utils spec', () => {
       expect(isMobile()).toBe(true);
     });
 
-    it('returns false when the screen is larger than small ', () => {
-      spyOn(bp, 'getBreakpointSize').and.returnValue('md');
+    it('returns false when the screen is larger than medium ', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('lg');
 
       expect(isMobile()).toBe(false);
     });
@@ -32,21 +38,21 @@ describe('Frequent Items utils spec', () => {
     });
 
     it('returns correct amount of items for mobile', () => {
-      spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
+      spyOn(bp, 'getBreakpointSize').and.returnValue('md');
       const result = getTopFrequentItems(unsortedFrequentItems);
 
       expect(result.length).toBe(FREQUENT_ITEMS.LIST_COUNT_MOBILE);
     });
 
     it('returns correct amount of items for desktop', () => {
-      spyOn(bp, 'getBreakpointSize').and.returnValue('lg');
+      spyOn(bp, 'getBreakpointSize').and.returnValue('xl');
       const result = getTopFrequentItems(unsortedFrequentItems);
 
       expect(result.length).toBe(FREQUENT_ITEMS.LIST_COUNT_DESKTOP);
     });
 
     it('sorts frequent items in order of frequency and lastAccessedOn', () => {
-      spyOn(bp, 'getBreakpointSize').and.returnValue('lg');
+      spyOn(bp, 'getBreakpointSize').and.returnValue('xl');
       const result = getTopFrequentItems(unsortedFrequentItems);
       const expectedResult = sortedFrequentItems.slice(0, FREQUENT_ITEMS.LIST_COUNT_DESKTOP);