@rh-support/manage 2.4.10-beta.6 → 2.5.1

package/lib/esm/components/Groups/ManageGroupUsers/ManageGroupUsers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManageGroupUsers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/ManageGroupUsers/ManageGroupUsers.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,gBAAgB,mBAgN5B,CAAC"}
+{"version":3,"file":"ManageGroupUsers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/ManageGroupUsers/ManageGroupUsers.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,eAAO,MAAM,gBAAgB,yBA4N5B,CAAC"}

package/lib/esm/components/Groups/ManageGroupUsers/ManageGroupUsers.js

@@ -14,7 +14,7 @@ import { useGlobalStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { ManageTable } from '../../ManageTable/ManageTable';
 import { DefaultGroupSwitch } from '../DefualtGroupSwitch';
 import { GroupSelect } from '../GroupSelect';
@@ -128,20 +128,22 @@ export const ManageGroupUsers = () => {
         }
         setAllData(response || []);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname]);
-    return (React.createElement("section", { id: "manage-groups" },
-        React.createElement(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isOrgAdmin() && !loggedInUsersAccount.data.hasGroupACLs, isInline: true, className: "pf-u-mb-md", title: t("Case Group Access Control Lists (ACLs) haven't been activated on your account.") },
+    }, [location.pathname, loggedInUsersAccount.data]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isOrgAdmin() && !loggedInUsersAccount.data.hasGroupACLs, isInline: true, className: "pf-v5-u-mb-md", title: t('Case Group ACL is not activated') },
             React.createElement("p", null,
                 React.createElement(Trans, { i18nKey: "i18nRequestControl" },
-                    "You can set permissions on groups but settings won't take effect until",
+                    "To use case groups to limit user access, enable the",
                     ' ',
-                    React.createElement("a", { href: "https://access.redhat.com/solutions/175763", rel: "noopener noreferrer", target: "_blank" }, "Case Group ACLs"),
+                    React.createElement("a", { href: "https://access.redhat.com/articles/170453", target: "_blank", rel: "noopener noreferrer" }, "Case Group Access Control Lists (ACL)"),
                     ' ',
-                    "is activated on your account. Please contact your Technical Account Manager or",
+                    "under",
                     ' ',
-                    React.createElement("a", { href: "/support/contact/technicalSupport/", rel: "noopener noreferrer", target: "_blank" }, "Red Hat Technical Support"),
-                    ' ',
-                    "to request Case Group ACLs activation."))),
+                    React.createElement(Link, { key: "case-contact-phone-number-review", replace: true, to: {
+                            pathname: '/manage/preferences',
+                        }, "data-tracking-id": "case-contact-phone-number-review" }, "Preferences")),
+                React.createElement("br", null),
+                React.createElement(Trans, null, "You can organize and group related cases and filter on the case list page, but you cannot change permissions for case groups unless the Case Group ACL is enabled."))),
         React.createElement("header", null,
             React.createElement("h2", null, t('Groups')),
             React.createElement("p", null, t('Add or edit groups to easily filter while searching through cases.'))),
@@ -150,7 +152,7 @@ export const ManageGroupUsers = () => {
             React.createElement("span", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "account-group-filter" },
                     React.createElement(Trans, null, "Filter by")),
-                React.createElement(SearchInput, { className: "pf-u-flex-grow-1 pf-c-search-input pf-u-background-color-100", id: "account-group-filter", value: userSearch, isDisabled: isFetching || !selectedGroup, onChange: setUserSearch, placeholder: t('Search for people in this group'), "aria-label": "Group search input", onClear: () => setUserSearch('') }))),
+                React.createElement(SearchInput, { className: "pf-v5-u-flex-grow-1 pf-v5-c-search-input pf-v5-u-background-color-100", id: "account-group-filter", value: userSearch, isDisabled: isFetching || !selectedGroup, onChange: (_, value) => setUserSearch(value), placeholder: t('Search for people in this group'), "aria-label": "Group search input", onClear: () => setUserSearch('') }))),
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading group users list') } },
             React.createElement(ManageTable, { ariaLabel: t('Table to manage groups'), columns: columns, data: data, sortInfo: { column: 'first-name', direction: 'asc' }, isFetching: isFetching, isError: false }))));
 };

