@rh-support/cases 1.0.2 → 1.0.4

package/lib/esm/components/case-list/case-list-filters/ProductsFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAe,MAAM,0BAA0B,CAAC;AAUvE,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eA+D3C"}
+{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAe,MAAM,0BAA0B,CAAC;AAUvE,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eA0E3C"}

package/lib/esm/components/case-list/case-list-filters/ProductsFilter.js

@@ -1,6 +1,7 @@
-import { Dropdown, MultiSelectDropDownList } from '@rh-support/components';
-import { getDropdownBtnPlaceholder, toOption, toOptions } from '@rh-support/utils';
-import React, { useContext } from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { MultiSelectDropDownList } from '@rh-support/components';
+import { getDropdownBtnPlaceholder, toOptions } from '@rh-support/utils';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys, SolrPivotKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
@@ -10,6 +11,8 @@ export function ProductsFilter(props) {
     const { t } = useTranslation();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
     const onFilterChangeMultipleSelect = (selectedProducts) => {
         selectedProducts = selectedProducts.map((selectedProduct) => ({
             field: SolrKeys.product,
@@ -18,23 +21,24 @@ export function ProductsFilter(props) {
         }));
         updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: selectedProducts });
     };
-    const onFilterChangeSingleSelect = (selectedProduct) => {
-        selectedProduct = {
-            field: SolrKeys.product,
-            value: selectedProduct.label,
-            [SolrKeys.version]: [],
-        };
-        updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: [selectedProduct] });
+    const onFilterChangeSingleSelect = (event, selectedProduct) => {
+        updateFilter(dispatch, {
+            filterKey: SolrPivotKeys.product_version,
+            values: [{ field: SolrKeys.product, value: selectedProduct, [SolrKeys.version]: [] }],
+        });
+        setIsOpen(false);
     };
