@rh-support/manage 2.6.1 → 2.32.2-prodBackup

package/lib/esm/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.js

@@ -8,9 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts } from '@cee-eng/hydrajs';
-import { Label, LabelGroup, Tooltip } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Button, Label, LabelGroup, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Tooltip, } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import { useSelectKeyboardNavigator } from '@rh-support/components';
 import { sortAccountsByQuery } from '@rh-support/react-context';
 import assign from 'lodash/assign';
 import compact from 'lodash/compact';
@@ -21,15 +22,18 @@ import remove from 'lodash/remove';
 import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 export function BookmarkAccountSelector(props) {
+    const { t } = useTranslation();
+    const textInputRef = useRef();
+    const abortControllerRef = useRef(undefined);
     const [options, setOptions] = useState([]);
     const [isSearching, setIsSearching] = useState(false);
-    const abortControllerRef = useRef(undefined);
-    const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [selected, setSelected] = useState([]);
-    const onToggle = (isOpen) => setIsOpen(isOpen);
+    const [inputValue, setInputValue] = useState('');
+    const [activeItem, setActiveItem] = useState(null);
     const clearSelection = () => {
         setIsOpen(false);
+        setInputValue('');
         setSelected([]);
         props.onBookMarkAccountSelected([]);
     };
@@ -67,9 +71,9 @@ export function BookmarkAccountSelector(props) {
             const response = yield accounts.getAccounts(queryParams, controller.signal);
             const accountsResponse = response.items.map((account) => {
                 const bookmarksMatch = props.bookmarkedGroupAccounts.filter((a) => a.accountNumber === account.accountNumber);
-                const acountGroups = (bookmarksMatch || []).map((b) => b.bookmarkGroupName);
+                const accountGroups = (bookmarksMatch || []).map((b) => b.bookmarkGroupName);
                 return bookmarksMatch.length > 0
-                    ? Object.assign(Object.assign({}, account), { bookmarkGroupName: acountGroups, isBookmarked: true, isBookmarkedAndHasGroup: acountGroups.length > 0 }) : Object.assign(Object.assign({}, account), { bookmarkGroupName: [], isBookmarked: false, isBookmarkedAndHasGroup: false });
+                    ? Object.assign(Object.assign({}, account), { bookmarkGroupName: accountGroups, isBookmarked: true, isBookmarkedAndHasGroup: accountGroups.length > 0 }) : Object.assign(Object.assign({}, account), { bookmarkGroupName: [], isBookmarked: false, isBookmarkedAndHasGroup: false });
             });
             const sortedOptions = sortAccountsByQuery(accountsResponse, query, queryKey);
             setOptions(sortedOptions);
@@ -84,24 +88,61 @@ export function BookmarkAccountSelector(props) {
             }
         }
     });
-    const onTypeaheadInputChanged = (input) => __awaiter(this, void 0, void 0, function* () {
-        yield fetchAccounts(input);
+    const onSelect = (value) => {
+        if (value) {
+            const currentSelected = value;
+            const alreadySelected = find(selected, (account) => account.accountNumber === currentSelected.accountNumber);
+            if (alreadySelected)
+                return;
+            const selectedAccounts = [
+                ...selected,
+                Object.assign(Object.assign({}, currentSelected), { bookmarkId: currentSelected.bookmarkId || undefined, rootBookmarkId: currentSelected.rootBookmarkId || undefined }),
+            ];
+            setSelected(selectedAccounts);
+            props.onBookMarkAccountSelected(selectedAccounts);
+            setIsOpen(false);
+            setInputValue('');
+        }
+    };
+    const { focusedItemIndex, onInputKeyDown, setFocusedItemIndex } = useSelectKeyboardNavigator({
+        list: options,
+        isOpen,
+        ignoreResetOnListChange: false,
+        resetIndexOnClose: true,
+        isDisabled: props.isDisabled,
+        setIsOpen,
+        onSelect: (value) => onSelect(value),
     });
-    // this ref is used to call clearSelection() outside component
-    props.clearRef.current = clearSelection;
-    const debounceFn = debounce(onTypeaheadInputChanged, 500);
-    const onSelect = (event, currentSelected) => {
-        const alreadySelected = find(selected, (account) => account.accountNumber === currentSelected.accountNumber);
-        if (alreadySelected)
-            return;
-        const selectedAccounts = [
-            ...selected,
-            Object.assign(Object.assign({}, currentSelected), { bookmarkId: currentSelected.bookmarkId || undefined, rootBookmarkId: currentSelected.rootBookmarkId || undefined }),
-        ];
-        setSelected(selectedAccounts);
-        props.onBookMarkAccountSelected(selectedAccounts);
-        setIsOpen(false);
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
     };
+    const removeAccountLabel = (event, removedAccount) => {
+        event.stopPropagation();
+        const updatedSelectedAccounts = remove(selected, (account) => account.accountNumber !== removedAccount.accountNumber);
+        setSelected(updatedSelectedAccounts);
+        props.onBookMarkAccountSelected(updatedSelectedAccounts);
+    };
+    const debounceFn = debounce((value) => fetchAccounts(value), 500);
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+        debounceFn(value);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, Object.assign({ value: inputValue, onChange: onTextInputChange, onClick: (e) => {
+                    e.stopPropagation();
+                    setIsOpen(true);
+                    setFocusedItemIndex(null);
+                    setActiveItem(null);
+                }, onKeyDown: onInputKeyDown, id: "bookmark-account-select-input", autoComplete: "off", innerRef: textInputRef, placeholder: t('Search for account names or numbers'), role: "combobox", isExpanded: isOpen, "aria-controls": "bookmark-account-select-listbox" }, (activeItem && { 'aria-activedescendant': activeItem })),
+                React.createElement(LabelGroup, { "aria-label": "Selected accounts" }, selected.map((account, index) => (React.createElement(Label, { key: index, color: "teal", onClose: (ev) => removeAccountLabel(ev, account) },
+                    account.name,
+                    " (",
+                    account.accountNumber,
+                    ")"))))),
+            selected.length > 0 && (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Button, { variant: "plain", onClick: clearSelection, "aria-label": "Clear input value", icon: React.createElement(TimesCircleIcon, { "aria-hidden": true }) }))))));
     const duplicateAccounts = (props.selectedGroup &&
         props.addMode &&
         props.bookmarkedGroupAccounts
@@ -110,57 +151,55 @@ export function BookmarkAccountSelector(props) {
         })
             .map((a) => a.accountNumber)) ||
         [];
