@rh-support/manage 2.6.1 → 2.6.10

package/lib/esm/components/ManagePreferences/components/PreferenceSelect.js

@@ -7,43 +7,42 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Spinner } from '@patternfly/react-core';
-import { Select, SelectVariant } from '@patternfly/react-core/deprecated';
-import { ToastNotification } from '@rh-support/components';
+import { SingleSelectDropdown, ToastNotification } from '@rh-support/components';
 import isEqual from 'lodash/isEqual';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 export function PreferenceSelect({ id, label, selections, children, onSelect }) {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const onSelectToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
-    // To handle select
-    const onSelectLocal = (event, selection, isPlaceholder) => __awaiter(this, void 0, void 0, function* () {
-        if (isPlaceholder || isEqual(selection, selections))
-            defaultClearSelection();
-        else {
-            setIsLoading(true);
-            try {
-                yield onSelect(event, selection, isPlaceholder);
-                ToastNotification.addSuccessMessage(t('Successfully updated preference'));
-            }
-            catch (e) {
-                ToastNotification.addDangerMessage(t('Failed to update preference'));
-            }
-            finally {
-                defaultClearSelection();
-                setIsLoading(false);
-            }
+    const onSelectLocal = (option) => __awaiter(this, void 0, void 0, function* () {
+        if (isEqual(option.value, selections)) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            yield onSelect(option, option.value);
+            ToastNotification.addSuccessMessage(t('Successfully updated preference'));
+        }
+        catch (e) {
+            ToastNotification.addDangerMessage(t('Failed to update preference'));
         }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    const getDropdownOptions = (children) => children.map((child) => {
+        return {
+            label: child.props.value,
+            value: child.props.value,
+            description: child.props.description,
+        };
     });
-    const defaultClearSelection = () => {
-        setIsOpen(false);
+    const getSelectedDropdownOption = {
+        label: selections,
+        value: selections,
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("label", { id: id },
             React.createElement(Trans, null, label)),
-        React.createElement(Select, { variant: SelectVariant.single, onToggle: (_event, isOpen) => onSelectToggle(isOpen), onSelect: onSelectLocal, selections: selections, isOpen: isOpen, "aria-labelledby": id, toggleIcon: isLoading && React.createElement(Spinner, { size: "sm" }) }, children)));
+        React.createElement(SingleSelectDropdown, { selected: getSelectedDropdownOption, options: getDropdownOptions(children), onSelect: onSelectLocal, isLoading: isLoading, ariaLabel: id })));
 }

package/lib/esm/components/ManagePreferences/components/PreferenceSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreferenceSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/components/PreferenceSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACnD,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,qBAgC3F"}
+{"version":3,"file":"PreferenceSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/components/PreferenceSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACnD,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,qBAgC3F"}

package/lib/esm/components/ManagePreferences/components/PreferenceSwitch.js

@@ -9,27 +9,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Switch } from '@patternfly/react-core';
 import { ToastNotification } from '@rh-support/components';
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 export function PreferenceSwitch({ onSwitchChange, className, id, label, isChecked }) {
-    const [isSwitchLoading, setIsSwitchLoading] = useState(false);
+    // const [isSwitchLoading, setIsSwitchLoading] = useState(false);
     let isCheckedLocal = isChecked;
     const { t } = useTranslation();
     // To handle change
     const onChangeLocal = (checked) => __awaiter(this, void 0, void 0, function* () {
         try {
-            setIsSwitchLoading(true);
+            // setIsSwitchLoading(true);
             yield onSwitchChange(checked);
             isCheckedLocal = isChecked;
             ToastNotification.addSuccessMessage(t('Successfully updated preference'));
-            setIsSwitchLoading(false);
+            // setIsSwitchLoading(false);
         }
         catch (_a) {
             isCheckedLocal = !checked;
             ToastNotification.addDangerMessage(t('Failed to update preference'));
-            setIsSwitchLoading(false);
+            // setIsSwitchLoading(false);
         }
     });
     return (React.createElement("div", null,
-        React.createElement(Switch, Object.assign({}, (className ? { className } : {}), { id: id, label: label, isChecked: isCheckedLocal, onChange: (_event, checked) => onChangeLocal(checked), isDisabled: isSwitchLoading }))));
+        React.createElement(Switch, Object.assign({}, (className ? { className } : {}), { id: id, label: label, isChecked: isCheckedLocal, onChange: (_event, checked) => onChangeLocal(checked), isDisabled: true }))));
 }

