@rh-support/troubleshoot 2.7.1 → 2.7.11

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useApolloClient } from '@apollo/client/react';
 import { contacts } from '@cee-eng/hydrajs';
 import { InputGroupText, ValidatedOptions } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
@@ -14,6 +15,7 @@ import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { getPhoneObj, PhoneInput, ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
+import { GET_ACCOUNT_CONTACTS } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useState } from 'react';
@@ -22,21 +24,43 @@ import { PHONE_INSTRUCTION, PHONE_IS_NOT_VALID, PHONE_LINE_CANNOT_BE_EMPTY, PHON
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
 import { PHONE_LIMIT } from '../../../../reducers/CaseConstNTypes';
-import { setCaseState, updateCaseDetails } from '../../../../reducers/CaseReducer';
+import { setCaseState, updateCaseDetails, updateCaseDetailsGraphQL } from '../../../../reducers/CaseReducer';
 import { ContactPhoneNumberPopOver } from '../../../CaseInformation/ContactPhoneNumberPopOver';
 import { removeAllChars, trimAndReplacePlus } from '../../../shared/utils';
 import { PDFContext } from '../../PDFContainer';
+function fetchContactBySSO(apolloClient, accountNumber, ssoUsername) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const { data } = yield apolloClient.query({
+            query: GET_ACCOUNT_CONTACTS,
+            variables: {
+                accountNumber: { eq: accountNumber },
+                contactsWhere: { SSOUserName__c: { eq: ssoUsername } },
+                first: 1,
+            },
+            fetchPolicy: 'network-only',
+        });
+        const response = data;
+        const contactNode = (_j = (_h = (_g = (_f = (_e = (_d = (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.redhat_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.RedHatSupportAccount) === null || _c === void 0 ? void 0 : _c.edges) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.node) === null || _f === void 0 ? void 0 : _f.Contacts) === null || _g === void 0 ? void 0 : _g.edges) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.node;
+        return {
+            phone: (_l = (_k = contactNode === null || contactNode === void 0 ? void 0 : contactNode.Phone) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : '',
+        };
+    });
+}
 export function CaseContactPhoneNumber() {
     var _a;
-    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating, hasLoggedInUserConfirmedPhoneNumber, isCasePhoneUpdating, } = useCaseSelector((state) => ({
+    const apolloClient = useApolloClient();
+    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, accountNumberRef, suppliedPhoneNumberVerified, isCaseOwnerUpdating, hasLoggedInUserConfirmedPhoneNumber, isCasePhoneUpdating, existingCaseDetails, } = useCaseSelector((state) => ({
         phoneCountryCode: state.caseDetails.phoneCountryCode || '',
         phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber || '',
         caseNumber: state.caseDetails.caseNumber,
         contactSSOName: state.caseDetails.contactSSOName,
+        accountNumberRef: state.caseDetails.accountNumberRef,
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
         hasLoggedInUserConfirmedPhoneNumber: state.hasLoggedInUserConfirmedPhoneNumber,
         isCasePhoneUpdating: state.isCasePhoneUpdating,
+        existingCaseDetails: state.caseDetails,
     }), isEqual);
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const canEditCase = useCanEditCase();
@@ -79,8 +103,10 @@ export function CaseContactPhoneNumber() {
         const phoneLine = (_a = getPhoneObj(localFullPhoneState)) === null || _a === void 0 ? void 0 : _a.phoneLine;
         const countryCode = (_b = getPhoneObj(localFullPhoneState)) === null || _b === void 0 ? void 0 : _b.countryCode;
         try {
-            // update case contact info
-            yield updateCaseDetails(caseDispatch, caseNumber, Object.assign(Object.assign({ phoneCountryCode: countryCode, phoneAreaCodePrefixLineNumber: phoneLine }, (contactSSOName === loggedInUser.data.ssoUsername && { suppliedPhoneNumberVerified: 'True' })), (!countryCode && !phoneLine && { clearPhoneNumber: true, suppliedPhoneNumberVerified: 'False' })));
+            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, caseNumber, {
+                phoneCountryCode: countryCode,
+                phoneAreaCodePrefixLineNumber: phoneLine,
+            }, false, { existingCaseDetails });
             setIsSavedClicked(false);
             setCaseState(caseDispatch, { isCasePhoneUpdating: false });
             ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
@@ -102,7 +128,7 @@ export function CaseContactPhoneNumber() {
         catch (e) {
             setCaseState(caseDispatch, { isCasePhoneUpdating: false });
             setIsEditting(false);
-            caseUpdateError.showError(e, t(`Phone number failed to update`));
+            caseUpdateError.showFieldError(e, t('Phone number'), onSave);
         }
     });
     const onClear = () => __awaiter(this, void 0, void 0, function* () {
@@ -167,6 +193,10 @@ export function CaseContactPhoneNumber() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [suppliedPhoneNumberVerified]);
     useEffect(() => {
+        if (!isEmpty(phoneCountryCode) || !isEmpty(phoneAreaCodePrefixLineNumber)) {
+            setLocalFullPhoneState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
+            return;
+        }
         if (isEmpty(contactSSOName)) {
             setLocalFullPhoneState('');
             return;
@@ -180,29 +210,17 @@ export function CaseContactPhoneNumber() {
             if (contactSSOName === loggedInUser.data.ssoUsername) {
                 try {
                     setIsFetchingSSO(true);
-                    const loggedInUserContact = yield (contacts === null || contacts === void 0 ? void 0 : contacts.getSFDCContactBySso(contactSSOName));
+                    const loggedInUserContact = yield fetchContactBySSO(apolloClient, accountNumberRef, contactSSOName);
                     setIsFetchingSSO(false);
-                    if (loggedInUserContact.supportPhoneAreaCodePrefixLineNumber) {
-                        // User has opened a case before and has phone and area code in her/his contact on SF
-                        _phoneAreaCodePrefixLineNumber = loggedInUserContact.supportPhoneAreaCodePrefixLineNumber;
-                        _phoneCountryCode = loggedInUserContact.supportPhoneCountryCode;
-                        _suppliedPhoneNumberVerified =
-                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
-                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
-                                ? hasLoggedInUserConfirmedPhoneNumber
-                                : 'False';
-                    }
-                    else {
-                        const phoneLine = getPhoneObj(loggedInUserContact.phone).phoneLine || '';
-                        const countryCode = getPhoneObj(loggedInUserContact.phone).countryCode;
-                        _phoneAreaCodePrefixLineNumber = phoneLine;
-                        _phoneCountryCode = countryCode;
-                        _suppliedPhoneNumberVerified =
-                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
-                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
-                                ? hasLoggedInUserConfirmedPhoneNumber
-                                : 'False';
-                    }
+                    const phoneLine = getPhoneObj(loggedInUserContact.phone).phoneLine || '';
+                    const countryCode = getPhoneObj(loggedInUserContact.phone).countryCode;
+                    _phoneAreaCodePrefixLineNumber = phoneLine;
+                    _phoneCountryCode = countryCode;
+                    _suppliedPhoneNumberVerified =
+                        isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
+                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                            ? hasLoggedInUserConfirmedPhoneNumber
+                            : 'False';
                 }
                 catch (_a) {
                     _phoneAreaCodePrefixLineNumber = '';
@@ -216,18 +234,11 @@ export function CaseContactPhoneNumber() {
                 // user is openning case for others (use is partner or red hatter)
                 try {
                     setIsFetchingSSO(true);
-                    const selectedContact = yield contacts.getSFDCContactBySso(contactSSOName);
+                    const selectedContact = yield fetchContactBySSO(apolloClient, accountNumberRef, contactSSOName);
                     setIsFetchingSSO(false);
-                    if (selectedContact.supportPhoneAreaCodePrefixLineNumber) {
-                        _phoneAreaCodePrefixLineNumber = selectedContact.supportPhoneAreaCodePrefixLineNumber;
-                        _phoneCountryCode = selectedContact.supportPhoneCountryCode;
-                        _suppliedPhoneNumberVerified = 'Deferred';
-                    }
-                    else {
-                        _phoneAreaCodePrefixLineNumber = getPhoneObj(selectedContact.phone).phoneLine || '';
-                        _phoneCountryCode = getPhoneObj(selectedContact.phone).countryCode || '';
-                        _suppliedPhoneNumberVerified = 'Deferred';
-                    }
+                    _phoneAreaCodePrefixLineNumber = getPhoneObj(selectedContact.phone).phoneLine || '';
+                    _phoneCountryCode = getPhoneObj(selectedContact.phone).countryCode || '';
+                    _suppliedPhoneNumberVerified = 'Deferred';
                 }
                 catch (e) {
                     _phoneAreaCodePrefixLineNumber = '';
@@ -252,15 +263,10 @@ export function CaseContactPhoneNumber() {
             setLocalFullPhoneState(checkingPlusInLocalFullPhone(_localFullPhone));
             setCaseState(caseDispatch, { isCasePhoneUpdating: false });
         });
-        if (isEmpty(phoneCountryCode) && isEmpty(phoneAreaCodePrefixLineNumber)) {
-            initContactPhoneNumber();
-        }
-        else {
-            setLocalFullPhoneState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
-        }
+        initContactPhoneNumber();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [contactSSOName]);
-    return (React.createElement("div", { className: "form-group pf-v5-u-pb-md", style: { minWidth: '200px' } },
+    }, [contactSSOName, phoneCountryCode, phoneAreaCodePrefixLineNumber]);
+    return (React.createElement("div", { className: "form-group", style: { minWidth: '200px' } },
         React.createElement("h3", { className: `subheading subheading-sm ${isExportingPDF ? 'expand-input' : ''}` },
             React.createElement(Trans, null, "Case owner's phone number"),
             React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
@@ -268,14 +274,14 @@ export function CaseContactPhoneNumber() {
         React.createElement(InputGroupText, null,
             React.createElement(PhoneInput, { phoneValue: localFullPhoneState, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, isDisabled: isCasePhoneUpdating || isCaseOwnerUpdating || !isEditting, isLoading: isCasePhoneUpdating || isCaseOwnerUpdating || isFetchingSSO, "data-tracking-id": "case-details-page-supplied-phone", invalid: invalid, setInvalid: setInvalid }),
             isEditting ? (React.createElement(React.Fragment, null,
-                React.createElement("button", { className: "btn btn-app btn-link pf-v5-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), "aria-label": "Save", disabled: (isSaveClicked && isPhoneValueCannotBeSaved) ||
+                React.createElement("button", { className: "btn btn-app btn-link pf-v6-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), "aria-label": "Save", disabled: (isSaveClicked && isPhoneValueCannotBeSaved) ||
                         (localFullPhone === null || localFullPhone === void 0 ? void 0 : localFullPhone.length) > PHONE_LIMIT ||
                         localFullPhoneState === phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber ||
                         isCaseOwnerUpdating ||
                         isCasePhoneUpdating, style: { display: isExportingPDF ? 'none' : '' } },
                     React.createElement(CheckIcon, null)),
                 React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onClear, "data-tracking-id": "case-details-page-supplied-phone-cancel", style: { display: isExportingPDF ? 'none' : '' }, disabled: isCaseOwnerUpdating || isCasePhoneUpdating, "aria-label": "Clear" },
-                    React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: () => setIsEditting(true), "data-tracking-id": "case-details-page-supplied-phone-edit", style: { display: isExportingPDF ? 'none' : '' }, "aria-label": "Edit", disabled: isCaseOwnerUpdating || isCasePhoneUpdating },
+                    React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: () => setIsEditting(true), "data-tracking-id": "case-details-page-supplied-phone-edit", style: { display: isExportingPDF ? 'none' : '' }, "aria-label": "Edit", disabled: isCaseOwnerUpdating || isCasePhoneUpdating || canEditCase.isCaseNotEditable },
                 React.createElement(PencilAltIcon, null)))),
         !invalid &&
             (localFullPhone === null || localFullPhone === void 0 ? void 0 : localFullPhone.length) <= PHONE_LIMIT &&

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsManagement.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAkBvD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBAgE1D"}
+{"version":3,"file":"CaseDetailsManagement.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAuBvD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBAwJ1D"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.js

@@ -1,52 +1,119 @@
+import { useApolloClient } from '@apollo/client/react';
 import { Flex, FlexItem } from '@patternfly/react-core';
+import { AlertMessage, AlertType } from '@rh-support/components';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
+import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useState } from 'react';
-import { useCaseSelector } from '../../../../context/CaseContext';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
+import { useShowCaseGroupField } from '../../../../hooks/useCaseGroupUiState';
+import { buildCaseGroupOwnerFetchKey } from '../../../../reducers/CaseHelpers';
+import { fetchCaseGroupsForContactGraphQL } from '../../../../reducers/CaseReducer';
 import { OwnerSelector } from '../../../AccountInfo/OwnerSelector';
 import CaseGroup from '../../../CaseInformation/CaseGroup';
+import CaseLabels from '../../../CaseInformation/CaseLabels';
 import Fts from '../../../CaseInformation/Fts';
-import { Cep } from '../../../CaseManagement/Cep';
-import { RHAssociatesSelector } from '../../../CaseManagement/RHAssociatesSelector';
-import CaseContactSelector from '../../../CaseManagement/SendNotifications/CaseContactSelector';
+// import { Cep } from '../../../CaseManagement/Cep';
+// import { RHAssociatesSelector } from '../../../CaseManagement/RHAssociatesSelector';
+// import CaseContactSelector from '../../../CaseManagement/SendNotifications/CaseContactSelector';
 import { PartnerCaseHelper } from '../../ShareCase/PartnerCaseHelper';
 import { ShareWithPartner } from '../../ShareCase/PartnerShare';
 import { CaseContactPhoneNumber } from './CaseContactPhoneNumber';
 import CaseInternalStatus from './CaseInternalStatus';
-import { CaseContactPhoneNumberAlert } from './CasePhoneNumberConfirmAlert';
+// TODO: Re-enable once phone number verification flow is fully supported with GraphQL
+// import { CaseContactPhoneNumberAlert } from './CasePhoneNumberConfirmAlert';
 import CaseReferenceNumber from './CaseReferenceNumber';
 import CaseSbrGroups from './CaseSbrGroups';
 import SFDCUrl from './SFDCUrl';
 export default function CaseDetailsManagement(props) {
+    const { t } = useTranslation();
     const [isUpdatingPartner, setIsUpdatingPartner] = useState(false);
-    const caseState = useCaseSelector((state) => ({
-        caseDetails: {
-            accountNumber: state.caseDetails.accountNumberRef,
-        },
-    }), isEqual);
+    const caseDispatch = useCaseDispatch();
+    const apolloClient = useApolloClient();
+    const caseState = useCaseSelector((state) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return ({
+            caseDetails: {
+                accountNumber: state.caseDetails.accountNumberRef,
+                groupNumber: state.caseDetails.groupNumber,
+            },
+            showMandatoryCaseGroupValidationError: state.showMandatoryCaseGroupValidationError,
+            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,
+            selectedOwnerDefaultCaseGroup: (_h = (_g = (_f = state.selectedOwner) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.defaultCaseGroup) !== null && _h !== void 0 ? _h : null,
+            ownersCaseGroupsData: state.ownersCaseGroups.data,
+            ownersCaseGroupsFetching: state.ownersCaseGroups.isFetching,
+        });
+    }, isEqual);
     const accountNumber = caseState.caseDetails.accountNumber;
+    const groupNumber = caseState.caseDetails.groupNumber;
+    const showCaseGroupField = useShowCaseGroupField();
     const ability = useContext(AbilityContext);
-    const canSeeEmailNotifications = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_SEND_NOTIFICATIONS);
+    const lastCaseGroupFetchKeyRef = useRef(null);
+    useEffect(() => {
+        lastCaseGroupFetchKeyRef.current = null;
+    }, [props.caseNumber, caseState.selectedOwnerContactId]);
+    useEffect(() => {
+        const { selectedOwnerContactId, ownersCaseGroupsData, ownersCaseGroupsFetching } = caseState;
+        const defaultCaseGroupIdForFetch = groupNumber || caseState.selectedOwnerDefaultCaseGroup || null;
+        const currentFetchKey = selectedOwnerContactId
+            ? buildCaseGroupOwnerFetchKey({
+                contactId: selectedOwnerContactId,
+                isOrgAdmin: caseState.selectedOwnerIsOrgAdmin,
+                ownerDefaultCaseGroup: caseState.selectedOwnerDefaultCaseGroup,
+                caseGroupNumber: groupNumber,
+            })
+            : null;
+        const alreadyFetchedForCurrentOwner = currentFetchKey !== null && lastCaseGroupFetchKeyRef.current === currentFetchKey;
+        if (!props.caseNumber || isEmpty(accountNumber) || isEmpty(selectedOwnerContactId)) {
+            return;
+        }
+        if (ownersCaseGroupsFetching) {
+            return;
+        }
+        if (ownersCaseGroupsData !== undefined && alreadyFetchedForCurrentOwner) {
+            return;
+        }
+        lastCaseGroupFetchKeyRef.current = currentFetchKey;
+        fetchCaseGroupsForContactGraphQL(caseDispatch, apolloClient, selectedOwnerContactId, accountNumber, defaultCaseGroupIdForFetch, caseState.selectedOwnerIsOrgAdmin, groupNumber !== null && groupNumber !== void 0 ? groupNumber : '');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        props.caseNumber,
+        accountNumber,
+        caseState.selectedOwnerContactId,
+        caseState.selectedOwnerIsOrgAdmin,
+        caseState.selectedOwnerDefaultCaseGroup,
+        groupNumber,
+        caseState.ownersCaseGroupsData,
+        caseState.ownersCaseGroupsFetching,
+    ]);
+    // const canSeeEmailNotifications = ability.can(
+    //     resourceActions.PATCH,
+    //     resources.CASE_DETAILS,
+    //     CaseDetailsFields.CASE_DETAILS_SEND_NOTIFICATIONS
+    // );
     const canSeeInternalStatus = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_INTERNAL_STATUS);
     const canSeeSBRGroups = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_SBR_GROUP);
     return (React.createElement(React.Fragment, null,
         React.createElement(PartnerCaseHelper, { setIsUpdatingPartners: setIsUpdatingPartner, caseNumber: props.caseNumber, routeProps: props.routeProps }),
         React.createElement("section", { className: "card card-white" },
+            React.createElement(AlertMessage, { show: !!caseState.showMandatoryCaseGroupValidationError, variant: AlertType.DANGER, isInline: true, title: t('Please address the errors to proceed'), className: "pf-v6-u-mb-lg", "data-tracking-id": "proceed-address-errors" }),
             React.createElement("form", null,
                 React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
                     React.createElement(FlexItem, { flex: { default: 'flex_1' } },
                         React.createElement(OwnerSelector, null)),
                     React.createElement(FlexItem, { flex: { default: 'flex_1' } },
                         React.createElement(CaseContactPhoneNumber, null))),
-                React.createElement(CaseContactPhoneNumberAlert, { isConfirm: true }),
                 canSeeInternalStatus && React.createElement(CaseInternalStatus, null),
                 canSeeSBRGroups && React.createElement(CaseSbrGroups, null),
-                React.createElement(CaseGroup, null),
+                React.createElement(Flex, { direction: { default: 'column', lg: 'row' } },
+                    showCaseGroupField && (React.createElement(FlexItem, { flex: { default: 'flex_1' } },
+                        React.createElement(CaseGroup, null))),
+                    React.createElement(FlexItem, { flex: { default: 'flex_1' } },
+                        React.createElement(CaseLabels, null))),
                 React.createElement(CaseReferenceNumber, null),
-                canSeeEmailNotifications && React.createElement(CaseContactSelector, null),
-                React.createElement(RHAssociatesSelector, null),
                 React.createElement(Fts, { inlineEditable: true }),
-                React.createElement(Cep, null),
                 React.createElement(SFDCUrl, null),
                 React.createElement(ShareWithPartner, { routeProps: props.routeProps, isUpdatingPartner: isUpdatingPartner, accountNumber: accountNumber })))));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseHostname.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHostname.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseHostname.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA0C,MAAM,OAAO,CAAC;AAW/D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,OAAO,CAAC;CAC3B;AAMD,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,qBA0KlC;kBA1KQ,YAAY;;;AA6KrB,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"CaseHostname.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseHostname.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA0C,MAAM,OAAO,CAAC;AAW/D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,OAAO,CAAC;CAC3B;AAMD,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,qBA8KlC;kBA9KQ,YAAY;;;AAiLrB,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseHostname.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts } from '@cee-eng/hydrajs';
-import { Popover, PopoverPosition, Spinner, Switch } from '@patternfly/react-core';
+import { Popover, PopoverPosition, Spinner, Switch, TextInput } from '@patternfly/react-core';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
 import { InlineEdit, LoadingIndicator, ToastNotification, useFetch, ValueChangedIcon } from '@rh-support/components';
 import { fetchLoggedInUsersAccount, GlobalMetadataDispatchContext, GlobalMetadataStateContext, useCanEditCase, } from '@rh-support/react-context';
@@ -50,10 +50,10 @@ function CaseHostname(props) {
     const [localHostnameChange, setLocalHostnameChange] = useState(false);
     const afterLocalChange = () => setLocalHostnameChange(false);
     const canEditCase = useCanEditCase();
-    const onHostnameChange = (e) => {
+    const onHostnameChange = (hostname) => {
         if (canEditCase.alert())
             return;
-        setHostnameState(e.target.value);
+        setHostnameState(hostname);
     };
     const onHostnameUpdate = (caseDetails) => __awaiter(this, void 0, void 0, function* () {
         setIsHostnameUpdating(true);
@@ -64,7 +64,7 @@ function CaseHostname(props) {
         }
         catch (e) {
             setIsHostnameUpdating(false);
-            caseUpdateError.showError(e, t('Hostname failed to updated'));
+            caseUpdateError.showFieldError(e, t('Hostname'), () => onHostnameUpdate(caseDetails));
             throw e;
         }
     });
@@ -102,17 +102,17 @@ function CaseHostname(props) {
     const hostNameVisibilityContent = (React.createElement("div", null,
         React.createElement("p", null, "You can share this information at any time to improve your support experience."),
         React.createElement(Switch, { label: shareHostnameLabel, isChecked: isShareHostNamesChecked, onChange: onShareHostnameCheck }),
-        isHostnamesLoading && (React.createElement(Spinner, { size: "lg", className: "pf-v5-u-ml-sm hostnameSpinner", "aria-label": "Hostname loading" }))));
+        isHostnamesLoading && (React.createElement(Spinner, { size: "lg", className: "pf-v6-u-ml-sm hostnameSpinner", "aria-label": "Hostname loading" }))));
     if (!canUseHostName) {
         return React.createElement(React.Fragment, null);
     }
     const lengthError = (hostnameState === null || hostnameState === void 0 ? void 0 : hostnameState.length) > HOSTNAME_LENGTH_LIMIT;
     return (React.createElement(React.Fragment, null,
         React.createElement(InlineEdit, { labelProps: { htmlFor: 'case-details-hostname' }, formClassName: props.className || '', labelContent: React.createElement(React.Fragment, null,
-                React.createElement(Trans, null, "Hostname"),
+                React.createElement(Trans, { className: "pf-v6-u-mr-xs" }, "Hostname"),
                 React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localHostnameChange, value: hostname, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.hostname) })), helperContent: !isExportingPDF ? (React.createElement(Popover, { "aria-label": "Hostname Info", position: PopoverPosition.auto, bodyContent: hostNameVisibilityContent, closeBtnAriaLabel: "Close", headerContent: 'Share hostname?', onShow: () => userOriginalHostnameValue() },
-                React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": "Hostname Info" }))) : undefined, allowInlineEdit: props.inlineEditable, content: hostname, saveDisabled: hostnameState === hostname || isHostnameUpdating || lengthError, onSave: onSave, onCancel: onCancel, initialIsEditing: false, loadingIndicator: isHostnameUpdating ? React.createElement(LoadingIndicator, { show: isHostnameUpdating, isInline: true }) : undefined, isExportingPDF: isExportingPDF },
-            React.createElement("input", { type: "text", id: "case-details-hostname", className: `form-control${lengthError ? ' form-invalid' : ''}`, name: "case-details-hostname", value: hostnameState, onChange: onHostnameChange, disabled: isHostnameUpdating, "data-tracking-id": "case-details-hostname", "aria-invalid": lengthError })),
+                React.createElement(QuestionCircleIcon, { className: "pf-v6-u-ml-sm F icon-size cursor-pointer", "aria-label": "Hostname Info", color: "#5e40be" }))) : undefined, allowInlineEdit: props.inlineEditable && !canEditCase.isCaseNotEditable, content: hostname, saveDisabled: hostnameState === hostname || isHostnameUpdating || lengthError, onSave: onSave, onCancel: onCancel, initialIsEditing: false, loadingIndicator: isHostnameUpdating ? React.createElement(LoadingIndicator, { show: isHostnameUpdating, isInline: true }) : undefined, isExportingPDF: isExportingPDF },
+            React.createElement(TextInput, { type: "text", id: "case-details-hostname", className: `${lengthError ? ' form-invalid' : ''}`, name: "case-details-hostname", value: hostnameState, onChange: (e, phone) => onHostnameChange(phone), isDisabled: isHostnameUpdating, "data-tracking-id": "case-details-hostname", "aria-invalid": lengthError })),
         lengthError && (React.createElement("div", { className: "pull-top" },
             React.createElement("p", { className: "form-instructions form-invalid" },
                 React.createElement(Trans, null,

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseInformation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInformation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAwD5C"}
+{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInformation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAwD5C"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseInformation.js

@@ -8,7 +8,6 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 import { useCaseSelector } from '../../../../context/CaseContext';
 import { KtQuestionConstant } from '../../../../reducers/CaseConstNTypes';
-import { CaseHostname } from './CaseHostname';
 import { CaseOpenshiftClusterId } from './CaseOpenshiftClusterId/CaseOpenshiftClusterId';
 import ProductVersion from './ProductVersion';
 export function CaseInformation(props) {
@@ -40,7 +39,6 @@ export function CaseInformation(props) {
         React.createElement("form", null,
             React.createElement(ProductVersion, null),
             React.createElement(CaseOpenshiftClusterId, null),
-            React.createElement(CaseHostname, { inlineEditable: true }),
             React.createElement("div", { className: "form-group" },
                 React.createElement("label", { htmlFor: "case-description" },
                     React.createElement(Trans, null, "Description")),

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseInternalStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseInternalStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInternalStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAQpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,sBAyFzC"}
+{"version":3,"file":"CaseInternalStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInternalStatus.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAQpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,sBA0FzC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseInternalStatus.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, Spinner, } from '@patternfly/react-core';
 import { ToastNotification } from '@rh-support/components';
-import { fetchInternalStatusMetadata, GlobalMetadataDispatchContext, GlobalMetadataStateContext, } from '@rh-support/react-context';
+import { fetchInternalStatusMetadata, GlobalMetadataDispatchContext, GlobalMetadataStateContext, useCanEditCase, } from '@rh-support/react-context';
 import { haventLoadedMetadata } from '@rh-support/utils';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -20,6 +20,7 @@ import { updateCaseDetails } from '../../../../reducers/CaseReducer';
 export default function CaseInternalStatus() {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
+    const canEditCase = useCanEditCase();
     const { internalStatus, caseNumber } = useCaseSelector((state) => ({
         internalStatus: state.caseDetails.internalStatus,
         caseNumber: state.caseDetails.caseNumber,
@@ -34,7 +35,7 @@ export default function CaseInternalStatus() {
         e.stopPropagation();
         setIsOpen(!isOpen);
     };
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: isIStatusUpdating, isFullWidth: true, className: "case-internal-status-selector-text" },
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: isIStatusUpdating || canEditCase.isCaseNotEditable, isFullWidth: true, className: "case-internal-status-selector-text" },
         React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
             React.createElement(FlexItem, null,
                 " ",
@@ -52,7 +53,7 @@ export default function CaseInternalStatus() {
         }
         catch (e) {
             setIsIStatusUpdating(false);
-            caseUpdateError.showError(e, t('Case Internal Status failed to update'));
+            caseUpdateError.showFieldError(e, t('Internal status'), () => onCaseInternalStatusChange(event, selection));
         }
     });
     useEffect(() => {

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenShiftPopover.js

@@ -4,5 +4,5 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 export default function CaseOpenShiftPopover() {
     return (React.createElement(Popover, { "aria-label": "Cluster Id Info", position: PopoverPosition.auto, bodyContent: React.createElement(Trans, null, "Cluster IDs give us the ability to use connected customer tools and services to debug your cluster in conjunction with this support case."), closeBtnAriaLabel: "Close" },
-        React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs" })));
+        React.createElement(QuestionCircleIcon, { color: "#5e40be", className: "pf-v6-u-ml-xs" })));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenShiftV3Popover.js

@@ -4,5 +4,5 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 export default function CaseOpenShiftV3Popover() {
     return (React.createElement(Popover, { "aria-label": "Cluster Id Info", position: PopoverPosition.auto, bodyContent: React.createElement(Trans, null, "Providing a cluster name allows us to link issues more effectively within managed settings through connected customer tools"), closeBtnAriaLabel: "Close" },
-        React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs" })));
+        React.createElement(QuestionCircleIcon, { className: "pf-v6-u-ml-xs" })));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAqBvE,wBAAgB,sBAAsB,sBAsSrC"}
+{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAqBxE,wBAAgB,sBAAsB,sBAmZrC"}