-    const list = toOptions(props.filterValues, {
-        labelKey: 'value',
-    });
+    const titleId = 'case-list-products-filter';
     // solr is down and solr filter values are not available
     // we get filter values from hydra metadata api
     const singleSelectSolrIsDown = () => {
-        var _a;
-        return (React.createElement(Dropdown, { placeholder: t('Select a product'), "data-tracking-id": "products-filter", id: "case-list-products-filter", title: t(filterNamesMap[SolrKeys.product]), label: t(filterNamesMap[SolrKeys.product]), onChange: onFilterChangeSingleSelect, selectedItem: toOption((_a = filterInfo[SolrPivotKeys.product_version][0]) === null || _a === void 0 ? void 0 : _a.value), list: toOptions(props.allProducts) }));
+        var _a, _b;
+        return (React.createElement(Select, { variant: SelectVariant.single, "aria-label": "Select Input", onToggle: toggleIsOpen, onSelect: onFilterChangeSingleSelect, selections: (_b = (_a = filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value, isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a product'), "data-tracking-id": "products-filter" }, props.allProducts.map((product) => (React.createElement(SelectOption, { key: product, value: product })))));
     };
-    const multiSelect = () => (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Select a product'), filterInfo[SolrPivotKeys.product_version].map((i) => i.value), ' ', props.filterValues.length, t('All selected')), "data-tracking-id": "products-filter", id: "case-list-products-filter", title: t(filterNamesMap[SolrKeys.product]), label: t(filterNamesMap[SolrKeys.product]), onChange: onFilterChangeMultipleSelect, selectedItems: toOptions(filterInfo[SolrPivotKeys.product_version], { labelKey: 'value' }), list: list, searchable: true }));
-    return React.createElement(React.Fragment, null, props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect());
+    const multiSelect = () => (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Select a product'), filterInfo[SolrPivotKeys.product_version].map((i) => i.value), '', props.filterValues.length, t('All selected')), "data-tracking-id": "products-filter", id: "case-list-products-filter", title: t(filterNamesMap[SolrKeys.product]), onChange: onFilterChangeMultipleSelect, selectedItems: toOptions(filterInfo[SolrPivotKeys.product_version], { labelKey: 'value' }), list: toOptions(props.filterValues, {
+            labelKey: 'value',
+        }), searchable: true }));
+    return (React.createElement("div", { className: "pf-c-select" },
+        React.createElement("label", { id: titleId }, t(filterNamesMap[SolrKeys.product])),
+        props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect()));
 }

package/lib/esm/components/case-list/case-list-filters/SeverityFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeverityFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/SeverityFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAa,MAAM,0BAA0B,CAAC;AAUrE,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eAiE3C"}
+{"version":3,"file":"SeverityFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/SeverityFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAU1D,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eA8E3C"}

package/lib/esm/components/case-list/case-list-filters/SeverityFilter.js

@@ -1,6 +1,6 @@
-import { Dropdown, MultiSelectDropDownList } from '@rh-support/components';
-import { getDropdownBtnPlaceholder, toOption, toOptions } from '@rh-support/utils';
-import React, { useContext } from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
@@ -10,25 +10,24 @@ export function SeverityFilter(props) {
     const { t } = useTranslation();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
-    const onFilterChangeMultipleSelect = (selectedSeverities) => {
-        selectedSeverities = selectedSeverities.map((selectedSeverity) => selectedSeverity.label);
-        updateFilter(dispatch, { filterKey: SolrKeys.severity, values: selectedSeverities });
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
+    const onFilterChangeMultipleSelect = (event, selectedSeverities) => {
+        const newState = filterInfo[SolrKeys.severity].includes(selectedSeverities)
+            ? filterInfo[SolrKeys.severity].filter((item) => item !== selectedSeverities)
+            : [...filterInfo[SolrKeys.severity], selectedSeverities];
+        updateFilter(dispatch, { filterKey: SolrKeys.severity, values: newState });
     };
-    const onFilterChangeSingleSelect = (selectedSeverity) => {
-        updateFilter(dispatch, { filterKey: SolrKeys.severity, values: [selectedSeverity.label] });
+    const onFilterChangeSingleSelect = (event, selectedSeverity) => {
+        updateFilter(dispatch, { filterKey: SolrKeys.severity, values: [selectedSeverity] });
+        setIsOpen(false);
     };
-    const list = toOptions(props.filterValues.map((filterValue) => ({
-        key: filterValue.value,
-        value: filterValue.value,
-    })), {
-        labelKey: 'value',
-    });
+    const titleId = 'case-list-severity-filter';
     // solr is down and solr filter values are not available
     // we get filter values from hydra metadata api
-    const singleSelectSolrIsDown = () => (React.createElement(Dropdown, { placeholder: t('Select a severity'), "data-tracking-id": "severity-filter", id: "case-list-severity-filter", title: t(filterNamesMap[SolrKeys.severity]), label: t(filterNamesMap[SolrKeys.severity]), onChange: onFilterChangeSingleSelect, selectedItem: toOption(filterInfo[SolrKeys.severity][0]), list: toOptions(props.allCaseSeverities) }));
-    const multiSelect = () => (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', props.filterValues.length, t('All selected')), "data-tracking-id": "severity-filter", id: "case-list-severity-filter", title: t(filterNamesMap[SolrKeys.severity]), label: t(filterNamesMap[SolrKeys.severity]), onChange: onFilterChangeMultipleSelect, selectedItems: toOptions(filterInfo[SolrKeys.severity].map((filterValue) => ({
-            key: filterValue,
-            value: filterValue,
-        })), { labelKey: 'value' }), list: list }));
-    return React.createElement(React.Fragment, null, props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect());
+    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: toggleIsOpen, onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.severity][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a severity'), "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.allCaseSeverities.map((severity) => (React.createElement(SelectOption, { key: severity, value: severity })))));
+    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a severity'), onToggle: toggleIsOpen, onSelect: onFilterChangeMultipleSelect, selections: filterInfo[SolrKeys.severity], isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
+    return (React.createElement("div", { className: "pf-c-select" },
+        React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.severity])),
+        props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect()));
 }

package/lib/esm/components/case-list/case-list-filters/StatusFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/StatusFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAa,MAAM,0BAA0B,CAAC;AAUrE,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,eA+FzC"}
+{"version":3,"file":"StatusFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/StatusFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQ1D,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,eA4GzC"}

package/lib/esm/components/case-list/case-list-filters/StatusFilter.js