package/lib/esm/components/ManagePreferences/sections/PreferencesACL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesACL.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesACL.tsx"],"names":[],"mappings":"AASA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,sBAwF7B"}
+{"version":3,"file":"PreferencesACL.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesACL.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,sBAuF7B"}

package/lib/esm/components/ManagePreferences/sections/PreferencesACL.js

@@ -11,15 +11,14 @@ import { accounts } from '@cee-eng/hydrajs';
 import { Card, CardBody, CardHeader, Spinner, Tooltip } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { useFetch } from '@rh-support/components';
-import { fetchLoggedInUsersAccount, GlobalMetadataDispatchContext, GlobalMetadataStateContext, } from '@rh-support/react-context';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import React, { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PreferenceSwitch } from '../components/PreferenceSwitch';
 export function PreferencesACL() {
     var _a;
     const { t } = useTranslation();
-    const { globalMetadataState: { loggedInUsersAccount, loggedInUserJwtToken }, } = useContext(GlobalMetadataStateContext);
-    const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
+    const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const [isAclActivated, setIsAclActivated] = useState((_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.hasGroupACLs);
     const [isAclLoading, setIsAclLoading] = useState(false);
     const { request: updateAcl } = useFetch(accounts.updateAcl);
@@ -27,7 +26,7 @@ export function PreferencesACL() {
         try {
             setIsAclLoading(true);
             yield updateAcl(!isAclActivated, loggedInUsersAccount.data.accountNumber);
-            fetchLoggedInUsersAccount(dispatchToGlobalMetadataReducer, loggedInUserJwtToken, true);
+            // TODO: migrate to GraphQL - fetchLoggedInUsersAccount(dispatchToGlobalMetadataReducer, loggedInUserJwtToken, true, apolloClient);
             setIsAclActivated(!isAclActivated);
         }
         catch (error) {
@@ -35,7 +34,7 @@ export function PreferencesACL() {
         }
         setIsAclLoading(false);
     });
-    return (React.createElement(Card, { className: "preference-card" },
+    return (React.createElement(Card, { variant: "secondary", className: "preference-card" },
         React.createElement(CardHeader, null,
             React.createElement("h3", null,
                 React.createElement(Trans, null, "Case Group Access Control List"))),
@@ -44,13 +43,13 @@ export function PreferencesACL() {
                 React.createElement("div", { className: "form-group" },
                     React.createElement("label", null,
                         React.createElement(Trans, null, "Enable Case Group ACL for my account")),
-                    React.createElement("div", { className: "preference-page-switch-container" },
+                    React.createElement("div", { className: "preference-page-switch-container pf-v6-u-mt-sm" },
                         React.createElement(PreferenceSwitch, { id: "ACL-switch", label: isAclActivated ? t('ACL Enabled') : t('ACL Disabled'), isChecked: isAclActivated, onSwitchChange: onAclSwitch }),
                         React.createElement("div", { className: "prefhostnameTooltip" },
                             React.createElement(Tooltip, { content: t('This determines if the account is utilizing case group access controls'), position: "right" },
-                                React.createElement(InfoCircleIcon, { className: "pf-v5-u-ml-sm" })),
-                            isAclLoading && (React.createElement(Spinner, { size: "lg", className: "pf-v5-u-ml-sm hostnameSpinner", "aria-label": "Hostname loading" })))),
-                    React.createElement("div", { className: "pf-v5-u-mt-lg" },
+                                React.createElement(InfoCircleIcon, { color: "#5e40be", className: "pf-v6-u-ml-sm cursor-pointer" })),
+                            isAclLoading && (React.createElement(Spinner, { size: "lg", className: "pf-v6-u-ml-sm hostnameSpinner", "aria-label": "Hostname loading" })))),
+                    React.createElement("div", { className: "pf-v6-u-mt-lg" },
                         React.createElement("label", null,
                             React.createElement(Trans, null, "Related links")),
                         React.createElement("p", null,

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseCreate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesCaseCreate.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseCreate.tsx"],"names":[],"mappings":"AAeA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,UAAU,MAAM;CAAG;AACnB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBA0MlD"}
+{"version":3,"file":"PreferencesCaseCreate.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseCreate.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAkBhF,UAAU,MAAM;CAAG;AACnB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBAwNlD"}

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseCreate.js

@@ -7,63 +7,74 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { publicApi } from '@cee-eng/hydrajs';
-import { Card, CardBody, CardHeader } from '@patternfly/react-core';
-import { SelectOption } from '@patternfly/react-core/deprecated';
-import { ToastNotification, useFetch } from '@rh-support/components';
-import { fetchLanguageMetadata, GlobalMetadataDispatchContext, GlobalMetadataReducerConstants, GlobalMetadataStateContext, } from '@rh-support/react-context';
+import { useApolloClient } from '@apollo/client/react';
+import { Card, CardBody, CardHeader, SelectOption } from '@patternfly/react-core';
+import { ToastNotification } from '@rh-support/components';
+import { fetchCaseGroupsForAccount, fetchCaseGroupsForSSO, fetchLanguageMetadata, GlobalMetadataDispatchContext, GlobalMetadataReducerConstants, GlobalMetadataStateContext, } from '@rh-support/react-context';
 import { haventLoadedMetadata, PreferredLanguages } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useToggleDefaultGroup } from '../../../hooks/useCaseGroupGraphQL';
 import { useUserPreferences } from '../../../hooks/useUserPreferences';
 import { PreferenceSelect } from '../components/PreferenceSelect';
+const UNGROUPED_CASE_LABEL = 'Ungrouped Case';
+function resolveDefaultGroupLabel(defaultCaseGroupId, groupList) {
+    var _a;
+    if (!defaultCaseGroupId || defaultCaseGroupId === '-1') {
+        return UNGROUPED_CASE_LABEL;
+    }
+    const defaultGroup = groupList.find((group) => group.groupNum === defaultCaseGroupId);
+    return (_a = defaultGroup === null || defaultGroup === void 0 ? void 0 : defaultGroup.name) !== null && _a !== void 0 ? _a : UNGROUPED_CASE_LABEL;
+}
 export function PreferencesCaseCreate(props) {
+    var _a, _b, _c, _d, _e, _f;
     const { t } = useTranslation();
-    const location = useLocation();
-    const { globalMetadataState: { caseGroups, caseLanguages, loggedInUserJwtToken, loggedInUserRights, loggedInUsersAccount, }, } = useContext(GlobalMetadataStateContext);
+    const apolloClient = useApolloClient();
+    const { globalMetadataState: { caseGroups, caseLanguages, loggedInUser, loggedInUserJwtToken, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
     const languageConst = caseLanguages.data;
-    const getDefaultGroupFetch = useFetch(publicApi.caseGroups.getCaseGroupsForSSO, {
-        propgateErrors: true,
-    });
-    const toggleDefaultGroupFetch = useFetch(publicApi.caseGroups.toggleDefaultGroup, {
-        propgateErrors: true,
-    });
-    const grabDefaultGroupList = (ssoUser) => __awaiter(this, void 0, void 0, function* () {
-        try {
-            let list = yield getDefaultGroupFetch.request(ssoUser);
-            setUserDefaultGroupList(list);
-            let filteredDefaultGroup = (list ? list : []).filter((group) => group.isDefault === true);
-            if (!isEmpty(filteredDefaultGroup)) {
-                setOriginalDefaultGroup(filteredDefaultGroup[0].name);
-            }
-            else {
-                setOriginalDefaultGroup('Ungrouped Case');
-            }
-        }
-        catch (error) {
-            console.log(error);
+    const { toggleDefault } = useToggleDefaultGroup();
+    const groupList = useMemo(() => caseGroups.data || [], [caseGroups.data]);
+    const contactId = (_a = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _a === void 0 ? void 0 : _a.id;
+    const defaultCaseGroupId = (_c = (_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _b === void 0 ? void 0 : _b.defaultCaseGroup) !== null && _c !== void 0 ? _c : null;
+    const salesforceAccountId = (_d = loggedInUsersAccount.data) === null || _d === void 0 ? void 0 : _d.salesforceAccountId;
+    const loggedInContactId = (_e = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _e === void 0 ? void 0 : _e.id;
+    const loggedInIsOrgAdmin = (_f = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _f === void 0 ? void 0 : _f.isOrgAdmin;
+    const hasFetchedCaseGroups = useRef(false);
+    const updateDefaultGroupPref = (groupId) => __awaiter(this, void 0, void 0, function* () {
+        if (!contactId) {
+            ToastNotification.addDangerMessage(t('Cannot update default group: contact information is missing'));
+            throw new Error('Missing contact id');
         }
-    });
-    const updateDefaultGroupPref = (groupNum) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
         try {
-            yield toggleDefaultGroupFetch.request(groupNum, loggedInUserRights.data.getSSOUsername(), true, loggedInUsersAccount.data.secureSupport);
-            const updatedGroups = (caseGroups.data || []).map((group) => (Object.assign(Object.assign({}, group), { isDefault: group.groupNum === groupNum })));
+            yield toggleDefault(contactId, groupId);
+            const updatedGroups = groupList.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 }),
                 },
             });
-            setUserDefaultGroupList(updatedGroups);
-            setOriginalDefaultGroup(((_a = updatedGroups.find((g) => g.isDefault)) === null || _a === void 0 ? void 0 : _a.name) || 'Ungrouped Case');
+            const updatedLoggedInUserData = Object.assign(Object.assign({}, loggedInUser.data), { defaultCaseGroup: groupId });
+            dispatchToGlobalMetadataReducer({
+                type: GlobalMetadataReducerConstants.setLoggedInUser,
+                payload: {
+                    loggedInUser: Object.assign(Object.assign({}, loggedInUser), { data: updatedLoggedInUserData }),
+                },
+            });
+            setOriginalDefaultGroup(resolveDefaultGroupLabel(groupId, updatedGroups));
         }
         catch (error) {
-            console.log(error);
+            const message = String((error === null || error === void 0 ? void 0 : error.message) || '');
+            if (message.includes('insufficient access rights')) {
+                ToastNotification.addDangerMessage(t('You do not have permission to change the default group'));
+            }
+            else if (message !== 'Missing contact id') {
+                ToastNotification.addDangerMessage(t('Failed to update default group'));
+            }
+            throw error;
         }
     });
     const languagesList = map(languageConst, (cl) => ({
@@ -72,7 +83,6 @@ export function PreferencesCaseCreate(props) {
     }));
     const [originalPreferredLanguage, setOriginalPreferredLanguage] = useState('');
     const [originalDefaultGroup, setOriginalDefaultGroup] = useState('');
-    const [userDefaultGroupList, setUserDefaultGroupList] = useState();
     const { getPreferredLanguage, updatePreferredLanguage } = useUserPreferences();
     const preferredLangTitleId = 'preferred-language-select';
     const defaultGroupTitleId = 'default-group-select';
@@ -85,7 +95,7 @@ export function PreferencesCaseCreate(props) {
             return foundLang === null || foundLang === void 0 ? void 0 : foundLang.label;
         }
     };
-    const onPreferredLanguageSelect = (event, selection, isPlaceholder) => __awaiter(this, void 0, void 0, function* () {
+    const onPreferredLanguageSelect = (event, selection) => __awaiter(this, void 0, void 0, function* () {
         const selectedLanguageCode = getLanguageKey(selection);
         try {
             yield updatePreferredLanguage(selectedLanguageCode.value);
@@ -95,19 +105,14 @@ export function PreferencesCaseCreate(props) {
             console.log(error);
         }
     });
-    const onDefaultGroupSelect = (event, selection, isPlaceholder) => __awaiter(this, void 0, void 0, function* () {
-        try {
-            if (selection === 'Ungrouped Case') {
-                updateDefaultGroupPref('-1');
-            }
-            if (!isEmpty(userDefaultGroupList)) {
-                let filteredGroupSelect = userDefaultGroupList.filter((group) => group.name === selection);
-                yield updateDefaultGroupPref(filteredGroupSelect[0].groupNum);
-                setOriginalDefaultGroup(filteredGroupSelect[0].name);
-            }
+    const onDefaultGroupSelect = (event, selection) => __awaiter(this, void 0, void 0, function* () {
+        if (selection === UNGROUPED_CASE_LABEL) {
+            yield updateDefaultGroupPref(null);
+            return;
         }
-        catch (error) {
-            console.log(error);
+        const selectedGroup = groupList.find((group) => group.name === selection);
+        if (selectedGroup) {
+            yield updateDefaultGroupPref(selectedGroup.groupNum);
         }
     });
     useEffect(() => {
@@ -125,23 +130,32 @@ export function PreferencesCaseCreate(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [caseLanguages, caseGroups, dispatchToGlobalMetadataReducer, loggedInUserJwtToken]);
     useEffect(() => {
-        grabDefaultGroupList(loggedInUserRights.data.getSSOUsername());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [loggedInUserRights, caseGroups]);
-    useEffect(() => {
-        if (location.pathname !== '/manage/preferences') {
+        if (loggedInUser.isFetching)
             return;
+        setOriginalDefaultGroup(resolveDefaultGroupLabel(defaultCaseGroupId, groupList));
+    }, [defaultCaseGroupId, groupList, loggedInUser.isFetching]);
+    useEffect(() => {
+        if (haventLoadedMetadata(caseLanguages)) {
+            fetchLanguageMetadata(dispatchToGlobalMetadataReducer, apolloClient);
         }
-        grabDefaultGroupList(loggedInUserRights.data.getSSOUsername());
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname]);
+    }, [caseLanguages, apolloClient]);
     useEffect(() => {
-        if (haventLoadedMetadata(caseLanguages)) {
-            fetchLanguageMetadata(dispatchToGlobalMetadataReducer);
+        var _a;
+        if (!salesforceAccountId || loggedInUser.isFetching || !contactId)
+            return;
+        if (hasFetchedCaseGroups.current)
+            return;
+        hasFetchedCaseGroups.current = true;
+        if ((_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.isInternal) {
+            fetchCaseGroupsForAccount(dispatchToGlobalMetadataReducer, apolloClient, salesforceAccountId, defaultCaseGroupId, loggedInContactId, loggedInIsOrgAdmin);
+        }
+        else {
+            fetchCaseGroupsForSSO(dispatchToGlobalMetadataReducer, apolloClient, salesforceAccountId, defaultCaseGroupId, loggedInContactId, loggedInIsOrgAdmin);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [caseLanguages]);
-    return (React.createElement(Card, { className: "preference-card" },
+    }, [salesforceAccountId, loggedInUser.isFetching, contactId, defaultCaseGroupId]);
+    return (React.createElement(Card, { variant: "secondary", className: "preference-card" },
         React.createElement(CardHeader, null,
             React.createElement("h3", null,
                 React.createElement(Trans, null, "Case create"))),
@@ -152,5 +166,5 @@ export function PreferencesCaseCreate(props) {
                     React.createElement("p", { className: "form-instructions" },
                         React.createElement(Trans, null, "Preferred language will impact future cases, not existing ones."))),
                 React.createElement("div", { className: "form-group" },
-                    React.createElement(PreferenceSelect, { label: "Default group", id: defaultGroupTitleId, onSelect: onDefaultGroupSelect, selections: originalDefaultGroup }, (userDefaultGroupList ? userDefaultGroupList : []).map((option, index) => (React.createElement(SelectOption, { key: index, value: option.name })))))))));
+                    React.createElement(PreferenceSelect, { label: "Default group", id: defaultGroupTitleId, onSelect: onDefaultGroupSelect, selections: originalDefaultGroup }, [UNGROUPED_CASE_LABEL, ...groupList.map((group) => group.name)].map((name, index) => (React.createElement(SelectOption, { key: index, value: name })))))))));
 }

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesCaseSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseSearch.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBA6GlD"}
+{"version":3,"file":"PreferencesCaseSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseSearch.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBA6GlD"}

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseSearch.js

@@ -7,8 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Card, CardBody, CardHeader } from '@patternfly/react-core';
-import { SelectOption } from '@patternfly/react-core/deprecated';
+import { Card, CardBody, CardHeader, SelectOption } from '@patternfly/react-core';
 import { ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext, UserPreferencesKeys } from '@rh-support/react-context';
 import find from 'lodash/find';
@@ -56,7 +55,7 @@ export function PreferencesCaseSearch(props) {
     useEffect(() => {
         userOriginalSavedSearch();
     });
-    const onSelect = (event, selection, isPlaceholder) => __awaiter(this, void 0, void 0, function* () {
+    const onSelect = (event, selection) => __awaiter(this, void 0, void 0, function* () {
         if (selection !== restoreLatestText) {
             try {
                 yield updateAutoRestoreSavedSearchPreference(selection);
@@ -86,7 +85,7 @@ export function PreferencesCaseSearch(props) {
         return emptyPlaceHolderList;
     }; // we are now adding "restore last" as the last of the array and "select a saved search" as the first option.
     const titleId = 'auto-restore-preference-dropdown';
-    return (React.createElement(Card, { className: "preference-card" },
+    return (React.createElement(Card, { variant: "secondary", className: "preference-card" },
         React.createElement(CardHeader, null,
             React.createElement("h3", null,
                 React.createElement(Trans, null, "Case search"))),

package/lib/esm/components/ManagePreferences/sections/PreferencesCaseView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesCaseView.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseView.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAqShD"}
+{"version":3,"file":"PreferencesCaseView.d.ts","sourceRoot":"","sources":["../../../../../src/components/ManagePreferences/sections/PreferencesCaseView.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBA0OhD"}