@rh-support/troubleshoot 2.6.361 → 2.6.363

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

@@ -1,98 +1,52 @@
-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, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
-import { useShowCaseGroupField } from '../../../../hooks/useCaseGroupUiState';
-import { fetchCaseGroupsForContactGraphQL } from '../../../../reducers/CaseReducer';
+import React, { useContext, useState } from 'react';
+import { useCaseSelector } from '../../../../context/CaseContext';
 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';
-// TODO: Re-enable once phone number verification flow is fully supported with GraphQL
-// import { CaseContactPhoneNumberAlert } from './CasePhoneNumberConfirmAlert';
+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 caseDispatch = useCaseDispatch();
-    const apolloClient = useApolloClient();
-    const caseState = useCaseSelector((state) => {
-        var _a, _b, _c, _d, _e;
-        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,
-            ownersCaseGroupsData: state.ownersCaseGroups.data,
-            ownersCaseGroupsFetching: state.ownersCaseGroups.isFetching,
-        });
-    }, isEqual);
+    const caseState = useCaseSelector((state) => ({
+        caseDetails: {
+            accountNumber: state.caseDetails.accountNumberRef,
+        },
+    }), isEqual);
     const accountNumber = caseState.caseDetails.accountNumber;
-    const groupNumber = caseState.caseDetails.groupNumber;
-    const showCaseGroupField = useShowCaseGroupField();
     const ability = useContext(AbilityContext);
-    useEffect(() => {
-        const { selectedOwnerContactId, ownersCaseGroupsData, ownersCaseGroupsFetching } = caseState;
-        if (!props.caseNumber || isEmpty(accountNumber) || isEmpty(selectedOwnerContactId)) {
-            return;
-        }
-        if (ownersCaseGroupsFetching || ownersCaseGroupsData !== undefined) {
-            return;
-        }
-        fetchCaseGroupsForContactGraphQL(caseDispatch, apolloClient, selectedOwnerContactId, accountNumber, groupNumber || null, caseState.selectedOwnerIsOrgAdmin, groupNumber !== null && groupNumber !== void 0 ? groupNumber : '');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        props.caseNumber,
-        accountNumber,
-        caseState.selectedOwnerContactId,
-        caseState.selectedOwnerIsOrgAdmin,
-        groupNumber,
-        caseState.ownersCaseGroupsData,
-        caseState.ownersCaseGroupsFetching,
-    ]);
-    // const canSeeEmailNotifications = ability.can(
-    //     resourceActions.PATCH,
-    //     resources.CASE_DETAILS,
-    //     CaseDetailsFields.CASE_DETAILS_SEND_NOTIFICATIONS
-    // );
+    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(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(CaseGroup, 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.js

@@ -64,7 +64,7 @@ function CaseHostname(props) {
         }
         catch (e) {
             setIsHostnameUpdating(false);
-            caseUpdateError.showFieldError(e, t('Hostname'), () => onHostnameUpdate(caseDetails));
+            caseUpdateError.showError(e, t('Hostname failed to updated'));
             throw e;
         }
     });
