@rh-support/manage 2.5.31 → 2.5.32

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

@@ -1,4 +1,4 @@
-import { Button, ButtonVariant, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, } from '@patternfly/react-core';
+import { Button, ButtonVariant, EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { isNumber, isRegularVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
@@ -10,14 +10,14 @@ export function NoTopContentFound({ version, product, dataLength, onAddCategory,
     // 1.1, 1.x are normal semver versions but we have versions line online or dedicated that don't follw semver
     const iSemverVersion = isRegularVersion(version) && isNumber(version.split('.')[1]);
     const getCreateSetMessage = () => (React.createElement(React.Fragment, null,
-        iSemverVersion && (React.createElement("p", { className: "pf-v5-u-mb-md" },
+        iSemverVersion && (React.createElement("p", { className: "pf-v6-u-mb-md" },
             React.createElement(Trans, null, "Customers can't view any content while troubleshooting this version."))),
-        isXVersion && (React.createElement("p", { className: "pf-v5-u-mb-md" },
+        isXVersion && (React.createElement("p", { className: "pf-v6-u-mb-md" },
             React.createElement(Trans, null,
                 "Customers will see content for ",
                 xVersion,
                 " when minor version content is unavailable."))),
-        React.createElement("p", { className: "pf-v5-u-mb-md" },
+        React.createElement("p", { className: "pf-v6-u-mb-md" },
             React.createElement(Button, { variant: isXVersion ? ButtonVariant.secondary : ButtonVariant.primary, isInline: true, onClick: () => onAddCategory(false, true, version) },
                 React.createElement(Trans, null,
                     ' ',
@@ -38,21 +38,20 @@ export function NoTopContentFound({ version, product, dataLength, onAddCategory,
                 xVersion),
             ' ',
             "troubleshooting this version"),
-        React.createElement("div", { className: "pf-v5-u-mt-lg" },
-            React.createElement(Button, { isInline: true, className: "pf-v5-c-alert__action", variant: ButtonVariant.primary, onClick: () => onAddCategory(false, true, version, true) },
+        React.createElement("div", { className: "pf-v6-u-mt-lg" },
+            React.createElement(Button, { isInline: true, className: "pf-v6-c-alert__action", variant: ButtonVariant.primary, onClick: () => onAddCategory(false, true, version, true) },
                 React.createElement(Trans, null,
                     "Create new set for ",
                     version)))));
     const noContent = dataLength === 0 && !isContentOnlyForMajorVersion;
     const noMinorButHaveMajorContent = dataLength !== 0 && isContentOnlyForMajorVersion;
-    return (React.createElement(EmptyState, { variant: EmptyStateVariant.xs, id: "no-content" },
-        React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null, isEmpty(product) || isEmpty(version) ? (React.createElement(Trans, null, "No top content found")) : isRegularVersion(version) && isNumber(version.split('.')[1]) && dataLength === 0 ? (React.createElement(Trans, null,
-                "No content available for ",
-                version,
-                " or ",
-                xVersion)) : (React.createElement(Trans, null,
-                "No content available for ",
-                version))), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" }),
+    return (React.createElement(EmptyState, { headingLevel: "h2", icon: SearchIcon, titleText: React.createElement(React.Fragment, null, isEmpty(product) || isEmpty(version) ? (React.createElement(Trans, null, "No top content found")) : isRegularVersion(version) && isNumber(version.split('.')[1]) && dataLength === 0 ? (React.createElement(Trans, null,
+            "No content available for ",
+            version,
+            " or ",
+            xVersion)) : (React.createElement(Trans, null,
+            "No content available for ",
+            version))), variant: EmptyStateVariant.xs, id: "no-content" },
         React.createElement(EmptyStateBody, null,
             isEmpty(product) && React.createElement(Trans, null, "Please select a product and version to edit"),
             !isEmpty(product) && isEmpty(version) && React.createElement(Trans, null, "Please select a version to edit"),

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNewCategoryDropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAIhG,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,MAAM;IACZ,gBAAgB,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBAiFnD"}
+{"version":3,"file":"AddNewCategoryDropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAGhG,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,UAAU,MAAM;IACZ,gBAAgB,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBA0EnD"}

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

@@ -1,7 +1,15 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import { ToastNotification } from '@rh-support/components';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { SingleSelectDropdown, ToastNotification } from '@rh-support/components';
 import sortBy from 'lodash/sortBy';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
 import { fetchCategories } from '../../../../reducers/TopContentReducer';
@@ -9,48 +17,47 @@ export function AddNewCategoryDropDown(props) {
     const { t } = useTranslation();
     const { topContentEditState, categories } = useTopContentContext();
     const topContentDispatch = useTopContentDispatchContext();
-    const allAddedCategories = topContentEditState.map((cat) => cat.categoryName);
-    const availableCategories = sortBy(categories.data.filter((category) => !(allAddedCategories || []).includes(category.categoryName)), [
-        function (obj) {
-            return obj.categoryName.toLowerCase();
-        },
-    ]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState();
-    const getCategoryOptions = (options) => {
-        return options.map((category, id) => (React.createElement(SelectOption, { key: id, value: category }, category.categoryName)));
-    };
-    const onFilter = (_, value) => {
-        if (!value)
-            return getCategoryOptions(availableCategories);
-        const input = new RegExp(value, 'i');
-        const newOptions = availableCategories.filter((c) => input.test(c.categoryName));
-        return getCategoryOptions(newOptions);
-    };
-    const onToggle = (isExpanded) => {
-        setIsOpen(isExpanded);
-    };
-    const onSelect = (event, selection, isPlaceholder) => {
-        setSelected(selection);
-        props.onCategoryChange(selection);
-        onToggle(false);
-    };
-    const onClearCategory = () => {
-        props.onCategoryChange(undefined);
-        setSelected(undefined);
+    const [selected, setSelected] = useState({
+        value: '',
+        label: '',
+    });
+    // Memoize available categories to prevent unnecessary recalculations
+    const availableCategories = useMemo(() => {
+        const allAddedCategories = topContentEditState.map((cat) => cat.categoryName);
+        return sortBy(categories.data.filter((category) => !(allAddedCategories || []).includes(category.categoryName)), [
+            function (obj) {
+                return obj.categoryName.toLowerCase();
+            },
+        ]);
+    }, [categories.data, topContentEditState]);
+    // Memoize dropdown options to prevent unnecessary recreations
+    const dropdownOptions = useMemo(() => availableCategories.map((category) => ({
+        key: category.id,
+        value: category.categoryName,
+        label: category.categoryName,
+    })), [availableCategories]);
+    const onSelect = (selection) => {
+        if (selection) {
+            setSelected(selection);
+            props.onCategoryChange(selection.value);
+        }
     };
+    // Fetch categories only once when component mounts
     useEffect(() => {
-        try {
-            fetchCategories(topContentDispatch);
-        }
-        catch (_a) {
-            ToastNotification.addDangerMessage(t('There was an error loading top content categories'));
-        }
+        const loadCategories = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield fetchCategories(topContentDispatch);
+            }
+            catch (_a) {
+                ToastNotification.addDangerMessage(t('There was an error loading top content categories'));
+            }
+        });
+        loadCategories();
     }, [topContentDispatch, t]);
     return (React.createElement("div", { className: "form-group add-new-category" },
         React.createElement("label", { htmlFor: "new-category" },
             React.createElement(Trans, null, "Category"),
             ' ',
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-        React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: (_event, isExpanded) => onToggle(isExpanded), isOpen: isOpen, onClear: onClearCategory, onSelect: onSelect, onFilter: onFilter, selections: selected === null || selected === void 0 ? void 0 : selected.categoryName, placeholderText: t('Select an option or enter a new category') }, (categories.isFetching && { loadingVariant: 'spinner' }), { id: "new-category", "data-tracking-id": "new-category" }), getCategoryOptions(availableCategories))));
+        React.createElement(SingleSelectDropdown, { id: "new-category", dataTrackingId: "new-category", selected: selected, options: dropdownOptions, isLoading: categories.isFetching, placeholder: t('Select an option or enter a new category'), onSelect: onSelect, isScrollable: true })));
 }

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

@@ -33,14 +33,14 @@ export function TopContentCategory(props) {
         props.isExpanded !== isExpanded && setIsExpanded(props.isExpanded);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.isExpanded]);
-    return (React.createElement("div", Object.assign({ ref: props.innerRef }, props.provided.draggableProps, props.provided.dragHandleProps), props.category.content.length > 0 && (React.createElement(AccordionItem, null,
-        React.createElement(AccordionToggle, { id: props.category.categoryName, onClick: toggleExpanded, isExpanded: isExpanded },
+    return (React.createElement("div", Object.assign({ ref: props.innerRef }, props.provided.draggableProps, props.provided.dragHandleProps), props.category.content.length > 0 && (React.createElement(AccordionItem, { isExpanded: isExpanded },
+        React.createElement(AccordionToggle, { id: props.category.categoryName, onClick: toggleExpanded },
             React.createElement("h3", { ref: headerRef },
-                props.isArrangingCats && (React.createElement(Icon, { size: "md", className: "pf-v5-u-mr-sm" },
+                props.isArrangingCats && (React.createElement(Icon, { size: "md", className: "pf-v6-u-mr-sm" },
                     React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag') }))),
                 props.category.categoryName,
                 " ",
                 props.category.isAttentionNeeded && React.createElement(NeedsAttention, null))),
-        React.createElement(AccordionContent, { isHidden: !isExpanded },
+        React.createElement(AccordionContent, null,
             React.createElement(TopContentComponent, { category: props.category, scrollToTop: scrollToTop, categoryMode: CategoryMode.EXISTING_SECTION }))))));
 }

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

@@ -15,13 +15,13 @@ export function TopContentCategoryNew({ category, version }) {
         scrollToTop();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(AccordionItem, null,
-        React.createElement(AccordionToggle, { id: "addToCategoryAccordion", onClick: toggleExpanded, isExpanded: isExpanded },
+    return (React.createElement(AccordionItem, { isExpanded: isExpanded },
+        React.createElement(AccordionToggle, { id: "addToCategoryAccordion", onClick: toggleExpanded },
             React.createElement("div", { className: "reference-div", ref: addNewCategoryRef }, !getVersion(version).minor && isRegularVersion(version) ? (React.createElement(Trans, null,
                 "Creating a new set for major version ",
                 version)) : getVersion(version).minor ? (React.createElement(Trans, null,
                 "Creating a new set for ",
                 version)) : (React.createElement(Trans, null, "Add new section")))),
-        React.createElement(AccordionContent, { isHidden: !isExpanded },
+        React.createElement(AccordionContent, null,
             React.createElement(TopContentComponent, { category: category, scrollToTop: scrollToTop, categoryMode: CategoryMode.NEW_SECTION }))));
 }

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

@@ -40,7 +40,7 @@ export const TopContentComponent = (props) => {
         resetChangeInCategoryContent(topContentDispatch, topContentEditState, topContentResponse, props.category.id);
         setIsArrangingContent(false);
     };
-    const buttons = (React.createElement("div", { className: "pf-v5-c-accordion__expanded-content-footer" },
+    const buttons = (React.createElement("div", { className: "pf-v6-c-accordion__expanded-content-footer" },
         !isArrangingContent && props.categoryMode !== CategoryMode.NEW_SECTION && (React.createElement("span", null,
             React.createElement(Button, { variant: "secondary", onClick: addContent, "data-tracking-id": "add-content-top-content" },
                 React.createElement(Trans, null, "Add content")),

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

@@ -316,15 +316,15 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     return (React.createElement(React.Fragment, null,
         isPreview && content.mode !== ContentMode.ADD && content.mode !== ContentMode.NEW_SECTION_CONTENT && (React.createElement("li", { className: `push-bottom-narrow ${(snapshot === null || snapshot === void 0 ? void 0 : snapshot.isDragging) ? 'list-flat tc-drag' : ''}` },
             isArrangingContent && (React.createElement(Icon, { size: "sm" },
-                React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag'), color: "#06c", className: "pf-v5-u-mr-sm" }))),
+                React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag'), color: "#06c", className: "pf-v6-u-mr-sm" }))),
             !isArrangingContent ? (React.createElement(React.Fragment, null,
                 React.createElement(TopContentSingleItemLink, { url: getTopContentUrl(content.contentUrl), title: content.contentTitle, contentId: content.topContentId, needsAttention: content.isAttentionNeeded, lastModifiedBy: lastModifiedBy, selectedVersion: selectedVersion }),
                 ' ',
                 React.createElement(Button, { variant: "link", isInline: true, icon: React.createElement(EditAltIcon, null), onClick: editToggle, title: 'Edit' }))) : (content.contentTitle),
             React.createElement("div", null, lastModifiedBy),
             React.createElement("div", null,
-                (content.tags || []).map((tag) => (React.createElement(Label, { isCompact: true, className: "pf-v5-u-mr-xs pf-v5-u-mt-sm", key: tag.id, color: filteredTags.some((t) => t.id === tag.id) ? 'gold' : 'grey' }, tag.tagName))),
-                !isEmpty((_c = content.expiryDate) !== null && _c !== void 0 ? _c : '') && !isFutureDate(content.expiryDate) && (React.createElement(Label, { isCompact: true, className: "pf-v5-u-mr-xs pf-v5-u-mt-sm", color: "red" },
+                (content.tags || []).map((tag) => (React.createElement(Label, { isCompact: true, className: "pf-v6-u-mr-xs pf-v6-u-mt-sm", key: tag.id, color: filteredTags.some((t) => t.id === tag.id) ? 'yellow' : 'grey' }, tag.tagName))),
+                !isEmpty((_c = content.expiryDate) !== null && _c !== void 0 ? _c : '') && !isFutureDate(content.expiryDate) && (React.createElement(Label, { isCompact: true, className: "pf-v6-u-mr-xs pf-v6-u-mt-sm", color: "red" },
                     React.createElement(Trans, null, "Outdated Content")))))),
         (!isPreview || content.mode === ContentMode.ADD || content.mode === ContentMode.NEW_SECTION_CONTENT) && (React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "card card-light push-bottom", ref: ref },
             content.mode === ContentMode.NEW_SECTION_CONTENT && (React.createElement(AddNewCategoryDropDown, { onCategoryChange: onAddedNewCategoryChange })),
@@ -351,11 +351,11 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
                         onContentUrlChange(val, evt);
                     }, validated: contentUrlIsValid ? ValidatedOptions.default : ValidatedOptions.error }),
                 showDuplicateError && (React.createElement("p", { className: "form-instructions form-invalid" },
-                    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
+                    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-u-mr-sm" }),
                     " Duplicate url. This url is already added in ",
                     formatDuplicateWarning(duplicatUrlErrorArray),
                     "."))),
-            React.createElement(Flex, { className: "pf-v5-u-my-lg" },
+            React.createElement(Flex, { className: "pf-v6-u-my-lg" },
                 React.createElement(FlexItem, { flex: { default: 'flex_1' } },
                     React.createElement(FormGroup, { label: t('Tags') },
                         React.createElement("div", { className: `${isEmpty(tagOptions) ? 'menu-is-disabld' : ''}` },

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItemLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentSingleItemLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItemLink.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAK5C,UAAU,MAAM;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,MAAM,CAkD/C,CAAC"}
+{"version":3,"file":"TopContentSingleItemLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItemLink.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAK5C,UAAU,MAAM;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,MAAM,CAgD/C,CAAC"}

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

@@ -9,12 +9,11 @@ export const TopContentSingleItemLink = ({ title, url, needsAttention = false, c
     const onOpenModal = () => setModalOpen(true);
     const content = (React.createElement(React.Fragment, null,
         React.createElement(Trans, null, " Performance is low. This link will be removed in 7 days."),
-        React.createElement("span", { onClick: onOpenModal, style: { color: 'var(--pf-v5-global--primary-color--100)' } },
+        React.createElement("span", { onClick: onOpenModal },
             React.createElement(Trans, null, "View performance metrics"))));
     return (React.createElement(React.Fragment, null,
         needsAttention && (React.createElement(Tooltip, { content: content, exitDelay: 500 },
-            React.createElement(Button, { variant: "plain", className: "top-content-tooltip" },
-                React.createElement(ExclamationTriangle, null)))),
+            React.createElement(Button, { icon: React.createElement(ExclamationTriangle, null), variant: "plain", className: "top-content-tooltip" }))),
         React.createElement("a", { className: needsAttention ? 'top-content-needs-attention' : 'pcm-manage-top-content', "data-tracking-id": "pcm-manage-top-content", href: url, target: "_blank", rel: "noopener noreferrer" }, title),
         React.createElement(PerformanceMetrics, { isModalOpen: isModalOpen, onHideModal: onHideModal, needsAttention: needsAttention, contentId: contentId, title: title, lastModifiedBy: lastModifiedBy, selectedVersion: selectedVersion })));
 };

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

@@ -151,11 +151,11 @@ export function TopContentEditor() {
         React.createElement(TopContentProductVersionSelector, { selectedProduct: selectedProduct, selectedVersion: selectedVersion, onProductChange: onProductChange, onVersionChange: onVersionChange }),
         !topContentResponse.isFetching && (React.createElement("div", { className: "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("div", { className: "top-content-manage-wrapper pf-v6-u-pt-md" },
             !topContentResponse.isFetching && React.createElement(TopContentSuggestion, { searchQuery: searchQuery }),
             topContentResponse.isFetching ? (React.createElement(Bullseye, null,
                 React.createElement(EmptyState, { variant: EmptyStateVariant.full },
@@ -179,7 +179,7 @@ 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" },
@@ -187,7 +187,7 @@ export function TopContentEditor() {
                             ' ',
                             React.createElement(Button, { variant: "secondary", 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", 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,EAAE,MAAM,wCAAwC,CAAC;AAWnF,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,qBA2MtD;kBA3MQ,gCAAgC;;;AA8MzC,OAAO,EAAE,gCAAgC,EAAE,CAAC"}