-    const removeAccountLabel = (event, removedAccount) => {
-        event.stopPropagation();
-        const updatedSelectedAccounts = remove(selected, (account) => account.accountNumber !== removedAccount.accountNumber);
-        setSelected(updatedSelectedAccounts);
-        props.onBookMarkAccountSelected(updatedSelectedAccounts);
-    };
-    const labelGroupComponent = () => {
-        return (React.createElement(LabelGroup, { numLabels: 2 }, (selected || []).map((currentLabel) => (React.createElement(Label, { key: currentLabel.accountNumber, onClose: (event) => removeAccountLabel(event, currentLabel), color: "cyan", onClick: (event) => event.stopPropagation() },
-            currentLabel.name,
-            " (",
-            currentLabel.accountNumber,
-            ")")))));
-    };
+    const renderAccountOption = (account, index) => (React.createElement(SelectOption, { value: account, key: index, isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `bookmark-account-${account.accountNumber}` },
+        React.createElement("div", null,
+            React.createElement("div", { className: "pf-v6-u-color-100 pf-v6-u-font-size-sm" },
+                account.name,
+                " (",
+                account.accountNumber,
+                ")"),
+            React.createElement("div", null, account.bookmarkGroupName.length === 0 ? (React.createElement("span", { className: "pf-v6-u-color-400" },
+                React.createElement(Trans, null, "This account has not been bookmarked."))) : account.bookmarkGroupName.length > 2 ? (React.createElement("div", null,
+                React.createElement(Tooltip, { isContentLeftAligned: true, content: Array.isArray(account.bookmarkGroupName) ? (account.bookmarkGroupName.map((group) => React.createElement("div", { key: group }, group))) : (React.createElement("div", null, account.bookmarkGroupName)) },
+                    React.createElement(Label, { color: "purple", icon: React.createElement(InfoCircleIcon, null), key: `${account.accountNumber}${account.bookmarkGroupName}` },
+                        "Bookmarked ",
+                        account.bookmarkGroupName.length,
+                        " times")))) : Array.isArray(account.bookmarkGroupName) ? (account.bookmarkGroupName.map((group) => !isEmpty(group) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${group}` }, group)))) : (!isEmpty(account.bookmarkGroupName) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${account.bookmarkGroupName}` }, account.bookmarkGroupName)))))));
     useEffect(() => {
         setSelected(props.defaultSelected || []);
     }, [props.defaultSelected]);