@@ -1,6 +1,5 @@
-import { Dropdown, MultiSelectDropDownList } from '@rh-support/components';
-import { toOption, toOptions } from '@rh-support/utils';
-import React, { useContext } from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
@@ -10,12 +9,17 @@ export function StatusFilter(props) {
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
-    const onFilterChange = (selectedStatus) => {
-        selectedStatus = selectedStatus.map((i) => i.label);
-        updateFilter(dispatch, { filterKey: SolrKeys.status, values: selectedStatus });
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
+    const onFilterChange = (event, selectedStatus) => {
+        const newState = filterInfo[SolrKeys.status].includes(selectedStatus)
+            ? filterInfo[SolrKeys.status].filter((item) => item !== selectedStatus)
+            : [...filterInfo[SolrKeys.status], selectedStatus];
+        updateFilter(dispatch, { filterKey: SolrKeys.status, values: newState });
     };
-    const onFilterChangeSingleSelect = (selectedStatus) => {
-        updateFilter(dispatch, { filterKey: SolrKeys.status, values: [selectedStatus.label] });
+    const onFilterChangeSingleSelect = (event, selectedStatus) => {
+        updateFilter(dispatch, { filterKey: SolrKeys.status, values: [selectedStatus] });
+        setIsOpen(false);
     };
     const getBtnPlaceholder = (btnPlaceholder, selectedValues, type, totalLength, totalLengthString) => {
         if (!selectedValues || (selectedValues && selectedValues.length === 0)) {
@@ -41,18 +45,12 @@ export function StatusFilter(props) {
             }
         }
     };
-    const list = toOptions(props.filterValues.map((filterValue) => ({
-        key: filterValue.value,
-        value: filterValue.value,
-    })), {
-        labelKey: 'value',
-    });
+    const titleId = 'case-list-status-filter';
     // solr is down and solr filter values are not available
     // we get filter values from hydra metadata api
-    const singleSelectSolrIsDown = () => (React.createElement(Dropdown, { placeholder: t('Select a status'), "data-tracking-id": "status-filter", id: "case-list-status-filter", title: t(filterNamesMap[SolrKeys.status]), label: t(filterNamesMap[SolrKeys.status]), onChange: onFilterChangeSingleSelect, selectedItem: toOption(filterInfo[SolrKeys.status][0]), list: toOptions(props.allCaseStatuses) }));
-    const multiSelect = () => (React.createElement(MultiSelectDropDownList, { placeholder: getBtnPlaceholder(t('Select a status'), filterInfo[SolrKeys.status], ' ', props.filterValues.length, t('All selected')), "data-tracking-id": "status-filter", id: "case-list-status-filter", title: t(filterNamesMap[SolrKeys.status]), label: t(filterNamesMap[SolrKeys.status]), onChange: onFilterChange, selectedItems: toOptions(filterInfo[SolrKeys.status].map((filterValue) => ({
-            key: filterValue,
-            value: filterValue,
-        })), { labelKey: 'value' }), list: list }));
-    return React.createElement(React.Fragment, null, props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect());
+    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: toggleIsOpen, onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.status][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a status'), "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.allCaseStatuses.map((status) => (React.createElement(SelectOption, { key: status, value: status })))));
+    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a status'), onToggle: toggleIsOpen, onSelect: onFilterChange, selections: filterInfo[SolrKeys.status], isOpen: isOpen, placeholderText: getBtnPlaceholder(t('Select a status'), filterInfo[SolrKeys.status], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
+    return (React.createElement("div", { className: "pf-c-select" },
+        React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.status])),
+        props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect()));
 }

package/lib/esm/components/case-list/case-list-filters/TypeFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/TypeFilter.tsx"],"names":[],"mappings":"AAWA,UAAU,MAAM;IACZ,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA6CvC"}
+{"version":3,"file":"TypeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/TypeFilter.tsx"],"names":[],"mappings":"AAUA,UAAU,MAAM;IACZ,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAkDvC"}

package/lib/esm/components/case-list/case-list-filters/TypeFilter.js

@@ -1,8 +1,7 @@
-import { MultiSelectDropDownList } from '@rh-support/components';
-import { FeatureAnnouncementKeys, NewFeatureLabel } from '@rh-support/react-context';
-import { getDropdownBtnPlaceholder, toOptions } from '@rh-support/utils';
-import React, { useContext } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import React, { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
@@ -11,12 +10,19 @@ export function TypeFilter(props) {
     const { t } = useTranslation();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
-    const onFilterChangeMultipleSelect = (selectedTypes) => updateFilter(dispatch, {
-        filterKey: SolrKeys.type,
-        values: selectedTypes.map((selectedType) => selectedType.label),
-    });
-    return (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Select a case type'), filterInfo[SolrKeys.type], ' ', props.allCaseTypes.length, t('All selected')), "data-tracking-id": "type-filter", id: "case-list-type-filter", title: t(filterNamesMap[SolrKeys.type]), label: React.createElement("h3", { className: "pull-bottom-narrow" },
-            t(filterNamesMap[SolrKeys.type]),
-            React.createElement(NewFeatureLabel, { "aria-label": "send notification new feature announcement", hasAutoWidth: true, featureName: FeatureAnnouncementKeys.CASE_TYPE_FILTER, headerContent: React.createElement(Trans, null, "New filter available"), position: 'right', bodyContent: React.createElement("div", null,
-                    React.createElement(Trans, null, "You can now filter by case type.")) })), onChange: onFilterChangeMultipleSelect, selectedItems: toOptions(filterInfo[SolrKeys.type]), list: toOptions(props.allCaseTypes) }));
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
+    const onFilterChangeMultipleSelect = (event, selectedTypes) => {
+        const newState = filterInfo[SolrKeys.type].includes(selectedTypes)
+            ? filterInfo[SolrKeys.type].filter((item) => item !== selectedTypes)
+            : [...filterInfo[SolrKeys.type], selectedTypes];
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.type,
+            values: newState,
+        });
+    };
+    const titleId = 'case-list-type-filter';
+    return (React.createElement("div", { className: "pf-c-select" },
+        React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.type])),
+        React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a case type'), onToggle: toggleIsOpen, onSelect: onFilterChangeMultipleSelect, selections: filterInfo[SolrKeys.type], isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a case type'), filterInfo[SolrKeys.type], ' ', props.allCaseTypes.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "type-filter", hasPlaceholderStyle: true }, props.allCaseTypes.map((filterValue) => (React.createElement(SelectOption, { key: filterValue, value: filterValue }))))));
 }