package/lib/esm/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.d.ts

@@ -1,4 +1,5 @@
 import { IBookmark } from '@rh-support/react-context';
+import React from 'react';
 interface IProps {
     isOpen: boolean;
     onClose: () => void;
@@ -10,6 +11,6 @@ interface IProps {
     addMode: boolean;
     title: string;
 }
-export declare const AddEditBookmarkModal: (props: IProps) => JSX.Element;
+export declare const AddEditBookmarkModal: (props: IProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=AddEditBookmarkModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddEditBookmarkModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAStD,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,gBAAgB,EAAE,SAAS,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,oBAAoB,UAAW,MAAM,gBA2IjD,CAAC"}
+{"version":3,"file":"AddEditBookmarkModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,gBAAgB,EAAE,SAAS,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,oBAAoB,UAAW,MAAM,sBA2IjD,CAAC"}

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

@@ -77,7 +77,7 @@ export const AddEditBookmarkModal = (props) => {
                 React.createElement(Trans, null, "Cancel")),
         ] },
         React.createElement("div", null,
-            React.createElement("div", { className: "pf-u-mb-lg" },
+            React.createElement("div", { className: "pf-v5-u-mb-lg" },
                 React.createElement(BookmarkGroupSelector, { selectedGroup: selectedGroup, groups: props.groups, onGroupInputBoxChanged: onGroupInputBoxChanged, isInValid: isInValid && (isPresentInGroups || isEmpty(selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.trim())), setIsInValid: setIsInValid, isPresentInGroups: isPresentInGroups })),
             React.createElement("div", null,
                 React.createElement("label", { id: "add-bookmark-account-on-add-modal" },

package/lib/esm/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.d.ts

@@ -1,5 +1,6 @@
 import { IAccountListParams } from '@cee-eng/hydrajs/@types/models/csp/account';
 import { IBookmark } from '@rh-support/react-context';
+import React from 'react';
 interface IProps {
     bookmarkedGroupAccounts: IBookmark[];
     accountListParams?: IAccountListParams;
@@ -12,7 +13,7 @@ interface IProps {
     isInValid: boolean;
     selectedGroup?: string;
 }
-export declare function BookmarkAccountSelector(props: IProps): JSX.Element;
+export declare function BookmarkAccountSelector(props: IProps): React.JSX.Element;
 export declare namespace BookmarkAccountSelector {
     var defaultProps: {
         clearRef: {

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

@@ -1 +1 @@
-{"version":3,"file":"BookmarkAccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAUtD,UAAU,MAAM;IACZ,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAwPpD;yBAxPe,uBAAuB"}
+{"version":3,"file":"BookmarkAccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAIhF,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAO3E,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,MAAM;IACZ,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBA6PpD;yBA7Pe,uBAAuB"}

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

@@ -8,8 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts } from '@cee-eng/hydrajs';
-import { Label, LabelGroup, Select, SelectOption, SelectVariant, Tooltip } from '@patternfly/react-core';
+import { Label, LabelGroup, Tooltip } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { sortAccountsByQuery } from '@rh-support/react-context';
 import assign from 'lodash/assign';
 import compact from 'lodash/compact';
 import debounce from 'lodash/debounce';
@@ -40,12 +42,15 @@ export function BookmarkAccountSelector(props) {
             limit: 60,
             accountNumberNotNull: true,
         };
+        let queryKey;
         // query as number is a hack to get around TS, isNaN can take a string but it was throwing error here
         if (isNaN(query)) {
             params.nameLike = query;
+            queryKey = 'name';
         }
         else {
             params.accountNumberLike = query;
+            queryKey = 'accountNumber';
         }
         const queryParams = !isEmpty(props.accountListParams)
             ? assign({}, props.accountListParams, params)
@@ -66,7 +71,8 @@ export function BookmarkAccountSelector(props) {
                 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 });
             });
-            setOptions(accountsResponse);
+            const sortedOptions = sortAccountsByQuery(accountsResponse, query, queryKey);
+            setOptions(sortedOptions);
             setIsSearching(false);
         }
         catch (err) {
@@ -94,6 +100,7 @@ export function BookmarkAccountSelector(props) {
         ];
         setSelected(selectedAccounts);
         props.onBookMarkAccountSelected(selectedAccounts);
+        setIsOpen(false);
     };
     const duplicateAccounts = (props.selectedGroup &&
         props.addMode &&
@@ -103,13 +110,14 @@ export function BookmarkAccountSelector(props) {
         })
             .map((a) => a.accountNumber)) ||
         [];
-    const removeAccountLabel = (removedAccount) => {
+    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: () => removeAccountLabel(currentLabel), isTruncated: false, color: "cyan" },
+        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,
@@ -139,14 +147,14 @@ export function BookmarkAccountSelector(props) {
     const titleId = 'multi-typeahead-bookmark-chip-group-props-id';
     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: onToggle, 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(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-u-color-100 pf-u-font-size-sm" },
+                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-u-color-400" },
+                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}` },

package/lib/esm/components/ManageBookmarkedAccountsTab/BookmarkGroupSelector.d.ts

@@ -7,6 +7,6 @@ interface IProps {
     setIsInValid: React.Dispatch<React.SetStateAction<boolean>>;
     isPresentInGroups: boolean;
 }
-declare const BookmarkGroupSelector: (props: IProps) => JSX.Element;
+declare const BookmarkGroupSelector: (props: IProps) => React.JSX.Element;
 export { BookmarkGroupSelector };
 //# sourceMappingURL=BookmarkGroupSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BookmarkGroupSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkGroupSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,sBAAsB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5D,iBAAiB,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,UAAW,MAAM,gBAkD3C,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"BookmarkGroupSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkGroupSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,sBAAsB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5D,iBAAiB,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,UAAW,MAAM,sBAsD3C,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

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

@@ -1,4 +1,4 @@
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 const BookmarkGroupSelector = (props) => {
@@ -21,9 +21,12 @@ const BookmarkGroupSelector = (props) => {
             React.createElement(Trans, null, "Bookmark name"),
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
         React.createElement(Form, null,
-            React.createElement(FormGroup, { helperTextInvalid: props.isPresentInGroups
-                    ? t('A bookmark with this name already exists')
-                    : t('Add a name to your bookmark'), validated: validated },
-                React.createElement(TextInput, { value: props.selectedGroup, onChange: onInputSave, placeholder: t('Enter a unique name for your bookmark'), "aria-invalid": props.isInValid, validated: validated, selected: false, id: "bookmark-group-input", width: 200 })))));
+            React.createElement(FormGroup, null,
+                validated === 'error' && (React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: "error" }, props.isPresentInGroups
+                            ? t('A bookmark with this name already exists')
+                            : t('Add a name to your bookmark'))))),
+                React.createElement(TextInput, { value: props.selectedGroup, onChange: (_event, value) => onInputSave(value), placeholder: t('Enter a unique name for your bookmark'), "aria-invalid": props.isInValid, validated: validated, selected: false, id: "bookmark-group-input", width: 200 })))));
 };
 export { BookmarkGroupSelector };

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

@@ -1,6 +1,7 @@
+import React from 'react';
 interface IProps {
     canManageBookmarkAccounts: boolean;
 }
-export declare function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }: IProps): JSX.Element;
+export declare function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ManageGroupedBookmarkedAccountsTab.d.ts.map

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":"AA8CA,UAAU,MAAM;IACZ,yBAAyB,EAAE,OAAO,CAAC;CACtC;AAED,wBAAgB,kCAAkC,CAAC,EAAE,yBAAyB,EAAE,EAAE,MAAM,eA4YvF"}
+{"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"}

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

@@ -7,10 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ActionList, ActionListItem, AlertVariant, Button, ButtonVariant, Label, LabelGroup, Popover, PopoverPosition, SearchInput, } from '@patternfly/react-core';
-import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import { ActionList, ActionListItem, AlertVariant, Button, ButtonVariant, Icon, Label, LabelGroup, Popover, PopoverPosition, SearchInput, } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon';
 import { defaultTableSortMethod, ErrorBoundary, ToastNotification, useConfirmation, } from '@rh-support/components';
 import { addEditbookmarks, getBookmarkGroups, removeGroupedBookmarks, removeWholeGroup, useGlobalDispatchContext, useGlobalStateContext, useGroupedBookmarkApiCalls, } from '@rh-support/react-context';
 import { ability, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -89,7 +89,8 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
         selectedAccounts.forEach((selectedAccount) => {
             if (accountsGroupsObj[selectedAccount.accountNumber]) {
                 isEmpty(group) &&
-                    accountsGroupsObj[selectedAccount.accountNumber].includes(undefined || '') &&
+                    (accountsGroupsObj[selectedAccount.accountNumber].includes(undefined) ||
+                        accountsGroupsObj[selectedAccount.accountNumber].includes('')) &&
                     alreadyAdded.push(selectedAccount.accountNumber);
                 !isEmpty(group) &&
                     accountsGroupsObj[selectedAccount.accountNumber].includes(group) &&
@@ -192,7 +193,7 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
                 removeWholeGroup(dispatchGlobalContext, bookmarkedGroupAccounts.data, rootBookmarIds);
                 ToastNotification.addSuccessMessage(t('Bookmark group has been successfully removed'));
             }
-            catch (_b) {
+            catch (_a) {
                 // user didn't confirm the delete action
             }
         }
@@ -233,10 +234,10 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
             cellWidth: 10,
             cell: (group) => (React.createElement(ActionList, { isIconList: true },
                 React.createElement(ActionListItem, null,
-                    React.createElement(Button, { variant: "plain", onClick: () => onOpenEditGroupOpenModal(group) },
+                    React.createElement(Button, { "aria-label": "edit", variant: "plain", onClick: () => onOpenEditGroupOpenModal(group) },
                         React.createElement(PencilAltIcon, null))),
                 React.createElement(ActionListItem, null,
-                    React.createElement(Button, { variant: "plain", onClick: () => removeGroup(group) },
+                    React.createElement(Button, { "aria-label": "delete", variant: "plain", onClick: () => removeGroup(group) },
                         React.createElement(TrashIcon, null))))),
         },
     ];
@@ -245,7 +246,7 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
     };
     if (!canManageBookmarkAccounts)
         return null;
-    return (React.createElement("section", { id: "manage-bookmarked-accounts" },
+    return (React.createElement(React.Fragment, null,
         React.createElement("header", null,
             React.createElement("h2", null, t('Bookmarks')),
             React.createElement("p", null,
@@ -257,20 +258,22 @@ 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(InfoCircleIcon, { className: "pf-u-ml-xs", "aria-label": "Cluster Id Info", size: "sm" }))))),
+                    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("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-u-ml-sm" },
+                React.createElement("span", { className: "pf-v5-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-u-flex-grow-1 pf-c-search-input pf-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: setSearchString, onClear: () => setSearchString('') }))),
+                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(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.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IExpiredContentEditState } from '../../reducers/ExpiredContentReducer';
+interface IProps {
+    category: IExpiredContentEditState;
+    isCategoryExpanded?: boolean;
+}
+export default function ExpiredContentCategory({ category, isCategoryExpanded }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ExpiredContentCategory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpiredContentCategory.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentCategory.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAGhF,UAAU,MAAM;IACZ,QAAQ,EAAE,wBAAwB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,QAAQ,EAAE,kBAA0B,EAAE,EAAE,MAAM,qBAyC9F"}

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

@@ -0,0 +1,31 @@
+import { AccordionContent, AccordionItem, AccordionToggle } from '@patternfly/react-core';
+import isEmpty from 'lodash/isEmpty';
+import orderBy from 'lodash/orderBy';
+import React, { useContext, useEffect, useState } from 'react';
+import { ExpiredContentStateContext } from '../../context/ExpiredContentContextProvider';
+import ExpiredContentSingleItem from './ExpiredContentSingleItem';
+export default function ExpiredContentCategory({ category, isCategoryExpanded = false }) {
+    const [isExpanded, setIsExpanded] = useState(isCategoryExpanded);
+    const { showApprochingExpiry } = useContext(ExpiredContentStateContext);
+    const toggleExpanded = () => {
+        setIsExpanded((pre) => !pre);
+    };
+    useEffect(() => {
+        isCategoryExpanded !== isExpanded && setIsExpanded(isCategoryExpanded);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isCategoryExpanded]);
+    const hasDateExpired = (dateString) => {
+        const inputDate = new Date(dateString);
+        const currentDate = new Date();
+        return inputDate < currentDate;
+    };
+    const expiredContents = showApprochingExpiry
+        ? 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 },
+            React.createElement("h3", null, category.categoryName)),
+        React.createElement(AccordionContent, { isHidden: !isExpanded },
+            React.createElement("ul", { className: "list-flat list-flushleft" }, expiredContents.map((content, i) => (React.createElement(ExpiredContentSingleItem, { key: content.topContentId, content: content, category: category }))))))) : (React.createElement(React.Fragment, null));
+}

package/lib/esm/components/ManageExpiredContents/ExpiredContentHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export default function ExpiredContentHeader(): React.JSX.Element;
+//# sourceMappingURL=ExpiredContentHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpiredContentHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,OAAO,UAAU,oBAAoB,sBAW3C"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+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(Trans, null))));
+}

package/lib/esm/components/ManageExpiredContents/ExpiredContentManagement.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function ExpiredContentManagement(): React.JSX.Element;
+//# sourceMappingURL=ExpiredContentManagement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpiredContentManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentManagement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,wBAAgB,wBAAwB,sBAWvC"}

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

@@ -0,0 +1,13 @@
+import { ErrorBoundary } from '@rh-support/components';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ExpiredContentContextProvider } from '../../context/ExpiredContentContextProvider';
+import { TagManagementContextProvider } from '../../context/TagManagementContextProvider';
+import ExipredContentManager from './ExpiredContentManager';
+export function ExpiredContentManagement() {
+    const { t } = useTranslation();
+    return (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading contents') } },
+        React.createElement(TagManagementContextProvider, null,
+            React.createElement(ExpiredContentContextProvider, null,
+                React.createElement(ExipredContentManager, null)))));
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export default function ExipredContentManager(): React.JSX.Element;
+//# sourceMappingURL=ExpiredContentManager.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,68 @@
+import { Accordion, Bullseye, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, 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';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { ExpiredContentDispatchContext, ExpiredContentStateContext } from '../../context/ExpiredContentContextProvider';
+import { TagManagementDispatchContext, TagManagementStateContext } from '../../context/TagManagementContextProvider';
+import { fetchExpiredContent, setExpiredContentFilteredTags } from '../../reducers/ExpiredContentReducer';
+import { fetchTopContentTags } from '../../reducers/TagManagmentReducer';
+import ExpiredContentCategory from './ExpiredContentCategory';
+import ExpiredContentHeader from './ExpiredContentHeader';
+export default function ExipredContentManager() {
+    const expiredContentResultsRef = useRef(null);
+    const { t } = useTranslation();
+    const { expiredContentEditState, expiredContentResponse, filteredTags, showApprochingExpiry } = useContext(ExpiredContentStateContext);
+    const { tags: availableTags } = useContext(TagManagementStateContext);
+    const dispatch = useContext(ExpiredContentDispatchContext);
+    const tagManagerDispatch = useContext(TagManagementDispatchContext);
+    const [contentFilteredByQuery, setContentFilteredByQuery] = useState(expiredContentEditState);
+    const [searchQuery, setSearchQuery] = useState('');
+    const onSearch = (searchTerm, searchResults) => {
+        setContentFilteredByQuery(searchResults);
+    };
+    const filteredEC = useMemo(() => {
+        if (isEmpty(filteredTags))
+            return contentFilteredByQuery;
+        const filteredTagsIds = filteredTags.map((tag) => tag.id);
+        //filter top contents on basis of tags
+        const filteredData = contentFilteredByQuery.flatMap((item) => {
+            const contents = item.content.filter((content) => (content.tags || []).some((tag) => filteredTagsIds.includes(tag.id)));
+            if (!isEmpty(contents))
+                return [Object.assign(Object.assign({}, item), { content: contents })];
+            return [];
+        });
+        return filteredData;
+    }, [contentFilteredByQuery, filteredTags]);
+    const handleChange = (_event, checked) => {
+        fetchExpiredContent(dispatch, checked);
+    };
+    const onTagFilterChange = (tags) => {
+        setExpiredContentFilteredTags(dispatch, tags);
+    };
+    useEffect(() => {
+        fetchExpiredContent(dispatch);
+        fetchTopContentTags(tagManagerDispatch, false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        setContentFilteredByQuery(expiredContentEditState);
+    }, [expiredContentEditState]);
+    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(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(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) }))))))));
+}

package/lib/esm/components/ManageExpiredContents/ExpiredContentSingleItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IExpiredContent, IExpiredContentEditState } from '../../reducers/ExpiredContentReducer';
+interface IProps {
+    content: IExpiredContent;
+    category: IExpiredContentEditState;
+}
+export default function ExpiredContentSingleItem({ content, category }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ExpiredContentSingleItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpiredContentSingleItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageExpiredContents/ExpiredContentSingleItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,OAAO,EAEH,eAAe,EACf,wBAAwB,EAE3B,MAAM,sCAAsC,CAAC;AAG9C,UAAU,MAAM;IACZ,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,MAAM,qBA4G7E"}

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

@@ -0,0 +1,77 @@
+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 { Button, Label } from '@patternfly/react-core';
+import EditAltIcon from '@patternfly/react-icons/dist/js/icons/edit-alt-icon';
+import { ToastNotification } from '@rh-support/components';
+import { formatDate, isFutureDate } from '@rh-support/utils';
+import React, { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ExpiredContentDispatchContext, ExpiredContentStateContext } from '../../context/ExpiredContentContextProvider';
+import { deleteExpiredContent, updateExpiredContent, } from '../../reducers/ExpiredContentReducer';
+import ExpiredContentSingleItemView from './ExpiredContentSingleItemView';
+export default function ExpiredContentSingleItem({ content, category }) {
+    var _a, _b;
+    const { t } = useTranslation();
+    const { expiredContentEditState, filteredTags, showApprochingExpiry } = useContext(ExpiredContentStateContext);
+    const dispatch = useContext(ExpiredContentDispatchContext);
+    const [isPreview, setIsPreview] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const editToggle = () => {
+        setIsPreview(!isPreview);
+    };
+    const onSave = (updatedContent, deletedTags) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsSaving(true);
+            yield updateExpiredContent(dispatch, expiredContentEditState, category.categoryId, updatedContent, deletedTags, showApprochingExpiry);
+            editToggle();
+            ToastNotification.addSuccessMessage(t('Content updated successfully'));
+        }
+        catch (error) {
+            ToastNotification.addDangerMessage(t('There was an error updating content'));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    });
+    const onDelete = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsDeleting(true);
+            yield deleteExpiredContent(dispatch, expiredContentEditState, category.id, content.topContentId);
+            editToggle();
+            ToastNotification.addSuccessMessage(t('Content deleted successfully'));
+        }
+        catch (error) {
+            ToastNotification.addDangerMessage(t('There was an error deleting content'));
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    });
+    const lastModifiedBy = t(`Last modified {{created}} by {{by}}`, {
+        created: formatDate(content.updatedOn || content.createdOn),
+        by: content.updatedBy || content.createdBy,
+    });
+    const expiredText = t(` ${isFutureDate(content.expiryDate) ? 'Expires' : 'Expired'} on {{expired}}`, {
+        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(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,
+            " | ",
+            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 }))));
+}