Add latest changes from gitlab-org/gitlab@master

3 files changed, 203 insertions, 15 deletions

diff --git a/spec/frontend/invite_members/utils/member_utils_spec.js b/spec/frontend/invite_members/utils/member_utils_spec.js
index 4d71a35ff99..abae43c3dbb 100644
--- a/spec/frontend/invite_members/utils/member_utils_spec.js
+++ b/spec/frontend/invite_members/utils/member_utils_spec.js
@@ -1,8 +1,4 @@
-import {
-  memberName,
-  triggerExternalAlert,
-  inviteMembersTrackingOptions,
-} from '~/invite_members/utils/member_utils';
+import { memberName, triggerExternalAlert } from '~/invite_members/utils/member_utils';
 
 jest.mock('~/lib/utils/url_utility');
 
@@ -22,13 +18,3 @@ describe('Trigger External Alert', () => {
     expect(triggerExternalAlert()).toBe(false);
   });
 });
-
-describe('inviteMembersTrackingOptions', () => {
-  it('returns options with a label', () => {
-    expect(inviteMembersTrackingOptions({ label: '_label_' })).toEqual({ label: '_label_' });
-  });
-
-  it('handles options that has no label', () => {
-    expect(inviteMembersTrackingOptions({})).toEqual({ label: undefined });
-  });
-});
diff --git a/spec/frontend/observability/client_spec.js b/spec/frontend/observability/client_spec.js
index e7b68a2346e..0a852d9e000 100644
--- a/spec/frontend/observability/client_spec.js
+++ b/spec/frontend/observability/client_spec.js
@@ -279,6 +279,38 @@ describe('buildClient', () => {
             '&attr_name=name1&attr_value=value1',
         );
       });
