@rh-support/manage 2.6.1 → 2.6.11

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

@@ -7,39 +7,95 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { publicApi } from '@cee-eng/hydrajs';
-import { SearchInput } from '@patternfly/react-core';
-import { AlertMessage, AlertType, ErrorBoundary, ToastNotification, useFetch, usePrevious, } from '@rh-support/components';
-import { useGlobalStateContext } from '@rh-support/react-context';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, SearchInput, Tooltip, } from '@patternfly/react-core';
+import { ErrorBoundary, ToastNotification, usePrevious } from '@rh-support/components';
+import { GlobalMetadataReducerConstants, useGlobalDispatchContext, useGlobalStateContext, } from '@rh-support/react-context';
+import { ability, resourceActions, resources } from '@rh-support/user-permissions';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import { useCaseGroupMembers, useDeleteCaseGroupMember, useToggleDefaultGroup, } from '../../../hooks/useCaseGroupGraphQL';
 import { ManageTable } from '../../ManageTable/ManageTable';
+import { AddMembersModal } from '../AddMembersModal';
 import { DefaultGroupSwitch } from '../DefualtGroupSwitch';
 import { GroupSelect } from '../GroupSelect';
-import { GroupUserPermissionsSelect } from '../GroupUserPermissionsSelect';
+// TODO: Uncomment when updateUsers is migrated to GraphQL
+// import { GroupUserPermissionsSelect } from '../GroupUserPermissionsSelect';
+const RemoveMemberButton = ({ user, onRemove, isDisabled }) => {
+    const { t } = useTranslation();
+    const button = (React.createElement(Button, { variant: "link", isDanger: true, onClick: () => onRemove(user), isAriaDisabled: user.isOrgAdmin || isDisabled }, t('Remove')));
+    if (user.isOrgAdmin) {
+        return (React.createElement(Tooltip, { content: t('Organization Administrators cannot be removed because they have access to all groups') }, button));
+    }
+    return button;
+};
 export const ManageGroupUsers = () => {
+    var _a, _b;
     const { t } = useTranslation();
     const location = useLocation();
-    const { globalMetadataState: { loggedInUsersAccount, loggedInUserRights }, } = useGlobalStateContext();
+    const { globalMetadataState: { caseGroups, loggedInUsersAccount, loggedInUser }, } = useGlobalStateContext();
+    const dispatchToGlobalMetadataReducer = useGlobalDispatchContext();
     const disableGroupSelect = !loggedInUsersAccount || !loggedInUsersAccount.data || !loggedInUsersAccount.data.accountNumber;
     const [selectedGroup, setSelectedGroup] = useState();
-    const { clearResponse, isFetching, request, data: response, } = useFetch(publicApi.caseGroups.getCaseGroupUsers);
-    const groupUsers = useMemo(() => response || [], [response]);
-    // errors
-    function onPermissionError(error, user) {
-        setData([...data]);
-        const message = t(`Could not change permission for {{user}}: {{error}}`, {
-            user: `${user.firstName} ${user.lastName}`,
-            error: error.message,
-        });
-        ToastNotification.addDangerMessage(message);
-    }
+    const { data: groupUsers, loading: isFetching, error: membersError, fetchMembers, refetch } = useCaseGroupMembers();
+    const previousMembersError = usePrevious(membersError);
+    useEffect(() => {
+        if (membersError && !previousMembersError) {
+            ToastNotification.addDangerMessage(t('There was an error loading group members. Please try again or refresh'));
+        }
+    }, [membersError, previousMembersError, t]);
+    const defaultCaseGroupId = (_b = (_a = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _a === void 0 ? void 0 : _a.defaultCaseGroup) !== null && _b !== void 0 ? _b : null;
+    const membersWithOrgAdmin = useMemo(() => {
+        var _a, _b, _c, _d;
+        const loggedInContact = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data;
+        const selectedGroupId = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.groupNum;
+        const syncLoggedInUserDefault = (members) => {
+            if (!(loggedInContact === null || loggedInContact === void 0 ? void 0 : loggedInContact.ssoUsername) || !selectedGroupId)
+                return members;
+            return members.map((member) => member.ssoUsername === loggedInContact.ssoUsername
+                ? Object.assign(Object.assign({}, member), { isDefault: defaultCaseGroupId === selectedGroupId }) : member);
+        };
+        const members = syncLoggedInUserDefault(groupUsers || []);
+        const user = loggedInContact;
+        if (!(user === null || user === void 0 ? void 0 : user.isOrgAdmin) || !user.ssoUsername || !selectedGroup)
+            return members;
+        const alreadyPresent = members.some((m) => m.ssoUsername === user.ssoUsername);
+        if (alreadyPresent)
+            return members;
+        const syntheticEntry = {
+            firstName: (_a = user.firstName) !== null && _a !== void 0 ? _a : '',
+            lastName: (_b = user.lastName) !== null && _b !== void 0 ? _b : '',
+            isOrgAdmin: true,
+            access: true,
+            write: false,
+            isDefault: defaultCaseGroupId === selectedGroup.groupNum,
+            ssoUsername: user.ssoUsername,
+            email: (_c = user.email) !== null && _c !== void 0 ? _c : '',
+            contactSfId: (_d = user.id) !== null && _d !== void 0 ? _d : '',
+            memberRecordId: '',
+        };
+        return [...members, syntheticEntry];
+    }, [groupUsers, loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data, selectedGroup, defaultCaseGroupId]);
+    const canManageCaseGroups = ability.can(resourceActions.CREATE, resources.CASE_GROUPS);
+    const [isAddMembersModalOpen, setIsAddMembersModalOpen] = useState(false);
+    const [memberToRemove, setMemberToRemove] = useState(null);
+    const { deleteMember, loading: isDeleting } = useDeleteCaseGroupMember();
+    const { toggleDefault, loading: isClearingDefault } = useToggleDefaultGroup();
+    const isRemovingMember = isDeleting || isClearingDefault;
+    // TODO: Uncomment when updateUsers is migrated to GraphQL
+    // function onPermissionError(error: Error, user: IGroupUser) {
+    //     setData([...data]);
+    //     const message = t(`Could not change permission for {{user}}: {{error}}`, {
+    //         user: `${user.firstName} ${user.lastName}`,
+    //         error: error.message,
+    //     });
+    //     ToastNotification.addDangerMessage(message);
+    // }
     // set and sort fetched data.
-    const [initialData, setInitialData] = useState(groupUsers);
-    const [data, setData] = useState(groupUsers);
-    useEffect(() => setAllData(response || []), [response]);
+    const [initialData, setInitialData] = useState(membersWithOrgAdmin);
+    const [data, setData] = useState(membersWithOrgAdmin);
+    useEffect(() => setAllData(membersWithOrgAdmin || []), [membersWithOrgAdmin]);
     function setAllData(users) {
         setInitialData(users);
         setData(users);
@@ -58,21 +114,74 @@ export const ManageGroupUsers = () => {
             return tempUser;
         }));
     };
