Add label relationship filter to build tests page (#3681)

The "new" filters interface was unable to represent relationship filters
until #3671. Now that the problem
has been solved, we can now add a "label" filter to the build tests
page. This paves the way for the upcoming removal of the last relics of
the old viewTest.php page.

Author: williamjallen

resources/js/vue/components/shared/FilterGroup.vue

@@ -77,7 +77,7 @@ import {
   faBarsStaggered,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
-import {BasicFilterField, FilterType, getEnumValues} from './Filters/FilterUtils';
+import {BasicFilterField, FilterType, getEnumValues, RelationshipFilterField} from './Filters/FilterUtils';
 
 const AVAILABLE_FILTERS = Object.freeze({
   BuildTestsFiltersMultiFilterInput: (apolloClient) => [
@@ -87,6 +87,7 @@ const AVAILABLE_FILTERS = Object.freeze({
     new BasicFilterField('Start Time', FilterType.DATETIME, null, 'startTime'),
     new BasicFilterField('Status', FilterType.ENUM, () => getEnumValues(apolloClient, 'TestStatus'), 'status'),
     new BasicFilterField('Time Status', FilterType.ENUM, () => getEnumValues(apolloClient, 'TestTimeStatusCategory'), 'timeStatusCategory'),
+    new RelationshipFilterField('Label', FilterType.TEXT, null, 'text', 'labels'),
   ],
   BuildCoverageFiltersMultiFilterInput: () => [
     new BasicFilterField('Lines of Code Tested', FilterType.NUMBER, null, 'linesOfCodeTested'),

resources/js/vue/components/shared/Filters/FilterUtils.js

@@ -181,3 +181,66 @@ export class BasicFilterField extends FilterField {
   }
 }
 
+export class RelationshipFilterField extends FilterField {
+  /**
+   * @param {String} name
+   * @param {FilterType} type
+   * @param {function} values
+   * @param {String} field
+   * @param {String} relationship
+   */
+  constructor(name, type, values, field, relationship) {
+    super(name, type, values);
+    this.field = field;
+    this.relationship = relationship;
+  }
+
+  /**
+   * @param {*} data
+   * @param {String} operator
+   * @return Object
+   */
+  getFilter(data, operator) {
+    return {
+      has: {
+        [this.relationship]: {
+          [operator]: {
+            [this.field]: data,
+          },
+        },
+      },
+    };
+  }
+
+  /**
+   * @param {Object} filter
+   * @return boolean
+   */
+  isMatch(filter) {
+    const relationshipObject = filter.has;
+    if (!relationshipObject || !relationshipObject[this.relationship]) {
+      return false;
+    }
+
+    const operator = Object.keys(relationshipObject[this.relationship])[0];
+    return operator && this.field in relationshipObject[this.relationship][operator];
+  }
+
+  /**
+   * @param {Object} filter
+   * @return {*}
+   */
+  getValueFromFilter(filter) {
+    const operator = Object.keys(filter.has[this.relationship])[0];
+    return filter.has[this.relationship][operator][this.field];
+  }
+
+  /**
+   * @param {Object} filter
+   * @return {String}
+   */
+  getOperatorFromFilter(filter) {
+    return Object.keys(filter.has[this.relationship])[0];
+  }
+}
+