@rh-support/manage 2.6.1 → 2.6.11

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

@@ -7,25 +7,30 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { publicApi } from '@cee-eng/hydrajs';
-import { Dropdown, DropdownItem, DropdownToggle, Select, SelectOption, SelectVariant, } from '@patternfly/react-core/deprecated';
+import { useApolloClient } from '@apollo/client/react';
+import { Button, Divider, Dropdown, MenuContent, MenuItem, MenuList, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInput, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
-import { AlertMessage, AlertType, ToastNotification, useConfirmation, useFetch, usePrevious, } from '@rh-support/components';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { AlertMessage, AlertType, ToastNotification, useConfirmation, usePrevious, useSelectKeyboardNavigator, } from '@rh-support/components';
 import { fetchCaseGroupsForSSO, setCaseGroups, useGlobalDispatchContext, useGlobalStateContext, } from '@rh-support/react-context';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
-import { haventLoadedMetadata } from '@rh-support/utils';
+import { GET_CASE_GROUP_MEMBERS } from '@rh-support/utils';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
+import unescape from 'lodash/unescape';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { GroupSelectActions } from '../../../constants/GroupSelectActions';
+import { useCreateCaseGroup, useCreateCaseGroupMember, useDeleteCaseGroup, useRenameCaseGroup, } from '../../../hooks/useCaseGroupGraphQL';
 const actions = GroupSelectActions;
 const unGroupedCaseGroupNumber = '-1';
 export const GroupSelect = (props) => {
+    var _a;
     const { t } = useTranslation();
     const { onSelect: onSelectProp } = props;
     const manageActionsRef = useRef();
-    const { globalMetadataState: { caseGroups, loggedInUserJwtToken }, } = useGlobalStateContext();
+    const apolloClient = useApolloClient();
+    const { globalMetadataState: { caseGroups, loggedInUsersAccount }, } = useGlobalStateContext();
     const dispatch = useGlobalDispatchContext();
     const selectAGroupText = caseGroups.isFetching
         ? t('Loading groups')
@@ -34,11 +39,47 @@ export const GroupSelect = (props) => {
             : t('Select a group to view accounts');
     const getGroup = useCallback((groupName) => (caseGroups.data || []).find((groupObj) => groupObj.name === groupName), [caseGroups]);
     const confirmation = useConfirmation();
-    // Fetch groups on init
+    const [input, setInput] = useState('');
+    const [shouldFilter, setShouldFilter] = useState(false);
+    const accountId = (_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.salesforceAccountId;
+    // GraphQL hooks for mutations
+    const { createGroup: createGroupMutation, loading: createLoading } = useCreateCaseGroup();
+    const { createMember: createMemberMutation } = useCreateCaseGroupMember();
+    const { renameGroup: renameGroupMutation, loading: renameLoading } = useRenameCaseGroup();
+    const { deleteGroup: deleteGroupMutation, loading: deleteLoading } = useDeleteCaseGroup();
+    const hasFetchedFromGraphQL = useRef(false);
+    const [groupsFetchCompleted, setGroupsFetchCompleted] = useState(false);
+    const previousCaseGroupsIsError = usePrevious(caseGroups.isError);
+    useEffect(() => {
+        if (caseGroups.isError && !previousCaseGroupsIsError) {
+            ToastNotification.addDangerMessage(t('Could not fetch groups. Please try again or refresh'));
+        }
+    }, [caseGroups.isError, previousCaseGroupsIsError, t]);
+    // Always fetch groups from GraphQL — never rely on potentially stale Hydra data.
+    // Auto-select only after this settles so members can load against real group data.
+    useEffect(() => {
+        if (!apolloClient || !accountId) {
+            setGroupsFetchCompleted(true);
+            return;
+        }
+        if (hasFetchedFromGraphQL.current)
+            return;
+        hasFetchedFromGraphQL.current = true;
+        const fetchGroups = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                yield fetchCaseGroupsForSSO(dispatch, apolloClient, accountId);
+            }
+            finally {
+                setGroupsFetchCompleted(true);
+            }
+        });
+        fetchGroups();
+    }, [dispatch, apolloClient, accountId]);
+    // Set default group once groups are loaded
     useEffect(() => {
         var _a, _b;
-        if (haventLoadedMetadata(caseGroups, (data) => data === undefined))
-            fetchCaseGroupsForSSO(dispatch, loggedInUserJwtToken.username);
+        if (!groupsFetchCompleted || caseGroups.isFetching)
+            return;
         if (isEmpty(selectedGroup) && !isEmpty(caseGroups) && ((_a = caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             const defaultCaseGroup = find(caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data, (g) => g.isDefault);
             const newSelectedGroup = (defaultCaseGroup === null || defaultCaseGroup === void 0 ? void 0 : defaultCaseGroup.groupNum) === '-1'
@@ -50,15 +91,15 @@ export const GroupSelect = (props) => {
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatch, loggedInUserJwtToken, caseGroups]);
-    // handle dropdown open/close toggle.
+    }, [caseGroups, groupsFetchCompleted]);
+    // handle dropdown open/close toggle
     const [isOpen, setIsOpen] = useState(false);
-    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
     // handle group selection
     const [selectedGroup, setSelectedGroup] = useState();
     const previouslySelectedGroup = usePrevious(selectedGroup);
     const onClear = () => {
         setSelectedGroup(null);
+        setShouldFilter(false);
         props.onSelect(null);
     };
     useEffect(() => {
@@ -66,95 +107,125 @@ export const GroupSelect = (props) => {
             onSelectProp(selectedGroup ? getGroup(selectedGroup) : null);
         }
     }, [selectedGroup, getGroup, onSelectProp, previouslySelectedGroup]);
-    const onSelect = (event, group) => {
-        const newGroup = getGroup(group);
+    const handleSelect = (group) => {
+        const newGroup = selectedGroup !== group.name;
+        setInput(group.name);
         if (newGroup) {
-            setSelectedGroup(group);
+            setSelectedGroup(group.name);
+            setShouldFilter(false);
         }
         setIsOpen(false);
     };
     // Group actions dropdown state
     const hasGroupPermissions = ability.can(resourceActions.CREATE, resources.CASE_GROUPS);
     const [showDropdown, setShowDropdown] = useState(hasGroupPermissions);
+    useEffect(() => setShowDropdown(hasGroupPermissions), [hasGroupPermissions]);
     const [showInput, setShowInput] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const toggleIsDropdownOpen = () => setIsDropdownOpen(!isDropdownOpen);
     const closeDropdown = () => setIsDropdownOpen(false);
+    const [activeItem, setActiveItem] = useState(null);
     const onActionFocus = (action) => () => {
         closeDropdown();
         setAction(action);
     };
-    // fetch objects for apis
     const [showErrorMessage] = useState(false);
-    const createGroupFetch = useFetch(publicApi.caseGroups.createGroup, { propgateErrors: true });
-    const renameGroupFetch = useFetch(publicApi.caseGroups.renameGroup, { propgateErrors: true });
-    const deleteGroupFetch = useFetch(publicApi.caseGroups.deleteGroup, { propgateErrors: true });
-    const duplicateGroupFetch = useFetch(publicApi.caseGroups.createGroup, { propgateErrors: true });
     // group actions input state
-    const [input, setInput] = useState('');
-    const onMultiSelect = () => null;
-    const onMultiClear = () => setInput('');
-    const disableOnFetch = caseGroups.isFetching ||
-        createGroupFetch.isFetching ||
-        renameGroupFetch.isFetching ||
-        deleteGroupFetch.isFetching ||
-        duplicateGroupFetch.isFetching;
-    const onChange = (e) => {
-        setInput(e.target.value);
-        return [];
+    const textInputRef = useRef();
+    const disableOnFetch = caseGroups.isFetching || createLoading || renameLoading || deleteLoading;
+    const onChange = (e, value) => {
+        if (!showInput) {
+            setIsOpen(true);
+        }
+        setInput(value);
+        if (value !== input) {
+            setShouldFilter(true);
+        }
     };
     useEffect(() => setInput(selectedGroup), [selectedGroup]);
+    useEffect(() => {
+        if (!showInput && input && input != selectedGroup) {
+            if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+        setFocusedItemIndex(-1);
+        setActiveItem(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [input, showInput]);
     // group actions
-    function setGroupOnFetch(groupName) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield fetchCaseGroupsForSSO(dispatch, loggedInUserJwtToken.username);
-            setSelectedGroup(groupName);
-        });
-    }
-    function createGroup(groupName, ssoUsername) {
+    function createGroup(groupName) {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!accountId) {
+                ToastNotification.addDangerMessage(t('There was an error while creating this group'));
+                return;
+            }
             try {
-                yield createGroupFetch.request({ name: groupName, contactSsoName: ssoUsername });
+                const response = yield createGroupMutation(groupName, accountId);
+                const createdRecord = response.redhat_support_uiapi.CaseGroup__cCreate.RedHatSupportRecord;
                 ToastNotification.addSuccessMessage(t('Group has been successfully created'));
-                try {
-                    yield setGroupOnFetch(groupName);
-                    setShowDropdown(true);
-                    setShowInput(false);
-                    setSelectedGroup(groupName);
-                }
-                catch (error) {
-                    ToastNotification.addDangerMessage(t("We're having an issue finding this group's users"));
-                    onClear();
-                }
+                const newGroup = {
+                    groupNum: createdRecord.Id,
+                    name: unescape(createdRecord.Name.value),
+                    isPrivate: false,
+                    isDefault: false,
+                    defaultMembers: [],
+                    members: [],
+                };
+                const updatedGroups = [...(caseGroups.data || []), newGroup];
+                setCaseGroups(dispatch, updatedGroups);
+                setShowDropdown(true);
+                setShowInput(false);
+                setSelectedGroup(groupName);
             }
             catch (e) {
-                ToastNotification.addDangerMessage(t('There was an error while creating this group'));
+                const message = String((e === null || e === void 0 ? void 0 : e.message) || '');
+                if (message.includes('insufficient access rights')) {
+                    ToastNotification.addDangerMessage(t('You do not have permission to create this group'));
+                }
+                else {
+                    ToastNotification.addDangerMessage(t('There was an error while creating this group'));
+                }
             }
         });
     }
     const [action, setAction] = useState('');
     const isUserInputAGroup = () => (caseGroups.data || []).find((value) => value.name === input);
+    const handleDeleteGroup = () => __awaiter(void 0, void 0, void 0, function* () {
+        const groupToDelete = getGroup(selectedGroup);
+        yield confirmation({
+            catchOnCancel: true,
+            title: t('Delete group'),
+            description: (React.createElement(Trans, null,
+                "Are you sure you want to delete ",
+                React.createElement("strong", null, groupToDelete.name),
+                "?")),
+        });
+        yield deleteGroupMutation(groupToDelete.groupNum);
+        const index = (caseGroups.data || []).findIndex((value) => value.name === groupToDelete.name);
+        (caseGroups.data || []).splice(index, 1);
+        setCaseGroups(dispatch, caseGroups.data || []);
+        onClear();
+        ToastNotification.addSuccessMessage(t('Group has been successfully deleted'));
+    });
     const onAction = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d;
+        const needsUniqueName = action === actions.create || action === actions.rename || action === actions.duplicate;
+        if (needsUniqueName && isUserInputAGroup()) {
+            ToastNotification.addWarningMessage(t('Group already exists'));
+            return;
+        }
         switch (action) {
             case actions.create: {
-                if (isUserInputAGroup()) {
-                    ToastNotification.addWarningMessage(t('Group already exists'));
-                    break;
-                }
-                yield createGroup(input, loggedInUserJwtToken.username);
+                yield createGroup(input);
                 setAction('');
                 break;
             }
             case actions.rename: {
-                if (isUserInputAGroup()) {
-                    ToastNotification.addWarningMessage(t('Group already exists'));
-                    break;
-                }
                 const previousGroup = selectedGroup;
                 const group = getGroup(previousGroup);
                 try {
-                    // change name in the current caseGroups list
-                    yield renameGroupFetch.request(input, group.groupNum, group.isPrivate);
+                    yield renameGroupMutation(group.groupNum, input);
                     const copyCaseGroups = [...(caseGroups.data || [])];
                     const index = copyCaseGroups.findIndex((value) => value.name === previousGroup);
                     copyCaseGroups[index].name = input;
@@ -166,7 +237,13 @@ export const GroupSelect = (props) => {
                     ToastNotification.addSuccessMessage(t('Group has been renamed'));
                 }
                 catch (e) {
-                    ToastNotification.addDangerMessage(t('There was an error renaming this group	'));
+                    const message = String((e === null || e === void 0 ? void 0 : e.message) || '');
+                    if (message.includes('insufficient access rights')) {
+                        ToastNotification.addDangerMessage(t('You do not have permission to rename this group'));
+                    }
+                    else {
+                        ToastNotification.addDangerMessage(t('There was an error renaming this group'));
+                    }
                 }
                 finally {
                     setAction('');
@@ -175,32 +252,16 @@ export const GroupSelect = (props) => {
             }
             case actions.delete: {
                 try {
-                    const groupToDelete = getGroup(selectedGroup);
-                    try {
-                        // get confirmation on delete
-                        yield confirmation({
-                            catchOnCancel: true,
-                            title: t('Delete group'),
-                            description: (React.createElement(Trans, null,
-                                "Are you sure you want to delete ",
-                                React.createElement("strong", null, groupToDelete.name),
-                                "?")),
-                        });
-                        // delete action is confirmed
-                        yield deleteGroupFetch.request(groupToDelete.groupNum);
-                        // remove group from list
-                        const index = (caseGroups.data || []).findIndex((value) => value.name === groupToDelete.name);
-                        (caseGroups.data || []).splice(index, 1);
-                        setCaseGroups(dispatch, caseGroups.data || []);
-                        onClear();
-                        ToastNotification.addSuccessMessage(t('Group has been successfully deleted'));
-                    }
-                    catch (_a) {
-                        // user didn't confirm the delete action
-                    }
+                    yield handleDeleteGroup();
                 }
                 catch (e) {
-                    ToastNotification.addDangerMessage(t('There was an error deleting this group'));
+                    const message = String((e === null || e === void 0 ? void 0 : e.message) || '');
+                    if (message.includes('insufficient access rights')) {
+                        ToastNotification.addDangerMessage(t('You do not have permission to delete this group'));
+                    }
+                    else {
+                        ToastNotification.addDangerMessage(t('There was an error deleting this group'));
+                    }
                 }
                 finally {
                     setAction('');
@@ -208,20 +269,63 @@ export const GroupSelect = (props) => {
                 }
             }
             case actions.duplicate: {
-                if (isUserInputAGroup()) {
-                    ToastNotification.addWarningMessage(t('Group already exists'));
+                if (!accountId) {
+                    ToastNotification.addDangerMessage(t('There was an error while duplicating group'));
                     break;
                 }
                 try {
-                    yield duplicateGroupFetch.request({ name: input, contactSsoName: loggedInUserJwtToken.username });
-                    yield setGroupOnFetch(input);
+                    const sourceGroup = getGroup(selectedGroup);
+                    const dupResponse = yield createGroupMutation(input, accountId);
+                    const dupRecord = dupResponse.redhat_support_uiapi.CaseGroup__cCreate.RedHatSupportRecord;
+                    const newGroupId = dupRecord.Id;
+                    if (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.groupNum) {
+                        const membersResponse = yield apolloClient.query({
+                            query: GET_CASE_GROUP_MEMBERS,
+                            variables: {
+                                where: { Group__c: { eq: sourceGroup.groupNum } },
+                                first: 2000,
+                            },
+                            fetchPolicy: 'network-only',
+                        });
+                        const sourceMembers = ((_d = (_c = (_b = (_a = membersResponse.data) === null || _a === void 0 ? void 0 : _a.redhat_support_uiapi) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.RedHatSupportCaseGroupMember__c) === null || _d === void 0 ? void 0 : _d.edges) ||
+                            [];
+                        const contactIds = sourceMembers
+                            .filter(({ node }) => { var _a; return (_a = node.Contact__c) === null || _a === void 0 ? void 0 : _a.value; })
+                            .map(({ node }) => node.Contact__c.value);
+                        if (contactIds.length > 0) {
+                            const results = yield Promise.allSettled(contactIds.map((contactId) => createMemberMutation(contactId, newGroupId)));
+                            const failed = results.filter((r) => r.status === 'rejected');
+                            if (failed.length > 0) {
+                                ToastNotification.addWarningMessage(t('Group duplicated but {{count}} members could not be copied', {
+                                    count: failed.length,
+                                }));
+                            }
+                        }
+                    }
+                    const dupGroup = {
+                        groupNum: newGroupId,
+                        name: unescape(dupRecord.Name.value),
+                        isPrivate: false,
+                        isDefault: false,
+                        defaultMembers: [],
+                        members: [],
+                    };
+                    const updatedDupGroups = [...(caseGroups.data || []), dupGroup];
+                    setCaseGroups(dispatch, updatedDupGroups);
                     setShowDropdown(true);
                     setShowInput(false);
+                    setSelectedGroup(input);
                     setInput('');
                     ToastNotification.addSuccessMessage(t('Group has been successfully duplicated'));
                 }
                 catch (e) {
-                    ToastNotification.addDangerMessage(t('There was an error while duplicating group'));
+                    const message = String((e === null || e === void 0 ? void 0 : e.message) || '');
+                    if (message.includes('insufficient access rights')) {
+                        ToastNotification.addDangerMessage(t('You do not have permission to duplicate this group'));
+                    }
+                    else {
+                        ToastNotification.addDangerMessage(t('There was an error while duplicating group'));
+                    }
                 }
                 finally {
                     setAction('');
@@ -232,6 +336,7 @@ export const GroupSelect = (props) => {
     });
     useEffect(() => {
         if (action === actions.rename || action === actions.duplicate || action === actions.create) {
+            setIsOpen(false);
             setShowDropdown(false);
             setShowInput(true);
             action === actions.duplicate && setInput(`${selectedGroup} Duplicate`);
@@ -255,19 +360,26 @@ export const GroupSelect = (props) => {
         }
     }, [caseGroups.isFetching, caseGroups.isError, props.isDisabled, disableOnFetch, selectedGroup]);
     const onGroupActionCancel = () => {
+        setIsOpen(false);
         setShowInput(false);
         setShowDropdown(hasGroupPermissions);
         setAction('');
         setInput(selectedGroup);
     };
+    const handleAddMembers = () => {
+        var _a;
+        closeDropdown();
+        (_a = props.onAddMembers) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
     const dropdownItems = [
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "create", component: "button", onClick: onActionFocus(actions.create), "data-tracking-id": "manage-group-create" }, t('Create')),
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.UPDATE, resources.CASE_GROUPS), key: "rename", component: "button", onClick: onActionFocus(actions.rename), "data-tracking-id": "manage-group-rename" }, t('Rename')),
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.DELETE, resources.CASE_GROUPS), key: "delete", component: "button", onClick: onActionFocus(actions.delete), "data-tracking-id": "manage-group-delete" }, t('Delete')),
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "duplicate", component: "button", "data-tracking-id": "manage-group-duplicate", onClick: onActionFocus(actions.duplicate) }, t('Duplicate')),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "create", onClick: onActionFocus(actions.create), "data-tracking-id": "manage-group-create" }, t('Create')),
+        React.createElement(Divider, { component: "li" }),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.UPDATE, resources.CASE_GROUPS), key: "rename", onClick: onActionFocus(actions.rename), "data-tracking-id": "manage-group-rename" }, t('Rename')),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "duplicate", onClick: onActionFocus(actions.duplicate), "data-tracking-id": "manage-group-duplicate" }, t('Duplicate')),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "add-members", onClick: handleAddMembers, "data-tracking-id": "manage-group-add-members" }, t('Add members')),
+        React.createElement(MenuItem, { isDanger: true, className: "create-group-action del-btn", isDisabled: !selectedGroup || !ability.can(resourceActions.DELETE, resources.CASE_GROUPS), key: "delete", onClick: onActionFocus(actions.delete), "data-tracking-id": "manage-group-delete" }, t('Delete')),
     ];
