@rh-support/manage 2.6.1 → 2.32.2-prodBackup

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentEditor.js

@@ -149,13 +149,13 @@ export function TopContentEditor() {
         React.createElement(TopContentHeader, null),
         !topContentResponse.isFetching && topContentResponse.isError && (React.createElement(Alert, { isInline: true, variant: AlertVariant.danger, title: React.createElement(Trans, null, "Error loading Top Content") })),
         React.createElement(TopContentProductVersionSelector, { selectedProduct: selectedProduct, selectedVersion: selectedVersion, onProductChange: onProductChange, onVersionChange: onVersionChange }),
-        !topContentResponse.isFetching && (React.createElement("div", { className: "toolbar" },
+        !topContentResponse.isFetching && (React.createElement("div", { className: "toolbar secondary-toolbar" },
             React.createElement(TopContentSearch, { dataTrackingId: "top-content-filter-manage", topContentData: flagContentEditState, onSearch: onSearch, topContentResultsWrapperRef: topContentResultsRef, searchQuery: searchQuery, setSearchQuery: setSearchQuery, className: "toolbar-content", isDisabled: isEmpty(flagContentEditState) }),
-            React.createElement("div", { className: "toolbar-content pf-v5-u-ml-md" },
+            React.createElement("div", { className: "toolbar-content pf-v6-u-ml-md" },
                 React.createElement("label", { htmlFor: 'tag-selector' },
                     React.createElement(Trans, null, "All tags")),
-                React.createElement(TagsSelector, { tagOptions: tags, onChange: onTagFilterChange, selectedTags: filteredTags, disabled: isEmpty(flagContentEditState) })))),
-        React.createElement("div", { className: "top-content-manage-wrapper pf-v5-u-pt-md" },
+                React.createElement(TagsSelector, { typeahead: true, tagOptions: tags, onChange: onTagFilterChange, selectedTags: filteredTags, disabled: isEmpty(flagContentEditState) })))),
+        React.createElement("div", { className: "top-content-manage-wrapper pf-v6-u-p-md" },
             !topContentResponse.isFetching && React.createElement(TopContentSuggestion, { searchQuery: searchQuery }),
             topContentResponse.isFetching ? (React.createElement(Bullseye, null,
                 React.createElement(EmptyState, { variant: EmptyStateVariant.full },
@@ -166,7 +166,7 @@ export function TopContentEditor() {
                         provided.innerRef(el);
                         topContentResultsRef.current = el;
                     } }),
-                    React.createElement(Accordion, { asDefinitionList: true },
+                    React.createElement(Accordion, { asDefinitionList: true, togglePosition: "start" },
                         !topContentResponse.isFetching &&
                             filteredTC.map((category, i) => (React.createElement("div", { key: `div-${i}-${category.id}` },
                                 category.catMode === CategoryMode.EXISTING_SECTION && (React.createElement(Draggable, { draggableId: `c${category.id}`, index: i, isDragDisabled: !isArrangingCats, key: `c-${i}-${category.id}` }, (provided, snapshot) => category.helperText ? (React.createElement(Tooltip, { content: React.createElement("div", null, category.helperText) },
@@ -179,15 +179,14 @@ export function TopContentEditor() {
                                         : category.id === categoryToOpen, category: category, provided: provided, innerRef: provided.innerRef, isArrangingCats: isArrangingCats, snapshot: snapshot })))),
                                 category.catMode === CategoryMode.NEW_SECTION && (React.createElement(TopContentCategoryNew, { category: category, key: 'new-section', version: newCategoryVersion }))))),
                         provided.placeholder),
-                    React.createElement("div", { className: "pf-v5-u-p-md" },
+                    React.createElement("div", { className: "pf-v6-u-p-md" },
                         showSectionFooter && (React.createElement(React.Fragment, null,
                             isCategoryLimitReached && React.createElement(CategoryLimit, null),
                             React.createElement(Button, { variant: "primary", onClick: () => onAddCategory(isContentOnlyForMajorVersion, false, selectedVersion), isDisabled: isCategoryLimitReached, id: "add-new-section-topcontent", "data-tracking-id": "add-new-section-topcontent" },
                                 React.createElement(Trans, null, "Add a new section")),
-                            ' ',
-                            React.createElement(Button, { variant: "secondary", onClick: arrangeSection, isDisabled: flagContentEditState.length < 2 },
+                            React.createElement(Button, { variant: "secondary", className: "pf-v6-u-ml-sm", onClick: arrangeSection, isDisabled: flagContentEditState.length < 2 },
                                 React.createElement(Trans, null, "Arrange section")),
-                            isMajorOrNamedVersion(selectedVersion) && (React.createElement(Button, { variant: "link", className: "pf-v5-u-float-right", isInline: true, onClick: onOpenModal },
+                            isMajorOrNamedVersion(selectedVersion) && (React.createElement(Button, { variant: "link", className: "pf-v6-u-float-right pf-v6-u-ml-sm", isInline: true, onClick: onOpenModal },
                                 React.createElement(Trans, null, "View performance"))))),
                         isArrangingCats && (React.createElement(React.Fragment, null,
                             React.createElement(Button, { variant: "primary", onClick: onSaveArrangement },

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestion.js

@@ -34,7 +34,7 @@ export const TopContentSuggestion = ({ searchQuery = '' }) => {
         if (ref.current == null)
             return;
         setExpanded(!isEmpty(searchQuery));
-        const containers = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div.pf-v5-c-card');
+        const containers = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div.pf-v6-c-card');
         const markInstance = new Mark(containers);
         markInstance.unmark({
             done: () => {
@@ -46,7 +46,7 @@ export const TopContentSuggestion = ({ searchQuery = '' }) => {
     }, [searchedContent, searchQuery]);
     if (isEmpty(searchedContent))
         return React.createElement(React.Fragment, null);
-    return (React.createElement(Panel, { variant: "raised", className: "pf-v5-u-mx-md pf-v5-u-p-md top-content-panel", ref: ref },
+    return (React.createElement(Panel, { variant: "raised", className: "pf-v6-u-mx-md pf-v6-u-p-md top-content-panel", ref: ref },
         React.createElement(PanelMain, null,
             React.createElement(PanelMainBody, null,
                 React.createElement(ExpandableSection, { onToggle: onToggle, isExpanded: isExpanded, toggleContent: React.createElement(Title, { headingLevel: "h6", className: "accordion_title" },

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHint.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, ButtonVariant, Card, CardBody, Truncate } from '@patternfly/react-core';
+import { Button, Card, CardBody, Truncate } from '@patternfly/react-core';
 import { ToastNotification, useConfirmation } from '@rh-support/components';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -32,7 +32,6 @@ export const TopContentSuggestionHint = ({ resources }) => {
                 yield confirmation({
                     catchOnCancel: true,
                     confirmText: t('Yes, I am sure'),
-                    confirmButtonVariant: ButtonVariant.danger,
                     description: ignoreModalContent,
                 });
                 setIsRemoving(true);
@@ -50,12 +49,12 @@ export const TopContentSuggestionHint = ({ resources }) => {
             setIsRemoving(false);
         }
     });
-    return !isAccepted ? (React.createElement(Card, { className: "pf-v5-u-m-sm card-hint" },
+    return !isAccepted ? (React.createElement(Card, { className: "pf-v6-u-m-sm card-hint" },
         React.createElement(CardBody, { className: "card-body" },
             React.createElement("span", { className: "hint-title", "data-testid": "suggestion-content-title" },
                 React.createElement(Truncate, { content: resources === null || resources === void 0 ? void 0 : resources.resourceTitle })),
-            React.createElement("span", { className: "pf-v5-u-float-right" },
-                React.createElement(Button, { variant: "link", isInline: true, className: "pf-v5-u-mr-xl", onClick: () => setAccepted(true), title: "Accept" },
+            React.createElement("span", { className: "pf-v6-u-float-right" },
+                React.createElement(Button, { variant: "link", isInline: true, className: "pf-v6-u-mr-xl", onClick: () => setAccepted(true), title: "Accept" },
                     React.createElement("b", null,
                         React.createElement(Trans, null, "Accept"))),
                 React.createElement(Button, { variant: "link", isInline: true, onClick: onIgnore, isDisabled: isRemoving },

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentSuggestionHintAccept.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AASrH,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAgBhE,UAAU,MAAM;IACZ,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,mBAAmB,CAAC;CAClC;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAAC,MAAM,CA2PrD,CAAC"}
+{"version":3,"file":"TopContentSuggestionHintAccept.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAyBrH,OAAc,EAAE,EAAE,EAA6C,MAAM,OAAO,CAAC;AAgB7E,UAAU,MAAM;IACZ,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,mBAAmB,CAAC;CAClC;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAAC,MAAM,CAuTrD,CAAC"}

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestionHintAccept.js

@@ -7,15 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, Card, CardBody, Form, FormGroup, TextInput, Tooltip, ValidatedOptions } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Button, Card, CardBody, Form, FormGroup, MenuToggle, Select, SelectList, SelectOption, TextInput, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Tooltip, ValidatedOptions, } from '@patternfly/react-core';
 import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
-import { ToastNotification } from '@rh-support/components';
+import { ToastNotification, useSelectKeyboardNavigator } from '@rh-support/components';
 import { getVersion, isRegularVersion, isValidUrl } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
 import trim from 'lodash/trim';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CATEGORY_LIMIT } from '../../../../constants/TopContent';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
@@ -31,6 +30,9 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
     const [isSaving, setIsSaving] = useState(false);
     const [resourceTitle, setResourceTitle] = useState('');
     const [isEditClicked, setIsEditClicked] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [shouldFilter, setShouldFilter] = useState(false);
+    const textInputRef = useRef();
     const categoryToSave = useMemo(() => topContentEditState.find((category) => category.categoryId === (selected === null || selected === void 0 ? void 0 : selected.id)), [topContentEditState, selected]);
     const flagContentEditState = useMemo(() => flagContentUsage(topContentEditState, categoryUsage, selectedVersion), [topContentEditState, categoryUsage, selectedVersion]);
     const isMajorVersionOnly = isUndefined(getVersion(selectedVersion).minor);
@@ -43,18 +45,43 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
         !isAddingCategory;
     const isCategoryLimitReached = (minorSelectedNoMinorContentButAvailableMajorContent ? [] : flagContentEditState).length >= CATEGORY_LIMIT.MAX;
     const isCategoryInList = flagContentEditState.some((c) => c.categoryId === (selected === null || selected === void 0 ? void 0 : selected.id));
-    const onToggle = (isExpanded) => {
-        setSelectOpen(isExpanded);
-    };
-    const onSelect = (event, selection, isPlaceholder) => {
-        setSelected(selection);
-        onToggle(false);
-    };
     const isDisabled = isEmpty(linkToContent) ||
         isEmpty(trim(resourceTitle)) ||
         isUndefined(selected) ||
         !isValidUrl(linkToContent) ||
         (isCategoryLimitReached && !isCategoryInList);
+    const onToggleClick = () => {
+        var _a;
+        setSelectOpen((prev) => !prev);
+        if (!isSelectOpen) {
+            setShouldFilter(false);
+        }
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const computeFilteredCategories = () => {
+        if (!categories.data)
+            return [];
+        return shouldFilter && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())
+            ? categories.data.filter((category) => category.categoryName.toLowerCase().includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()))
+            : categories.data;
+    };
+    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
+        list: computeFilteredCategories(),
+        isOpen: isSelectOpen,
+        setIsOpen: setSelectOpen,
+        onSelect: (category) => onCategorySelect(category),
+    });
+    const onInputQueryChange = (_event, query) => {
+        if (isSelectOpen) {
+            setInputValue(query);
+            setShouldFilter(true);
+        }
+    };
+    const onCategorySelect = (selection) => {
+        setSelected(selection);
+        setInputValue(selection.categoryName);
+        setSelectOpen(false);
+    };
     const addContentToCategory = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
             setIsSaving(true);
@@ -106,16 +133,14 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
             addContentToCategory();
         }
     });
-    const getCategoryOptions = (options) => {
-        return options.map((category, id) => (React.createElement(SelectOption, { key: id, value: category }, category.categoryName)));
-    };
-    const onFilter = (_, value) => {
-        if (!value)
-            return getCategoryOptions(categories.data);
-        const input = new RegExp(value, 'i');
-        const newOptions = categories.data.filter((c) => input.test(c.categoryName));
-        return getCategoryOptions(newOptions);
-    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isSelectOpen, isDisabled: categories.isError || categories.isFetching, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: inputValue, onClick: onToggleClick, onChange: onInputQueryChange, onKeyDown: onInputKeyDown, autoComplete: "off", innerRef: textInputRef, placeholder: t('Select an option or enter a new category'), role: "combobox", isExpanded: isSelectOpen, "aria-controls": "select-typeahead-listbox" }),
+            categories.isFetching && (React.createElement(TextInputGroupUtilities, null,
+                React.createElement("span", { className: "pf-v6-c-spinner pf-m-md", role: "progressbar" },
+                    React.createElement("span", { className: "pf-v6-c-spinner__clipper" }),
+                    React.createElement("span", { className: "pf-v6-c-spinner__lead-ball" }),
+                    React.createElement("span", { className: "pf-v6-c-spinner__tail-ball" })))))));
     useEffect(() => {
         setResourceTitle(resources.resourceTitle);
     }, [resources.resourceTitle]);
@@ -127,21 +152,22 @@ export const TopContentSuggestionHintAccept = ({ onCancel, resources }) => {
             ToastNotification.addDangerMessage(t('There was an error loading top content categories'));
         }
     }, [topContentDispatch, t]);
-    return (React.createElement(Card, { className: "pf-v5-u-m-sm" },
+    return (React.createElement(Card, { className: "pf-v6-u-m-sm" },
         React.createElement(CardBody, { className: "card-hint" },
             React.createElement(Form, null,
                 isEditClicked ? (React.createElement(FormGroup, { label: t('Heading'), isRequired: true, fieldId: "simple-form-email-01" },
                     React.createElement(TextInput, { isRequired: true, type: "text", id: "top-content-headline-category", name: "top-content-headline-category", "data-tracking-id": "top-content-headline-category", value: resourceTitle, onChange: (_event, val) => setResourceTitle(val), placeholder: t('Copy and paste the heading for consistency'), validated: isEmpty(trim(resourceTitle)) ? ValidatedOptions.error : ValidatedOptions.default }))) : (React.createElement("span", null,
                     React.createElement(Button, { variant: "link", isInline: true },
                         React.createElement("u", null,
-                            React.createElement("a", { className: "hint-title pf-v5-u-font-size-md", target: "_blank", href: linkToContent, rel: "noreferrer" }, resources.resourceTitle))),
+                            React.createElement("a", { className: "hint-title pf-v6-u-font-size-md", target: "_blank", href: linkToContent, rel: "noreferrer" }, resources.resourceTitle))),
                     React.createElement(Tooltip, { content: t('Edit heading'), position: "top" },
                         React.createElement(Button, { variant: "link", icon: React.createElement(PencilAltIcon, null), onClick: () => setIsEditClicked((pre) => !pre) })))),
                 React.createElement(FormGroup, { label: t('Category'), isRequired: true, fieldId: "simple-form-email-01" },
-                    React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, id: "category-selection", name: "category-selection", "data-testid": "category-selection", placeholderText: t('Select an option or enter a new category'), onFilter: onFilter, onToggle: (_event, isExpanded) => onToggle(isExpanded), isOpen: isSelectOpen, onSelect: onSelect, selections: selected === null || selected === void 0 ? void 0 : selected.categoryName, isDisabled: categories.isError, loadingVariant: 'spinner' }, (categories.isFetching && { loadingVariant: 'spinner' })), getCategoryOptions(categories.data))),
+                    React.createElement(Select, { id: "category-selection", "data-testid": "category-selection", isOpen: isSelectOpen, selected: selected === null || selected === void 0 ? void 0 : selected.categoryName, onSelect: (event, val) => onCategorySelect(val), onOpenChange: () => setSelectOpen(false), toggle: toggle, shouldFocusFirstItemOnOpen: false, isScrollable: true },
+                        React.createElement(SelectList, null, computeFilteredCategories().map((category, index) => (React.createElement(SelectOption, { key: index, isFocused: focusedItemIndex === index, value: category, isSelected: category.id === (selected === null || selected === void 0 ? void 0 : selected.id) }, category.categoryName)))))),
                 isEditClicked && (React.createElement(FormGroup, { label: t('Link to content'), isRequired: true, fieldId: "top-content-link" },
                     React.createElement(TextInput, { type: "text", id: "top-content-resource-link", name: "top-content-resource-link", "data-tracking-id": "top-content-resource-link", value: linkToContent, isDisabled: true }))),
-                React.createElement("div", { className: "pf-v5-u-mt-sm" },
+                React.createElement("div", { className: "pf-v6-u-mt-sm" },
                     isCategoryLimitReached && !isCategoryInList && !isUndefined(selected) && React.createElement(CategoryLimit, null),
                     React.createElement(Button, { variant: "primary", onClick: onSaveContent, isDisabled: isSaving || isDisabled, isLoading: isSaving, "data-tracking-id": "suggested-content-save-button" },
                         React.createElement(Trans, null, "Save")),

package/lib/esm/components/TopContentManagement/TopContentHeader.js

@@ -4,6 +4,6 @@ export function TopContentHeader() {
     return (React.createElement("header", null,
         React.createElement("h2", null,
             React.createElement(Trans, null, "Top content")),
-        React.createElement("p", { className: "pf-v5-u-mt-md pf-v5-u-mb-sm" },
+        React.createElement("p", { className: "pf-v6-u-mt-md pf-v6-u-mb-sm" },
             React.createElement(Trans, null, "Add, edit, or remove top content solutions and categories. You can also create a new set of top content recommendations for specific versions."))));
 }

package/lib/esm/components/TopContentManagement/TopContentProductVersionSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentProductVersionSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAInF,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,eAAe,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;CACrB;AAQD,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,2BAG1E;AAqBD,iBAAS,gCAAgC,CAAC,KAAK,EAAE,MAAM,qBA0JtD;kBA1JQ,gCAAgC;;;AA6JzC,OAAO,EAAE,gCAAgC,EAAE,CAAC"}
+{"version":3,"file":"TopContentProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentProductVersionSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAc,MAAM,wCAAwC,CAAC;AAY/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,eAAe,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;CACrB;AAQD,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,2BAG1E;AAqBD,iBAAS,gCAAgC,CAAC,KAAK,EAAE,MAAM,qBAiNtD;kBAjNQ,gCAAgC;;;AAoNzC,OAAO,EAAE,gCAAgC,EAAE,CAAC"}

package/lib/esm/components/TopContentManagement/TopContentProductVersionSelector.js

@@ -1,10 +1,10 @@
 import { products as productsApi } from '@cee-eng/hydrajs';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
-import { useFetch } from '@rh-support/components';
+import { Button, MenuToggle, Select, SelectOption, TextInputGroup, TextInputGroupMain, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import { SingleSelectDropdown, useFetch } from '@rh-support/components';
 import { getUniqueSortedVersions, getVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useTopContentDispatchContext } from '../../context/TopContentProvider';
 import { setIsAddingCategory } from '../../reducers/TopContentReducer';
@@ -41,10 +41,14 @@ function TopContentProductVersionSelector(props) {
     const { request: getProducts, isFetching: isLoadingProducts, data: products, } = useFetch(productsApi.getProducts, {
         initialData: [],
     });
-    const { request: getProductVersions, isFetching: isLoadingVersions, data: versions, } = useFetch(productsApi.getProductVersions, { initialData: [], postProcessor: postVersionsProcessor });
+    const { request: getProductVersions, data: versions } = useFetch(productsApi.getProductVersions, {
+        initialData: [],
+        postProcessor: postVersionsProcessor,
+    });
     const [isProductOpen, setIsProductOpen] = useState(false);
-    const [isVersionOpen, setIsVersionOpen] = useState(false);
     const [selected, setSelected] = useState(undefined);
+    const [input, setInput] = useState('');
+    const textInputRef = useRef();
     const { selectedVersion } = props;
     const topContentDispatch = useTopContentDispatchContext();
     const productOptions = products === null || products === void 0 ? void 0 : products.map((p, id) => (Object.assign(Object.assign({}, p), { toString: function () {
@@ -68,9 +72,10 @@ function TopContentProductVersionSelector(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [versions]);
     const onProductChange = (option) => {
+        var _a;
         setIsAddingCategory(topContentDispatch, false);
         props.onProductChange(option);
-        getProductVersions(option.name);
+        getProductVersions((_a = option === null || option === void 0 ? void 0 : option.name) !== null && _a !== void 0 ? _a : '');
     };
     const onVersionChange = (option) => {
         setIsAddingCategory(topContentDispatch, false);
@@ -79,46 +84,73 @@ function TopContentProductVersionSelector(props) {
     const onProductClear = () => {
         onProductChange({ name: '', id: '' });
         setSelected(undefined);
+        setInput('');
     };
-    const getProductOptions = (options) => {
-        return options.map((product, id) => (React.createElement(SelectOption, { key: id, value: product, className: "pf-v5-c-select__menu-wrapper" },
-            React.createElement("div", { className: "pf-v5-c-select__menu-item-main" }, product.name),
-            selected && product.name === selected.name && (React.createElement("span", { className: "pf-v5-c-select__menu-item-icon" },
-                React.createElement(CheckIcon, { "aria-hidden": true }))))));
-    };
-    const onProductFilter = (_, value) => {
-        if (!value)
-            return getProductOptions(productOptions);
-        const input = new RegExp(value, 'i');
-        const newOptions = productOptions === null || productOptions === void 0 ? void 0 : productOptions.filter((p) => input.test(p.name));
-        return getProductOptions(newOptions);
+    const getProductOptions = (options, filterValue = '') => {
+        const filteredOptions = filterValue && filterValue !== (selected === null || selected === void 0 ? void 0 : selected.name)
+            ? options.filter((p) => new RegExp(filterValue, 'i').test(p.name))
+            : options;
+        if (filteredOptions.length === 0) {
+            return React.createElement(SelectOption, { key: "no-results" }, t('No results found'));
+        }
+        return filteredOptions.map((product, index) => (React.createElement(SelectOption, { key: index, value: product.productId, className: "pf-v6-c-select__menu-wrapper", isSelected: (selected === null || selected === void 0 ? void 0 : selected.productId) === product.productId }, product.name)));
     };
-    const onProductToggle = (isExpanded) => {
-        setIsProductOpen(isExpanded);
+    const onToggleClick = (e) => {
+        var _a;
+        setIsProductOpen((prev) => !prev);
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const onProductSelect = (event, selection, isPlaceholder) => {
-        onProductChange(selection);
-        setSelected(selection);
-        onProductToggle(false);
+    const onProductSelect = (e, selection) => {
+        const product = productOptions === null || productOptions === void 0 ? void 0 : productOptions.find((v) => v.productId === selection);
+        if (product) {
+            onProductChange(product);
+            setSelected(product);
+            setInput(product.name);
+            setIsProductOpen(false);
+        }
     };
-    const onVersionToggle = (isExpanded) => {
-        setIsVersionOpen(isExpanded);
+    const onChange = (e, value) => {
+        setInput(value);
+        if (!isProductOpen) {
+            setIsProductOpen(true);
+        }
+        return [];
     };
-    const onVersionSelect = (e, selection, isPlaceholder) => {
-        onVersionChange(selection);
-        onVersionToggle(false);
+    const onVersionSelect = (selection) => {
+        onVersionChange(selection.value);
     };
     const productLabelId = 'tc-product-dropdown-selector';
     const versionLabelId = 'version-dropdown-selector';
+    const getSelectedDropdownOption = {
+        label: selectedVersion,
+        value: selectedVersion,
+    };
+    const getVersionOptions = (options) => {
+        return options.map((version) => ({
+            label: version,
+            value: version,
+        }));
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isProductOpen, isFullWidth: true, isDisabled: isLoadingProducts, onBlur: () => {
+            if (selected) {
+                setInput(selected === null || selected === void 0 ? void 0 : selected.name);
+            }
+        } },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: input, onClick: onToggleClick, onChange: onChange, autoComplete: "off", innerRef: textInputRef, placeholder: t('Select a product'), role: "combobox", isExpanded: isProductOpen })),
+        !isEmpty(selected) && (React.createElement(Button, { variant: "plain", icon: React.createElement(TimesCircleIcon, { "aria-hidden": true }), onClick: (e) => {
+                e.stopPropagation();
+                onProductClear();
+            } }))));
     return (React.createElement("div", { className: "toolbar" },
         React.createElement("div", { className: "toolbar-left" },
             React.createElement("label", { htmlFor: 'tc-product-selector-dropdown-toggle' },
                 React.createElement(Trans, null, "Product")),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: (_event, isExpanded) => onProductToggle(isExpanded), selections: selected, isOpen: isProductOpen, onSelect: onProductSelect, onClear: onProductClear, placeholderText: t('Select a product') }, (isLoadingProducts && { loadingVariant: 'spinner' }), { onFilter: onProductFilter, isDisabled: isLoadingProducts, id: productLabelId, "data-tracking-id": productLabelId, "aria-label": t(productLabelId) }), getProductOptions(productOptions))),
+            React.createElement(Select, Object.assign({ isScrollable: true, toggle: toggle, selected: selected, isOpen: isProductOpen, maxMenuHeight: "20rem", onSelect: onProductSelect, onOpenChange: (isOpen) => setIsProductOpen(isOpen) }, (isLoadingProducts && { loadingVariant: 'spinner' }), { id: productLabelId, "data-tracking-id": productLabelId, "aria-label": productLabelId }), getProductOptions(productOptions, input))),
         React.createElement("div", { className: "toolbar-right" },
             React.createElement("label", { htmlFor: "version-selector-dropdown-toggle" },
                 React.createElement(Trans, null, "Version")),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.single, onToggle: (_event, isExpanded) => onVersionToggle(isExpanded), onSelect: onVersionSelect, selections: selectedVersion, isOpen: isVersionOpen, placeholderText: t('Select a version'), isDisabled: isEmpty(versions === null || versions === void 0 ? void 0 : versions.items) }, (isLoadingVersions && { loadingVariant: 'spinner' }), { id: versionLabelId, "data-tracking-id": versionLabelId, "aria-label": t(versionLabelId) }), ((versions === null || versions === void 0 ? void 0 : versions.items) || []).map((version, id) => (React.createElement(SelectOption, { key: id, value: version }, version)))))));
+            React.createElement(SingleSelectDropdown, { placeholder: t('Select a version'), dataTrackingId: "case-details-status-selector", options: getVersionOptions((versions === null || versions === void 0 ? void 0 : versions.items) || []), selected: getSelectedDropdownOption, isDisabled: isEmpty(versions === null || versions === void 0 ? void 0 : versions.items), id: versionLabelId, "data-tracking-id": versionLabelId, onSelect: onVersionSelect, "aria-label": t(versionLabelId) }))));
 }
 TopContentProductVersionSelector.defaultProps = defaultProps;
 export { TopContentProductVersionSelector };

package/lib/esm/reducers/TagManagmentReducer.d.ts

@@ -7,7 +7,7 @@ export declare enum TagManagementReducerConstants {
     deleteTag = "deleteTag",
     resetTags = "resetTags"
 }
-interface ITagItemState extends ITag {
+export interface ITagItemState extends ITag {
     numberOfLinkedContents?: number;
 }
 export interface ITagManagementState {

package/lib/esm/reducers/TagManagmentReducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagManagmentReducer.d.ts","sourceRoot":"","sources":["../../../src/reducers/TagManagmentReducer.ts"],"names":[],"mappings":"AACA,OAAO,EACH,IAAI,EAEJ,YAAY,EACZ,WAAW,EACX,4BAA4B,EAC/B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGxE,oBAAY,6BAA6B;IACrC,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,SAAS,cAAc;CAC1B;AAED,UAAU,aAAc,SAAQ,IAAI;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACnC;AACD,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC;IACzC,IAAI,EAAE,aAAa,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,yBAAyB,EAAE,mBAGvC,CAAC;AAEF,KAAK,WAAW,GAAG,OAAO,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;AAC/E,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;AAErE,eAAO,MAAM,oBAAoB,UAAW,mBAAmB,UAAU,WAAW,KAAG,mBAsBtF,CAAC;AAEF,eAAO,MAAM,mBAAmB,aAAoB,yBAAyB,qBAAoB,OAAO,mBAsDvG,CAAC;AAEF,eAAO,MAAM,aAAa,aAAoB,yBAAyB,QAAQ,YAAY,EAAE,kBAW5F,CAAC;AAEF,eAAO,MAAM,SAAS,aAAoB,yBAAyB,OAAO,WAAW,aAAa,aAAa,EAAE,kBAahH,CAAC;AAEF,eAAO,MAAM,SAAS,aACR,yBAAyB,cACvB,IAAI,sBACI,mBAAmB,kBAe1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,aACvB,yBAAyB,WAC1B,4BAA4B,sBACjB,mBAAmB,kBAQ1C,CAAC"}
+{"version":3,"file":"TagManagmentReducer.d.ts","sourceRoot":"","sources":["../../../src/reducers/TagManagmentReducer.ts"],"names":[],"mappings":"AACA,OAAO,EACH,IAAI,EAEJ,YAAY,EACZ,WAAW,EACX,4BAA4B,EAC/B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGxE,oBAAY,6BAA6B;IACrC,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,SAAS,cAAc;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACnC;AACD,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC;IACzC,IAAI,EAAE,aAAa,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,yBAAyB,EAAE,mBAGvC,CAAC;AAEF,KAAK,WAAW,GAAG,OAAO,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;AAC/E,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;AAErE,eAAO,MAAM,oBAAoB,UAAW,mBAAmB,UAAU,WAAW,KAAG,mBAsBtF,CAAC;AAEF,eAAO,MAAM,mBAAmB,aAAoB,yBAAyB,qBAAoB,OAAO,mBAsDvG,CAAC;AAEF,eAAO,MAAM,aAAa,aAAoB,yBAAyB,QAAQ,YAAY,EAAE,kBAW5F,CAAC;AAEF,eAAO,MAAM,SAAS,aAAoB,yBAAyB,OAAO,WAAW,aAAa,aAAa,EAAE,kBAahH,CAAC;AAEF,eAAO,MAAM,SAAS,aACR,yBAAyB,cACvB,IAAI,sBACI,mBAAmB,kBAe1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,aACvB,yBAAyB,WAC1B,4BAA4B,sBACjB,mBAAmB,kBAQ1C,CAAC"}