+    const onDefaultToggleSuccess = (user, isChecked) => {
+        var _a;
+        if (user.ssoUsername !== ((_a = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _a === void 0 ? void 0 : _a.ssoUsername) || !selectedGroup)
+            return;
+        const groupId = isChecked ? selectedGroup.groupNum : null;
+        const updatedLoggedInUserData = Object.assign(Object.assign({}, loggedInUser.data), { defaultCaseGroup: groupId });
+        dispatchToGlobalMetadataReducer({
+            type: GlobalMetadataReducerConstants.setLoggedInUser,
+            payload: {
+                loggedInUser: Object.assign(Object.assign({}, loggedInUser), { data: updatedLoggedInUserData }),
+            },
+        });
+        if (caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data) {
+            const updatedGroups = caseGroups.data.map((group) => (Object.assign(Object.assign({}, group), { isDefault: groupId !== null && group.groupNum === groupId })));
+            dispatchToGlobalMetadataReducer({
+                type: GlobalMetadataReducerConstants.setCaseGroups,
+                payload: {
+                    caseGroups: Object.assign(Object.assign({}, caseGroups), { data: updatedGroups }),
+                },
+            });
+        }
+    };
     const onGroupSelect = (group) => __awaiter(void 0, void 0, void 0, function* () {
         setSelectedGroup(group);
         if (group) {
-            request(loggedInUsersAccount.data.accountNumber, group.groupNum);
+            fetchMembers(group.groupNum);
         }
         else {
-            clearResponse();
+            setAllData([]);
         }
     });
-    function onPermissionsChange(user) {
-        const initialUsers = initialData.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
-        const users = data.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
-        setInitialData(initialUsers);
-        setData(users);
-    }
+    const handleRemoveMember = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!(memberToRemove === null || memberToRemove === void 0 ? void 0 : memberToRemove.memberRecordId))
+            return;
+        const member = memberToRemove;
+        try {
+            if (member.isDefault) {
+                if (!member.contactSfId) {
+                    ToastNotification.addDangerMessage(t('There was an error removing {{name}} from the group. Please try again or refresh.', {
+                        name: `${member.firstName} ${member.lastName}`,
+                    }));
+                    return;
+                }
+                yield toggleDefault(member.contactSfId, null);
+                onDefaultToggleSuccess(member, false);
+            }
+            yield deleteMember(member.memberRecordId);
+            ToastNotification.addSuccessMessage(t('{{name}} has been removed from the group', {
+                name: `${member.firstName} ${member.lastName}`,
+            }));
+            refetch();
+        }
+        catch (error) {
+            ToastNotification.addDangerMessage(t('Could not remove member from group: {{message}}', {
+                message: error instanceof Error ? error.message : String(error),
+            }));
+        }
+        finally {
+            setMemberToRemove(null);
+        }
+    });
+    // TODO: Uncomment when updateUsers is migrated to GraphQL
+    // function onPermissionsChange(user: IGroupUser) {
+    //     const initialUsers = initialData.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
+    //     const users = data.map((value) => (value.ssoUsername === user.ssoUsername ? user : value));
+    //     setInitialData(initialUsers);
+    //     setData(users);
+    // }
     const columns = [
         {
             accessor: (user) => user.firstName,
@@ -92,16 +201,38 @@ export const ManageGroupUsers = () => {
             id: 'sso-username',
             title: t('Login'),
         },
-        {
-            id: 'permissions',
-            title: t('Permissions'),
-            cell: (user) => user.isOrgAdmin ? (t('Admin/Full access')) : (React.createElement(GroupUserPermissionsSelect, { onChange: onPermissionsChange, account: loggedInUsersAccount.data, group: selectedGroup, users: data, user: user, onError: onPermissionError })),
-        },
-        {
-            id: 'default',
-            title: t('Default group'),
-            cell: (user, index) => (React.createElement(DefaultGroupSwitch, { id: `${index}`, onToggle: onDefaultToggle, group: selectedGroup, user: user })),
-        },
+        // TODO: Uncomment when updateUsers is migrated to GraphQL
+        // {
+        //     id: 'permissions',
+        //     title: t('Permissions'),
+        //     cell: (user) =>
+        //         user.isOrgAdmin ? (
+        //             t('Admin/Full access')
+        //         ) : (
+        //             <GroupUserPermissionsSelect
+        //                 onChange={onPermissionsChange}
+        //                 account={loggedInUsersAccount.data}
+        //                 group={selectedGroup}
+        //                 users={data}
+        //                 user={user}
+        //                 onError={onPermissionError}
+        //             />
+        //         ),
+        // },
+        ...(canManageCaseGroups
+            ? [
+                {
+                    id: 'default',
+                    title: t('Default group'),
+                    cell: (user, index) => (React.createElement(DefaultGroupSwitch, { id: `${index}`, onToggle: onDefaultToggle, onToggleSuccess: onDefaultToggleSuccess, group: selectedGroup, user: user })),
+                },
+                {
+                    id: 'remove',
+                    title: '',
+                    cell: (user) => (React.createElement(RemoveMemberButton, { user: user, onRemove: setMemberToRemove, isDisabled: isRemovingMember })),
+                },
+            ]
+            : []),
     ];
     // filter out search query.
     const [userSearch, setUserSearch] = useState('');
@@ -121,54 +252,33 @@ export const ManageGroupUsers = () => {
         else {
             setData(initialData);
         }
-    }, [initialData, userSearch, setData, previousUserSearch, groupUsers]);
+    }, [initialData, userSearch, setData, previousUserSearch, membersWithOrgAdmin]);
     useEffect(() => {
         if (location.pathname !== '/manage/groups') {
             return;
         }
-        setAllData(response || []);
+        setAllData(membersWithOrgAdmin || []);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.pathname, loggedInUsersAccount.data]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isOrgAdmin() &&
-                !loggedInUsersAccount.data.hasGroupACLs &&
-                !loggedInUserRights.data.isInternal(), isInline: true, className: "pf-v5-u-mb-md", title: t('Case Group ACL is not enabled') },
-            React.createElement("p", null,
-                React.createElement(Trans, { i18nKey: "i18nRequestControl" },
-                    "To use case groups to limit user access, enable the",
-                    ' ',
-                    React.createElement("a", { href: "https://access.redhat.com/articles/170453", target: "_blank", rel: "noopener noreferrer" }, "Case Group Access Control Lists (ACL)"),
-                    ' ',
-                    "under",
-                    ' ',
-                    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(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isInternal(), isInline: true, className: "pf-v5-u-mb-md", title: t('Case Group ACL is not available for internal users.') },
-            React.createElement("p", null,
-                React.createElement(Trans, { i18nKey: "i18nRequestControl" },
-                    "As an internal user you can use case group without ACL functionality. To use case groups to limit user access, customers can enable the",
-                    ' ',
-                    React.createElement("a", { href: "https://access.redhat.com/articles/170453", target: "_blank", rel: "noopener noreferrer" }, "Case Group Access Control Lists (ACL)"),
-                    ' ',
-                    "under",
-                    ' ',
-                    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, "Customers can organize and group related cases and filter on the case list page, but they 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.'))),
-        React.createElement("div", { className: "toolbar" },
-            React.createElement(GroupSelect, { isDisabled: isFetching || disableGroupSelect, onSelect: onGroupSelect }),
+            React.createElement("h2", { className: "pf-v6-u-pb-sm" }, t('Groups')),
+            React.createElement("p", null, t('To filter cases while searching, add or edit groups.'))),
+        React.createElement("div", { className: "toolbar pf-v6-u-justify-content-space-between" },
+            React.createElement(GroupSelect, { isDisabled: isFetching || disableGroupSelect, onSelect: onGroupSelect, onAddMembers: () => setIsAddMembersModalOpen(true) }),
             React.createElement("span", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "account-group-filter" },
                     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", 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(SearchInput, { className: "pf-v6-u-flex-grow-1 pf-v6-c-search-input pf-v6-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 }))));