@@ -111,7 +111,7 @@ function CaseHostname(props) {
         React.createElement(InlineEdit, { labelProps: { htmlFor: 'case-details-hostname' }, formClassName: props.className || '', labelContent: React.createElement(React.Fragment, null,
                 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-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(QuestionCircleIcon, { className: "pf-v6-u-ml-sm F icon-size cursor-pointer", "aria-label": "Hostname Info", color: "#5e40be" }))) : 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(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" },

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;AAQ1B,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;AAS1B,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAwD5C"}

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

@@ -8,6 +8,7 @@ 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) {
@@ -39,6 +40,7 @@ export function CaseInformation(props) {
         React.createElement("form", null,
             React.createElement(ProductVersion, null),
             React.createElement(CaseOpenshiftClusterId, null),
+            caseType !== PreviousCaseTypes.FEATURE_ENHANCEMENT && 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":"AAmBA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAQpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,sBA0FzC"}
+{"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"}

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, useCanEditCase, } from '@rh-support/react-context';
+import { fetchInternalStatusMetadata, GlobalMetadataDispatchContext, GlobalMetadataStateContext, } 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,7 +20,6 @@ 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,
@@ -35,7 +34,7 @@ export default function CaseInternalStatus() {
         e.stopPropagation();
         setIsOpen(!isOpen);
     };
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: isIStatusUpdating || canEditCase.isCaseNotEditable, isFullWidth: true, className: "case-internal-status-selector-text" },
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: isIStatusUpdating, isFullWidth: true, className: "case-internal-status-selector-text" },
         React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
             React.createElement(FlexItem, null,
                 " ",
@@ -53,7 +52,7 @@ export default function CaseInternalStatus() {
         }
         catch (e) {
             setIsIStatusUpdating(false);
-            caseUpdateError.showFieldError(e, t('Internal status'), () => onCaseInternalStatusChange(event, selection));
+            caseUpdateError.showError(e, t('Case Internal Status failed to update'));
         }
     });
     useEffect(() => {

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":"AAYA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAqBxE,wBAAgB,sBAAsB,sBAmZrC"}
+{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAqB/D,wBAAgB,sBAAsB,sBA2SrC"}

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

@@ -7,17 +7,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useApolloClient } from '@apollo/client/react';
 import { LoadingIndicator, ToastNotification, usePrevious } from '@rh-support/components';
-import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
-import { extractNoClusterIdFieldsFromAdditionalCaseInformation, getVersion, hasNoClusterIdFieldsInAdditionalCaseInformation, } from '@rh-support/utils';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { getVersion } from '@rh-support/utils';
+import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../../hooks/useCaseUpdateErrorMessage';
-import { setCaseDetails, updateCaseDetailsGraphQL } from '../../../../../reducers/CaseReducer';
+import { setCaseDetails, updateCaseDetails } from '../../../../../reducers/CaseReducer';
 import { getIsClusterIdInvalid, isClusterIdEnabledForProduct, } from '../../../../../utils/caseOpenshiftClusterIdUtils';
 import { NoClusterIDReasonSelector } from '../../../../CaseManagement/NoClusterIDReasonSelector';
 import { discoverV4ClusterIdLink, discoverV4ClusterIdLinkError, isInvalidErrorMessage, v3Tov4TransitionLink, } from '../../../../CaseManagement/OpenShiftClusterId';
@@ -25,25 +25,20 @@ import { OpenshiftDropdownV4 } from '../../../../CaseManagement/OpenshiftDropdow
 import { PDFContext } from '../../../PDFContainer';
 export function CaseOpenshiftClusterId() {
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const apolloClient = useApolloClient();
-    const { openshiftClusterID, product, version, caseNumber, caseId, openshiftClusterVersion, noClusterIdReason, noClusterIdReasonExplanation, selectedAccountDetails, description, additionalCaseInformation, isFetchingCaseDetails, } = useCaseSelector((state) => ({
+    const { openshiftClusterID, product, version, caseNumber, openshiftClusterVersion, noClusterIdReason, noClusterIdReasonExplanation, selectedAccountDetails, description, isFetchingCaseDetails, } = useCaseSelector((state) => ({
         openshiftClusterID: state.caseDetails.openshiftClusterID,
         product: state.caseDetails.product,
         version: state.caseDetails.version,
         caseNumber: state.caseDetails.caseNumber,
-        caseId: state.caseDetails.id,
         openshiftClusterVersion: state.caseDetails.openshiftClusterVersion,
         noClusterIdReason: state.caseDetails.noClusterIdReason,
         noClusterIdReasonExplanation: state.caseDetails.noClusterIdReasonExplanation,
         selectedAccountDetails: state.selectedAccountDetails,
         description: state.caseDetails.description,
-        additionalCaseInformation: state.caseDetails.additionalCaseInformation,
         isFetchingCaseDetails: state.isFetchingCaseDetails,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const canEditCase = useCanEditCase();
-    const isCaseReadOnly = canEditCase.isCaseNotEditable;
-    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { allProducts, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const majorVersion = (version && getVersion(version).major) || '';
     const isOpenShiftV3 = product === 'OpenShift Container Platform' && majorVersion === '3';
     const isCustomer = loggedInUserRights.data.isAccountSameAsLoggedInAccount(selectedAccountDetails.data.accountNumber);
@@ -55,56 +50,11 @@ export function CaseOpenshiftClusterId() {
     const [isClusterIdUpdating, setIsClusterIdUpdating] = useState(false);
     const [isReasonUpdating, setIsReasonUpdating] = useState(false);
     const [displayName, setDisplayName] = useState('');
-    const [localReasonExplanation, setLocalReasonExplanation] = useState('');
     const previousLocalOpenshiftClusterIDState = usePrevious(localOpenshiftClusterIDState);
     const previousSelectedReason = usePrevious(selectedReason);
     const previousProduct = usePrevious(product);
     const { t } = useTranslation();
     const { isExportingPDF } = useContext(PDFContext);
-    const additionalCaseNoClusterFields = useMemo(() => extractNoClusterIdFieldsFromAdditionalCaseInformation(additionalCaseInformation), [additionalCaseInformation]);
-    const resolvedNoClusterFields = useMemo(() => ({
-        reason: noClusterIdReason || additionalCaseNoClusterFields.noClusterIdReason,
-        explanation: noClusterIdReasonExplanation || additionalCaseNoClusterFields.noClusterIdReasonExplanation,
-    }), [noClusterIdReason, noClusterIdReasonExplanation, additionalCaseNoClusterFields]);
-    const hasNoClusterIdSelection = useMemo(() => {
-        const { reason, explanation } = resolvedNoClusterFields;
-        if (reason) {
-            return true;
-        }
-        return explanation !== '' && explanation !== 'v3-cluster';
-    }, [resolvedNoClusterFields]);
-    const clusterDropdownId = useMemo(() => {
-        if (!isEmpty(localOpenshiftClusterIDState)) {
-            return localOpenshiftClusterIDState;
-        }
-        if (!isEmpty(selectedReason)) {
-            return selectedReason;
-        }
-        if (!isEmpty(openshiftClusterID)) {
-            return openshiftClusterID;
-        }
-        const { reason, explanation } = resolvedNoClusterFields;
-        if (reason === 'Other' && explanation === 'v3-cluster') {
-            return 'v3-cluster';
-        }
-        if (hasNoClusterIdSelection) {
-            return 'dont-have-id';
-        }
-        return '';
-    }, [
-        localOpenshiftClusterIDState,
-        selectedReason,
-        openshiftClusterID,
-        resolvedNoClusterFields,
-        hasNoClusterIdSelection,
-    ]);
-    const resolvedNoClusterIdReason = resolvedNoClusterFields.reason;
-    const resolvedNoClusterIdReasonExplanation = resolvedNoClusterFields.explanation;
-    useEffect(() => {
-        setLocalReasonExplanation(resolvedNoClusterIdReasonExplanation || '');
-    }, [resolvedNoClusterIdReasonExplanation]);
-    const shouldShowNoClusterReasonSelector = resolvedNoClusterIdReasonExplanation !== 'v3-cluster' &&
-        (clusterDropdownId === 'dont-have-id' || dontKnowSelected);
     const clusterStateReset = () => {
         setSelectedReason('');
         setDontKnowSelected(false);
@@ -117,84 +67,58 @@ export function CaseOpenshiftClusterId() {
             openshiftClusterVersion: '',
             noClusterIdReasonExplanation: '',
             noClusterIdReason: '',
-            additionalCaseInformation: null,
         });
     };
-    const clearedClusterProductFields = {
-        openshiftClusterID: '',
-        openshiftClusterVersion: '',
-        noClusterIdReasonExplanation: '',
-        noClusterIdReason: '',
-    };
     const onDisplayNameChange = (val) => {
         setDisplayName(val);
     };
     useEffect(() => {
+        var _a;
         const isClusterVisible = () => __awaiter(this, void 0, void 0, function* () {
-            const hasCluster = yield isClusterIdEnabledForProduct(product);
+            var _a;
+            const hasCluster = yield isClusterIdEnabledForProduct(product, (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult);
             setShowClusterId(hasCluster);
+            // when product changes from a product with cluster to a product without cluster, reset the clusterId
             const hasPreviousProduct = previousProduct !== undefined;
             const hasCurrentProduct = product !== undefined;
             //need to check if they are undefined as the data loads in and can cause eval against product version === undefined causing edge case to reset our cluster with logic as if product changed.
             const IsProductHasChanged = hasPreviousProduct && hasCurrentProduct && previousProduct !== product;
-            const currentIsClusterEnabled = hasCluster && !isOpenShiftV3;
-            const previousIsClusterEnabled = !isEmpty(previousProduct) && isClusterIdEnabledForProduct(previousProduct);
-            const shouldResetOnClusterProductBoundaryChange = IsProductHasChanged && previousIsClusterEnabled !== currentIsClusterEnabled;
-            if (shouldResetOnClusterProductBoundaryChange) {
-                setCaseDetails(caseDispatch, Object.assign(Object.assign({}, clearedClusterProductFields), { additionalCaseInformation: null }));
+            const isResetClusterID = (!hasCluster || isOpenShiftV3) && IsProductHasChanged;
+            if (isResetClusterID) {
+                const caseDetails = {
+                    openshiftClusterID: '',
+                    noClusterIdReasonExplanation: '',
+                    noClusterIdReason: '',
+                };
+                yield clusterIdUpdate(caseDetails, false);
+                setCaseDetails(caseDispatch, caseDetails);
                 setLocalOpenshiftClusterIDState('');
                 clusterStateReset();
-                const hasClusterRelatedData = !isEmpty(openshiftClusterID) ||
-                    !isEmpty(openshiftClusterVersion) ||
-                    !isEmpty(noClusterIdReason) ||
-                    !isEmpty(noClusterIdReasonExplanation) ||
-                    hasNoClusterIdFieldsInAdditionalCaseInformation(additionalCaseInformation);
-                if (hasClusterRelatedData) {
-                    yield clusterIdUpdate(clearedClusterProductFields, false);
-                }
             }
         });
-        isClusterVisible();
+        if ((((_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) || []).length) {
+            isClusterVisible();
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [product]);
+    }, [product, allProducts.data]);
     /**
-     * Keep local invalid state in sync when a real cluster ID is present on the case.
+     * Hook to make sure that if cluster id comes from session or someother source
+     * we also fetch the details for the cluster id so that we can have fields like cluster version while creating the case
      */
     useEffect(() => {
-        setIsClusterIdInValid(getIsClusterIdInvalid(openshiftClusterID));
-        if (!isEmpty(openshiftClusterID)) {
-            setLocalOpenshiftClusterIDState(openshiftClusterID);
-            setSelectedReason('');
-            setDontKnowSelected(false);
+        const isClusterIdInvalid = getIsClusterIdInvalid(openshiftClusterID);
+        setIsClusterIdInValid(isClusterIdInvalid);
+        if (!isEmpty(noClusterIdReason)) {
+            setDontKnowSelected(true);
+            setSelectedReason('dont-have-id');
         }
-    }, [openshiftClusterID, openshiftClusterVersion]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [noClusterIdReason, openshiftClusterID, openshiftClusterVersion]);
     const clusterIdUpdate = (caseDetails_1, ...args_1) => __awaiter(this, [caseDetails_1, ...args_1], void 0, function* (caseDetails, showToast = true) {
         if (showToast)
             setIsClusterIdUpdating(true);
         try {
-            const caseUpdate = {};
-            if (caseDetails.openshiftClusterID !== undefined) {
-                caseUpdate.openshiftClusterID = caseDetails.openshiftClusterID;
-            }
-            if (caseDetails.openshiftClusterVersion !== undefined) {
-                caseUpdate.openshiftClusterVersion = caseDetails.openshiftClusterVersion;
-            }
-            if (caseDetails.noClusterIdReason !== undefined) {
-                caseUpdate.noClusterIdReason = caseDetails.noClusterIdReason;
-            }
-            if (caseDetails.noClusterIdReasonExplanation !== undefined) {
-                caseUpdate.noClusterIdReasonExplanation = caseDetails.noClusterIdReasonExplanation;
-            }
-            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, caseNumber, caseUpdate, false, {
-                salesforceCaseId: caseId,
-                existingCaseDetails: {
-                    product,
-                    version,
-                    noClusterIdReason,
-                    noClusterIdReasonExplanation,
-                    additionalCaseInformation,
-                },
-            });
+            yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
             if (showToast) {
                 setIsClusterIdUpdating(false);
                 ToastNotification.addSuccessMessage(t(`OpenShift Cluster ID has been successfully updated`));
@@ -210,7 +134,7 @@ export function CaseOpenshiftClusterId() {
             setLocalOpenshiftClusterIDState(previousLocalOpenshiftClusterIDState);
             if (showToast) {
                 setIsClusterIdUpdating(false);
-                caseUpdateError.showFieldError(e, t('OpenShift Cluster ID'), () => clusterIdUpdate(caseDetails, showToast));
+                caseUpdateError.showError(e, t(`OpenShift Cluster ID failed to updated`));
             }
         }
     });
@@ -261,14 +185,14 @@ export function CaseOpenshiftClusterId() {
             yield clusterIdUpdate(caseDetails);
         }
     });
-    const isDedicatedV3 = () => resolvedNoClusterIdReason === 'Other' && resolvedNoClusterIdReasonExplanation === 'v3-cluster';
+    const isDedicatedV3 = () => noClusterIdReason === 'Other' && noClusterIdReasonExplanation === 'v3-cluster';
     const v3Message = () => description.match(/Cluster Name: /g) ? (React.createElement(React.Fragment, null,
         "Your Cluster Name has been added to the description below. ",
         v3Tov4TransitionLink())) : (React.createElement(React.Fragment, null, v3Tov4TransitionLink()));
     const clusterIdDropdownFormInstructions = () => {
         const errorMessage = isClusterIdInvalid
             ? isInvalidErrorMessage()
-            : isEmpty(clusterDropdownId)
+            : isEmpty(openshiftClusterID) && isEmpty(selectedReason)
                 ? discoverV4ClusterIdLinkError()
                 : null;
         const infoMessage = isDedicatedV3() ? v3Message() : discoverV4ClusterIdLink();
@@ -276,22 +200,23 @@ export function CaseOpenshiftClusterId() {
     };
     const onReasonExplanationInputBoxChanged = (explanationInput) => __awaiter(this, void 0, void 0, function* () {
         explanationInput = (explanationInput || '').trim();
-        if (!explanationInput || explanationInput === (noClusterIdReasonExplanation || '').trim()) {
-            return;
-        }
-        const caseDetails = {
-            noClusterIdReason: 'Other',
-            openshiftClusterID: '',
-            noClusterIdReasonExplanation: explanationInput,
-        };
-        try {
-            setCaseDetails(caseDispatch, { noClusterIdReasonExplanation: explanationInput });
-            yield clusterIdUpdate(caseDetails);
-        }
-        catch (e) {
-            setCaseDetails(caseDispatch, { noClusterIdReasonExplanation });
+        if (explanationInput) {
+            const caseDetails = {
+                noClusterIdReason: 'Other',
+                openshiftClusterID: '',
+                noClusterIdReasonExplanation: explanationInput,
+            };
+            try {
+                setCaseDetails(caseDispatch, { noClusterIdReasonExplanation: explanationInput });
+                yield clusterIdUpdate(caseDetails);
+            }
+            catch (e) {
+                setCaseDetails(caseDispatch, { noClusterIdReasonExplanation });
+            }
         }
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debounceFn = debounce(onReasonExplanationInputBoxChanged, 1000);
     const onReasonChange = (reason) => __awaiter(this, void 0, void 0, function* () {
         if (!reason || reason === noClusterIdReason)
             return;
@@ -311,8 +236,7 @@ export function CaseOpenshiftClusterId() {
         }
         setIsReasonUpdating(false);
     });
-    const isInVaidNoClusterIdReason = isEmpty(resolvedNoClusterIdReason) ||
-        (resolvedNoClusterIdReason === 'Other' && isEmpty((localReasonExplanation || '').trim()));
+    const isInVaidNoClusterIdReason = isEmpty(noClusterIdReason) || (noClusterIdReason === 'Other' && isEmpty(noClusterIdReasonExplanation.trim()));
     if (!showClusterId || isFetchingCaseDetails) {
         return null;
     }
@@ -321,8 +245,9 @@ export function CaseOpenshiftClusterId() {
     }
     else {
         return (React.createElement(React.Fragment, null,
-            React.createElement(OpenshiftDropdownV4, { openshiftDisplayName: displayName, setOpenshiftDisplayName: onDisplayNameChange, openshiftClusterIDState: clusterDropdownId || '', onClusterIdStateUpdate: onClusterIdSave, isClusterIdInvalid: isClusterIdInvalid || isEmpty(clusterDropdownId), clusterIdDropdownFormInstructions: !isExportingPDF ? clusterIdDropdownFormInstructions() : undefined, onClusterClear: resetClusterData, isDisabled: isClusterIdUpdating || isCaseReadOnly, noClusterIdReasonExplanation: resolvedNoClusterIdReasonExplanation || '' }),
-            shouldShowNoClusterReasonSelector && (React.createElement(NoClusterIDReasonSelector, { noClusterIdReasonExplanation: resolvedNoClusterIdReasonExplanation || '', noClusterIdReason: resolvedNoClusterIdReason || '', onReasonInputBoxChanged: setLocalReasonExplanation, onReasonInputBoxBlur: onReasonExplanationInputBoxChanged, onReasonChange: onReasonChange, isInValid: isInVaidNoClusterIdReason, isCustomer: isCustomer, isDisabled: isReasonUpdating || isCaseReadOnly })),
+            React.createElement(OpenshiftDropdownV4, { openshiftDisplayName: displayName, setOpenshiftDisplayName: onDisplayNameChange, openshiftClusterIDState: localOpenshiftClusterIDState || selectedReason, onClusterIdStateUpdate: onClusterIdSave, isClusterIdInvalid: (isEmpty(localOpenshiftClusterIDState) && isEmpty(selectedReason)) || isClusterIdInvalid, clusterIdDropdownFormInstructions: !isExportingPDF ? clusterIdDropdownFormInstructions() : undefined, onClusterClear: resetClusterData, isV3: product !== 'OpenShift Container Platform', isDisabled: isClusterIdUpdating, noClusterIdReasonExplanation: noClusterIdReasonExplanation }),
+            noClusterIdReasonExplanation !== 'v3-cluster' &&
+                (dontKnowSelected || noClusterIdReasonExplanation || noClusterIdReason) && (React.createElement(NoClusterIDReasonSelector, { noClusterIdReasonExplanation: noClusterIdReasonExplanation, noClusterIdReason: noClusterIdReason, onReasonInputBoxChanged: debounceFn, onReasonChange: onReasonChange, isInValid: isInVaidNoClusterIdReason, isCustomer: isCustomer, isDisabled: isReasonUpdating })),
             React.createElement(LoadingIndicator, { show: isClusterIdUpdating, size: "xs" })));
     }
 }

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

@@ -44,7 +44,7 @@ export function CaseContactPhoneNumberAlert(props) {
         }
         catch (e) {
             setCasUpdating(false);
-            caseUpdateError.showFieldError(e, t('Phone number'), () => onCaseDetailsChange(caseDetails));
+            caseUpdateError.showError(e, t(`Phone number failed to be confirmed`));
         }
     });
     const goToPhoneField = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"CaseReferenceNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseReferenceNumber.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAW/D,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAqMxD"}
+{"version":3,"file":"CaseReferenceNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseReferenceNumber.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAW/D,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAgMxD"}

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

@@ -7,7 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useApolloClient } from '@apollo/client/react';
 import { InputGroupText, Spinner, TextInput, TextInputGroup, Tooltip, TooltipPosition, ValidatedOptions, } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import InfoIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
@@ -20,7 +19,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
 import { CASE_REFERENCE_NUMBER_LIMIT } from '../../../../reducers/CaseConstNTypes';
-import { setCaseDetails, updateCaseDetailsGraphQL } from '../../../../reducers/CaseReducer';
+import { setCaseDetails, updateCaseDetails } from '../../../../reducers/CaseReducer';
 import { CaseValuesToWatch } from '../../../shared/Constants';
 import { getChangedValueTooltip } from '../../../shared/utils';
 import { PDFContext } from '../../PDFContainer';
@@ -28,13 +27,11 @@ export default function CaseReferenceNumber(props) {
     const { hideSaveCancel = true, inlineEditable = true } = props;
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { referenceNumber, caseNumber, existingCaseDetails } = useCaseSelector((state) => ({
+    const { referenceNumber, caseNumber } = useCaseSelector((state) => ({
         referenceNumber: state.caseDetails.alternateId,
         caseNumber: state.caseDetails.caseNumber,
-        existingCaseDetails: state.caseDetails,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const apolloClient = useApolloClient();
     const [isUpdating, setIsUpdating] = useState(false);
     const [referenceNumberState, setReferenceNumberState] = useState(referenceNumber);
     const { isExportingPDF } = useContext(PDFContext);
@@ -63,14 +60,12 @@ export default function CaseReferenceNumber(props) {
         try {
             setIsUpdating(true);
             const caseDetails = { alternateId: referenceNumberState === null || referenceNumberState === void 0 ? void 0 : referenceNumberState.trim() };
-            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, caseNumber, caseDetails, false, {
-                existingCaseDetails,
-            });
+            yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
             ToastNotification.addSuccessMessage(t(`Personal reference number has been successfully updated`));
             setIsUpdating(false);
         }
         catch (e) {
-            caseUpdateError.showFieldError(e, t('Personal reference number'), updateReferenceNumber);
+            caseUpdateError.showError(e, t('Personal reference number failed to update'));
             setIsUpdating(false);
             throw e;
         }
@@ -111,9 +106,9 @@ export default function CaseReferenceNumber(props) {
                 React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localRefNumberChange, value: referenceNumber, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.altID) }),
                 ' ',
                 !isExportingPDF ? (React.createElement(Tooltip, { trigger: 'mouseenter focus', position: TooltipPosition.top, content: React.createElement(Trans, null, "Add your internal tracking ID to better identify and organize support issues.") },
-                    React.createElement(InfoIcon, { className: "pf-v6-u-ml-sm cursor-pointer", "aria-label": "Case Alternate ID", color: "#5e40be" }))) : ('')), allowInlineEdit: inlineEditable && !canEditCase.isCaseNotEditable, showAlwaysEditableInput: false, content: referenceNumber || t('No personal reference number to display.'), hideSaveCancel: hideSaveCancel, saveDisabled: saveDisabled, charCount: (referenceNumberState === null || referenceNumberState === void 0 ? void 0 : referenceNumberState.length) || 0, charTotal: CASE_REFERENCE_NUMBER_LIMIT, cancelToggleState: isCancelClicked, saveToggleState: isSaveClicked, isExportingPDF: isExportingPDF },
+                    React.createElement(InfoIcon, { className: "pf-v6-u-ml-sm cursor-pointer", "aria-label": "Case Alternate ID", color: "#5e40be" }))) : ('')), allowInlineEdit: inlineEditable, content: referenceNumber || t('No personal reference number to display.'), hideSaveCancel: hideSaveCancel, saveDisabled: saveDisabled, charCount: (referenceNumberState === null || referenceNumberState === void 0 ? void 0 : referenceNumberState.length) || 0, charTotal: CASE_REFERENCE_NUMBER_LIMIT, cancelToggleState: isCancelClicked, saveToggleState: isSaveClicked, isExportingPDF: isExportingPDF },
             React.createElement(TextInputGroup, null,
-                React.createElement(TextInput, { value: referenceNumberState, type: "text", id: "case-details-reference-number", placeholder: t(`Enter the reference number used personally or within your company`), onChange: (_event, value) => onReferenceNumberChange(value), "data-tracking-id": "case-details-reference-number", isDisabled: isUpdating || canEditCase.isCaseNotEditable, onKeyDown: handleKeyDown, validated: (referenceNumberState === null || referenceNumberState === void 0 ? void 0 : referenceNumberState.length) > CASE_REFERENCE_NUMBER_LIMIT
+                React.createElement(TextInput, { value: referenceNumberState, type: "text", id: "case-details-reference-number", placeholder: t(`Enter the reference number used personally or within your company`), onChange: (_event, value) => onReferenceNumberChange(value), "data-tracking-id": "case-details-reference-number", isDisabled: isUpdating, onKeyDown: handleKeyDown, validated: (referenceNumberState === null || referenceNumberState === void 0 ? void 0 : referenceNumberState.length) > CASE_REFERENCE_NUMBER_LIMIT
                         ? ValidatedOptions.error
                         : ValidatedOptions.default }),
                 !isUpdating ? (React.createElement(InputGroupText, null,

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

@@ -1 +1 @@
-{"version":3,"file":"CaseSbrGroups.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseSbrGroups.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,MAAM,CAAC,OAAO,UAAU,aAAa,sBAqEpC"}
+{"version":3,"file":"CaseSbrGroups.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseSbrGroups.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,MAAM,CAAC,OAAO,UAAU,aAAa,sBAoEpC"}

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

@@ -18,11 +18,9 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Typeahead } from 'react-bootstrap-typeahead';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
-import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
 import { setCaseDetails } from '../../../../reducers/CaseReducer';
 export default function CaseSbrGroups() {
     const { t } = useTranslation();
-    const caseUpdateError = useCaseUpdateErrorMessage();
     const { caseDetails } = useCaseSelector((state) => ({
         caseDetails: {
             sbrGroups: state.caseDetails.sbrGroups,
@@ -62,7 +60,7 @@ export default function CaseSbrGroups() {
         }
         catch (e) {
             setIsSbrGroupsUpdating(false);
-            caseUpdateError.showFieldError(e, t('SBR Groups'), () => onCaseSbrGroupsChange(selection));
+            ToastNotification.addDangerMessage(t(`Case SBR group failed to update`));
         }
     });
     return (React.createElement("div", { className: "form-group" },