package/lib/esm/components/case-list/case-list-filters/VersionsFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VersionsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/VersionsFilter.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAMxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,CAAC;IAC5B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,EAAE,MAAM,eAmD1E"}
+{"version":3,"file":"VersionsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/VersionsFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAMxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,CAAC;IAC5B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,EAAE,MAAM,eA2D1E"}

package/lib/esm/components/case-list/case-list-filters/VersionsFilter.js

@@ -1,7 +1,6 @@
-import { MultiSelectDropDownList } from '@rh-support/components';
-import { toOptions } from '@rh-support/utils';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 import isEmpty from 'lodash/isEmpty';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys, SolrPivotKeys } from '../../../enums/filters';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
@@ -13,27 +12,26 @@ export function VersionsFilter({ productInfo, productVersionPivot }) {
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
-    const onFilterChange = (selectedVersions, productInfo) => {
-        selectedVersions = selectedVersions.map((i) => i.value);
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
+    const onFilterChange = (event, selectedVer) => {
+        const newVerionState = productInfo.case_version.map((version) => version.value).includes(selectedVer)
+            ? productInfo.case_version.filter((item) => item.value !== selectedVer)
+            : [...productInfo.case_version, { field: SolrKeys.version, value: selectedVer }];
         // find current product from previous state
-        const productState = [...filterInfo[SolrPivotKeys.product_version]];
-        const objIndex = productState.findIndex((item) => item.value === productInfo.value);
+        const productNewState = [...filterInfo[SolrPivotKeys.product_version]];
+        const objIndex = productNewState.findIndex((item) => item.value === productInfo.value);
         // replace product with updated versions
-        productState[objIndex] = {
+        productNewState[objIndex] = {
             field: SolrKeys.product,
             value: productInfo.value,
-            [SolrKeys.version]: selectedVersions.map((version) => ({ field: 'case_version', value: version.value })),
+            [SolrKeys.version]: newVerionState,
         };
-        updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: productState });
-    };
-    const getSelectedVersionsArray = (productValue) => {
-        const selectedVersions = filterInfo[SolrPivotKeys.product_version].find((item) => item.value === productValue);
-        return (selectedVersions && selectedVersions[SolrKeys.version]) || [];
+        updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: productNewState });
     };
     const versions = getVersionValuesForProduct(productVersionPivot, productInfo.value);
-    return (React.createElement(React.Fragment, null, !isEmpty(versions) && (React.createElement(MultiSelectDropDownList, { placeholder: t('Version'), "data-tracking-id": "versions-filter", id: "case-list-versions-filter", title: 'versions dropdown', onChange: (selectedItems) => onFilterChange(selectedItems, productInfo), selectedItems: toOptions(getSelectedVersionsArray(productInfo.value), {
-            labelKey: 'value',
-        }), list: toOptions(versions, {
-            labelKey: 'value',
-        }) || [], className: "pf-c-select filter-chip-version-selector" }))));
+    const titleId = 'case-list-versions-filter';
+    return (React.createElement(React.Fragment, null, !isEmpty(versions) && (React.createElement(React.Fragment, null,
+        React.createElement("label", { hidden: true, htmlFor: titleId }, t('Open versions dropdown')),
+        React.createElement(Select, { variant: SelectVariant.checkbox, "aria-label": t('Version'), onToggle: toggleIsOpen, onSelect: onFilterChange, selections: productInfo.case_version.map((ver) => ver.value), isOpen: isOpen, placeholderText: 'Version', isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "versions-filter", hasPlaceholderStyle: true }, (versions || []).map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value, component: "div" }))))))));
 }

package/lib/esm/components/case-list/case-list-table/ExportCaseListCSV.js

@@ -106,7 +106,7 @@ export function ExportCaseListCSV(props) {
         }
         return tooltipText;
     };
