@rh-support/troubleshoot 2.7.1 → 2.7.11

package/lib/esm/components/CaseInformation/CaseGroup.js

@@ -7,20 +7,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import { useApolloClient } from '@apollo/client/react';
+import { Button, HelperText, HelperTextItem, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, ValidatedOptions, } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { ToastNotification, useSelectKeyboardNavigator, ValueChangedIcon } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
-import { toOption } from '@rh-support/utils';
+import { AbilityContext, resourceActions, resources } from '@rh-support/user-permissions';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
+import { useCaseGroupUiState } from '../../hooks/useCaseGroupUiState';
 import { useCaseUpdateErrorMessage } from '../../hooks/useCaseUpdateErrorMessage';
-import { setCaseDetails, setSelectedCaseGroupUsers, updateCaseDetails } from '../../reducers/CaseReducer';
+import { fetchCaseGroupsForContactGraphQL, setCaseDetails, setCaseState, setSelectedCaseGroupUsers, updateCaseDetailsGraphQL, } from '../../reducers/CaseReducer';
 import { PDFContext } from '../CaseEditView/PDFContainer';
 import { CaseValuesToWatch } from '../shared/Constants';
 import { getChangedValueTooltip } from '../shared/utils';
@@ -35,20 +38,41 @@ const emptyCaseGroup = {
 function CaseGroup(props) {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { groupNumber, caseNumber, accountNumber, selectedAccountDetails, ownersCaseGroups, groupName, isCaseOwnerUpdating, contactSSOName, } = useCaseSelector((state) => ({
-        caseNumber: state.caseDetails.caseNumber,
-        groupNumber: state.caseDetails.groupNumber,
-        accountNumber: state.caseDetails.accountNumberRef,
-        ownersCaseGroups: state.ownersCaseGroups,
-        selectedAccountDetails: state.selectedAccountDetails,
-        groupName: state.caseDetails.groupName,
-        isCaseOwnerUpdating: state.isCaseOwnerUpdating,
-        contactSSOName: state.caseDetails.contactSSOName,
-    }), isEqual);
+    const { groupNumber, caseNumber, caseId, accountNumber, ownersCaseGroups, groupName, isCaseOwnerUpdating, contactSSOName, selectedOwnerContactId, selectedOwnerIsOrgAdmin, pendingCaseOwnerUpdate, existingCaseDetails, } = useCaseSelector((state) => {
+        var _a, _b, _c, _d, _e;
+        return ({
+            caseNumber: state.caseDetails.caseNumber,
+            caseId: state.caseDetails.id,
+            groupNumber: state.caseDetails.groupNumber,
+            accountNumber: state.caseDetails.accountNumberRef,
+            ownersCaseGroups: state.ownersCaseGroups,
+            groupName: state.caseDetails.groupName,
+            isCaseOwnerUpdating: state.isCaseOwnerUpdating,
+            contactSSOName: state.caseDetails.contactSSOName,
+            selectedOwnerContactId: (_b = (_a = state.selectedOwner) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.id,
+            selectedOwnerIsOrgAdmin: (_e = (_d = (_c = state.selectedOwner) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.isOrgAdmin) !== null && _e !== void 0 ? _e : false,
+            pendingCaseOwnerUpdate: state.pendingCaseOwnerUpdate,
+            existingCaseDetails: state.caseDetails,
+        });
+    }, isEqual);
     const caseDispatch = useCaseDispatch();
+    const apolloClient = useApolloClient();
     const { isExportingPDF } = useContext(PDFContext);
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
-    const isGroupMandatory = selectedAccountDetails.data.requireCGroupOnCreate;
+    const { isGroupMandatory, shouldHideSelector, isNoGroupsBlockedState } = useCaseGroupUiState();
+    useEffect(() => {
+        if (!shouldHideSelector || !isEmpty(caseNumber))
+            return;
+        setCaseDetails(caseDispatch, { groupNumber: '', groupName: '' });
+    }, [shouldHideSelector, caseNumber, caseDispatch]);
+    useEffect(() => {
+        if (!caseNumber)
+            return;
+        if (isEmpty(selectedOwnerContactId) || isEmpty(accountNumber))
+            return;
+        fetchCaseGroupsForContactGraphQL(caseDispatch, apolloClient, selectedOwnerContactId, accountNumber, null, selectedOwnerIsOrgAdmin, groupNumber !== null && groupNumber !== void 0 ? groupNumber : '');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedOwnerContactId, accountNumber, selectedOwnerIsOrgAdmin]);
     const [selectedCaseGroup, setSelectedCaseGroup] = useState(isGroupMandatory ? undefined : emptyCaseGroup);
     const [isCaseGroupInvalid, setCaseGroupInvalid] = useState(false);
     const [isSelectedUngroupedInvalid, setIsSelectedUngroupedInvalid] = useState(false);
@@ -59,7 +83,10 @@ function CaseGroup(props) {
     const [shouldFilter, setShouldFilter] = useState(false);
     const textInputRef = useRef();
     const canEditCase = useCanEditCase();
+    const ability = useContext(AbilityContext);
     const { globalMetadataState: { loggedInUserRights, loggedInUser }, } = useContext(GlobalMetadataStateContext);
+    const canViewManageTab = ability.can(resourceActions.READ, resources.MANAGE);
+    const canViewCaseGroups = ability.can(resourceActions.READ, resources.CASE_GROUPS) && canViewManageTab;
     // value changed logic to show a non local group change
     const [localGroupChange, setLocalGroupChange] = useState(false);
     const afterGroupLocalChange = () => setLocalGroupChange(false);
@@ -70,22 +97,29 @@ function CaseGroup(props) {
         return isInValidGroup;
     };
     const onCaseGroupUpdate = (caseDetails) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
         if (canEditCase.alert())
             return;
         setCaseGroupUpdating(true);
         try {
-            yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
-            setCaseGroupUpdating(false);
-            setSelectedCaseGroupUsers(caseDispatch, accountNumber, caseDetails.groupNumber, loggedInUserRights.data);
+            const pendingOwnerUpdate = pendingCaseOwnerUpdate;
+            const updatePayload = pendingOwnerUpdate
+                ? Object.assign({ contactId: pendingOwnerUpdate.contactId, contactSSOName: pendingOwnerUpdate.contactSSOName, groupNumber: caseDetails.groupNumber }, ((_a = pendingOwnerUpdate.phoneCaseUpdate) !== null && _a !== void 0 ? _a : {})) : { groupNumber: caseDetails.groupNumber };
+            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, caseNumber, updatePayload, false, pendingOwnerUpdate ? { existingCaseDetails } : { salesforceCaseId: caseId });
+            if (pendingOwnerUpdate) {
+                setCaseState(caseDispatch, { pendingCaseOwnerUpdate: null });
+                setSelectedCaseGroupUsers(caseDispatch, accountNumber, caseDetails.groupNumber, loggedInUserRights.data);
+            }
             ToastNotification.addSuccessMessage(t(`Group has been successfully updated`));
+            setCaseGroupUpdating(false);
         }
         catch (e) {
             setCaseGroupUpdating(false);
-            caseUpdateError.showError(e, t(`Group failed to update`));
+            caseUpdateError.showFieldError(e, t('Group'), () => onCaseGroupUpdate(caseDetails));
         }
     });
     const onCaseGroupChange = (selection) => __awaiter(this, void 0, void 0, function* () {
-        if (!isInvalidateCaseGroup(selection) && selection.groupNum !== groupNumber) {
+        if (!isInvalidateCaseGroup(selection) && (selection.groupNum !== groupNumber || !selected)) {
             const caseDetails = {
                 groupNumber: selection.groupNum,
                 groupName: selection.name || '',
@@ -93,11 +127,10 @@ function CaseGroup(props) {
             setIsOpen(false);
             if (!isEmpty(caseNumber)) {
                 yield onCaseGroupUpdate(caseDetails);
-                setIsSelectedUngroupedInvalid(isGroupMandatory && (!selection.groupNum || selection.groupNum === '-1'));
+                setIsSelectedUngroupedInvalid(isGroupMandatory && !selection.groupNum);
             }
             else {
                 setCaseDetails(caseDispatch, caseDetails);
-                setSelectedCaseGroupUsers(caseDispatch, accountNumber, caseDetails.groupNumber, loggedInUserRights.data);
             }
             setSelectedCaseGroup({
                 name: selection.name || '',
@@ -120,10 +153,7 @@ function CaseGroup(props) {
             ? list.filter((v) => v.name.toLowerCase().includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()))
             : list;
         if (isGroupMandatory) {
-            // having group selected for case is mandatory, make 'UnGrouped Case' option disabled
-            const listItems = options.map((item) => (Object.assign(Object.assign({}, item), { disabled: item.groupNum === '-1' })));
-            // As group is mandatory, 'UnGrouped Case' cannot be selected we filter it out
-            return listItems.filter((g) => g.groupNum !== '-1');
+            return options.filter((g) => !!g.groupNum);
         }
         else
             return options;
@@ -134,11 +164,11 @@ function CaseGroup(props) {
     useEffect(() => {
         var _a, _b;
         // case group may change outside of PCM. On group load check if we have a valid group
-        setIsSelectedUngroupedInvalid(isGroupMandatory && (!groupNumber || groupNumber === '-1'));
+        setIsSelectedUngroupedInvalid(isGroupMandatory && !groupNumber);
         if (groupNumber === undefined)
             return;
         if (((_b = (_a = ownersCaseGroups === null || ownersCaseGroups === void 0 ? void 0 : ownersCaseGroups.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) === 0) {
-            if (groupNumber !== '-1' && groupName && caseNumber) {
+            if (groupNumber && groupName && caseNumber) {
                 setSelectedCaseGroup({
                     name: groupName,
                     groupNum: groupNumber,
@@ -150,11 +180,16 @@ function CaseGroup(props) {
                 setInputValue(groupName);
                 setSelected(groupName);
             }
+            else if (!groupNumber) {
+                setSelectedCaseGroup(isGroupMandatory ? undefined : emptyCaseGroup);
+                setInputValue('');
+                setSelected('');
+            }
             return;
         }
         const selectedGroup = find(ownersCaseGroups.data, (g) => g.groupNum === groupNumber);
         if (selectedGroup && selectedGroup.groupNum) {
-            if (isGroupMandatory && selectedGroup.groupNum === '-1') {
+            if (isGroupMandatory && !selectedGroup.groupNum) {
                 setCaseGroupInvalid(true);
             }
             else {
@@ -163,33 +198,121 @@ function CaseGroup(props) {
             setInputValue(selectedGroup.name);
             setSelected(selectedGroup.name);
         }
+        else if (groupNumber && groupName) {
+            setSelectedCaseGroup({
+                name: groupName,
+                groupNum: groupNumber,
+                defaultMembers: [],
+                isDefault: false,
+                isPrivate: false,
+                members: [],
+            });
+            setInputValue(groupName);
+            setSelected(groupName);
+        }
+        else if (!groupNumber) {
+            setSelectedCaseGroup(isGroupMandatory ? undefined : emptyCaseGroup);
+            setInputValue('');
+            setSelected('');
+            setCaseGroupInvalid(!!isGroupMandatory);
+        }
         else {
             setCaseGroupInvalid(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [ownersCaseGroups, caseNumber, isGroupMandatory]);
+    }, [ownersCaseGroups, caseNumber, isGroupMandatory, groupNumber, groupName]);
     const onCaseGroupClear = () => __awaiter(this, void 0, void 0, function* () {
-        var _a;
-        try {
-            yield onCaseGroupChange(toOption(emptyCaseGroup));
-            setSelectedCaseGroup(emptyCaseGroup);
-            setInputValue('');
-            setSelected('');
-            (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setIsOpen(false);
+        if (canEditCase.alert())
+            return;
+        if (isGroupMandatory && caseNumber) {
+            ToastNotification.addDangerMessage(t('Case Group is required for this account and cannot be removed.'));
+            return;
+        }
+        const caseDetails = {
+            groupNumber: '',
+            groupName: '',
+        };
+        if (caseNumber) {
+            setCaseGroupUpdating(true);
+            try {
+                yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, caseNumber, { groupNumber: '' }, false, {
+                    salesforceCaseId: caseId,
+                });
+                setCaseDetails(caseDispatch, caseDetails);
+                setCaseGroupUpdating(false);
+                ToastNotification.addSuccessMessage(t(`Group has been successfully updated`));
+            }
+            catch (e) {
+                setCaseGroupUpdating(false);
+                caseUpdateError.showFieldError(e, t('Group'), onCaseGroupClear);
+                return;
+            }
         }
-        catch (error) {
-            console.log(error);
+        else {
+            setCaseDetails(caseDispatch, caseDetails);
+            setSelectedCaseGroupUsers(caseDispatch, accountNumber, '', loggedInUserRights.data);
         }
+        setSelectedCaseGroup(emptyCaseGroup);
+        setCaseGroupInvalid(!!isGroupMandatory);
+        setInputValue('');
+        setSelected('');
+        setIsOpen(false);
     });
-    const showHelperText = !isSelectedUngroupedInvalid || (!isCaseGroupInvalid && !isGroupMandatory);
-    const showEmptyValidationError = !caseNumber && isNextBtnClickedToShowValidationError && isCaseGroupInvalid;
+    const caseGroupRequiredErrorMessage = caseNumber
+        ? t('Please select a Case Group to update the case')
+        : t('Please select a Case Group to create the case');
+    const renderNoGroupsBlockedMessage = () => {
+        var _a;
+        if (canViewCaseGroups) {
+            return (React.createElement("span", { className: "case-group-field-helper__text" },
+                t('Groups are enabled for your account, but none have been set up yet. Please '),
+                React.createElement(Link, { className: "case-group-field-helper__create-link", to: "/manage/groups" }, t('create a group')),
+                caseNumber ? t(' before you update a case.') : t(' before you create a case.')));
+        }
+        if ((_a = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _a === void 0 ? void 0 : _a.isOrgAdmin) {
+            return t('Groups are enabled for your account, but no groups have been set up yet.');
+        }
+        return caseNumber
+            ? t('Groups are enabled for your account, but none exist yet. Please contact your org admin to set one up before you update a case.')
+            : t('Groups are enabled for your account, but none exist yet. Please contact your org admin to set one up before you create a case.');
+    };
+    const groupFieldErrorMessage = isNoGroupsBlockedState ? null : caseGroupRequiredErrorMessage;
+    const showMandatoryGroupValidationError = !isExportingPDF &&
+        (isNoGroupsBlockedState ||
+            (isGroupMandatory &&
+                (isCaseGroupInvalid || isSelectedUngroupedInvalid || !!pendingCaseOwnerUpdate) &&
+                isEmpty(groupNumber) &&
+                (!!caseNumber || isNextBtnClickedToShowValidationError || isEmpty(groupNumber))));
+    const showGroupFieldValidationError = showMandatoryGroupValidationError || ownersCaseGroups.isError;
+    const renderGroupFieldHelperContent = () => {
+        if (isNoGroupsBlockedState) {
+            return renderNoGroupsBlockedMessage();
+        }
+        return groupFieldErrorMessage;
+    };
+    const groupFieldHelperContent = renderGroupFieldHelperContent();
+    const showHelperText = !showMandatoryGroupValidationError;
+    useEffect(() => {
+        setCaseState(caseDispatch, { showMandatoryCaseGroupValidationError: !!showMandatoryGroupValidationError });
+        return () => {
+            setCaseState(caseDispatch, { showMandatoryCaseGroupValidationError: false });
+        };
+    }, [caseDispatch, showMandatoryGroupValidationError]);
     const canNotChangeGroup = () => !loggedInUserRights.data.isInternal() &&
         !loggedInUser.data.isOrgAdmin &&
         loggedInUser.data.ssoUsername !== contactSSOName &&
         !loggedInUserRights.data.isPartner();
+    const isSelectorDisabled = isNoGroupsBlockedState ||
+        ownersCaseGroups.isError ||
+        ownersCaseGroups.isFetching ||
+        isCaseGroupUpdating ||
+        isCaseOwnerUpdating ||
+        canNotChangeGroup() ||
+        canEditCase.isCaseNotEditable;
     const onToggleClick = () => {
         var _a;
+        if (isNoGroupsBlockedState)
+            return;
         setIsOpen((prev) => !prev);
         if (!isOpen) {
             setShouldFilter(false);
@@ -208,19 +331,20 @@ function CaseGroup(props) {
             setShouldFilter(true);
         }
     };
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isDisabled: ownersCaseGroups.isError ||
-            ownersCaseGroups.isFetching ||
-            isCaseGroupUpdating ||
-            isCaseOwnerUpdating ||
-            canNotChangeGroup(), status: ownersCaseGroups.isError || showEmptyValidationError || (caseNumber && isSelectedUngroupedInvalid)
-            ? 'danger'
-            : undefined, isFullWidth: true },
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isDisabled: isSelectorDisabled, status: showGroupFieldValidationError ? 'danger' : undefined, isFullWidth: true },
         React.createElement(TextInputGroup, { isPlain: true },
-            React.createElement(TextInputGroupMain, { value: inputValue, onClick: onToggleClick, onChange: onInputQueryChange, onKeyDown: onInputKeyDown, autoComplete: "off", innerRef: textInputRef, placeholder: t(`Select a group`), role: "combobox", isExpanded: isOpen, "aria-controls": "select-typeahead-listbox" }),
+            React.createElement(TextInputGroupMain, { value: inputValue, onClick: onToggleClick, onChange: onInputQueryChange, onKeyDown: onInputKeyDown, onBlur: () => {
+                    if (selected) {
+                        setInputValue(selected);
+                        setShouldFilter(false);
+                    }
+                }, autoComplete: "off", innerRef: textInputRef, placeholder: t(`Select a group`), role: "combobox", isExpanded: isOpen, "aria-controls": "select-typeahead-listbox", "aria-describedby": showGroupFieldValidationError ? "get-support-group-helper'" : undefined, disabled: isSelectorDisabled }),
             !isCaseOwnerUpdating && (ownersCaseGroups.isFetching || isCaseGroupUpdating) ? (React.createElement(TextInputGroupUtilities, null,
                 React.createElement(Spinner, { size: "md" }))) : (React.createElement(TextInputGroupUtilities, Object.assign({}, (!inputValue ? { style: { display: 'none' } } : {})),
-                React.createElement(Button, { variant: "plain", onClick: onCaseGroupClear, "aria-label": "Clear input value" },
-                    React.createElement(TimesIcon, { "aria-hidden": true })))))));
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onCaseGroupClear, "aria-label": "Clear input value" }))))));
+    if (shouldHideSelector) {
+        return null;
+    }
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", { htmlFor: "get-support-group" },
             React.createElement(Trans, null, "Group"),
@@ -228,10 +352,8 @@ function CaseGroup(props) {
             isGroupMandatory && !isExportingPDF && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))),
         React.createElement(Select, { id: "get-support-group", "data-tracking-id": "get-support-group", isOpen: isOpen, selected: selected, onSelect: (event, val) => onCaseGroupChange(val), onOpenChange: () => setIsOpen(false), toggle: toggle, shouldFocusFirstItemOnOpen: false, onBlur: () => onOuterClickGroupCheck, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
             React.createElement(SelectList, null, computeDropdownList().map((option, index) => (React.createElement(SelectOption, { key: option.name, isFocused: focusedItemIndex === index, value: option, isSelected: option.name === selected }, option.name))))),
-        caseNumber && isSelectedUngroupedInvalid && !isExportingPDF && (React.createElement("p", { className: "form-instructions form-invalid" },
-            React.createElement(Trans, null, "'Ungrouped Case' cannot be selected. Please select a group."))),
-        showEmptyValidationError && isGroupMandatory && !isExportingPDF && (React.createElement("p", { className: "form-instructions form-invalid" },
-            React.createElement(Trans, null, "Case group cannot be empty."))),
+        showGroupFieldValidationError && groupFieldHelperContent && (React.createElement(HelperText, { className: "pf-v6-u-mt-sm pf-v6-u-mb-sm case-group-field-helper" },
+            React.createElement(HelperTextItem, { variant: ValidatedOptions.error, id: "get-support-group-helper'" }, groupFieldHelperContent))),
         showHelperText && (React.createElement("p", { className: "form-instructions" },
             React.createElement(Trans, null, "Organization administrators have the permission to manage groups.")))));
 }

package/lib/esm/components/CaseInformation/CaseInformation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiHpD"}
+{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAmHpD"}

package/lib/esm/components/CaseInformation/CaseInformation.js

@@ -1,24 +1,25 @@
+import { useApolloClient } from '@apollo/client/react';
 import { AlertMessage, AlertType, LoadingIndicator } from '@rh-support/components';
 import { fetchCaseSeverities, fetchCaseTypes, fetchLanguageMetadata, GlobalMetadataDispatchContext, GlobalMetadataStateContext, } from '@rh-support/react-context';
-import { canManageCase, haventLoadedMetadata } from '@rh-support/utils';
+import { haventLoadedMetadata } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseSelector } from '../../context/CaseContext';
 import { OpenShiftClusterId } from '../CaseManagement/OpenShiftClusterId';
-import { Hostname } from '../ImproveCase/Hostname';
+// import { Hostname } from '../ImproveCase/Hostname';
 import KtQuestions from '../ImproveCase/KtQuestions';
 import ClusterRecommendations from '../Recommendations/ClusterRecommendations';
 export default function CaseInformation(props) {
     const { t } = useTranslation();
-    const { globalMetadataState: { allCaseTypes, allCaseSeverities, caseLanguages, loggedInUser, loggedInUserJwtToken, loggedInUsersAccount, }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { allCaseTypes, allCaseSeverities, caseLanguages, loggedInUser, loggedInUserJwtToken, loggedInUsersAccount, loggedInUserRights, }, } = useContext(GlobalMetadataStateContext);
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
-    const { contactSSOName, selectedAccountDetails, ownersCaseGroups, hasInvalidEntitlements } = useCaseSelector((state) => ({
+    const apolloClient = useApolloClient();
+    const { contactSSOName, selectedAccountDetails, ownersCaseGroups } = useCaseSelector((state) => ({
         contactSSOName: state.caseDetails.contactSSOName,
         ownersCaseGroups: state.ownersCaseGroups,
         selectedAccountDetails: state.selectedAccountDetails,
-        hasInvalidEntitlements: state.hasInvalidEntitlements,
     }), isEqual);
     const isMetadataLoading = () => {
         return !isMetadataLoadingError() && (loggedInUser.isFetching || selectedAccountDetails.isFetching);
@@ -38,13 +39,13 @@ export default function CaseInformation(props) {
         }
         const allPromisses = [];
         if (haventLoadedMetadata(allCaseTypes)) {
-            allPromisses.push(fetchCaseTypes(dispatchToGlobalMetadataReducer, loggedInUsersAccount.data.secureSupport));
+            allPromisses.push(fetchCaseTypes(dispatchToGlobalMetadataReducer, apolloClient));
         }
         if (haventLoadedMetadata(allCaseSeverities)) {
-            allPromisses.push(fetchCaseSeverities(dispatchToGlobalMetadataReducer, loggedInUsersAccount.data.secureSupport));
+            allPromisses.push(fetchCaseSeverities(dispatchToGlobalMetadataReducer, apolloClient));
         }
         if (haventLoadedMetadata(caseLanguages)) {
-            allPromisses.push(fetchLanguageMetadata(dispatchToGlobalMetadataReducer));
+            allPromisses.push(fetchLanguageMetadata(dispatchToGlobalMetadataReducer, apolloClient));
         }
         Promise.all(allPromisses);
     }, [
@@ -56,28 +57,28 @@ export default function CaseInformation(props) {
         loggedInUserJwtToken,
         selectedAccountDetails,
         loggedInUsersAccount.data.secureSupport,
+        apolloClient,
     ]);
     return (React.createElement(React.Fragment, null,
         React.createElement(LoadingIndicator, { show: isMetadataLoading(), size: "lg" }),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError() }),
-        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-v5-u-mt-lg" },
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v6-u-mt-lg", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError() }),
+        React.createElement(AlertMessage, { show: !loggedInUserRights.data.canManageCases(), variant: AlertType.DANGER, className: "pf-v6-u-mt-lg" },
             React.createElement(Trans, { i18nKey: "i18ManageCaseContactCustomerService" },
                 "You need additional access to manage cases.\u00A0 Please contact",
                 ' ',
                 React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
                 " for assistance.")),
-        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", isInline: true },
+        React.createElement(AlertMessage, { show: !loggedInUserRights.data.isEntitled(), variant: AlertType.DANGER, className: "pf-v6-u-mt-lg", isInline: true },
             React.createElement(Trans, { i18nKey: "i18ValidEntitlementContactCustomerService" },
                 "You need a valid entitlement to create a case.\u00A0 Please contact",
                 ' ',
                 React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
                 " for assistance.")),
-        !hasInvalidEntitlements &&
+        loggedInUserRights.data.isEntitled() &&
             !isMetadataLoading() &&
             !isMetadataLoadingError() &&
-            canManageCase(loggedInUserJwtToken) && (React.createElement(React.Fragment, null,
+            loggedInUserRights.data.canManageCases() && (React.createElement(React.Fragment, null,
             React.createElement("form", null,
-                React.createElement(Hostname, null),
                 React.createElement(OpenShiftClusterId, null),
                 React.createElement(ClusterRecommendations, { className: "push-bottom" }),
                 React.createElement(KtQuestions, null))))));

package/lib/esm/components/CaseInformation/CaseLabels.d.ts

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

package/lib/esm/components/CaseInformation/CaseLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseLabels.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseLabels.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAYzD,MAAM,CAAC,OAAO,UAAU,UAAU,sBA4LjC"}

package/lib/esm/components/CaseInformation/CaseLabels.js

@@ -0,0 +1,108 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Label, MenuToggle, Select, SelectList, SelectOption, Spinner, } from '@patternfly/react-core';
+import { CaseLabelLoadErrorModal, ToastNotification } from '@rh-support/components';
+import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
+import isEqual from 'lodash/isEqual';
+import React, { useContext, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useCaseSelector } from '../../context/CaseContext';
+import { useCaseLabelLinks } from '../../hooks/useCaseLabelLinkMutations';
+import { useCaseUpdateErrorMessage } from '../../hooks/useCaseUpdateErrorMessage';
+const NUM_VISIBLE_LABELS = 3;
+export default function CaseLabels() {
+    var _a;
+    const { t } = useTranslation();
+    const caseUpdateError = useCaseUpdateErrorMessage();
+    const canEditCase = useCanEditCase();
+    const { globalMetadataState: { loggedInUser, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
+    const isOrgAdmin = loggedInUser.data.isOrgAdmin;
+    const { caseId } = useCaseSelector((state) => ({ caseId: state.caseDetails.id }), isEqual);
+    const labelAccountId = (_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.salesforceAccountId;
+    const isLabelAccountReady = !loggedInUsersAccount.isFetching && Boolean(labelAccountId);
+    const { availableLabels, assignedLinks, selectedLabelIds, loading, error, mutating, setAssignedLinks, createLink, deleteLink, refetch, } = useCaseLabelLinks(isLabelAccountReady ? labelAccountId : undefined, caseId);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isErrorModalDismissed, setIsErrorModalDismissed] = useState(false);
+    const handleSelect = (_event, labelId) => __awaiter(this, void 0, void 0, function* () {
+        if (!labelId || typeof labelId !== 'string')
+            return;
+        if (canEditCase.alert())
+            return;
+        const existingLink = assignedLinks.find((link) => link.labelId === labelId);
+        try {
+            if (existingLink) {
+                yield deleteLink(existingLink.linkId);
+                setAssignedLinks((prev) => prev.filter((link) => link.linkId !== existingLink.linkId));
+                ToastNotification.addSuccessMessage(t('Label has been removed'));
+            }
+            else {
+                const newId = yield createLink(caseId, labelId);
+                if (newId) {
+                    setAssignedLinks((prev) => [...prev, { linkId: newId, labelId }]);
+                }
+                ToastNotification.addSuccessMessage(t('Label has been added'));
+            }
+        }
+        catch (e) {
+            caseUpdateError.showFieldError(e, t('Labels'), () => handleSelect(_event, labelId));
+        }
+    });
+    const handleChipRemove = (labelId) => __awaiter(this, void 0, void 0, function* () {
+        if (canEditCase.alert())
+            return;
+        const link = assignedLinks.find((l) => l.labelId === labelId);
+        if (!link)
+            return;
+        try {
+            yield deleteLink(link.linkId);
+            setAssignedLinks((prev) => prev.filter((l) => l.linkId !== link.linkId));
+            ToastNotification.addSuccessMessage(t('Label has been removed'));
+        }
+        catch (e) {
+            caseUpdateError.showFieldError(e, t('Labels'), () => handleChipRemove(labelId));
+        }
+    });
+    const selectedLabels = availableLabels.filter((l) => selectedLabelIds.includes(l.id));
+    const haltEvent = (e) => e.stopPropagation();
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: () => setIsOpen((prev) => !prev), isExpanded: isOpen, isDisabled: loading ||
+            mutating ||
+            !!error ||
+            !caseId ||
+            (!isOrgAdmin && availableLabels.length === 0 && !error) ||
+            canEditCase.isCaseNotEditable, isFullWidth: true, style: { height: '36px' } }, loading || mutating ? (React.createElement(Spinner, { size: "md" })) : selectedLabels.length > 0 ? (React.createElement("span", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'nowrap' } },
+        selectedLabels.slice(0, NUM_VISIBLE_LABELS).map((label) => (React.createElement(Label, { key: label.id, variant: "outline", onClose: () => handleChipRemove(label.id), closeBtnAriaLabel: t('Remove label {{name}}', { name: label.name }), onClick: haltEvent }, label.name))),
+        selectedLabels.length > NUM_VISIBLE_LABELS && (React.createElement("span", { style: {
+                color: 'var(--pf-t--global--text--color--link--default)',
+                fontSize: '12px',
+                whiteSpace: 'nowrap',
+                cursor: 'pointer',
+            } }, t('{{count}} more', { count: selectedLabels.length - NUM_VISIBLE_LABELS }))))) : availableLabels.length === 0 ? (t('No label assigned')) : (t('Select labels'))));
+    if (!caseId)
+        return null;
+    return (React.createElement("div", { className: "form-group" },
+        React.createElement(CaseLabelLoadErrorModal, { isOpen: !!error && !isErrorModalDismissed, onRetry: () => {
+                setIsErrorModalDismissed(false);
+                refetch();
+            }, onClose: () => setIsErrorModalDismissed(true) }),
+        React.createElement("label", { htmlFor: "case-labels" },
+            React.createElement(Trans, null, "Labels")),
+        React.createElement(Select, { id: "case-labels", "data-tracking-id": "case-labels", role: "menu", isOpen: isOpen, onSelect: handleSelect, onOpenChange: () => setIsOpen(false), toggle: toggle, shouldFocusFirstItemOnOpen: false, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, { id: "case-labels-listbox" }, availableLabels.map((label) => (React.createElement(SelectOption, { key: label.id, value: label.id, hasCheckbox: true, isSelected: selectedLabelIds.includes(label.id) }, label.name))))),
+        !loading && !error && availableLabels.length === 0 && (React.createElement("p", { className: "form-instructions" }, isOrgAdmin ? (React.createElement(Trans, null,
+            React.createElement("strong", null, "No labels available:"),
+            " You haven't created any labels yet.",
+            ' ',
+            React.createElement(Link, { to: "/manage/case-labels", style: { textDecoration: 'none' }, onClick: () => window.scrollTo(0, 0) }, "Create a label"),
+            ' ',
+            "to start organizing your cases.")) : (React.createElement(Trans, null,
+            React.createElement("strong", null, "No labels available:"),
+            " Your organization admin hasn't created any labels yet. Contact them to add labels before you can select one."))))));
+}

package/lib/esm/components/CaseInformation/ContactPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAiB/D,wBAAgB,kBAAkB,sBAsVjC"}
+{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAsC/D,wBAAgB,kBAAkB,sBAwZjC"}