-    const dropdownToggle = (React.createElement(DropdownToggle, { isDisabled: props.isDisabled || disableOnFetch, toggleIndicator: null, onToggle: toggleIsDropdownOpen, "data-tracking-id": "manage-group-toggle-options", "aria-label": "Group actions dropdown toggle" },
-        React.createElement(CogIcon, null)));
+    const dropdownToggle = (toggleRef) => (React.createElement(MenuToggle, { isFullHeight: true, className: "pf-v6-u-ml-sm manage-group-actions-toggle-options pf-v6-u-p-md", ref: toggleRef, isDisabled: props.isDisabled || disableOnFetch, onClick: toggleIsDropdownOpen, isExpanded: isDropdownOpen, "data-tracking-id": "manage-group-toggle-options", "aria-label": "Group actions dropdown toggle", icon: React.createElement(CogIcon, null) }));
     const submitActionBtn = useRef();
     useEffect(() => {
         if (isEmpty(manageActionsRef.current))
@@ -291,14 +403,11 @@ export const GroupSelect = (props) => {
         };
         const selectTypeahead = manageActionsRef.current.querySelector('input');
         if (!showInput) {
-            // adds event listeners that prevent using enter to select a group.
             selectTypeahead.addEventListener('keydown', dontSubmitOnEnterCb);
             selectTypeahead.addEventListener('keyup', dontSubmitOnEnterCb);
             selectTypeahead.addEventListener('keypress', dontSubmitOnEnterCb);
         }
         else {
-            // adds event listeners that allows submitting actions using enter on select
-            // inupt used for getting user input for actions.
             selectTypeahead.addEventListener('keydown', submitOnEnterCb);
         }
         return () => {
@@ -312,22 +421,48 @@ export const GroupSelect = (props) => {
             }
         };
     }, [manageActionsRef, showInput]);