-    return (React.createElement("span", { title: props.isExportCsvDisabled && getTooltipContent() },
+    return (React.createElement("span", { title: (props.isExportCsvDisabled && getTooltipContent()) || '' },
         React.createElement(Button, { variant: "tertiary", isDisabled: isBtnDisabled || props.isExportCsvDisabled, onClick: loggedInUsersAccount.data.secureSupport ? onExportCSVClickSecureSupport : onExportCSVClick, title: btnTitle, "data-tracking-id": "case-list-toolbar-export-csv" }, isFetchingCSVData ? (React.createElement(React.Fragment, null,
             React.createElement(Trans, null, "Exporting CSV"),
             React.createElement("i", { className: "fa fa-circle-o-notch fa-spin fa-fw", "aria-label": "loading" }))) : (React.createElement(Trans, null, "Export CSV")))));

package/lib/esm/components/case-list/case-search/AdvanceSearch.d.ts

@@ -3,7 +3,7 @@ interface IProps {
     onSearchValChange?: (newVal: string) => void;
     onSearchTypeChange?: (newType: CaseSearchQueryType) => void;
     onSearchClear?: () => void;
-    onSearchSubmit: (parsedQuery: string) => void;
+    onSearchSubmit: (type: CaseSearchQueryType, parsedQuery: string) => void;
     onAdvancedSearchValidation: (validation: boolean) => void;
 }
 export declare function AdvanceSearch(props: IProps): JSX.Element;

package/lib/esm/components/case-list/case-search/AdvanceSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvanceSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearch.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAMhE,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,0BAA0B,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eAwV1C"}
+{"version":3,"file":"AdvanceSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearch.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAKhE,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,0BAA0B,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eAgT1C"}

package/lib/esm/components/case-list/case-search/AdvanceSearch.js

@@ -1,14 +1,12 @@
 import { Button } from '@patternfly/react-core';
 import InfoIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CaseSearchQueryType } from '../../../enums/caseSearch';
-import { createFilterStateFromAdvancedQuery } from '../../../utils/caseSearchUtils';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
-import { updateFilterQuery, updateFilterState } from '../CaseListFilterReducer';
+import { updateFilterQuery } from '../CaseListFilterReducer';
 import useAdvanceSearchParser from './useAdvanceSearchParser';
 export function AdvanceSearch(props) {
     const { t } = useTranslation();
@@ -16,17 +14,17 @@ export function AdvanceSearch(props) {
     const { filterQueryInfo } = filterState;
     const isFirstMountRef = useRef(true);
     const dispatch = useContext(CaseListFilterDispatchContext);
-    const [queryString, setQueryString] = useState('');
+    const [inputString, setInputString] = useState('');
     const [autoCompleteList, setAutoCompleteList] = useState([]);
     const dropdownWrapperRef = useRef(null);
     const parseQuery = () => {
         try {
-            parse(queryString);
+            parse(inputString);
             setIsParsingSuccessful(true);
             props.onAdvancedSearchValidation(true);
             try {
                 // to trigger the autocomplete on a valid selection
-                parse(queryString + ' ');
+                parse(inputString + ' ');
             }
             catch (e) {
                 parserErrorRef.current = e;
@@ -37,33 +35,21 @@ export function AdvanceSearch(props) {
             setIsParsingSuccessful(false);
             props.onAdvancedSearchValidation(false);
             parserErrorRef.current = e;
-            autoCompleteSetup(e.expected, queryString.substring(e.location.start.offset, queryString.length));
+            autoCompleteSetup(e.expected, inputString.substring(e.location.start.offset, inputString.length));
         }
     };
     const { parse, parseSafe, parserRef } = useAdvanceSearchParser({ onInit: parseQuery });
     const [isAutoCompleteListVisible, setIsAutoCompleteListVisible] = useState(false);
     const [isParsingSuccessful, setIsParsingSuccessful] = useState(false);
     const parserErrorRef = useRef(null);
-    const { globalMetadataState } = useContext(GlobalMetadataStateContext);
-    const [showComplexQueryError, setShowComplexQueryError] = useState(false);
     const searchInputRef = useRef(null);
     const [selectedItemIndex, setSelectedItemIndex] = useState(null);
-    const isSameFieldIncludedTwice = () => {
-        const allFields = (queryString || '').match(/[\w]+:/g) || [];
-        return allFields.length !== new Set(allFields).size;
-    };
     useEffect(() => {
-        if (queryString === filterQueryInfo.queryString || filterQueryInfo.type === CaseSearchQueryType.BASIC)
+        if (filterQueryInfo.type === CaseSearchQueryType.BASIC)
             return;
-        setQueryString(filterQueryInfo.queryString);
-        filterQueryInfo.queryString &&
-            updateFilterQuery(dispatch, {
-                type: CaseSearchQueryType.ADVANCED,
-                queryString: filterQueryInfo.queryString,
-                parsedQuery: parseSafe(filterQueryInfo.queryString),
-            });
+        setInputString(filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.parsedQuery);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterQueryInfo.queryString]);
+    }, [filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.parsedQuery]);
     useEffect(() => {
         if (isFirstMountRef.current) {
             isFirstMountRef.current = false;
@@ -72,10 +58,9 @@ export function AdvanceSearch(props) {
         if (!parserRef.current)
             return;
         parseQuery();
-        setShowComplexQueryError(false);
-        props.onSearchValChange && props.onSearchValChange(queryString);
+        props.onSearchValChange && props.onSearchValChange(inputString);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [queryString]);
+    }, [inputString]);
     const handleClickOutside = (e) => {
         if (dropdownWrapperRef.current.contains(e.target)) {
             // inside click
@@ -97,7 +82,7 @@ export function AdvanceSearch(props) {
     }, [isAutoCompleteListVisible]);
     const onQueryStringChange = (ev) => {
         const query = ev.target.value;
-        setQueryString(query);
+        setInputString(query);
     };
     const autoCompleteSetup = (expectedArray = null, phrase = '') => {
         const autocomplete = [];
@@ -157,7 +142,7 @@ export function AdvanceSearch(props) {
         }
     };
     const onItemClick = (itemValue) => {
-        setQueryString(queryString.substring(0, parserErrorRef.current.location.start.offset) + itemValue);
+        setInputString(inputString.substring(0, parserErrorRef.current.location.start.offset) + itemValue);
         searchInputRef.current.focus();
     };
     const onInputFocus = () => {
@@ -204,51 +189,46 @@ export function AdvanceSearch(props) {
         return false;
     };
     const onClear = () => {
-        setQueryString('');
+        setInputString('');
         setAutoCompleteList([]);
         setIsAutoCompleteListVisible(false);
         props.onSearchClear && props.onSearchClear();
     };
     const onSearchSubmit = () => {
-        const parsedQuery = parseSafe(queryString);
+        const parsedQuery = parseSafe(inputString);
         setIsAutoCompleteListVisible(false);
-        props.onSearchSubmit && props.onSearchSubmit(parsedQuery);
-    };
-    const canSwitchToBasicSearch = () => {
-        return !(queryString || '').match(/ or /i) && !isSameFieldIncludedTwice();
+        props.onSearchSubmit && props.onSearchSubmit(CaseSearchQueryType.ADVANCED, parsedQuery);
     };
     const onBasicClick = () => {
-        if (!canSwitchToBasicSearch()) {
-            setShowComplexQueryError(true);
-            return;
-        }
-        if (queryString) {
-            const updatedFilterState = createFilterStateFromAdvancedQuery(parseSafe(queryString).replace(/ and /g, ' AND ').replace(/ or /g, ' OR '), globalMetadataState, filterState);
-            if (updatedFilterState.filterQueryInfo.queryString === '') {
+        var _a, _b;
+        if (inputString) {
+            if (((_a = filterState.filterQueryInfo) === null || _a === void 0 ? void 0 : _a.queryString) === '') {
                 props.onSearchValChange && props.onSearchValChange('');
             }
-            updateFilterState(dispatch, updatedFilterState);
+            updateFilterQuery(dispatch, {
+                type: CaseSearchQueryType.BASIC,
+                queryString: ((_b = filterState.filterQueryInfo) === null || _b === void 0 ? void 0 : _b.queryString) || '',
+                parsedQuery: '',
+            });
         }
         else {
-            updateFilterQuery(dispatch, Object.assign(Object.assign({}, filterQueryInfo), { type: CaseSearchQueryType.BASIC }));
+            updateFilterQuery(dispatch, Object.assign(Object.assign({}, filterState.filterQueryInfo), { type: CaseSearchQueryType.BASIC }));
         }
         props.onSearchTypeChange && props.onSearchTypeChange(CaseSearchQueryType.BASIC);
     };
-    const isQueryInValid = (queryString && !isParsingSuccessful) || showComplexQueryError;
+    const isQueryInValid = inputString && !isParsingSuccessful;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "pf-c-select pf-m-expanded", ref: dropdownWrapperRef },
             React.createElement("div", { className: "pf-c-select__toggle pf-m-typeahead" },
                 React.createElement("div", { className: "pf-c-select__toggle-wrapper" },
-                    React.createElement("input", { value: queryString, onChange: onQueryStringChange, onFocus: onInputFocus, ref: searchInputRef, onKeyDown: onKeyDown, placeholder: t('i18nEnterSolrQuery', 'Enter SOLR query, for example:  severity:"1 (Urgent)" and -status:"Waiting on Customer"'), className: `pf-c-form-control pf-c-select__toggle-typeahead ${queryString && isParsingSuccessful && !showComplexQueryError ? 'pf-m-success' : ''}`, type: "text", "aria-invalid": isQueryInValid ? true : false, autoComplete: "off", id: "advance-search-typeahead", "aria-label": t('Enter search query'), "aria-describedby": "advance-query-error-helper" })),
-                queryString && (React.createElement(Button, { onClick: onClear, className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", variant: "plain", "data-tracking-id": "clear-search", "aria-label": t('Clear this search') },
+                    React.createElement("input", { value: inputString, onChange: onQueryStringChange, onFocus: onInputFocus, ref: searchInputRef, onKeyDown: onKeyDown, placeholder: t('i18nEnterSolrQuery', 'Enter SOLR query, for example:  severity:"1 (Urgent)" and -status:"Waiting on Customer"'), className: `pf-c-form-control pf-c-select__toggle-typeahead ${inputString && isParsingSuccessful ? 'pf-m-success' : ''}`, type: "text", "aria-invalid": isQueryInValid ? true : false, autoComplete: "off", id: "advance-search-typeahead", "aria-label": t('Enter search query'), "aria-describedby": "advance-query-error-helper" })),
+                inputString && (React.createElement(Button, { onClick: onClear, className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", variant: "plain", "data-tracking-id": "clear-search", "aria-label": t('Clear this search') },
                     React.createElement(TimesCircleIcon, null)))),
-            showComplexQueryError && (React.createElement("p", { className: "pf-c-form__helper-text pf-m-error", style: { color: '#c9190b' }, id: "advance-query-error-helper", "aria-live": "polite" },
-                React.createElement(Trans, null, "The advance query you entered is too complex to switch back to a basic search. Try revising or clearing this query."))),
             isAutoCompleteListVisible && (React.createElement("ul", { className: "pf-c-select__menu", "aria-labelledby": "advance-search-typeahead-label", role: "listbox" }, autoCompleteList.map((item, index) => (React.createElement("li", { key: index, role: "presentation", className: `pf-c-select__menu-wrapper ${selectedItemIndex === index ? 'pf-m-focus' : ''}` },
                 React.createElement("button", { type: "button", onClick: (e) => onItemClick(item.value), className: "pf-c-select__menu-item", "aria-selected": selectedItemIndex === index ? true : false, role: "option" }, item.display))))))),
-        React.createElement(Button, { type: "button", variant: "primary", "data-tracking-id": "case-list-adv-search-button", className: "pf-u-ml-sm", onClick: onSearchSubmit, isDisabled: (isEmpty(queryString) && isEmpty(filterQueryInfo.queryString)) || !isParsingSuccessful },
+        React.createElement(Button, { type: "button", variant: "primary", "data-tracking-id": "case-list-adv-search-button", className: "pf-u-ml-sm", onClick: onSearchSubmit, isDisabled: (isEmpty(inputString) && isEmpty(filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.parsedQuery)) || !isParsingSuccessful },
             React.createElement(Trans, null, "Search")),
-        React.createElement(Button, { variant: "link", isDisabled: showComplexQueryError, onClick: onBasicClick, "data-tracking-id": "case-list-basic-toggle-button" },
+        React.createElement(Button, { variant: "link", onClick: onBasicClick, "data-tracking-id": "case-list-basic-toggle-button" },
             React.createElement(Trans, null, "Basic")),
         React.createElement(Button, { variant: "link", className: "pf-u-px-0", component: "a", rel: "noopener noreferrer", target: "_blank", href: "https://source.redhat.com/communitiesatredhat/applications/integration-community-of-practice/all/testallin/all_in_blog/advanced_search_in_the_customer_support_tool", "data-tracking-id": "advance-search-guide" },
             React.createElement(InfoIcon, null))));

package/lib/esm/components/case-list/case-search/BookmarkedSearchesSelector.js

@@ -149,7 +149,7 @@ export function BookmarkedSearchesSelector(props) {
         .sort()
         .map((bookmarkedSearch) => {
         var _a;
-        return (React.createElement("li", { className: "pf-c-dropdown__menu-item pf-u-p-xs" },
+        return (React.createElement("li", { className: "pf-c-dropdown__menu-item pf-u-p-xs", key: bookmarkedSearch },
             React.createElement(Split, { key: `split-parent-${bookmarkedSearch}` },
                 React.createElement(SplitItem, { isFilled: true, key: `split-left-${bookmarkedSearch}` },
                     React.createElement(Button, { variant: ButtonVariant.plain, isBlock: true, className: "pf-u-text-align-left", onClick: onBookmarkSelectorChange(bookmarkedSearch, bookmarkedSearches[bookmarkedSearch], true) },

package/lib/esm/components/case-list/case-search/CaseSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/CaseSearch.tsx"],"names":[],"mappings":"AAeA,UAAU,MAAM;IACZ,sBAAsB,EAAE,MAAM,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAqJvC"}
+{"version":3,"file":"CaseSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/CaseSearch.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;IACZ,sBAAsB,EAAE,MAAM,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAuKvC"}

package/lib/esm/components/case-list/case-search/CaseSearch.js

@@ -1,17 +1,18 @@
 import { Button, SearchInput } from '@patternfly/react-core';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { AbilityContext, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CaseSearchQueryType } from '../../../enums/caseSearch';
-import { SolrKeys } from '../../../enums/filters';
-import { createAdvancedSearchQueryFromFilterState } from '../../../utils/caseSearchUtils';
+import { createFilterStateFromAdvancedQuery, createUserFriendlyQueryFromFilterStateAdvancedSearch, } from '../../../utils/caseSearchUtils';
 import { useCaseListStateContext } from '../CaseListContext';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
-import { initialFilterInfo, updateFilterQuery, updateFilterState } from '../CaseListFilterReducer';
+import { updateFilterQuery, updateFilterState } from '../CaseListFilterReducer';
 import { AdvanceSearch } from './AdvanceSearch';
 import { BookmarkedSearchesSelector } from './BookmarkedSearchesSelector';
 export function CaseSearch(props) {
+    const { globalMetadataState } = useContext(GlobalMetadataStateContext);
     const { t } = useTranslation();
     const ability = useContext(AbilityContext);
     const canUseAdvancedSearch = ability.can(resourceActions.PATCH, resources.CASE_LIST, CaseListFields.ADVANCED_SEARCH);
@@ -22,12 +23,10 @@ export function CaseSearch(props) {
     const [isAdvancedSearchValid, setIsAdvancedSearchValid] = useState(true);
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { isFetching } = useCaseListStateContext();
+    // on queryString and parsedQuery change need to update search
     useEffect(() => {
-        if (searchVal === filterQueryInfo.queryString)
-            return;
         setSearchVal(filterQueryInfo.queryString);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterQueryInfo.queryString]);
+    }, [filterQueryInfo]);
     useEffect(() => {
         if (searchType === filterQueryInfo.type)
             return;
@@ -50,18 +49,20 @@ export function CaseSearch(props) {
     const onCaseSearch = (parsedQuery = '', queryString = searchVal) => {
         updateFilterQuery(dispatch, { type: searchType, queryString, parsedQuery });
     };
+    const onCaseSearchAdvanced = (type, parsedQuery = '', queryStringInputBox = searchVal) => {
+        const newFilterState = createFilterStateFromAdvancedQuery(parsedQuery.replace(/ and /g, ' AND ').replace(/ or /g, ' OR '), globalMetadataState, filterState, queryStringInputBox, type);
+        // here should create filter
+        updateFilterState(dispatch, newFilterState);
+    };
     const onSearchTypeChange = (newType) => {
+        var _a, _b;
         if (newType === CaseSearchQueryType.ADVANCED) {
-            const queryStr = createAdvancedSearchQueryFromFilterState(filterState.filterInfo, searchVal, [
-                SolrKeys.accountNumber,
-                SolrKeys.escalation,
-            ]);
+            const parsedQuery = createUserFriendlyQueryFromFilterStateAdvancedSearch(filterState.filterInfo, (_a = filterState.filterQueryInfo) === null || _a === void 0 ? void 0 : _a.queryString, true);
             updateFilterQuery(dispatch, {
                 type: CaseSearchQueryType.ADVANCED,
-                queryString: queryStr,
-                parsedQuery: '',
+                queryString: (_b = filterState.filterQueryInfo) === null || _b === void 0 ? void 0 : _b.queryString,
+                parsedQuery,
             });
-            updateFilterState(dispatch, { filterInfo: initialFilterInfo });
         }
         setSearchType(newType);
     };
@@ -91,7 +92,7 @@ export function CaseSearch(props) {
     };
     const renderAdvanceSearch = () => {
         return canUseAdvancedSearch ? (React.createElement(React.Fragment, null,
-            React.createElement(AdvanceSearch, { onSearchValChange: onSearchValChange, onSearchClear: clearSearchVal, onSearchSubmit: onCaseSearch, onSearchTypeChange: onSearchTypeChange, onAdvancedSearchValidation: (isValid) => setIsAdvancedSearchValid(isValid) }))) : (React.createElement(React.Fragment, null));
+            React.createElement(AdvanceSearch, { onSearchValChange: onSearchValChange, onSearchClear: clearSearchVal, onSearchSubmit: onCaseSearchAdvanced, onSearchTypeChange: onSearchTypeChange, onAdvancedSearchValidation: (isValid) => setIsAdvancedSearchValid(isValid) }))) : (React.createElement(React.Fragment, null));
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("form", { onSubmit: handleSubmit, onKeyDown: handleSearchInputKeyDown },