Show warning for raw text

Show createFlash Warning for
raw text search when filtering
pipelines. And ensure console error
doesn't happen when using raw text.

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -10,7 +10,7 @@ import NavigationControls from './nav_controls.vue';
 import { getParameterByName } from '../../lib/utils/common_utils';
 import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
-import { ANY_TRIGGER_AUTHOR } from '../constants';
+import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING } from '../constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
@@ -258,9 +258,13 @@ export default {
       filters.forEach(filter => {
         // do not add Any for username query param, so we
         // can fetch all trigger authors
-        if (filter.value.data !== ANY_TRIGGER_AUTHOR) {
+        if (filter.type && filter.value.data !== ANY_TRIGGER_AUTHOR) {
           this.requestData[filter.type] = filter.value.data;
         }
+
+        if (!filter.type) {
+          createFlash(RAW_TEXT_WARNING, 'warning');
+        }
       });
 
       if (filters.length === 0) {

app/assets/javascripts/pipelines/constants.js

-import { __ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const CANCEL_REQUEST = 'CANCEL_REQUEST';
 export const PIPELINES_TABLE = 'PIPELINES_TABLE';
@@ -14,3 +14,6 @@ export const TestStatus = {
 
 export const FETCH_AUTHOR_ERROR_MESSAGE = __('There was a problem fetching project users.');
 export const FETCH_BRANCH_ERROR_MESSAGE = __('There was a problem fetching project branches.');
+export const RAW_TEXT_WARNING = s__(
+  'Pipeline|Raw text search is not currently supported. Please use the available search tokens.',
+);

changelogs/unreleased/dont-support-raw-text-on-filter.yml

+---
+title: Show warning message to user if raw text search is used when filtering pipelines
+merge_request: 31942
+author:
+type: changed

locale/gitlab.pot

@@ -15280,6 +15280,9 @@ msgstr ""
 msgid "Pipeline|Pipelines"
 msgstr ""
 
+msgid "Pipeline|Raw text search is not currently supported. Please use the available search tokens."
+msgstr ""
+
 msgid "Pipeline|Run Pipeline"
 msgstr ""
 

spec/frontend/pipelines/pipelines_spec.js

@@ -6,7 +6,11 @@ import waitForPromises from 'helpers/wait_for_promises';
 import PipelinesComponent from '~/pipelines/components/pipelines.vue';
 import Store from '~/pipelines/stores/pipelines_store';
 import { pipelineWithStages, stageReply, users, mockSearch, branches } from './mock_data';
+import { RAW_TEXT_WARNING } from '~/pipelines/constants';
 import { GlFilteredSearch } from '@gitlab/ui';
+import createFlash from '~/flash';
+
+jest.mock('~/flash', () => jest.fn());
 
 describe('Pipelines', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
@@ -667,15 +671,18 @@ describe('Pipelines', () => {
   });
 
   describe('Pipeline filters', () => {
+    let updateContentMock;
+
     beforeEach(() => {
       mock.onGet(paths.endpoint).reply(200, pipelines);
       createComponent();
 
+      updateContentMock = jest.spyOn(wrapper.vm, 'updateContent');
+
       return waitForPromises();
     });
 
     it('updates request data and query params on filter submit', () => {
-      const updateContentMock = jest.spyOn(wrapper.vm, 'updateContent');
       const expectedQueryParams = { page: '1', scope: 'all', username: 'root', ref: 'master' };
 
       findFilteredSearch().vm.$emit('submit', mockSearch);
@@ -683,5 +690,21 @@ describe('Pipelines', () => {
       expect(wrapper.vm.requestData).toEqual(expectedQueryParams);
       expect(updateContentMock).toHaveBeenCalledWith(expectedQueryParams);
     });
+
+    it('does not add query params if raw text search is used', () => {
+      const expectedQueryParams = { page: '1', scope: 'all' };
+
+      findFilteredSearch().vm.$emit('submit', ['rawText']);
+
+      expect(wrapper.vm.requestData).toEqual(expectedQueryParams);
+      expect(updateContentMock).toHaveBeenCalledWith(expectedQueryParams);
+    });
+
+    it('displays a warning message if raw text search is used', () => {
+      findFilteredSearch().vm.$emit('submit', ['rawText']);
+
+      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createFlash).toHaveBeenCalledWith(RAW_TEXT_WARNING, 'warning');
+    });
   });
 });