-    //added for validation of new group name
     const containsOnlySpecialChars = (str) => {
         return /^[^a-zA-Z0-9]*$/.test(str);
     };
+    const onToggleClick = () => {
+        var _a;
+        setIsOpen(!isOpen);
+        setShouldFilter(false);
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const filteredGroups = (caseGroups.data || [])
+        .filter((g) => g.groupNum !== unGroupedCaseGroupNumber)
+        .filter((g) => !shouldFilter ||
+        isEmpty(input && typeof input === 'string' && input.trim()) ||
+        g.name.toLowerCase().includes(input.toLowerCase()));
+    const { focusedItemIndex, onInputKeyDown, setFocusedItemIndex } = useSelectKeyboardNavigator({
+        list: filteredGroups,
+        isOpen,
+        ignoreResetOnListChange: true,
+        resetIndexOnClose: true,
+        isDisabled: props.isDisabled,
+        setIsOpen,
+        onSelect: (selection) => handleSelect(selection),
+    });
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true, isDisabled: props.isDisabled },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, Object.assign({ value: input, onClick: onToggleClick, onKeyDown: onInputKeyDown, onChange: onChange, autoComplete: "off", innerRef: textInputRef, placeholder: selectAGroupText, role: "combobox", isExpanded: isOpen, "aria-controls": "group-selector-listbox" }, (activeItem && { 'aria-activedescendant': activeItem }))),
+            caseGroups.isFetching ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Spinner, { size: "md" }))) : (React.createElement(TextInputGroupUtilities, Object.assign({}, (!input ? { style: { display: 'none' } } : {})),
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClear, "aria-label": "Clear input value" }))))));
     return (React.createElement("div", { ref: manageActionsRef, className: "toolbar-left" },
         showErrorMessage && (React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create group'), show: true })),
         !showErrorMessage && !showInput && (React.createElement(React.Fragment, null,
             React.createElement("label", null,
                 React.createElement(Trans, null, "Group")),
-            React.createElement(Select, { variant: SelectVariant.typeahead, isDisabled: caseGroups.isFetching || caseGroups.isError || props.isDisabled || disableOnFetch, "aria-label": "Select a group to view accounts", onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onSelect, onClear: onClear, noResultsFoundText: t('No results found'), selections: selectedGroup, isOpen: isOpen, "aria-labelledby": selectAGroupText, placeholderText: selectAGroupText, "data-tracking-id": "group-list-selector" }, (caseGroups.data || [])
-                .filter((g) => g.groupNum !== unGroupedCaseGroupNumber)
-                .map((data, index) => (React.createElement(SelectOption, { key: index, isSelected: data.name === selectedGroup, value: data.name }, data.name)))))),
-        !showErrorMessage && showDropdown && (React.createElement(Dropdown, { className: "group-actions-dropdown group-action", onSelect: closeDropdown, toggle: dropdownToggle, isOpen: isDropdownOpen, "aria-label": t('Group actions dropdown'), isPlain: true, dropdownItems: dropdownItems })),
+            React.createElement(Select, { id: "group-selector", isOpen: isOpen, onSelect: (e, selection) => handleSelect(selection), onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, selected: selectedGroup, shouldFocusFirstItemOnOpen: false, "aria-label": "Select a group to view accounts", "aria-labelledby": selectAGroupText, "data-tracking-id": "group-list-selector", isScrollable: true },
+                React.createElement(SelectList, { id: "group-selector-listbox" }, filteredGroups.length > 0 ? (filteredGroups.map((group, index) => (React.createElement(SelectOption, { id: `group-option-${group.name}`, key: index, value: group, isFocused: focusedItemIndex === index, className: "pf-v6-c-select__menu-wrapper", isSelected: group.name === selectedGroup }, group.name)))) : (React.createElement(SelectOption, { key: "no-results", value: '' }, t('No results found'))))))),
+        !showErrorMessage && showDropdown && (React.createElement(Dropdown, { className: "group-actions-dropdown group-action", toggle: dropdownToggle, isOpen: isDropdownOpen, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), "aria-label": t('Group actions dropdown'), shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: true },
+            React.createElement(MenuContent, null,
+                React.createElement(MenuList, null, dropdownItems)))),
         !showErrorMessage && showInput && (React.createElement("div", { className: "group-name-select" },
             React.createElement("div", { className: "group-name-buttons" },
-                React.createElement(Select, { className: "group-select-input pf-v5-u-mr-sm", isDisabled: disableOnFetch, variant: SelectVariant.typeahead, "aria-label": t('Enter group name'), onToggle: onMultiSelect, onSelect: onMultiSelect, onClear: onMultiClear, onFilter: onChange, selections: input, isOpen: false, placeholderText: t('Enter group name') }),
+                React.createElement(TextInput, { className: "group-select-input pf-v6-u-mr-sm", isDisabled: disableOnFetch, "aria-label": t('Enter group name'), placeholder: t('Enter group name'), onChange: onChange, value: input || '' }),
                 React.createElement("button", { ref: submitActionBtn, disabled: disableOnFetch || input.length === 0 || containsOnlySpecialChars(input), className: "btn btn-app btn-link group-action", onClick: onAction, "aria-label": "Group action submit", "data-tracking-id": "group-action-submit", type: "button" },
                     React.createElement(Trans, null, "Save")),
                 React.createElement("button", { key: "cancel", onClick: onGroupActionCancel, className: "btn btn-app btn-link group-action", disabled: disableOnFetch, "data-tracking-id": "group-action-cancel", "aria-label": "Group action cancel", type: "button" },

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

@@ -1 +1 @@
-{"version":3,"file":"GroupUserPermissionsSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/GroupUserPermissionsSelect/GroupUserPermissionsSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAGlE,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAClE;AAID,eAAO,MAAM,0BAA0B,UAAW,MAAM,sBAoFvD,CAAC"}
+{"version":3,"file":"GroupUserPermissionsSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/GroupUserPermissionsSelect/GroupUserPermissionsSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAQlE,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAClE;AAID,eAAO,MAAM,0BAA0B,GAAI,OAAO,MAAM,sBAkFvD,CAAC"}

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

@@ -8,40 +8,35 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
-import { LoadingIndicator, ToastNotification, useFetch } from '@rh-support/components';
+import { LoadingIndicator, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GroupUserPermissionOptions } from '../../../constants/GroupUserPermissionsOptions';
 const options = GroupUserPermissionOptions;
 export const GroupUserPermissionsSelect = (props) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const onToggle = () => setIsOpen(!isOpen);
     const [option, setOption] = useState(initialOptionsSelect(props.user));
-    const onClear = () => setOption(null);
     const updateUsersFetch = useFetch(publicApi.caseGroups.updateUsers, { propgateErrors: true });
     // reset options when user changes
     useEffect(() => setOption(initialOptionsSelect(props.user)), [props.user]);
-    const onSelect = (event, newOption) => __awaiter(void 0, void 0, void 0, function* () {
-        setIsOpen(false);
-        if (newOption === option) {
+    const onSelect = (newOption) => __awaiter(void 0, void 0, void 0, function* () {
+        if (newOption.value === option) {
             return;
         }
         try {
             let newUser = null;
             switch (true) {
-                case options.readWrite === newOption:
+                case options.readWrite === newOption.value:
                     newUser = Object.assign(Object.assign({}, props.user), { write: true, access: true });
                     break;
-                case options.read === newOption:
+                case options.read === newOption.value:
                     newUser = Object.assign(Object.assign({}, props.user), { write: false, access: true });
                     break;
-                case options.noAccess === newOption:
+                case options.noAccess === newOption.value:
                     newUser = Object.assign(Object.assign({}, props.user), { write: false, access: false });
                     break;
             }
-            setOption(newOption);
+            setOption(newOption.value);
             yield updateUsersFetch.request(props.account.accountNumber, props.group.groupNum, [newUser]);
             props.onChange(newUser);
             ToastNotification.addSuccessMessage(t(`User permission updated successfully`));
@@ -71,7 +66,17 @@ export const GroupUserPermissionsSelect = (props) => {
      * 3. We are fetching users
      * 4. Non-org admins cannot see the manage tab itself and thus that check is not added.
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { isDisabled: updateUsersFetch.isFetching, className: "permissions-select", "aria-label": t('User permissions'), onToggle: onToggle, onSelect: onSelect, onClear: onClear, selections: option, isOpen: isOpen, "aria-labelledby": t('User permissions'), placeholderText: t('Select a permission') }, Object.keys(options).map((key) => (React.createElement(SelectOption, { key: key, value: options[key], "data-tracking-id": `group-user-permission-${key}` }, t(options[key]))))),
+    const getSelectedDropdownOption = {
+        label: option || '',
+        value: option || '',
+    };
+    const getDropdownOptions = () => {
+        return Object.keys(options).map((key) => ({
+            label: t(options[key]),
+            value: options[key],
+        }));
+    };
+    return (React.createElement("div", { className: "permissions-select" },
+        React.createElement(SingleSelectDropdown, { placeholder: 'Select a permission', className: "permissions-select", ariaLabel: t('User permissions'), options: getDropdownOptions(), onSelect: onSelect, isDisabled: updateUsersFetch.isFetching, selected: getSelectedDropdownOption }),
         React.createElement(LoadingIndicator, { show: updateUsersFetch.isFetching, size: "xs" })));
 };

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":"AAcA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,eAAO,MAAM,gBAAgB,yBAiQ5B,CAAC"}
+{"version":3,"file":"ManageGroupUsers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/ManageGroupUsers/ManageGroupUsers.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AA0C5D,eAAO,MAAM,gBAAgB,yBAoX5B,CAAC"}