@rh-support/cases 2.1.30 → 2.1.32

package/lib/esm/components/case-list/CaseList.js

@@ -346,7 +346,7 @@ export function CaseList(props) {
                 React.createElement(CaseListFilterChips, { productVersionPivotValues: get(pivotValues, SolrPivotKeys.product_version, []), isSolrSearchDown: isSolrSearchDown })))),
         React.createElement("section", { className: "case-search-bottom" },
             isBasicSearchMode && (React.createElement("aside", { className: `case-search-filters ${((_a = filterSectionRef.current) === null || _a === void 0 ? void 0 : _a.expanded) ? '' : 'collapsed'}` },
-                React.createElement("h3", { className: "filter-header" }, ((_b = filterSectionRef.current) === null || _b === void 0 ? void 0 : _b.expanded) ? (React.createElement(React.Fragment, null,
+                React.createElement("h2", { className: "filter-header" }, ((_b = filterSectionRef.current) === null || _b === void 0 ? void 0 : _b.expanded) ? (React.createElement(React.Fragment, null,
                     React.createElement(Button, { variant: "link", isActive: true, title: t('Collapse filter section'), onClick: onToggleFilterBtnClick, iconPosition: "right", icon: isXLScreen ? React.createElement(AngleDoubleLeftIcon, null) : React.createElement(AngleDoubleUpIcon, null) },
                         React.createElement("span", null,
                             React.createElement(Trans, null, "Filters"))))) : (React.createElement(Button, { variant: "link", isActive: false, title: t('Expand filter section'), onClick: onToggleFilterBtnClick, iconPosition: "right", icon: isXLScreen ? React.createElement(AngleDoubleRightIcon, null) : React.createElement(AngleDoubleDownIcon, null) }, isXLScreen ? null : (React.createElement("span", null,

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

@@ -1 +1 @@
-{"version":3,"file":"CreatorSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilter.tsx"],"names":[],"mappings":"AA+BA,eAAO,MAAM,WAAW,0BAIvB,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;GAA6E,CAAC;AAE1G,eAAO,MAAM,kBAAkB,iEAyC9B,CAAC;AAEF,wBAAgB,oBAAoB,gBAgOnC"}
+{"version":3,"file":"CreatorSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilter.tsx"],"names":[],"mappings":"AAiCA,eAAO,MAAM,WAAW,0BAIvB,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;GAA6E,CAAC;AAE1G,eAAO,MAAM,kBAAkB,iEAyC9B,CAAC;AAEF,wBAAgB,oBAAoB,gBA0OnC"}

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

@@ -8,12 +8,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts } from '@cee-eng/hydrajs';
-import { Button, MenuToggle, Select, SelectGroup, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import { Button, MenuToggle, Select, SelectGroup, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
 import { LoadingIndicator, useFetch, useSelectKeyboardNavigator } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
-import { isEmpty } from 'lodash';
+import { isEmpty, isNull } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 import uniqBy from 'lodash/uniqBy';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -92,8 +93,11 @@ export function CreatorSsoNameFilter() {
     const externalInputRef = useRef();
     const [externalContactList, setExternalContactList] = useState([]);
     const [isExternalOpen, setIsExternalOpen] = useState(false);
+    const [noResults, setNoResults] = useState(false);
     const [externalQuery, setExternalQuery] = useState('');
     const onSelectExternal = (contact) => {
+        if (isNull(contact) || isUndefined(contact))
+            return;
         let list = [];
         if (selectedExternalContacts.some((item) => item.value === contact.value)) {
             list = selectedExternalContacts.filter((item) => item.value !== contact.value);
@@ -117,7 +121,8 @@ export function CreatorSsoNameFilter() {
     const filteredOptions = useMemo(() => {
         const filteredValues = getFilterValues(externalContactList, own);
         const input = new RegExp(externalQuery, 'i');
-        const newOptions = filteredValues.filter((v) => input.test(v.value || ''));
+        const newOptions = filteredValues.filter((v) => input.test(v.label || ''));
+        setNoResults(isEmpty(newOptions));
         return newOptions;
     }, [externalContactList, own, externalQuery]);
     const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
@@ -173,19 +178,25 @@ export function CreatorSsoNameFilter() {
     }, [dispatch, isExternalNonOrgAdmin, loggedInUserRights.data]);
     const filteredExternalList = useMemo(() => {
         return [
+            ...(noResults
+                ? [
+                    React.createElement("div", { key: "no-results", className: "pf-v5-u-p-sm" },
+                        React.createElement(Trans, null, "No results found")),
+                ]
+                : []),
             ...dropdownHeader.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index, value: contact, hasCheckbox: true, isSelected: selectedExternalContacts.some((c) => c.value === contact.value) }, contact.label))),
             ...(!isEmpty(filteredOptions)
                 ? [
                     React.createElement("div", { className: "pf-v5-c-divider", role: "separator", key: "separator" }),
                     React.createElement(SelectGroup, { key: "created-or-owned-by-accounts-group" },
-                        React.createElement("h3", { className: "subheading subheading-sm pf-v5-u-pl-md" },
+                        React.createElement("h6", { className: "pf-v5-u-pl-md" },
                             React.createElement(Trans, null, "Created or owned by")),
                         filteredOptions.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index + dropdownHeader.length, value: contact, hasCheckbox: true, isSelected: selectedExternalContacts.some((c) => c.value === contact.value) }, contact.label)))),
                 ]
                 : []),
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filteredOptions, selectedExternalContacts, focusedItemIndex]);
+    }, [filteredOptions, selectedExternalContacts, focusedItemIndex, noResults]);
     const onExternalQueryChange = (_v, query) => {
         setExternalQuery(query);
     };
@@ -199,5 +210,6 @@ export function CreatorSsoNameFilter() {
     return (React.createElement("div", null,
         React.createElement("label", { htmlFor: "case-list-username-filter" },
             React.createElement(Trans, null, filterNamesMap['usernameFilterTitle'])),
-        !loggedInUserRights.data.isInternal() ? (React.createElement(Select, { id: "external-ssousername-filter", "data-tracking-id": "external-ssousername-filter", isOpen: isExternalOpen, onOpenChange: () => setIsExternalOpen(false), toggle: externalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectExternal(v) }, filteredExternalList)) : (React.createElement(InternalSsoNameFilter, null))));
+        !loggedInUserRights.data.isInternal() ? (React.createElement(Select, { id: "external-ssousername-filter", "data-tracking-id": "external-ssousername-filter", isOpen: isExternalOpen, onOpenChange: () => setIsExternalOpen(false), toggle: externalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectExternal(v) },
+            React.createElement(SelectList, null, filteredExternalList))) : (React.createElement(InternalSsoNameFilter, null))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"InternalSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/InternalSsoNameFilter.tsx"],"names":[],"mappings":"AAgCA,MAAM,CAAC,OAAO,UAAU,qBAAqB,gBAsQ5C"}
+{"version":3,"file":"InternalSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/InternalSsoNameFilter.tsx"],"names":[],"mappings":"AAkCA,MAAM,CAAC,OAAO,UAAU,qBAAqB,gBA6R5C"}

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

@@ -8,13 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { contacts } from '@cee-eng/hydrajs';
-import { Button, Flex, FlexItem, MenuToggle, Select, SelectGroup, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, MenuToggle, Select, SelectGroup, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
 import { LoadingIndicator, useFetch, useSelectKeyboardNavigator } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
-import { isUndefined } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
@@ -39,6 +40,7 @@ export default function InternalSsoNameFilter() {
     const [internalContactList, setInternalContactList] = useState([]);
     const [renderedList, setRenderedList] = useState([]);
     const [isInternalOpen, setIsInternalOpen] = useState(false);
+    const [noResults, setNoResults] = useState(false);
     const [internalQuery, setInternalQuery] = useState('');
     const filteredOptions = getFilterValues(renderedList, own);
     const dropdownHeader = [
@@ -55,7 +57,7 @@ export default function InternalSsoNameFilter() {
         setRenderedList(internalContactList.slice(0, PER_PAGE));
     }, [internalContactList]);
     const onSelectInternal = (contact) => {
-        if (isUndefined(contact) || contact === 'show-more')
+        if (isNull(contact) || isUndefined(contact) || contact === 'show-more')
             return;
         let list = [];
         if (selectedInternalContacts.some((item) => item.value === contact.value)) {
@@ -137,6 +139,7 @@ export default function InternalSsoNameFilter() {
         const contacts = response && response.items && response.items.length !== 0
             ? response.items.filter((c) => !isEmpty(c.ssoUsername))
             : [];
+        setNoResults(isEmpty(contacts));
         setInternalContactList(contacts);
     });
     const onDisplayMoreClick = () => {
@@ -145,12 +148,24 @@ export default function InternalSsoNameFilter() {
     };
     const filteredInternalList = useMemo(() => {
         return [
+            ...(isFetchingInternalContacts
+                ? [
+                    React.createElement("div", { key: "searching", className: "pf-v5-u-p-sm" },
+                        React.createElement(Trans, null, "Searching...")),
+                ]
+                : []),
+            ...(noResults && !isFetchingInternalContacts
+                ? [
+                    React.createElement("div", { key: "no-results", className: "pf-v5-u-p-sm" },
+                        React.createElement(Trans, null, "No results found")),
+                ]
+                : []),
             ...dropdownHeader.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index, value: contact, hasCheckbox: true, isSelected: selectedInternalContacts.some((c) => c.value === contact.value) }, contact.label))),
             ...(!isEmpty(filteredOptions)
                 ? [
                     React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
                     React.createElement(SelectGroup, null,
-                        React.createElement("h3", { className: "subheading subheading-sm pf-v5-u-pl-md" },
+                        React.createElement("h6", { className: "pf-v5-u-pl-md" },
                             React.createElement(Trans, null, "Created or owned by")),
                         filteredOptions.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index + dropdownHeader.length, value: contact, hasCheckbox: true, isSelected: selectedInternalContacts.some((c) => c.value === contact.value) }, contact.label)))),
                 ]
@@ -167,7 +182,15 @@ export default function InternalSsoNameFilter() {
                 : []),
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [internalContactList, own, selectedInternalContacts, renderedList, focusedItemIndex]);
+    }, [
+        internalContactList,
+        own,
+        selectedInternalContacts,
+        renderedList,
+        focusedItemIndex,
+        isFetchingInternalContacts,
+        noResults,
+    ]);
     const onInternalQueryChange = (_v, query) => {
         setInternalQuery(query);
         onSearchAsync(query);
@@ -179,5 +202,6 @@ export default function InternalSsoNameFilter() {
         React.createElement(TextInputGroup, { isPlain: true },
             React.createElement(TextInputGroupMain, { value: internalQuery, onClick: onInternalToggle, onKeyDown: onInputKeyDown, placeholder: getDropdownBtnPlaceholder(t('Search for a name'), selectedInternalContacts.map((i) => i.label), ' ', filteredInternalList.length, t('All contacts')), onChange: onInternalQueryChange, isExpanded: isInternalOpen, innerRef: internalInputRef }),
             React.createElement(TextInputGroupUtilities, null, !isEmpty(internalQuery) && (React.createElement(Button, { variant: "plain", onClick: () => setInternalQuery(''), isDisabled: isFetchingInternalContacts, "aria-label": t('Clear') }, isFetchingInternalContacts ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true }))))))));
