Bug 1616215 - Warn when user filters by option or repository

Co-authored-by: Octavian Negru

tests/ui/mock/alert_summaries.json

@@ -20,6 +20,7 @@
           "lower_is_better": true,
           "has_subtests": false,
           "option_collection_hash": "102210fe594ee9b33d82058545b1ed14f4c8206e",
+          "options": ["opt"],
           "extra_options": ["e10s", "stylo"]
         },
         "is_regression": false,

tests/ui/perfherder/alerts_test.jsx

@@ -15,6 +15,8 @@ import {
   backfillRetriggeredTitle,
   unknownFrameworkMessage,
   endpoints,
+  filterText,
+  notSupportedAlertFiltersMessage,
 } from '../../../ui/perfherder/constants';
 import repos from '../mock/repositories';
 import { getApiUrl } from '../../../ui/helpers/url';
@@ -153,7 +155,7 @@ beforeAll(() => {
       option_collection_hash: '102210fe594ee9b33d82058545b1ed14f4c8206e',
       options: [
         {
-          name: '32',
+          name: testAlertSummaries[0].alerts[0].series_signature.options[0],
         },
       ],
     },
@@ -202,6 +204,41 @@ test('toggle buttons should filter alert summary and alerts by selected filter',
   expect(alert2).not.toBeInTheDocument();
 });
 
+describe('alert filtering ignores repository and/or options', () => {
+  const testCases = [
+    [
+      repos[0].name,
+      testAlertSummaries[0].alerts[0].series_signature.options[0],
+    ],
+    [repos[0].name],
+    [testAlertSummaries[0].alerts[0].series_signature.options[0]],
+  ];
+  testCases.forEach(testCase => {
+    it(testCase.toString(), async () => {
+      const { getByPlaceholderText, getByText } = alertsView();
+      const alertsFilterInput = await waitForElement(() =>
+        getByPlaceholderText(filterText.inputPlaceholder),
+      );
+
+      fireEvent.change(alertsFilterInput, {
+        target: {
+          value: `${testCase.join(' ')} 
+                  ${
+                    testAlertSummaries[0].alerts[0].series_signature
+                      .machine_platform
+                  }`,
+        },
+      });
+      fireEvent.keyDown(alertsFilterInput, { key: 'Enter', keyCode: 13 });
+
+      const warningMessage = await getByText(
+        notSupportedAlertFiltersMessage(testCase),
+      );
+      expect(warningMessage).toBeInTheDocument();
+    });
+  });
+});
+
 test('clicking the star icon for an alert updates that alert', async () => {
   const { getByTestId } = alertsViewControls();
 

ui/perfherder/alerts/AlertsView.jsx

@@ -6,7 +6,11 @@ import cloneDeep from 'lodash/cloneDeep';
 
 import withValidation from '../Validation';
 import { convertParams, getFrameworkData, getStatus } from '../helpers';
-import { summaryStatusMap, endpoints } from '../constants';
+import {
+  summaryStatusMap,
+  endpoints,
+  notSupportedAlertFiltersMessage,
+} from '../constants';
 import {
   createQueryParams,
   getApiUrl,
@@ -36,6 +40,7 @@ class AlertsView extends React.Component {
       errorMessages: [],
       alertSummaries: [],
       issueTrackers: [],
+      notSupportedAlertFilters: [],
       loading: false,
       optionCollectionMap: null,
       count: 0,
@@ -100,17 +105,6 @@ class AlertsView extends React.Component {
     };
   };
 
-  extendDropdownOptions = frameworks => {
-    const frameworkOptions = cloneDeep(frameworks);
-    const ignoreFrameworks = { id: -1, name: 'all frameworks' };
-    frameworkOptions.unshift(ignoreFrameworks);
-    return frameworkOptions;
-  };
-
-  isListMode = () => {
-    return Boolean(!this.state.id);
-  };
-
   getDefaultStatus = () => {
     const { validated } = this.props;
 
@@ -126,7 +120,7 @@ class AlertsView extends React.Component {
     return filterText === undefined || filterText === null ? '' : filterText;
   };
 
-  setFiltersState = (updatedFilters, doUpdateParams = true) => {
+  setFiltersState = async (updatedFilters, doUpdateParams = true) => {
     const { filters } = this.state;
     const currentFilters = cloneDeep(filters);
     Object.assign(currentFilters, updatedFilters);
@@ -141,6 +135,22 @@ class AlertsView extends React.Component {
     } else {
       this.setState({ filters: currentFilters });
     }
+    this.setState({
+      notSupportedAlertFilters: this.selectNotSupportedFilters(
+        currentFilters.filterText,
+      ),
+    });
+  };
+
+  isListMode = () => {
+    return Boolean(!this.state.id);
+  };
+
+  extendDropdownOptions = frameworks => {
+    const frameworkOptions = cloneDeep(frameworks);
+    const ignoreFrameworks = { id: -1, name: 'all frameworks' };
+    frameworkOptions.unshift(ignoreFrameworks);
+    return frameworkOptions;
   };
 
   getParamsFromFilters = filters => {
@@ -201,6 +211,22 @@ class AlertsView extends React.Component {
     return params;
   };
 
+  selectNotSupportedFilters = userInput => {
+    /* Following filters are not supported (see bug 1616215 for more details):
+     * - `option`, because of technical dept, as described in bug 1616212
+     * - `repository`, because it has never been enabled & the new dropdown items could falsely hint it is.
+     */
+    const { projects } = this.props;
+    const { optionCollectionMap } = this.state;
+    const userInputArray = userInput.split(' ');
+
+    const repositories = projects.map(({ name }) => name);
+    const optionsCollection = Object.values(optionCollectionMap);
+
+    const allNotSupportedFilters = [...repositories, ...optionsCollection];
+    return allNotSupportedFilters.filter(elem => userInputArray.includes(elem));
+  };
+
   async fetchAlertSummaries(id = this.state.id, update = false, page = 1) {
     // turn off loading when update is true (used to update alert statuses)
     this.setState({ loading: !update, errorMessages: [] });
@@ -294,6 +320,7 @@ class AlertsView extends React.Component {
       alertSummaries,
       frameworkOptions,
       issueTrackers,
+      notSupportedAlertFilters,
       optionCollectionMap,
       bugTemplate,
       page,
@@ -324,6 +351,13 @@ class AlertsView extends React.Component {
               make changes
             </Alert>
           )}
+
+          {notSupportedAlertFilters.length > 0 && (
+            <Alert color="warning">
+              {notSupportedAlertFiltersMessage(notSupportedAlertFilters)}
+            </Alert>
+          )}
+
           <AlertsViewControls
             isListMode={this.isListMode()}
             filters={filters}

ui/perfherder/constants.js

@@ -34,8 +34,12 @@ export const compareTableText = {
 };
 
 export const noResultsMessage = 'No results to show';
-export const noDataFoundMessage = title => `No Data Found for ${title}`;
 export const unknownFrameworkMessage = 'unknown framework';
+export const noDataFoundMessage = title => `No Data Found for ${title}`;
+export const notSupportedAlertFiltersMessage = filters =>
+  `Some filter terms are not supported (${filters.join(
+    ', ',
+  )}). Expected results might not be displayed.`;
 
 export const summaryStatusMap = {
   'all statuses': -1,