+            React.createElement(ManageTable, { ariaLabel: t('Table to manage groups'), columns: columns, data: data, sortInfo: { column: 'first-name', direction: 'asc' }, isFetching: isFetching, isError: false, pagination: false })),
+        memberToRemove && (React.createElement(Modal, { variant: ModalVariant.small, isOpen: true, onClose: () => setMemberToRemove(null), "aria-label": t('Confirm removal') },
+            React.createElement(ModalHeader, { title: t('Remove member') }),
+            React.createElement(ModalBody, null, t('Are you sure you want to remove {{name}} from this group?', {
+                name: `${memberToRemove.firstName} ${memberToRemove.lastName}`,
+            })),
+            React.createElement(ModalFooter, null,
+                React.createElement(Button, { variant: "danger", onClick: handleRemoveMember, isLoading: isRemovingMember, isDisabled: isRemovingMember }, t('Remove')),
+                React.createElement(Button, { variant: "link", onClick: () => setMemberToRemove(null), isDisabled: isRemovingMember }, t('Cancel'))))),
+        canManageCaseGroups && isAddMembersModalOpen && selectedGroup && (React.createElement(AddMembersModal, { group: selectedGroup, existingMembers: initialData, onSuccess: refetch, onClose: () => setIsAddMembersModalOpen(false) }))));
 };

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;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"}
+{"version":3,"file":"AddEditBookmarkModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.tsx"],"names":[],"mappings":"AASA,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,GAAI,OAAO,MAAM,sBA8IjD,CAAC"}