-    // when a group is added or removed from account we need to update dropdown
-    // options to show correct group
     useEffect(() => {
-        let newOptions = [];
-        setOptions(undefined);
-        // if group is not empty then add it
-        options.forEach((option) => {
-            const updatedGroupNames = compact(props.bookmarkedGroupAccounts
-                .filter((b) => b.accountNumber === option.accountNumber)
-                .map((b) => b.bookmarkGroupName));
-            newOptions = [
-                ...newOptions,
-                Object.assign(Object.assign({}, option), { bookmarkGroupName: compact(updatedGroupNames), isBookmarked: true, isBookmarkedAndHasGroup: !!updatedGroupNames.length }),
-            ];
-        });
-        setOptions(newOptions);
+        if (options.length > 0) {
+            const newOptions = options.map((option) => {
+                const updatedGroupNames = compact(props.bookmarkedGroupAccounts
+                    .filter((b) => b.accountNumber === option.accountNumber)
+                    .map((b) => b.bookmarkGroupName));
+                return Object.assign(Object.assign({}, option), { bookmarkGroupName: compact(updatedGroupNames), isBookmarked: true, isBookmarkedAndHasGroup: !!updatedGroupNames.length });
+            });
+            setOptions(newOptions);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.bookmarkedGroupAccounts]);
-    const titleId = 'multi-typeahead-bookmark-chip-group-props-id';
+    // Update activeItem when focusedItemIndex changes
+    useEffect(() => {
+        var _a;
+        if (focusedItemIndex !== null && options[focusedItemIndex]) {
+            setActiveItem(`bookmark-account-${(_a = options[focusedItemIndex]) === null || _a === void 0 ? void 0 : _a.accountNumber}`);
+        }
+        else {
+            setActiveItem(null);
+        }
+    }, [focusedItemIndex, options]);
+    props.clearRef.current = clearSelection;
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
-        React.createElement(Select, Object.assign({ chipGroupComponent: labelGroupComponent(), variant: SelectVariant.typeaheadMulti, typeAheadAriaLabel: t('Search for account names or numbers'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, onClear: clearSelection, "data-tracking-id": props.labelId, selections: selected, isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Search for account names or numbers'), hasInlineFilter: false, onTypeaheadInputChanged: debounceFn, onFilter: () => undefined, "aria-describedby": "clusterID-validate-helper" }, (isSearching && { loadingVariant: 'spinner' })), options.map((account, index) => (React.createElement(SelectOption, { value: account, key: index },
-            React.createElement("div", null,
-                React.createElement("div", { className: "pf-v5-u-color-100 pf-v5-u-font-size-sm" },
-                    account.name,
-                    " (",
-                    account.accountNumber,
-                    ")"),
-                React.createElement("div", null, account.bookmarkGroupName.length === 0 ? (React.createElement("span", { className: "pf-v5-u-color-400" },
-                    React.createElement(Trans, null, "This account has not been bookmarked."))) : account.bookmarkGroupName.length > 2 ? (React.createElement("div", null,
-                    React.createElement(Tooltip, { isContentLeftAligned: true, content: account.bookmarkGroupName.map((group) => (React.createElement("div", null, group))) },
-                        React.createElement(Label, { color: "purple", icon: React.createElement(InfoCircleIcon, null), key: `${account.accountNumber}${account.bookmarkGroupName}` },
-                            "Bookmarked ",
-                            account.bookmarkGroupName.length,
-                            " times")))) : (account.bookmarkGroupName.map((group) => !isEmpty(group) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${group}` }, group)))))))))),
+        React.createElement(Select, { id: "bookmark-account-select", isOpen: isOpen, selected: selected, onSelect: (_, value) => onSelect(value), toggle: toggle, onOpenChange: (nextOpen) => {
+                setIsOpen(nextOpen);
+                if (!nextOpen) {
+                    setInputValue('');
+                }
+            }, isScrollable: true },
+            React.createElement(SelectList, { id: "bookmark-account-select-listbox" }, isSearching ? (React.createElement(SelectOption, { isLoading: true, value: "loader", className: "pf-v6-u-text-align-center" },
+                React.createElement(Spinner, { size: "lg" }))) : options.length > 0 ? (options.map((account, index) => renderAccountOption(account, index))) : (React.createElement(SelectOption, { value: '', key: 'no-value' }, "No results found")))),
         props.isInValid && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, "Select one or more accounts to bookmark"))),
         duplicateAccounts.length !== 0 && (React.createElement("p", { className: "form-instructions" },

package/lib/esm/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManageGroupedBookmarkedAccountsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,UAAU,MAAM;IACZ,yBAAyB,EAAE,OAAO,CAAC;CACtC;AAED,wBAAgB,kCAAkC,CAAC,EAAE,yBAAyB,EAAE,EAAE,MAAM,qBAqZvF"}
+{"version":3,"file":"ManageGroupedBookmarkedAccountsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,UAAU,MAAM;IACZ,yBAAyB,EAAE,OAAO,CAAC;CACtC;AAED,wBAAgB,kCAAkC,CAAC,EAAE,yBAAyB,EAAE,EAAE,MAAM,qBAoZvF"}

package/lib/esm/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.js

@@ -152,11 +152,9 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
                     catchOnCancel: true,
                     confirmText: t('Yes, I am sure'),
                     confirmButtonVariant: ButtonVariant.danger,
-                    description: (React.createElement(React.Fragment, null,
-                        React.createElement("h2", null,
-                            React.createElement(Trans, null, "Are you sure?")),
-                        React.createElement("p", null,
-                            React.createElement(Trans, null, "You are choosing to remove this account from the selected bookmark.")))),
+                    title: t('Are you sure?'),
+                    description: (React.createElement("p", null,
+                        React.createElement(Trans, null, "You are choosing to remove this account from the selected bookmark."))),
                 });
                 yield apiCalls.removeAccountApiCalls(account);
                 removeGroupedBookmarks(dispatchGlobalContext, bookmarkedGroupAccounts.data, [account.bookmarkId]);
@@ -178,13 +176,11 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
             try {
                 yield confirmation({
                     catchOnCancel: true,
-                    confirmButtonVariant: ButtonVariant.danger,
                     confirmText: t('Yes, I am sure'),
-                    description: (React.createElement(React.Fragment, null,
-                        React.createElement("h2", null,
-                            React.createElement(Trans, null, "Are you sure?")),
-                        React.createElement("p", null,
-                            React.createElement(Trans, null, "Removing this bookmark will permanently delete it from your records.")))),
+                    confirmButtonVariant: ButtonVariant.danger,
+                    title: t('Are you sure?'),
+                    description: (React.createElement("p", null,
+                        React.createElement(Trans, null, "Removing this bookmark will permanently delete it from your records."))),
                 });
                 const rootBookmarIds = uniq(allGroups[group].map((account) => account.rootBookmarkId));
                 const promiseArry = rootBookmarIds.map((id) => __awaiter(this, void 0, void 0, function* () { return yield apiCalls.removeGroupAccount(id); }));
@@ -221,7 +217,7 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
             title: t('Accounts'),
             sortable: false,
             cellWidth: 70,
-            cell: (group) => (React.createElement(LabelGroup, null, allGroups[group].map((account) => (React.createElement(Label, { color: "cyan", onClose: removeBookmarkedAccount(account), key: account.bookmarkId + account.bookmarkGroupName },
+            cell: (group) => (React.createElement(LabelGroup, null, allGroups[group].map((account) => (React.createElement(Label, { color: "teal", onClose: removeBookmarkedAccount(account), key: account.bookmarkId + account.bookmarkGroupName },
                 account.name,
                 "(",
                 account.accountNumber,
@@ -234,11 +230,9 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
             cellWidth: 10,
             cell: (group) => (React.createElement(ActionList, { isIconList: true },
                 React.createElement(ActionListItem, null,
-                    React.createElement(Button, { "aria-label": "edit", variant: "plain", onClick: () => onOpenEditGroupOpenModal(group) },
-                        React.createElement(PencilAltIcon, null))),
+                    React.createElement(Button, { icon: React.createElement(PencilAltIcon, null), "aria-label": "edit", variant: "plain", onClick: () => onOpenEditGroupOpenModal(group) })),
                 React.createElement(ActionListItem, null,
-                    React.createElement(Button, { "aria-label": "delete", variant: "plain", onClick: () => removeGroup(group) },
-                        React.createElement(TrashIcon, null))))),
+                    React.createElement(Button, { icon: React.createElement(TrashIcon, null), "aria-label": "delete", variant: "plain", onClick: () => removeGroup(group) })))),
         },
     ];
     const isValid = () => {
@@ -258,22 +252,21 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
                             React.createElement("a", { href: "https://source.redhat.com/communitiesatredhat/applications/integration-community-of-practice/misplaced/lostnfound/bookmarking", target: "_blank", rel: "noopener noreferrer" },
                                 ' ',
                                 "bookmarks in the customer support tool"))), closeBtnAriaLabel: "Close" },
-                    React.createElement(Button, { variant: "plain", className: "manage-bookmark-info-icon-button", "aria-label": "Cluster Id Info" },
-                        React.createElement(Icon, { size: "md" },
-                            React.createElement(InfoCircleIcon, null))))))),
+                    React.createElement(Button, { icon: React.createElement(Icon, { size: "md" },
+                            React.createElement(InfoCircleIcon, null)), variant: "plain", className: "manage-bookmark-info-icon-button", "aria-label": "Cluster Id Info" }))))),
         React.createElement("div", { className: "toolbar" },
             React.createElement("form", { onSubmit: (event) => event.preventDefault(), className: "toolbar-left" },
                 React.createElement("label", { htmlFor: "bookmark-account-selector" },
                     React.createElement(Trans, null, "Search accounts")),
                 React.createElement("span", { className: "bookmark-account" },
                     React.createElement(BookmarkAccountSelector, { clearRef: clearRef, labelId: "bookmark-account-selector", isDisabled: !loggedInUserRights.data.isInternal() || !canBookmarkAccounts, bookmarkedGroupAccounts: bookmarkedGroupAccounts.data, onBookMarkAccountSelected: onBookMarkAccountSelected, addMode: true, isInValid: false })),
-                React.createElement("span", { className: "pf-v5-u-ml-sm" },
+                React.createElement("span", { className: "pf-v6-u-ml-sm" },
                     React.createElement(Button, { variant: ButtonVariant.primary, isInline: true, onClick: onOpenAddBookmarkModal, "data-tracking-id": "bookmark-add-button", isDisabled: isValid() || apiCalls.isAddingBookmark },
                         React.createElement(Trans, null, "Add bookmark")))),
             React.createElement("div", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "search-bookmark-account-selector" },
                     React.createElement(Trans, null, "Filter by")),
-                React.createElement(SearchInput, { className: "pf-v5-u-flex-grow-1 pf-v5-c-search-input pf-v5-u-background-color-100", value: searchString, id: "search-bookmark-account-selector", placeholder: t('Search for a bookmark'), "aria-label": t('Filter by searching for a bookmark'), onChange: (_, val) => setSearchString(val), onClear: () => setSearchString('') }))),
+                React.createElement(SearchInput, { className: "pf-v6-u-flex-grow-1 pf-v6-c-search-input pf-v6-u-background-color-100", value: searchString, id: "search-bookmark-account-selector", placeholder: t('Search for a bookmark'), "aria-label": t('Filter by searching for a bookmark'), onChange: (_, val) => setSearchString(val), onClear: () => setSearchString('') }))),
         React.createElement(AddEditBookmarkModal, { selectedAccounts: isInAddMode ? localSelectedAccounts : editGroupSelectedAccounts, groups: groups, isOpen: isUpdateBookmarkModalOpen, onSave: onAddEditBookmarksSave, onClose: closeAddEditBookmarkModal, onRemove: removeGroup, bookmarkedGroupAccounts: bookmarkedGroupAccounts.data, addMode: isInAddMode, title: isInAddMode ? t('Add a bookmark') : t('Edit bookmark') }),
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading bookmarked accounts list') } },
             React.createElement(ManageTable, { ariaLabel: t('Table to manage bookmarks'), columns: columns, data: groupNames, sortInfo: { column: 'bookmark-group-name', direction: 'asc' }, errorVariant: AlertVariant.warning, isFetching: bookmarkedGroupAccounts.isFetching ||

package/lib/esm/components/ManageExpiredContents/ExpiredContentCategory.js

@@ -23,9 +23,9 @@ export default function ExpiredContentCategory({ category, isCategoryExpanded =
         ? category.content.filter((item) => !hasDateExpired(item.expiryDate))
         : category.content;
     const sortedExpiredContents = orderBy(expiredContents, ['expiryDate'], ['desc']);
-    return !isEmpty(sortedExpiredContents) ? (React.createElement(AccordionItem, null,
-        React.createElement(AccordionToggle, { id: category.categoryName, onClick: toggleExpanded, isExpanded: isExpanded },
+    return !isEmpty(sortedExpiredContents) ? (React.createElement(AccordionItem, { isExpanded: isExpanded },
+        React.createElement(AccordionToggle, { id: category.categoryName, onClick: toggleExpanded },
             React.createElement("h3", null, category.categoryName)),
-        React.createElement(AccordionContent, { isHidden: !isExpanded },
-            React.createElement("ul", { className: "list-flat list-flushleft" }, sortedExpiredContents.map((content, i) => (React.createElement(ExpiredContentSingleItem, { key: content.topContentId, content: content, category: category }))))))) : (React.createElement(React.Fragment, null));
+        React.createElement(AccordionContent, null,
+            React.createElement("ul", { className: "list-flat" }, sortedExpiredContents.map((content, i) => (React.createElement(ExpiredContentSingleItem, { key: content.topContentId, content: content, category: category }))))))) : (React.createElement(React.Fragment, null));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentHeader.js

@@ -4,6 +4,6 @@ export default function ExpiredContentHeader() {
     return (React.createElement("header", null,
         React.createElement("h2", null,
             React.createElement(Trans, null, "Expired 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))));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpiredContentManager.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentManager.tsx"],"names":[],"mappings":"AAeA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,qBAAqB,sBAmH5C"}
+{"version":3,"file":"ExpiredContentManager.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentManager.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,qBAAqB,sBAsH5C"}

package/lib/esm/components/ManageExpiredContents/ExpiredContentManager.js

@@ -1,4 +1,4 @@
-import { Accordion, Bullseye, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, Spinner, Switch, } from '@patternfly/react-core';
+import { Accordion, Bullseye, EmptyState, EmptyStateBody, EmptyStateVariant, Spinner, Switch, } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { TagsSelector, TopContentSearch } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
@@ -52,17 +52,17 @@ export default function ExipredContentManager() {
     return (React.createElement(React.Fragment, null,
         React.createElement(ExpiredContentHeader, null),
         React.createElement("div", { className: "toolbar" },
-            React.createElement(TopContentSearch, { dataTrackingId: "expired-content-filter-manage", topContentData: expiredContentEditState, onSearch: onSearch, topContentResultsWrapperRef: expiredContentResultsRef, className: "toolbar-content", isDisabled: expiredContentResponse.isFetching, searchQuery: searchQuery, setSearchQuery: setSearchQuery }),
-            React.createElement("div", { className: "toolbar-content pf-v5-u-ml-md" },
-                React.createElement("label", { htmlFor: 'tag-selector' },
-                    React.createElement(Trans, null, "All tags")),
-                React.createElement(TagsSelector, { tagOptions: availableTags, onChange: onTagFilterChange, selectedTags: filteredTags, disabled: expiredContentResponse.isFetching })),
-            React.createElement("div", { className: "toolbar-content pf-v5-u-mt-md" },
-                React.createElement(Switch, { id: "content-approaching-expiry", label: t('Show approaching expiry'), isChecked: showApprochingExpiry, onChange: handleChange }))),
-        React.createElement("div", { className: "expired-content-manage-wrapper pf-v5-u-pt-md", ref: expiredContentResultsRef }, expiredContentResponse.isFetching ? (React.createElement(Bullseye, null,
+            React.createElement("div", { className: "toolbar-content" },
+                React.createElement(TopContentSearch, { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-row pf-v6-u-flex-fill pf-v6-u-align-items-center", dataTrackingId: "expired-content-filter-manage", topContentData: expiredContentEditState, onSearch: onSearch, topContentResultsWrapperRef: expiredContentResultsRef, isDisabled: expiredContentResponse.isFetching, searchQuery: searchQuery, setSearchQuery: setSearchQuery }),
+                React.createElement(Switch, { id: "content-approaching-expiry", className: "pf-v6-u-mt-sm", label: t('Show approaching expiry'), isChecked: showApprochingExpiry, onChange: handleChange })),
+            React.createElement("div", { className: "toolbar-content" },
+                React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-row pf-v6-u-align-items-center pf-v6-u-justify-content-flex-end" },
+                    React.createElement("label", { htmlFor: 'tag-selector' },
+                        React.createElement(Trans, null, "All tags")),
+                    React.createElement(TagsSelector, { typeahead: true, tagOptions: availableTags, onChange: onTagFilterChange, selectedTags: filteredTags, disabled: expiredContentResponse.isFetching })))),
+        React.createElement("div", { className: "expired-content-manage-wrapper pf-v6-u-p-md", ref: expiredContentResultsRef }, expiredContentResponse.isFetching ? (React.createElement(Bullseye, null,
             React.createElement(EmptyState, { variant: EmptyStateVariant.full },
-                React.createElement(Spinner, { size: "lg" })))) : isEmpty(filteredEC) ? (React.createElement(EmptyState, { variant: EmptyStateVariant.xs },
-            React.createElement(EmptyStateHeader, { titleText: React.createElement(Trans, null, "No contents found"), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }) }),
+                React.createElement(Spinner, { size: "lg" })))) : isEmpty(filteredEC) ? (React.createElement(EmptyState, { icon: SearchIcon, titleText: React.createElement(Trans, null, "No contents found"), variant: EmptyStateVariant.full },
             React.createElement(EmptyStateBody, null,
-                React.createElement(Trans, null, "There are no contents to display")))) : (React.createElement(Accordion, null, filteredEC.map((category, i) => (React.createElement(ExpiredContentCategory, { key: category.id, category: category, isCategoryExpanded: !isEmpty(searchQuery) || !isEmpty(filteredTags) }))))))));
+                React.createElement(Trans, null, "There are no contents to display")))) : (React.createElement(Accordion, { togglePosition: "start" }, filteredEC.map((category, i) => (React.createElement(ExpiredContentCategory, { key: category.id, category: category, isCategoryExpanded: !isEmpty(searchQuery) || !isEmpty(filteredTags) }))))))));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentSingleItem.js

@@ -63,16 +63,16 @@ export default function ExpiredContentSingleItem({ content, category }) {
         expired: formatDate(content.expiryDate),
     });
     return (React.createElement(React.Fragment, null, isPreview ? (React.createElement("li", { className: `push-bottom-narrow` },
-        React.createElement("a", { className: 'pcm-manage-top-content', "data-tracking-id": "pcm-manage-top-content", href: content.contentUrl, target: "_blank", rel: "noopener noreferrer" }, content.contentTitle),
+        React.createElement("a", { className: "pcm-manage-top-content pf-v6-u-mr-sm", "data-tracking-id": "pcm-manage-top-content", href: content.contentUrl, target: "_blank", rel: "noopener noreferrer" }, content.contentTitle),
         React.createElement(Button, { variant: "link", isInline: true, icon: React.createElement(EditAltIcon, null), onClick: editToggle, title: 'Edit', "data-tracking-id": "edit-expired-top-content" }),
         React.createElement("div", null,
             lastModifiedBy,
             " | ",
-            React.createElement("span", { className: "pf-v5-u-danger-color-200" }, expiredText),
+            React.createElement("span", { className: "pf-v6-u-danger-color-200" }, expiredText),
             " |",
             ' ',
             content.product,
             " ", (_a = content.majorVersion) !== null && _a !== void 0 ? _a : '',
             content.minorVersion ? `.${content.minorVersion}` : ''),
-        React.createElement("div", null, (_b = content.tags) === null || _b === void 0 ? void 0 : _b.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)))))) : (React.createElement(ExpiredContentSingleItemView, { category: category, content: content, onCancel: editToggle, onSave: onSave, onDelete: onDelete, isDeleting: isDeleting, isSaving: isSaving }))));
+        React.createElement("div", null, (_b = content.tags) === null || _b === void 0 ? void 0 : _b.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)))))) : (React.createElement(ExpiredContentSingleItemView, { category: category, content: content, onCancel: editToggle, onSave: onSave, onDelete: onDelete, isDeleting: isDeleting, isSaving: isSaving }))));
 }

package/lib/esm/components/ManageExpiredContents/ExpiredContentSingleItemView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpiredContentSingleItemView.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentSingleItemView.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAIjG,UAAU,MAAM;IACZ,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACjD,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,GACb,EAAE,MAAM,qBA4NR"}
+{"version":3,"file":"ExpiredContentSingleItemView.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentSingleItemView.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAIjG,UAAU,MAAM;IACZ,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACjD,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,GACb,EAAE,MAAM,qBAgOR"}

package/lib/esm/components/ManageExpiredContents/ExpiredContentSingleItemView.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, DatePicker, Flex, FlexItem, FormGroup, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { Button, Card, CardBody, DatePicker, Flex, FlexItem, FormGroup, TextInput, ValidatedOptions, } from '@patternfly/react-core';
 import { TagsSelector, ToastNotification } from '@rh-support/components';
 import { getDrupalResIdIfTypeFromUrl, getText, isValidDate, isValidUrl } from '@rh-support/utils';
 import { isEqual } from 'lodash';
@@ -24,6 +24,7 @@ export default function ExpiredContentSingleItemView({ category, content, onCanc
     const tagManagementEditState = useContext(TagManagementStateContext);
     const { tags: tagOptions } = tagManagementEditState;
     const ref = useRef(null);
+    const datePickerMenuAppendRef = useRef(null);
     const [isFetchingSolrSearch, setIsFetchingSolrSearch] = useState(false);
     const [localContentUrl, setLocalContentUrl] = useState(content.contentUrl);
     const [localContentTitle, setLocalContentTitle] = useState(content.contentTitle);
@@ -110,38 +111,39 @@ export default function ExpiredContentSingleItemView({ category, content, onCanc
             localContentTitle === content.contentTitle &&
             isEqual(localTagsIds, oldTagsIds) &&
             isEqual(localExpiryDate.split('T')[0], ((_b = content.expiryDate) === null || _b === void 0 ? void 0 : _b.split('T')[0]) || ''));
-    return (React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "card card-light push-bottom", ref: ref },
-        React.createElement("div", { className: "form-group" },
-            React.createElement("label", { htmlFor: localContentTitle },
-                "Heading",
-                ' ',
-                React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-            React.createElement(TextInput, { isRequired: true, type: "text", maxLength: 254, required: true, value: localContentTitle, isDisabled: isFetchingSolrSearch, "aria-label": t('Copy and paste the heading for consistency'), placeholder: t('Copy and paste the heading for consistency'), onChange: (e, v) => {
-                    onContentTitleChange(v, e);
-                }, validated: contentTitleIsValid ? ValidatedOptions.default : ValidatedOptions.error })),
-        React.createElement("div", { className: "form-group" },
-            React.createElement("label", { htmlFor: localContentUrl },
-                "Link to content",
-                ' ',
-                React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-            React.createElement(TextInput, { type: "url", maxLength: 254, isRequired: true, pattern: "^(http(s)?:\\/\\/)+[\\w\\-\\._~:\\/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$", value: getTopContentUrl(localContentUrl), "aria-label": t('Entering a solution or article link first will automatically generate the heading for you'), placeholder: t('Entering a solution or article link first will automatically generate the heading for you'), onChange: (evt, val) => {
-                    onContentUrlChange(val, evt);
-                }, validated: contentUrlIsValid ? ValidatedOptions.default : ValidatedOptions.error })),
-        React.createElement(Flex, { className: "pf-v5-u-my-lg" },
-            React.createElement(FlexItem, { flex: { default: 'flex_1' } },
-                React.createElement(FormGroup, { label: t('Tags') },
-                    React.createElement("div", { className: "pf-v5-c-form-control" },
-                        React.createElement(TagsSelector, { tagOptions: tagOptions, onChange: handleLocalTagChange, selectedTags: localSelectedTags, placeholder: t('Select tags to improve discoverability'), id: "expired-content-tag" })))),
-            React.createElement(FlexItem, null,
-                React.createElement(FormGroup, { label: t('Expiry date') },
-                    React.createElement(DatePicker, { onBlur: onExpiryDateChange, onChange: onExpiryDateChange, value: !isEmpty(localExpiryDate) ? localExpiryDate.split('T')[0] : '', validators: [expiryDateValidator], id: "content-expiry-date", invalidFormatText: t('Invalid date format') })))),
-        React.createElement("span", { className: "top-content-single-item-footer" },
-            React.createElement("span", null,
-                React.createElement(Button, { variant: "primary", onClick: onContentSave, isDisabled: isSaveButtonDisabled || isSaving, isLoading: isSaving },
-                    React.createElement(Trans, null, "Save")),
-                ' ',
-                React.createElement(Button, { variant: "tertiary", onClick: onCancel, "data-tracking-id": "cancel-button-top-content" },
-                    React.createElement(Trans, null, "Cancel"))),
-            React.createElement("span", { className: "content-actions" },
-                React.createElement(Button, { variant: "danger", "aria-label": t('Delete content'), onClick: onDelete, isDisabled: isDeleting }, "Delete")))));
+    return (React.createElement(Card, { variant: "secondary", className: "pf-v6-u-mb-md" },
+        React.createElement(CardBody, null,
+            React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "push-bottom", ref: ref },
+                React.createElement("div", { className: "form-group" },
+                    React.createElement("label", { htmlFor: localContentTitle },
+                        "Heading",
+                        ' ',
+                        React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
+                    React.createElement(TextInput, { isRequired: true, type: "text", maxLength: 254, required: true, value: localContentTitle, isDisabled: isFetchingSolrSearch, "aria-label": t('Copy and paste the heading for consistency'), placeholder: t('Copy and paste the heading for consistency'), onChange: (e, v) => {
+                            onContentTitleChange(v, e);
+                        }, validated: contentTitleIsValid ? ValidatedOptions.default : ValidatedOptions.error })),
+                React.createElement("div", { className: "form-group" },
+                    React.createElement("label", { htmlFor: localContentUrl },
+                        "Link to content",
+                        ' ',
+                        React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
+                    React.createElement(TextInput, { type: "url", maxLength: 254, isRequired: true, pattern: "^(http(s)?:\\/\\/)+[\\w\\-\\._~:\\/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$", value: getTopContentUrl(localContentUrl), "aria-label": t('Entering a solution or article link first will automatically generate the heading for you'), placeholder: t('Entering a solution or article link first will automatically generate the heading for you'), onChange: (evt, val) => {
+                            onContentUrlChange(val, evt);
+                        }, validated: contentUrlIsValid ? ValidatedOptions.default : ValidatedOptions.error })),
+                React.createElement(Flex, { className: "pf-v6-u-my-lg" },
+                    React.createElement(FlexItem, { flex: { default: 'flex_1' } },
+                        React.createElement(FormGroup, { label: t('Tags') },
+                            React.createElement(TagsSelector, { tagOptions: tagOptions, onChange: handleLocalTagChange, selectedTags: localSelectedTags, placeholder: t('Select tags to improve discoverability'), id: "expired-content-tag" }))),
+                    React.createElement(FlexItem, null,
+                        React.createElement(FormGroup, { ref: datePickerMenuAppendRef, label: t('Expiry date') },
+                            React.createElement(DatePicker, { onBlur: onExpiryDateChange, onChange: onExpiryDateChange, value: !isEmpty(localExpiryDate) ? localExpiryDate.split('T')[0] : '', validators: [expiryDateValidator], id: "content-expiry-date", invalidFormatText: t('Invalid date format'), popoverProps: { position: 'top' } })))),
+                React.createElement("span", { className: "top-content-single-item-footer" },
+                    React.createElement("span", null,
+                        React.createElement(Button, { variant: "primary", onClick: onContentSave, isDisabled: isSaveButtonDisabled || isSaving, isLoading: isSaving },
+                            React.createElement(Trans, null, "Save")),
+                        ' ',
+                        React.createElement(Button, { variant: "tertiary", onClick: onCancel, "data-tracking-id": "cancel-button-top-content" },
+                            React.createElement(Trans, null, "Cancel"))),
+                    React.createElement("span", { className: "content-actions" },
+                        React.createElement(Button, { variant: "danger", "aria-label": t('Delete content'), onClick: onDelete, isDisabled: isDeleting }, "Delete")))))));
 }

package/lib/esm/components/ManagePartnerships/NonOrgCustomerInfoModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NonOrgCustomerInfoModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManagePartnerships/NonOrgCustomerInfoModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,uBAAuB,yBA2BnC,CAAC"}
+{"version":3,"file":"NonOrgCustomerInfoModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManagePartnerships/NonOrgCustomerInfoModal.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,uBAAuB,yBA2BnC,CAAC"}

package/lib/esm/components/ManagePartnerships/NonOrgCustomerInfoModal.js

@@ -1,4 +1,4 @@
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, } from '@patternfly/react-core';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 export const NonOrgCustomerInfoModal = () => {
@@ -7,9 +7,12 @@ export const NonOrgCustomerInfoModal = () => {
     const handleModalToggle = () => {
         setIsModalOpen(!isModalOpen);
     };
-    return (React.createElement(Modal, { variant: ModalVariant.small, title: t('Confirm partnership collaboration'), isOpen: isModalOpen, onClose: handleModalToggle, actions: [
+    return (React.createElement(Modal, { variant: ModalVariant.small, isOpen: isModalOpen, onClose: handleModalToggle },
+        React.createElement(ModalHeader, null,
+            React.createElement("h2", null, t('Confirm partnership collaboration'))),
+        React.createElement(ModalBody, null,
+            React.createElement(Trans, null, "Only org admin customers can confirm partnership collaboration.")),
+        React.createElement(ModalFooter, null,
             React.createElement(Button, { key: "cancel", variant: ButtonVariant.primary, onClick: handleModalToggle, "data-tracking-id": "confirm-partnership-collaboration-no-org-admin" },
-                React.createElement(Trans, null, "Cancel")),
-        ] },
-        React.createElement(Trans, null, "Only org admin customers can confirm partnership collaboration.")));
+                React.createElement(Trans, null, "Cancel")))));
 };

package/lib/esm/components/ManagePartnerships/PartnershipsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PartnershipsList.d.ts","sourceRoot":"","sources":["../../../../src/components/ManagePartnerships/PartnershipsList.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAW/D,wBAAgB,gBAAgB,sBAmO/B"}
+{"version":3,"file":"PartnershipsList.d.ts","sourceRoot":"","sources":["../../../../src/components/ManagePartnerships/PartnershipsList.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAW/D,wBAAgB,gBAAgB,sBAqO/B"}