Add latest changes from gitlab-org/gitlab@master

12 files changed, 112 insertions, 17 deletions

diff --git a/spec/features/admin/admin_abuse_reports_spec.rb b/spec/features/admin/admin_abuse_reports_spec.rb
index 1c43faebd78..0620221051e 100644
--- a/spec/features/admin/admin_abuse_reports_spec.rb
+++ b/spec/features/admin/admin_abuse_reports_spec.rb
@@ -132,7 +132,7 @@ RSpec.describe "Admin::AbuseReports", :js, feature_category: :shared do
 
       def open_actions_dropdown(report_row)
         within(report_row) do
-          find('.dropdown-toggle').click
+          find('[data-testid="base-dropdown-toggle"]').click
         end
       end
 
diff --git a/spec/frontend/admin/abuse_reports/components/abuse_report_actions_spec.js b/spec/frontend/admin/abuse_reports/components/abuse_report_actions_spec.js
index e72d0c24d5e..2d0f00ea585 100644
--- a/spec/frontend/admin/abuse_reports/components/abuse_report_actions_spec.js
+++ b/spec/frontend/admin/abuse_reports/components/abuse_report_actions_spec.js
@@ -1,10 +1,10 @@
-import { mount, shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { GlButton, GlModal } from '@gitlab/ui';
-import AbuseReportActions from '~/admin/abuse_reports/components/abuse_report_actions.vue';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem, GlModal } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import AbuseReportActions from '~/admin/abuse_reports/components/abuse_report_actions.vue';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { sprintf } from '~/locale';
@@ -16,26 +16,29 @@ jest.mock('~/alert');
 describe('AbuseReportActions', () => {
   let wrapper;
 
-  const findRemoveUserAndReportButton = () => wrapper.findAllComponents(GlButton).at(0);
-  const findBlockUserButton = () => wrapper.findAllComponents(GlButton).at(1);
-  const findRemoveReportButton = () => wrapper.findAllComponents(GlButton).at(2);
+  const findRemoveUserAndReportButton = () => wrapper.findByText('Remove user & report');
+  const findBlockUserButton = () => wrapper.findByTestId('block-user-button');
+  const findRemoveReportButton = () => wrapper.findByText('Remove report');
   const findConfirmationModal = () => wrapper.findComponent(GlModal);
 
   const report = mockAbuseReports[0];
 
-  const createComponent = ({ props, mountFn } = { props: {}, mountFn: mount }) => {
-    wrapper = mountFn(AbuseReportActions, {
+  const createComponent = (props = {}) => {
+    wrapper = shallowMountExtended(AbuseReportActions, {
       propsData: {
         report,
         ...props,
       },
+      stubs: {
+        GlDisclosureDropdown,
+        GlDisclosureDropdownItem,
+      },
     });
   };
-  const createShallowComponent = (props) => createComponent({ props, mountFn: shallowMount });
 
   describe('default', () => {
     beforeEach(() => {
-      createShallowComponent();
+      createComponent();
     });
 
     it('displays "Block user", "Remove user & report", and "Remove report" buttons', () => {
@@ -55,11 +58,11 @@ describe('AbuseReportActions', () => {
 
   describe('block button when user is already blocked', () => {
     it('is disabled and has the correct text', () => {
-      createShallowComponent({ report: { ...report, userBlocked: true } });
+      createComponent({ report: { ...report, userBlocked: true } });
 
       const button = findBlockUserButton();
       expect(button.text()).toBe(ACTIONS_I18N.alreadyBlocked);
-      expect(button.attributes('disabled')).toBe('true');
+      expect(button.attributes('disabled')).toBe('disabled');
     });
   });
 
@@ -127,7 +130,7 @@ describe('AbuseReportActions', () => {
           blockButtonDisabled: undefined,
         },
       ])(
-        'when reponse JSON is $responseData',
+        'when response JSON is $responseData',
         ({ responseData, createAlertArgs, blockButtonText, blockButtonDisabled }) => {
           beforeEach(async () => {
             axiosMock.onPut(report.blockUserPath).reply(HTTP_STATUS_OK, responseData);
diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
index e2f1d6e4b10..3b407d11041 100644
--- a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
+++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
@@ -58,6 +58,7 @@ exports[`Design note component should match the snapshot 1`] = `
         >
           <time-ago-tooltip-stub
             cssclass=""
+            datetimeformat="DATE_WITH_TIME_FORMAT"
             time="2019-07-26T15:02:20Z"
             tooltipplacement="bottom"
           />
diff --git a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
index 3517c0f7a44..7773950708f 100644
--- a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
+++ b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
@@ -59,6 +59,7 @@ exports[`Design management list item component with notes renders item with mult
         Updated 
         <timeago-stub
           cssclass=""
+          datetimeformat="DATE_WITH_TIME_FORMAT"
           time="01-01-2019"
           tooltipplacement="bottom"
         />
@@ -138,6 +139,7 @@ exports[`Design management list item component with notes renders item with sing
         Updated 
         <timeago-stub
           cssclass=""
+          datetimeformat="DATE_WITH_TIME_FORMAT"
           time="01-01-2019"
           tooltipplacement="bottom"
         />
diff --git a/spec/frontend/lib/utils/datetime/timeago_utility_spec.js b/spec/frontend/lib/utils/datetime/timeago_utility_spec.js
index c13d55f978e..74ce8175357 100644
--- a/spec/frontend/lib/utils/datetime/timeago_utility_spec.js
+++ b/spec/frontend/lib/utils/datetime/timeago_utility_spec.js
@@ -1,3 +1,4 @@
+import { DATE_ONLY_FORMAT } from '~/lib/utils/datetime/constants';
 import { getTimeago, localTimeAgo, timeFor, duration } from '~/lib/utils/datetime/timeago_utility';
 import { s__ } from '~/locale';
 import '~/commons/bootstrap';
@@ -24,15 +25,37 @@ describe('TimeAgo utils', () => {
         window.gon = { time_display_relative: false };
       });
 
-      it.each([
+      const defaultFormatExpectations = [
         [new Date().toISOString(), 'Jul 6, 2020, 12:00 AM'],
         [new Date(), 'Jul 6, 2020, 12:00 AM'],
         [new Date().getTime(), 'Jul 6, 2020, 12:00 AM'],
         // Slightly different behaviour when `null` is passed :see_no_evil`
         [null, 'Jan 1, 1970, 12:00 AM'],
-      ])('formats date `%p` as `%p`', (date, result) => {
+      ];
+
+      it.each(defaultFormatExpectations)('formats date `%p` as `%p`', (date, result) => {
         expect(getTimeago().format(date)).toEqual(result);
       });
+
+      describe('with unknown format', () => {
+        it.each(defaultFormatExpectations)(
+          'uses default format and formats date `%p` as `%p`',
+          (date, result) => {
+            expect(getTimeago('non_existent').format(date)).toEqual(result);
+          },
+        );
+      });
+
+      describe('with DATE_ONLY_FORMAT', () => {
+        it.each([
+          [new Date().toISOString(), 'Jul 6, 2020'],
+          [new Date(), 'Jul 6, 2020'],
+          [new Date().getTime(), 'Jul 6, 2020'],
+          [null, 'Jan 1, 1970'],
+        ])('formats date `%p` as `%p`', (date, result) => {
+          expect(getTimeago(DATE_ONLY_FORMAT).format(date)).toEqual(result);
+        });
+      });
     });
   });
 
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
index 047fa04947c..2cfe7bdab64 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
@@ -38,6 +38,7 @@ exports[`PackageTitle renders with tags 1`] = `
          published 
               <time-ago-tooltip-stub
                 cssclass=""
+                datetimeformat="DATE_WITH_TIME_FORMAT"
                 time="2020-08-17T14:23:32Z"
                 tooltipplacement="top"
               />
@@ -139,6 +140,7 @@ exports[`PackageTitle renders without tags 1`] = `
          published 
               <time-ago-tooltip-stub
                 cssclass=""
+                datetimeformat="DATE_WITH_TIME_FORMAT"
                 time="2020-08-17T14:23:32Z"
                 tooltipplacement="top"
               />
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
index ec8e77fa923..57452bada19 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
@@ -95,6 +95,7 @@ exports[`packages_list_row renders 1`] = `
             Created 
             <timeago-tooltip-stub
               cssclass=""
+              datetimeformat="DATE_WITH_TIME_FORMAT"
               time="2020-08-17T14:23:32Z"
               tooltipplacement="top"
             />
diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
index a0b545add27..6825d4afecf 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -48,6 +48,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
           
         <timeago-tooltip-stub
           cssclass=""
+          datetimeformat="DATE_WITH_TIME_FORMAT"
           time="2019-01-01"
           tooltipplacement="bottom"
         />
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index b99d741e984..85bf683fdf6 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -56,6 +56,7 @@ exports[`Repository table row component renders a symlink table row 1`] = `
   >
     <timeago-tooltip-stub
       cssclass=""
+      datetimeformat="DATE_WITH_TIME_FORMAT"
       time="2019-01-01"
       tooltipplacement="top"
     />
@@ -121,6 +122,7 @@ exports[`Repository table row component renders table row 1`] = `
   >
     <timeago-tooltip-stub
       cssclass=""
+      datetimeformat="DATE_WITH_TIME_FORMAT"
       time="2019-01-01"
       tooltipplacement="top"
     />
@@ -186,6 +188,7 @@ exports[`Repository table row component renders table row for path with special
   >
     <timeago-tooltip-stub
       cssclass=""
+      datetimeformat="DATE_WITH_TIME_FORMAT"
       time="2019-01-01"
       tooltipplacement="top"
     />
diff --git a/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js b/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js
index eb8801f68c6..f78e141afad 100644
--- a/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js
+++ b/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js
@@ -1,4 +1,4 @@
-import { GlSearchBoxByType, GlToken, GlIcon } from '@gitlab/ui';
+import { GlModal, GlSearchBoxByType, GlToken, GlIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -87,6 +87,8 @@ describe('GlobalSearchModal', () => {
     );
   };
 
+  const findGlobalSearchModal = () => wrapper.findComponent(GlModal);
+
   const findGlobalSearchForm = () => wrapper.findByTestId('global-search-form');
   const findGlobalSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
   const findScopeToken = () => wrapper.findComponent(GlToken);
@@ -350,5 +352,21 @@ describe('GlobalSearchModal', () => {
         });
       });
     });
+
+    describe('Modal events', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('should emit `shown` event when modal shown`', () => {
+        findGlobalSearchModal().vm.$emit('shown');
+        expect(wrapper.emitted('shown')).toHaveLength(1);
+      });
+
+      it('should emit `hidden` event when modal hidden`', () => {
+        findGlobalSearchModal().vm.$emit('hidden');
+        expect(wrapper.emitted('hidden')).toHaveLength(1);
+      });
+    });
   });
 });
diff --git a/spec/frontend/super_sidebar/components/user_bar_spec.js b/spec/frontend/super_sidebar/components/user_bar_spec.js
index 2b75fb27972..7abd64ca108 100644
--- a/spec/frontend/super_sidebar/components/user_bar_spec.js
+++ b/spec/frontend/super_sidebar/components/user_bar_spec.js
@@ -173,6 +173,22 @@ describe('UserBar component', () => {
     it('should render search modal', () => {
       expect(findSearchModal().exists()).toBe(true);
     });
+
+    describe('Search tooltip', () => {
+      it('should hide search tooltip when modal is shown', async () => {
+        findSearchModal().vm.$emit('shown');
+        await nextTick();
+        const tooltip = getBinding(findSearchButton().element, 'gl-tooltip');
+        expect(tooltip.value).toBe('');
+      });
+
+      it('should add search tooltip when modal is hidden', async () => {
+        findSearchModal().vm.$emit('hidden');
+        await nextTick();
+        const tooltip = getBinding(findSearchButton().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(`Search GitLab <kbd>/</kbd>`);
+      });
+    });
   });
 
   describe('While impersonating a user', () => {
diff --git a/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
index a1757952dc0..17a363ad8b1 100644
--- a/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
+++ b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 
 import timezoneMock from 'timezone-mock';
 import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
+import { DATE_ONLY_FORMAT } from '~/lib/utils/datetime/constants';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 describe('Time ago with tooltip component', () => {
@@ -49,12 +50,36 @@ describe('Time ago with tooltip component', () => {
     expect(vm.attributes('datetime')).toEqual(timestamp);
   });
 
+  it('should render with the timestamp provided as Date', () => {
+    buildVm({ time: new Date(timestamp) });
+
+    expect(vm.text()).toEqual(timeAgoTimestamp);
+  });
+
   it('should render provided scope content with the correct timeAgo string', () => {
     buildVm(null, { default: `<span>The time is {{ props.timeAgo }}</span>` });
 
     expect(vm.text()).toEqual(`The time is ${timeAgoTimestamp}`);
   });
 
+  describe('with User Setting timeDisplayRelative: false', () => {
+    beforeEach(() => {
+      window.gon = { time_display_relative: false };
+    });
+
+    it('should render with the correct absolute datetime in the default format', () => {
+      buildVm();
+
+      expect(vm.text()).toEqual('May 8, 2017, 2:57 PM');
+    });
+
+    it('should render with the correct absolute datetime in the requested dateTimeFormat', () => {
+      buildVm({ dateTimeFormat: DATE_ONLY_FORMAT });
+
+      expect(vm.text()).toEqual('May 8, 2017');
+    });
+  });
+
   describe('number based timestamps', () => {
     // Store a date object before we mock the TZ
     const date = new Date();