package/lib/esm/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.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 isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
@@ -70,18 +70,21 @@ export const AddEditBookmarkModal = (props) => {
             isEqual(props.selectedAccounts.map((a) => a.accountNumber).sort(), localSelectedBookmarks.map((a) => a.accountNumber).sort()) &&
             selectedGroup === ((_a = props.selectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.bookmarkGroupName));
     };
-    return (React.createElement(Modal, { id: "Add-edit-bookmark-modal", className: "pf-modal-overflow-visible", title: props.title, "aria-describedby": "Add-edit-bookmark-modal", isOpen: props.isOpen, onClose: close, showClose: true, onEscapePress: props.onClose, variant: ModalVariant.medium, actions: [
+    return (React.createElement(Modal, { id: "Add-edit-bookmark-modal", className: "pf-modal-overflow-visible", "aria-describedby": "Add-edit-bookmark-modal", isOpen: props.isOpen, onClose: close, onEscapePress: props.onClose, variant: ModalVariant.medium },
+        React.createElement(ModalHeader, null,
+            React.createElement("h2", null, props.title)),
+        React.createElement(ModalBody, null,
+            React.createElement("div", null,
+                React.createElement("div", { className: "pf-v6-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" },
+                        React.createElement(Trans, null, "Account(s)"),
+                        React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
+                    React.createElement(BookmarkAccountSelector, { defaultSelected: props.selectedAccounts, labelId: "add-bookmark-account-on-add-modal", bookmarkedGroupAccounts: props.bookmarkedGroupAccounts, onBookMarkAccountSelected: onBookMarkAccountSelected, addMode: props.addMode, isInValid: isInValid && isEmpty(localSelectedBookmarks) })))),
+        React.createElement(ModalFooter, null,
             React.createElement(Button, { key: "save", variant: ButtonVariant.primary, onClick: save, isDisabled: isInValid || isNothingIsChangedOnEditMode() },
                 React.createElement(Trans, null, "Save")),
             React.createElement(Button, { key: "cancel", variant: props.addMode ? ButtonVariant.link : ButtonVariant.secondary, onClick: close },
-                React.createElement(Trans, null, "Cancel")),
-        ] },
-        React.createElement("div", null,
-            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" },
-                    React.createElement(Trans, null, "Account(s)"),
-                    React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-                React.createElement(BookmarkAccountSelector, { defaultSelected: props.selectedAccounts, labelId: "add-bookmark-account-on-add-modal", bookmarkedGroupAccounts: props.bookmarkedGroupAccounts, onBookMarkAccountSelected: onBookMarkAccountSelected, addMode: props.addMode, isInValid: isInValid && isEmpty(localSelectedBookmarks) })))));
+                React.createElement(Trans, null, "Cancel")))));
 };

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;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"}
+{"version":3,"file":"BookmarkAccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAmBhF,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,qBA6UpD;yBA7Ue,uBAAuB"}

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/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,sBAsD3C,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,GAAI,OAAO,MAAM,sBAsD3C,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

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"}