+      describe('date range time filter', () => {
+        it('handles custom date range period filter', async () => {
+          await client.fetchTraces({
+            filters: {
+              period: [{ operator: '=', value: '2023-01-01 - 2023-02-01' }],
+            },
+          });
+          expect(getQueryParam()).not.toContain('period=');
+          expect(getQueryParam()).toContain(
+            'start_time=2023-01-01T00:00:00.000Z&end_time=2023-02-01T00:00:00.000Z',
+          );
+        });
+
+        it.each([
+          'invalid - 2023-02-01',
+          '2023-02-01 - invalid',
+          'invalid - invalid',
+          '2023-01-01 / 2023-02-01',
+          '2023-01-01 2023-02-01',
+          '2023-01-01 - 2023-02-01 - 2023-02-01',
+        ])('ignore invalid values', async (val) => {
+          await client.fetchTraces({
+            filters: {
+              period: [{ operator: '=', value: val }],
+            },
+          });
+
+          expect(getQueryParam()).not.toContain('start_time=');
+          expect(getQueryParam()).not.toContain('end_time=');
+          expect(getQueryParam()).not.toContain('period=');
+        });
+      });
 
       it('handles repeated params', async () => {
         await client.fetchTraces({
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/daterange_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/daterange_token_spec.js
new file mode 100644
index 00000000000..ef0e3dbbb8e
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/daterange_token_spec.js
@@ -0,0 +1,170 @@
+import {
+  GlDaterangePicker,
+  GlFilteredSearchSuggestion,
+  GlFilteredSearchSuggestionList,
+  GlFilteredSearchToken,
+} from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import DaterangeToken from '~/vue_shared/components/filtered_search_bar/tokens/daterange_token.vue';
+import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
+
+const CUSTOM_DATE = 'custom-date';
+
+describe('DaterangeToken', () => {
+  let wrapper;
+
+  const defaultProps = {
+    active: true,
+    value: {
+      data: '',
+    },
+    config: {
+      operators: OPERATORS_IS,
+      options: [
+        {
+          value: 'last_week',
+          title: 'Last week',
+        },
+        {
+          value: 'last_month',
+          title: 'Last month',
+        },
+      ],
+    },
+  };
+
+  function createComponent(props = {}) {
+    return mountExtended(DaterangeToken, {
+      propsData: { ...defaultProps, ...props },
+      stubs: {
+        Portal: true,
+      },
+      provide: {
+        portalName: 'fake target',
+        alignSuggestions: function fakeAlignSuggestions() {},
+        suggestionsListClass: () => 'custom-class',
+        termsAsTokens: () => false,
+      },
+    });
+  }
+
+  const findGlFilteredSearchToken = () => wrapper.findComponent(GlFilteredSearchToken);
+  const findDateRangePicker = () => wrapper.findComponent(GlDaterangePicker);
+  const findAllSuggestions = () => wrapper.findAllComponents(GlFilteredSearchSuggestion);
+  const selectSuggestion = (suggestion) =>
+    wrapper.findComponent(GlFilteredSearchSuggestionList).vm.$emit('suggestion', suggestion);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  it('renders a filtered search token', () => {
+    expect(findGlFilteredSearchToken().exists()).toBe(true);
+  });
+
+  it('remove the options from the token config', () => {
+    expect(findGlFilteredSearchToken().props('config').options).toBeUndefined();
+  });
+
+  it('does not set the token as view-only', () => {
+    expect(findGlFilteredSearchToken().props('viewOnly')).toBe(false);
+  });
+
+  it('does not show the date picker by default', () => {
+    expect(findDateRangePicker().exists()).toBe(false);
+  });
+
+  it('does not re-activate the token', async () => {
+    await wrapper.setProps({ active: false });
+    expect(findGlFilteredSearchToken().props('active')).toBe(false);
+  });
+
+  it('does not override the value', async () => {
+    await wrapper.setProps({ value: { data: 'value' } });
+    expect(findGlFilteredSearchToken().props('value')).toEqual({ data: 'value' });
+  });
+
+  it('renders a list of suggestions as specified by the config', () => {
+    const suggestions = findAllSuggestions();
+    expect(suggestions.exists()).toBe(true);
+    expect(suggestions).toHaveLength(defaultProps.config.options.length + 1);
+    [...defaultProps.config.options, { value: CUSTOM_DATE, title: 'Custom' }].forEach(
+      (option, i) => {
+        expect(suggestions.at(i).props('value')).toBe(option.value);
+        expect(suggestions.at(i).text()).toBe(option.title);
+      },
+    );
+  });
+
+  it('sets the dataSegmentInputAttributes', () => {
+    expect(findGlFilteredSearchToken().props('dataSegmentInputAttributes')).toEqual({
+      id: 'time_range_data_segment_input',
+    });
+  });
+
+  describe('when a default option is selected', () => {
+    const option = defaultProps.config.options[0].value;
+    beforeEach(async () => {
+      await selectSuggestion(option);
+    });
+    it('does not show the date picker if default option is selected', () => {
+      expect(findDateRangePicker().exists()).toBe(false);
+    });
+
+    it('sets the value', () => {
+      expect(findGlFilteredSearchToken().emitted().select).toEqual([[option]]);
+      expect(findGlFilteredSearchToken().emitted().complete).toEqual([[option]]);
+    });
+  });
+
+  describe('when custom-date option is selected', () => {
+    beforeEach(async () => {
+      await selectSuggestion(CUSTOM_DATE);
+    });
+
+    it('sets the token as view-only', () => {
+      expect(findGlFilteredSearchToken().props('viewOnly')).toBe(true);
+    });
+
+    it('shows the date picker', () => {
+      expect(findDateRangePicker().exists()).toBe(true);
+      const today = new Date();
+      expect(findDateRangePicker().props('defaultStartDate')).toEqual(today);
+      expect(findDateRangePicker().props('startOpened')).toBe(true);
+    });
+
+    it('re-activate the token while the date picker is open', async () => {
+      await wrapper.setProps({ active: false });
+      expect(findGlFilteredSearchToken().props('active')).toBe(true);
+    });
+
+    it('overrides the value', async () => {
+      await wrapper.setProps({ value: { data: 'value' } });
+      expect(findGlFilteredSearchToken().props('value')).toEqual({ data: '' });
+    });
+
+    it('sets the dataSegmentInputAttributes', () => {
+      expect(findGlFilteredSearchToken().props('dataSegmentInputAttributes')).toEqual({
+        id: 'time_range_data_segment_input',
+        placeholder: 'YYYY-MM-DD - YYYY-MM-DD',
+        style: 'padding-left: 23px;',
+      });
+    });
+
+    it('sets the date range and hides the picker upon selection', async () => {
+      await findDateRangePicker().vm.$emit('input', {
+        startDate: new Date('October 13, 2014 11:13:00'),
+        endDate: new Date('October 13, 2014 11:13:00'),
+      });
+      expect(findGlFilteredSearchToken().emitted().complete).toEqual([
+        [CUSTOM_DATE],
+        [`"2014-10-13 - 2014-10-13"`],
+      ]);
+      expect(findGlFilteredSearchToken().emitted().select).toEqual([
+        [CUSTOM_DATE],
+        [`"2014-10-13 - 2014-10-13"`],
+      ]);
+      expect(findDateRangePicker().exists()).toBe(false);
+    });
+  });
+});