-    return (React.createElement(Select, { id: "internal-ssousername-filter", "data-tracking-id": "internal-ssousername-filter", isOpen: isInternalOpen, onOpenChange: () => setIsInternalOpen(false), toggle: internalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectInternal(v) }, filteredInternalList));
+    return (React.createElement(Select, { id: "internal-ssousername-filter", "data-tracking-id": "internal-ssousername-filter", isOpen: isInternalOpen, onOpenChange: () => setIsInternalOpen(false), toggle: internalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectInternal(v) },
+        React.createElement(SelectList, null, filteredInternalList)));
 }

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":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAW1D,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,eA8G3C"}
+{"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;AAW1D,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,eAgH3C"}

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

@@ -59,7 +59,8 @@ export function ProductsFilter(props) {
     const onFilter = (_, value) => {
         if (!value)
             return getProductSelectOptions(productOptions);
-        const input = new RegExp(value, 'i');
+        const formattedValue = value === null || value === void 0 ? void 0 : value.replace(/\\/g, ''); // Removes '\' from search query as it creates SyntaxError for RegEx
+        const input = new RegExp(formattedValue, 'i');
         const newOptions = productOptions.filter((product) => input.test(product.value));
         return getProductSelectOptions(newOptions);
     };

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

@@ -33,5 +33,5 @@ export function VersionsFilter({ productInfo, productVersionPivot }) {
     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, { className: "version-filter-chip", variant: SelectVariant.checkbox, "aria-label": t('Version'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), 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" }))))))));
+        React.createElement(Select, { className: "version-filter-chip pf-v5-u-xs", variant: SelectVariant.checkbox, "aria-label": t('Version'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), 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/css/caseList.css

@@ -272,7 +272,7 @@
 }
 
 .case-search-filters .filter-header {
-    background-color: #dedede;
+    background-color: #f2f2f2;
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     padding: 0.98rem 1.35rem;
@@ -552,7 +552,7 @@
 
 @media (min-width: 1800px) {
     /*  Issue Summary */
-    th.pf-c-table__sort[data-label='Issue summary'],
+    th.pf-v5-c-table__sort[data-label='Issue summary'],
     .case-list-table tbody > tr > :nth-child(3) {
         min-width: 450px;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/cases",
-    "version": "2.1.30",
+    "version": "2.1.32",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -26,7 +26,7 @@
         "lib/**/*"
     ],
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.16.33",
+        "@cee-eng/hydrajs": "4.16.39",
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/pfe-collapse": "1.12.3",
         "@patternfly/react-core": "5.1.1",
@@ -41,16 +41,16 @@
         "solr-query-builder": "1.0.1"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.16.33",
+        "@cee-eng/hydrajs": "4.16.39",
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/pfe-collapse": "1.12.3",
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
-        "@rh-support/components": "2.1.26",
-        "@rh-support/react-context": "2.1.29",
+        "@rh-support/components": "2.1.28",
+        "@rh-support/react-context": "2.1.31",
         "@rh-support/types": "2.0.2",
-        "@rh-support/user-permissions": "2.1.19",
-        "@rh-support/utils": "2.1.12",
+        "@rh-support/user-permissions": "2.1.20",
+        "@rh-support/utils": "2.1.13",
         "i18next": "^19.0.1",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
@@ -93,5 +93,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "ed9cba460bdbf0d0104fe6e8f21a0ca554bdaee8"
+    "gitHead": "d17dacfd35aa08c446f37c8f0f92760346b8eb7a"
 }