STCOM-1211 Add hasMatchSelection to <AdvancedSearch> to hide/show…

… search match selection dropdown. (#2141)

* STCOM-1211 Add `hasMatchSelection` to `<AdvancedSearch>` to hide/show search match selection dropdown.

* STCOM-1211 Added tests for hiding AdvancedSearch match selector

* STCOM-1211 Updated AdvancedSearch match select data-test ids

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 12.1.0 IN PROGRESS
 
+* Add `hasMatchSelection` to `<AdvancedSearch>` to hide/show search match selection dropdown. Refs STCOM-1211.
+
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)
 

lib/AdvancedSearch/AdvancedSearch.js

@@ -16,18 +16,19 @@ const propTypes = {
     option: PropTypes.string,
     query: PropTypes.string.isRequired,
   }),
+  hasMatchSelection: PropTypes.bool,
   hasQueryOption: PropTypes.bool,
   onCancel: PropTypes.func.isRequired,
   onSearch: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
   queryBuilder: PropTypes.func,
+  queryToRow: PropTypes.func,
   rowFormatter: PropTypes.func,
   searchOptions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
   })).isRequired,
-  queryToRow: PropTypes.func,
 };
 
 const AdvancedSearch = ({
@@ -38,6 +39,7 @@ const AdvancedSearch = ({
   queryBuilder,
   rowFormatter,
   hasQueryOption,
+  hasMatchSelection,
   defaultSearchOptionValue,
   firstRowInitialSearch,
   queryToRow,
@@ -76,6 +78,7 @@ const AdvancedSearch = ({
           ? intl.formatMessage({ id: 'stripes-components.advancedSearch.emptyFirstRowError' })
           : null
         }
+        hasMatchSelection={hasMatchSelection}
       />
     ));
   };
@@ -102,6 +105,7 @@ AdvancedSearch.defaultProps = {
   rowFormatter: defaultRowFormatter,
   firstRowInitialSearch: null,
   hasQueryOption: true,
+  hasMatchSelection: true,
 };
 
 export default AdvancedSearch;

lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js

@@ -21,6 +21,7 @@ import styles from './AdvancedSearchRow.css';
 
 const propTypes = {
   errorMessage: PropTypes.string,
+  hasMatchSelection: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,
   rowState: PropTypes.shape({
@@ -41,6 +42,7 @@ const AdvancedSearchRow = ({
   searchOptions,
   onChange,
   errorMessage,
+  hasMatchSelection,
 }) => {
   const intl = useIntl();
 
@@ -107,18 +109,20 @@ const AdvancedSearchRow = ({
           />
           <span className={styles.emptyRowErrorMessage}>{errorMessage}</span>
         </Col>
-        <Col xs={3}>
-          <Select
-            data-test-advanced-match
-            aria-label={intl.formatMessage({ id: 'stripes-components.advancedSearch.match.label' })}
-            onChange={(e) => onChange(index, FIELD_NAMES.MATCH, e.target.value)}
-            value={rowState[FIELD_NAMES.MATCH]}
-            dataOptions={matchOptions}
-            data-testid="advanced-match"
-            id={`advanced-match-${index}`}
-            required
-          />
-        </Col>
+        {hasMatchSelection && (
+          <Col xs={3}>
+            <Select
+              data-test-advanced-search-match
+              aria-label={intl.formatMessage({ id: 'stripes-components.advancedSearch.match.label' })}
+              onChange={(e) => onChange(index, FIELD_NAMES.MATCH, e.target.value)}
+              value={rowState[FIELD_NAMES.MATCH]}
+              dataOptions={matchOptions}
+              data-testid="advanced-search-match"
+              id={`advanced-search-match-${index}`}
+              required
+            />
+          </Col>
+        )}
         <Col xs className={styles.searchInLabelCol}>
           <FormattedMessage id="stripes-components.advancedSearch.searchIn" />
         </Col>

lib/AdvancedSearch/readme.md

@@ -130,6 +130,7 @@ onSearch | func | Callback fired when search is performed. Called with two argum
 onCancel | func | Callback fired when the user clicks the cancel button. | true
 defaultSearchOptionValue | string | One of the options in `searchOptions` that will be selected by default in all rows | false
 firstRowInitialSearch | object | Object with shape `{ query, option }` - will be used to populate first row with default values | false
+hasMatchSelection | boolean | Show/hide search match option dropdown | true
 hasQueryOption | boolean | Controls whether `Query` search option should be appended to search options list | true
 rowFormatter | func | Function that will be used to combine boolean, query and search option of each row. Signature: `(searchOption, query, bool, comparator) => {...}`. Returned values will be used by `queryBuilder` to join them together. *Note:* no need to add `bool` to resulting string here - it will be added by `queryBuilder`. | false
 queryBuilder | func | Function that will be used to construct the search query. Signature: `(rows, rowFormatter) => {...}`. `rows` - array of shapes `{ query, searchOption, query }`, `rowFormatter` - the prop. Returned value will be passed as the first argument to `onSearch`. | false

lib/AdvancedSearch/tests/AdvancedSearch-test.js

@@ -133,6 +133,16 @@ describe('AdvancedSearch', () => {
     }
   });
 
+  describe('when hasMatchSelection is false', () => {
+    beforeEach(async () => {
+      await renderComponent({
+        hasMatchSelection: false,
+      });
+    });
+
+    it('should not render match option selects', () => advancedSearch.has({ hasMatchSelect: false }));
+  });
+
   describe('when firstRowInitialSearch is passed', () => {
     beforeEach(async () => {
       await renderComponent({