@rh-support/troubleshoot 1.0.371-beta.2 → 1.0.371-beta.7

package/lib/esm/components/AccountInfo/OwnerSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AA4BA,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eA2NnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAoCA,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eAuRnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/esm/components/AccountInfo/OwnerSelector.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { contacts } from '@cee-eng/hydrajs';
 import { CaseContactsSelectorExternal, getHydraContactLabel, renderMenuItemChildren, ToastNotification, usePrevious, ValueChangedIcon, } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
 import { sortHydraContacts } from '@rh-support/utils';
@@ -20,24 +21,24 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
 import { useCaseUpdateErrorMessage } from '../../hooks/useCaseUpdateErrorMessage';
-import { setCaseOwner, setNotifiedUser, updateCaseDetails } from '../../reducers/CaseReducer';
+import { setCaseDetails, setCaseOwner, setCaseState, setNotifiedUser, updateCaseDetails, } from '../../reducers/CaseReducer';
 import { CaseValuesToWatch } from '../shared/Constants';
 import { getChangedValueTooltip } from '../shared/utils';
 function OwnerSelector(props) {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { accountNumber, caseNumber, selectedNotificationContacts, selectedOwner, selectedCaseGroupUsers } = useCaseSelector((state) => ({
+    const { accountNumber, caseNumber, selectedNotificationContacts, selectedOwner, selectedCaseGroupUsers, isCaseOwnerUpdating, } = useCaseSelector((state) => ({
         accountNumber: state.caseDetails.accountNumberRef,
         caseNumber: state.caseDetails.caseNumber,
         selectedNotificationContacts: state.selectedNotificationContacts,
         selectedOwner: state.selectedOwner,
         selectedCaseGroupUsers: state.selectedCaseGroupUsers,
+        isCaseOwnerUpdating: state.isCaseOwnerUpdating,
     }), isEqual);
     const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
     const caseDispatch = useCaseDispatch();
-    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { loggedInUserRights, loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const previousAccountNumber = usePrevious(accountNumber);
-    const [isCaseOwnerUpdating, setCaseOwnerUpdating] = useState(false);
     const [usersWithGroupAccess, setUsersWithGroupAccess] = useState([]);
     const [localOwnerChange, setLocalOwnerChange] = useState(false);
     const afterLocalChange = () => setLocalOwnerChange(false);
@@ -47,17 +48,70 @@ function OwnerSelector(props) {
         !isEmpty(pvalue.ssoUsername) &&
         value.ssoUsername !== pvalue.ssoUsername;
     const canEditCase = useCanEditCase();
+    const setContactPhoneNumber = (sso) => __awaiter(this, void 0, void 0, function* () {
+        if (sso === loggedInUser.data.ssoUsername) {
+            setCaseDetails(caseDispatch, {
+                phone: loggedInUser.data.phone,
+                suppliedPhoneNumberVerified: 'True',
+            });
+        }
+        else {
+            try {
+                const selectedContact = yield contacts.getSFDCContactBySso(sso);
+                setCaseDetails(caseDispatch, {
+                    phone: selectedContact.phone,
+                    suppliedPhoneNumberVerified: 'Deferred',
+                });
+            }
+            catch (e) {
+                setCaseDetails(caseDispatch, {
+                    phone: '',
+                    suppliedPhoneNumberVerified: 'Deferred',
+                });
+            }
+        }
+    });
+    const updateContactPhoneNumber = (sso) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            if (sso === loggedInUser.data.ssoUsername) {
+                yield updateCaseDetails(caseDispatch, caseNumber, {
+                    phone: loggedInUser.data.phone,
+                    suppliedPhoneNumberVerified: 'Deferred',
+                });
+            }
+            else {
+                try {
+                    const selectedContact = yield contacts.getSFDCContactBySso(sso);
+                    yield updateCaseDetails(caseDispatch, caseNumber, {
+                        phone: selectedContact.phone,
+                        suppliedPhoneNumberVerified: 'Deferred',
+                    });
+                }
+                catch (e) {
+                    yield updateCaseDetails(caseDispatch, caseNumber, {
+                        phone: '',
+                        suppliedPhoneNumberVerified: 'Deferred',
+                    });
+                }
+            }
+            ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
+        }
+        catch (e) {
+            caseUpdateError.showError(e, t(`Phone number failed to update`));
+        }
+    });
     /**
      * Changing selected owner related
      */
     const previousCaseOwner = usePrevious(selectedOwner.data.ssoUsername);
     const onOwnerChange = (selectedContact, prevCaseOwner, notificationContacts, dispatch, abortSignalCaseGroup, abortSignalEntitlements) => __awaiter(this, void 0, void 0, function* () {
-        if (prevCaseOwner === selectedContact.ssoUsername)
+        if (prevCaseOwner === selectedContact.ssoUsername || isEmpty(selectedContact.ssoUsername))
             return;
         yield setCaseOwner(dispatch, selectedContact, '', abortSignalCaseGroup, abortSignalEntitlements, true);
         setLocalOwnerChange(true);
         !isEmpty(selectedContact) &&
             setNotifiedUser(dispatch, filter(notificationContacts, (c) => c.ssoUsername !== selectedContact.ssoUsername));
+        setContactPhoneNumber(selectedContact.ssoUsername);
     });
     /** Reset owner when selected account number changes */
     useEffect(() => {
@@ -90,7 +144,7 @@ function OwnerSelector(props) {
     };
     const onCaseOwnerUpdate = (newOwner) => __awaiter(this, void 0, void 0, function* () {
         const caseDetails = { contactSSOName: newOwner.ssoUsername };
-        setCaseOwnerUpdating(true);
+        setCaseState(caseDispatch, { isCaseOwnerUpdating: true });
         try {
             yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
             const abortSignal = new AbortController().signal;
@@ -102,11 +156,12 @@ function OwnerSelector(props) {
             }, '', abortSignal);
             setLocalOwnerChange(true);
             updateNotifyUsersList(newOwner);
-            setCaseOwnerUpdating(false);
+            yield updateContactPhoneNumber(newOwner.ssoUsername);
+            setCaseState(caseDispatch, { isCaseOwnerUpdating: false });
             ToastNotification.addSuccessMessage(t(`Owner has been successfully updated`));
         }
         catch (e) {
-            setCaseOwnerUpdating(false);
+            setCaseState(caseDispatch, { isCaseOwnerUpdating: false });
             caseUpdateError.showError(e, t(`Owner failed to update`));
         }
     });

package/lib/esm/components/CaseEditView/Case.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Case.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/Case.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAS,mBAAmB,EAAiD,MAAM,kBAAkB,CAAC;AAmB7G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,eAmLzC"}
+{"version":3,"file":"Case.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/Case.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAS,mBAAmB,EAAiD,MAAM,kBAAkB,CAAC;AAmB7G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,eA6LzC"}

package/lib/esm/components/CaseEditView/Case.js

@@ -4,7 +4,7 @@ import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@
 import { getUrlParsedParams, isValidCaseNumber } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route, Switch, useLocation, useParams, useRouteMatch } from 'react-router-dom';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
@@ -29,6 +29,7 @@ export default function Case(props) {
     const { caseNumber } = useParams();
     const queryParams = getUrlParsedParams(useLocation().search);
     const ability = useContext(AbilityContext);
+    const caseDetailsTabsRef = useRef(null);
     const canSeeFeedbackButtons = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_FEEDBACK_BUTTONS);
     const canReadCase = ability.can(resourceActions.READ, resources.CASE_DETAILS);
     const canSeeExternalTracker = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_EXTERNAL_TRACKER);
@@ -114,11 +115,11 @@ export default function Case(props) {
                         canReadCase &&
                             (!isFetchingCaseDetails || !isEmpty(product)) &&
                             !isFetchingCaseDetailsError && (React.createElement(React.Fragment, null,
-                            React.createElement(ErrorBoundary, null,
-                                React.createElement(CaseOverview, { caseNumber: caseNumber })),
+                            React.createElement(ErrorBoundary, { errorMsgInfo: t('There was an error loading cases. Please try refreshing the page.') },
+                                React.createElement(CaseOverview, { caseNumber: caseNumber, tabsRef: caseDetailsTabsRef })),
                             React.createElement(Switch, null,
                                 React.createElement(Route, { path: `${path}/:activeTab?` },
-                                    React.createElement(CaseDetailsTabs, { basePath: url, caseNumber: caseNumber, routeProps: props.routeProps }))))),
+                                    React.createElement(CaseDetailsTabs, { basePath: url, caseNumber: caseNumber, routeProps: props.routeProps, tabdRef: caseDetailsTabsRef }))))),
                         React.createElement(HostnameAwarenessModal, null))),
                 React.createElement(CaseDetailsAside, { caseNumber: caseNumber }),
                 React.createElement(CaseDetailsModals, { caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport })))))));

package/lib/esm/components/CaseEditView/CaseDetailsAside.js

@@ -196,7 +196,7 @@ export function CaseDetailsAside(props) {
                         React.createElement(Checkbox, { label: t('Set to default'), isChecked: isDefaultBoxChecked, onChange: onDefaultCheckboxChange, id: "set-default-view-checkbox", name: "default-view-checkbox", isDisabled: isDefaultBoxChecked, className: 'defaultViewCheckbox' })))),
                 React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading top solutions') } },
                     React.createElement(CaseSolutions, { caseNumber: caseNumber, ref: topSolutionsRef, isSecureSupportAccount: isSecureSupportAccount })),
-                !caseEscalations.isFetching && canViewACESection && (React.createElement(ErrorBoundary, null,
+                !caseEscalations.isFetching && canViewACESection && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading customer escalation') } },
                     React.createElement(ActiveCustomerEscalation, { caseNumber: caseNumber, caseSeverity: severity, caseStatus: status, ref: createEscalationRef }))),
                 isExternal && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading remote session agreement') } },
                     React.createElement(RemoteSessionAgreement, { caseNumber: caseNumber, caseSeverity: severity, caseStatus: status, ref: createEscalationRef, acceptedRemoteSessionTerms: acceptedRemoteSessionTerms, readOnly: canReadCase })))))));

package/lib/esm/components/CaseEditView/CaseDetailsTabs.d.ts

@@ -1,8 +1,10 @@
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 interface IProps {
     caseNumber: string;
     routeProps: RouteComponentProps;
     basePath: string;
+    tabdRef: React.MutableRefObject<HTMLDivElement>;
 }
 export declare function CaseDetailsTabs(props: IProps): JSX.Element;
 export {};

package/lib/esm/components/CaseEditView/CaseDetailsTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAwBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;CACpB;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,eAiL5C"}
+{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAwBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,eAmL5C"}

package/lib/esm/components/CaseEditView/CaseDetailsTabs.js

@@ -59,7 +59,7 @@ export function CaseDetailsTabs(props) {
         key: 'case details',
         routePath: 'management',
         ref: managementTabRef,
-        component: React.createElement(CaseDetailsManagement, { caseNumber: caseNumber, routeProps: props.routeProps }),
+        component: (React.createElement(CaseDetailsManagement, { caseNumber: caseNumber, routeProps: props.routeProps, tabRef: managementTabRef })),
     });
     canSeeBugZillas &&
         tabsToRender.push({
@@ -104,7 +104,7 @@ export function CaseDetailsTabs(props) {
         return tabIndex > -1 ? tabIndex : activeTabKey;
     };
     const isTabVisibleInPdfExport = (tab) => tab.title === CaseDetailsTabsEnum.DISCUSSION && pdfOption === 'Reduced' ? false : true;
-    return (React.createElement("div", { className: "case-details-tabs" },
+    return (React.createElement("div", { className: "case-details-tabs", ref: props.tabdRef },
         React.createElement(Tabs, { className: "hide-in-pdf", activeKey: getActiveTabKey(), component: TabsComponent.nav, onSelect: handleTabClick }, tabsToRender.map((tab, index) => (React.createElement(Tab, { eventKey: index, tabContentRef: tab.ref, tabContentId: tab.key, key: tab.title, href: `#${props.basePath}/${tab.routePath}`, "data-tracking-id": tab['data-tracking-id'], title: React.createElement(TabTitleText, null,
                 React.createElement(Trans, null, tab.title)) })))),
         React.createElement("div", { className: "case-details-tabs-content pf-u-pt-xl" }, tabsToRender.map((tab, index) => (React.createElement(TabContent, { eventKey: index, key: tab.key, id: tab.key, ref: tab.ref, "aria-label": tab.title, hidden: isExportingPDF ? !isTabVisibleInPdfExport(tab) : index !== getActiveTabKey() },

package/lib/esm/components/CaseEditView/CaseDetailsWarningMessage.js

@@ -4,7 +4,7 @@ import { CaseSecureSupportAlert } from './CaseSecureSupportAlert';
 import { CaseSubscriptionAbuseAlert } from './CaseSubscriptionAbuseAlert';
 export function CaseDetailsWarningMessage(props) {
     const subscriptionAbused = useSubscriptionAbused();
-    return (React.createElement("div", { className: "pf-u-mb-md" },
+    return (React.createElement(React.Fragment, null,
         React.createElement(CaseSecureSupportAlert, { caseNumber: props.caseNumber, selectedAccountDetails: props.selectedAccountDetails }),
         subscriptionAbused.isAccountFreezed && React.createElement(CaseSubscriptionAbuseAlert, null)));
 }

package/lib/esm/components/CaseEditView/CaseOverview/index.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 interface IProps {
     caseNumber: string;
+    tabsRef: React.MutableRefObject<HTMLDivElement>;
 }
 export default function CaseOverview(props: IProps): JSX.Element;
 export {};

package/lib/esm/components/CaseEditView/CaseOverview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/index.tsx"],"names":[],"mappings":"AAyCA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,MAAM,eAoejD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8D,MAAM,OAAO,CAAC;AA6BnF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,MAAM,eAqejD"}

package/lib/esm/components/CaseEditView/CaseOverview/index.js

@@ -26,6 +26,7 @@ import { usePostComment } from '../../shared/usePostComment';
 import { ReopenCaseModal } from '../ConfirmationModals/ReopenCaseModal';
 import { PDFContext } from '../PDFContainer';
 import { CaseInformation } from '../Tabs/CaseDetails/CaseInformation';
+import { CaseContactPhoneNumberAlert } from '../Tabs/CaseDetails/CasePhoneNumberConfirmAlert';
 import Summary from '../Tabs/CaseDetails/Summary';
 import CaseOwnerInfo from './CaseOwnerInfo';
 import CaseStatus from './CaseStatus';
@@ -224,6 +225,7 @@ export default function CaseOverview(props) {
                                 React.createElement(Trans, null, "Case inactivity warning")),
                             React.createElement("p", { className: "pf-u-mb-sm" },
                                 React.createElement(Trans, null, "The customer has received two warnings regarding inactivity. This case will be closed soon if we don't receive any input."))) })))),
+                React.createElement(CaseContactPhoneNumberAlert, { isReview: true, tabRef: props.tabsRef }),
                 React.createElement("header", null,
                     React.createElement("h2", { className: "case-ID" },
                         React.createElement(Trans, null, "Case"),

package/lib/esm/components/CaseEditView/CaseSecureSupportAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSecureSupportAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseSecureSupportAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAOlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,QAAQ,CAAC;CACpC;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,eAyBnD"}
+{"version":3,"file":"CaseSecureSupportAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseSecureSupportAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAOlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,QAAQ,CAAC;CACpC;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,eA+BnD"}

package/lib/esm/components/CaseEditView/CaseSecureSupportAlert.js

@@ -17,6 +17,6 @@ export function CaseSecureSupportAlert(props) {
                 "to access secure support cases."));
         }
     };
-    return (React.createElement(AlertMessage, { variant: AlertType.WARNING, show: isSecureSupportTechViewingSecureCase, isInline: true },
+    return (React.createElement(AlertMessage, { className: "pf-u-mb-md", variant: AlertType.WARNING, show: isSecureSupportTechViewingSecureCase, isInline: true },
         React.createElement(Trans, null, getWarningMsg())));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseAlternateId.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseAlternateId.tsx"],"names":[],"mappings":"AAiBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAOD,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eAqIrC;kBArIQ,eAAe;;;AAwIxB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CaseAlternateId.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseAlternateId.tsx"],"names":[],"mappings":"AA2BA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAOD,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eA0KrC;kBA1KQ,eAAe;;;AA6KxB,eAAe,eAAe,CAAC"}

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

@@ -7,11 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { InputGroupText, InputGroupTextVariant, 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';
-import { InlineEdit, LoadingIndicator, ToastNotification, ValueChangedIcon } from '@rh-support/components';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { NewInlineEdit, ToastNotification, ValueChangedIcon } from '@rh-support/components';
 import { useCanEditCase } from '@rh-support/react-context';
-import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -23,7 +24,7 @@ import { CaseValuesToWatch } from '../../../shared/Constants';
 import { getChangedValueTooltip } from '../../../shared/utils';
 const defaultProps = {
     inlineEditable: true,
-    hideSaveCancel: false,
+    hideSaveCancel: true,
 };
 function CaseAlternateId(props) {
     const { t } = useTranslation();
@@ -39,18 +40,22 @@ function CaseAlternateId(props) {
     const [localAltIDChange, setLocalAltIDChange] = useState(false);
     const afterLocalChange = () => setLocalAltIDChange(false);
     const canEditCase = useCanEditCase();
+    // To keep track of Cancel button state to close InlineEdit input mode
+    const [isCancelClicked, setIsCancelClicked] = useState(false);
+    // To keep track of Save button state to close InlineEdit input mode
+    const [isSaveClicked, setIsSaveClicked] = useState(false);
     useEffect(() => {
         if (alternateId !== alternateIdState) {
             setAlternateIdState(alternateId);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [alternateId]);
-    const onAlternateIdChange = (e) => {
-        var _a;
+    // Function to handle when Alternate ID changes
+    const onAlternateIdChange = (value) => {
         if (canEditCase.alert())
             return;
-        setAlternateIdState(e.target.value);
-        !caseNumber && setCaseDetails(caseDispatch, { alternateId: (_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim() });
+        setAlternateIdState(value);
+        !caseNumber && setCaseDetails(caseDispatch, { alternateId: value === null || value === void 0 ? void 0 : value.trim() });
     };
     const updateAlternateId = () => __awaiter(this, void 0, void 0, function* () {
         try {
@@ -71,32 +76,45 @@ function CaseAlternateId(props) {
             yield updateAlternateId();
         }
         setLocalAltIDChange(true);
+        setIsSaveClicked(!isSaveClicked);
     });
     const onCancel = () => {
         setAlternateIdState(alternateId);
+        setIsCancelClicked(!isCancelClicked);
     };
     const maxLengthErrorMessage = t('Alternate case ID cannot be more than {{limit}} characters.', {
         limit: ALTERNATE_CASE_ID_LIMIT,
     });
-    // To check if alternate ID is empty
-    const isAlternateIDEmpty = isEmpty(alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.trim());
-    // To populate the unsaved alternateId field with the previously saved value on onBlur event.
-    const onBlur = () => {
-        if (alternateId !== alternateIdState) {
-            setAlternateIdState(alternateId);
+    // Conditions to disable save button
+    const saveDisabled = alternateIdState === alternateId || isUpdating || (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT;
+    // Function to handle keyDown events
+    const handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
+        // Cancel on pressing esc
+        if (e.keyCode === 27) {
+            yield onCancel();
         }
-    };
+        // Save on pressing enter
+        else if (!saveDisabled && e.keyCode === 13) {
+            yield onSave();
+        }
+    });
     return (React.createElement(React.Fragment, null,
-        React.createElement(InlineEdit, { labelProps: { htmlFor: 'case-details-alternate-id' }, labelContent: React.createElement(React.Fragment, null,
+        React.createElement(NewInlineEdit, { labelProps: { htmlFor: 'case-details-alternate-id' }, labelContent: React.createElement(React.Fragment, null,
                 React.createElement(Trans, null, "Alternate case ID"),
                 React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localAltIDChange, value: alternateId, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.altID) }),
                 ' ',
                 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-u-ml-sm", "aria-label": "Case Alternate ID" }))), allowInlineEdit: props.inlineEditable, content: alternateId, initialIsEditing: true, hideSaveCancel: props.hideSaveCancel, onSave: onSave, onCancel: onCancel, saveDisabled: isAlternateIDEmpty ||
-                alternateIdState === alternateId ||
-                isUpdating ||
-                (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT, loadingIndicator: isUpdating ? React.createElement(LoadingIndicator, { isInline: true }) : null },
-            React.createElement("input", { value: alternateIdState, type: "text", className: "form-control", id: "case-details-alternate-id", placeholder: t(`Enter your case tracking number or internal incident ID`), onChange: onAlternateIdChange, disabled: isUpdating, "data-tracking-id": "case-details-alternate-id", onBlur: onBlur })),
+                    React.createElement(InfoIcon, { className: "pf-u-ml-sm", "aria-label": "Case Alternate ID" }))), allowInlineEdit: props.inlineEditable, content: alternateId || t('No Alternate case ID to display.'), hideSaveCancel: props.hideSaveCancel, saveDisabled: saveDisabled, charCount: (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) || 0, charTotal: ALTERNATE_CASE_ID_LIMIT, cancelToggleState: isCancelClicked, saveToggleState: isSaveClicked },
+            React.createElement(TextInputGroup, null,
+                React.createElement(TextInput, { value: alternateIdState, type: "text", className: "form-control", id: "case-details-alternate-id", placeholder: t(`Enter your case tracking number or internal incident ID`), onChange: onAlternateIdChange, "data-tracking-id": "case-details-alternate-id", isDisabled: isUpdating, onKeyDown: handleKeyDown, validated: (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT
+                        ? ValidatedOptions.error
+                        : ValidatedOptions.default }),
+                !isUpdating ? (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement("button", { className: "btn btn-app btn-link pf-u-ml-sm", type: "button", disabled: saveDisabled, onClick: onSave },
+                        React.createElement(CheckIcon, null)),
+                    React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onCancel },
+                        React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl" }))))),
         (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT && (React.createElement("div", { className: "pull-top" },
             React.createElement("p", { className: "form-instructions form-invalid" },
                 React.createElement(Trans, null, maxLengthErrorMessage))))));

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.d.ts

@@ -0,0 +1,2 @@
+export declare function CaseContactPhoneNumber(): JSX.Element;
+//# sourceMappingURL=CaseContactPhoneNumber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,sBAAsB,gBA2IrC"}

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

@@ -0,0 +1,95 @@
+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 { InputGroupText, InputGroupTextVariant, Spinner, TextInput, TextInputGroup, ValidatedOptions, } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { NewInlineEdit, ToastNotification } from '@rh-support/components';
+import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
+import isEqual from 'lodash/isEqual';
+import React, { useContext, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { PHONE_INSTRUCTION } from '../../../../constants/caseDetailsConstants';
+import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
+import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
+import { PHONE_LIMIT } from '../../../../reducers/CaseConstNTypes';
+import { updateCaseDetails } from '../../../../reducers/CaseReducer';
+import { ContactPhoneNumberPopOver } from '../../../CaseInformation/ContactPhoneNumberPopOver';
+export function CaseContactPhoneNumber() {
+    const { phone, caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating } = useCaseSelector((state) => ({
+        phone: state.caseDetails.phone || '',
+        caseNumber: state.caseDetails.caseNumber,
+        contactSSOName: state.caseDetails.contactSSOName,
+        suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
+        isCaseOwnerUpdating: state.isCaseOwnerUpdating,
+    }), isEqual);
+    const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
+    const canEditCase = useCanEditCase();
+    const [isCasePhoneUpdating, setCasePhoneUpdating] = useState(false);
+    const [localPhoneState, setLocalPhoneState] = useState(phone);
+    const caseDispatch = useCaseDispatch();
+    const caseUpdateError = useCaseUpdateErrorMessage();
+    const { t } = useTranslation();
+    const onPhoneChange = (phone) => __awaiter(this, void 0, void 0, function* () {
+        if (canEditCase.alert())
+            return;
+        setLocalPhoneState(phone);
+    });
+    const onSave = () => __awaiter(this, void 0, void 0, function* () {
+        setCasePhoneUpdating(true);
+        try {
+            yield updateCaseDetails(caseDispatch, caseNumber, { phone: localPhoneState.trim() });
+            setCasePhoneUpdating(false);
+            ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
+        }
+        catch (e) {
+            setCasePhoneUpdating(false);
+            caseUpdateError.showError(e, t(`Phone number failed to update`));
+        }
+    });
+    const onCancel = () => {
+        setLocalPhoneState(phone);
+    };
+    // Function to handle keyDown events
+    const handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
+        // Cancel on pressing esc
+        if (e.keyCode === 27) {
+            yield onCancel();
+        }
+        // Save on pressing enter
+        else if (!isCasePhoneUpdating && e.keyCode === 13) {
+            yield onSave();
+        }
+    });
+    useEffect(() => {
+        setLocalPhoneState(phone);
+    }, [phone]);
+    const maxLengthErrorMessage = t('Phone number cannot be more than {{limit}} characters.', {
+        limit: PHONE_LIMIT,
+    });
+    const isPhoneNeedsReview = contactSSOName === loggedInUser.data.ssoUsername && suppliedPhoneNumberVerified === 'Deferred';
+    return (React.createElement("div", { className: "form-group", style: { minWidth: '200px' } },
+        React.createElement(NewInlineEdit, { labelProps: { htmlFor: 'case-details-supplied-phone' }, labelContent: React.createElement(React.Fragment, null,
+                React.createElement(Trans, null, "Case owner's phone number"),
+                ContactPhoneNumberPopOver()), allowInlineEdit: false, hideSaveCancel: false, saveDisabled: isCasePhoneUpdating },
+            React.createElement(TextInputGroup, null,
+                React.createElement(TextInput, { value: localPhoneState || '', type: "text", className: "form-control", id: "case-details-supplied-phone", placeholder: "+1 555-555-5555", onChange: onPhoneChange, "data-tracking-id": "case-details-page-supplied-phone", isDisabled: isCasePhoneUpdating || isCaseOwnerUpdating, onKeyDown: handleKeyDown, validated: (localPhoneState === null || localPhoneState === void 0 ? void 0 : localPhoneState.length) > PHONE_LIMIT
+                        ? ValidatedOptions.error
+                        : isPhoneNeedsReview
+                            ? ValidatedOptions.warning
+                            : ValidatedOptions.default }),
+                !isCasePhoneUpdating ? (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement("button", { className: "btn btn-app btn-link pf-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), disabled: (localPhoneState === null || localPhoneState === void 0 ? void 0 : localPhoneState.length) > PHONE_LIMIT || localPhoneState === phone },
+                        React.createElement(CheckIcon, null)),
+                    React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onCancel, "data-tracking-id": "case-details-page-supplied-phone-cancel" },
+                        React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl" })))),
+            (localPhoneState === null || localPhoneState === void 0 ? void 0 : localPhoneState.length) > PHONE_LIMIT ? (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage)) : (React.createElement("p", { className: "form-instructions" },
+                React.createElement(Trans, null, PHONE_INSTRUCTION))))));
+}

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

@@ -1,8 +1,10 @@
 import { IDClassNameProps } from '@rh-support/types/shared';
+import React from 'react';
 import { RouteComponentProps } from 'react-router';
 interface IProps extends IDClassNameProps {
     caseNumber: string;
     routeProps: RouteComponentProps;
+    tabRef: React.MutableRefObject<HTMLDivElement>;
 }
 export default function CaseDetailsManagement(props: IProps): JSX.Element;
 export {};

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":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAenD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,MAAM,eAyD1D"}
+{"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,cAAc,CAAC;AAiBnD,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,eAiE1D"}

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

@@ -1,3 +1,4 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useState } from 'react';
@@ -11,7 +12,9 @@ import CaseContactSelector from '../../../CaseManagement/SendNotifications/CaseC
 import { PartnerCaseHelper } from '../../ShareCase/PartnerCaseHelper';
 import { ShareWithPartner } from '../../ShareCase/PartnerShare';
 import CaseAlternateId from './CaseAlternateId';
+import { CaseContactPhoneNumber } from './CaseContactPhoneNumber';
 import CaseInternalStatus from './CaseInternalStatus';
+import { CaseContactPhoneNumberAlert } from './CasePhoneNumberConfirmAlert';
 import CaseSbrGroups from './CaseSbrGroups';
 export default function CaseDetailsManagement(props) {
     const [isUpdatingPartner, setIsUpdatingPartner] = useState(false);
@@ -30,7 +33,12 @@ export default function CaseDetailsManagement(props) {
         React.createElement(PartnerCaseHelper, { setIsUpdatingPartners: setIsUpdatingPartner, caseNumber: props.caseNumber, routeProps: props.routeProps }),
         React.createElement("section", { className: "card card-white" },
             React.createElement("form", { onSubmit: handleFormSubmit },
-                React.createElement(OwnerSelector, 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),

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":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAa5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,OAAO,CAAC;CAC3B;AAMD,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,eAwKlC;kBAxKQ,YAAY;;;AA2KrB,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"CaseHostname.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseHostname.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAY5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,OAAO,CAAC;CAC3B;AAMD,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,eAqKlC;kBArKQ,YAAY;;;AAwKrB,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -12,7 +12,6 @@ import { Popover, PopoverPosition, Spinner, Switch } from '@patternfly/react-cor
 import { InlineEdit, LoadingIndicator, ToastNotification, useFetch, ValueChangedIcon } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
 import { ability, CaseListFields, 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 { Trans, useTranslation } from 'react-i18next';
@@ -105,13 +104,11 @@ function CaseHostname(props) {
         return React.createElement(React.Fragment, null);
     }
     const lengthError = (hostnameState === null || hostnameState === void 0 ? void 0 : hostnameState.length) > HOSTNAME_LENGTH_LIMIT;
-    // To check if host name is empty
-    const isHostNameEmpty = isEmpty(hostnameState === null || hostnameState === void 0 ? void 0 : hostnameState.trim());
     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(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localHostnameChange, value: hostname, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.hostname) })), helperContent: React.createElement(Popover, { "aria-label": "Hostname Info", position: PopoverPosition.auto, bodyContent: hostNameVisibilityContent, closeBtnAriaLabel: "Close", headerContent: 'Share hostname?', onShow: () => userOriginalHostnameValue() },
-                React.createElement("i", { "aria-label": "Hostname Info", className: "m-l-1 fa fa-question-circle" })), allowInlineEdit: props.inlineEditable, content: hostname, saveDisabled: isHostNameEmpty || hostnameState === hostname || isHostnameUpdating || lengthError, onSave: onSave, onCancel: onCancel, initialIsEditing: false, loadingIndicator: isHostnameUpdating ? React.createElement(LoadingIndicator, { show: isHostnameUpdating, isInline: true }) : null },
+                React.createElement("i", { "aria-label": "Hostname Info", className: "m-l-1 fa fa-question-circle" })), 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 },
             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 })),
         lengthError && (React.createElement("div", { className: "pull-top" },
             React.createElement("p", { className: "form-instructions form-invalid" },

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":"AA2BA,wBAAgB,sBAAsB,gBA8RrC"}
+{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,sBAAsB,gBAgSrC"}

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

@@ -50,6 +50,7 @@ export function CaseOpenshiftClusterId() {
     const displayName = useRef('');
     const previousLocalOpenshiftClusterIDState = usePrevious(localOpenshiftClusterIDState);
     const previousSelectedReason = usePrevious(selectedReason);
+    const previousProduct = usePrevious(product);
     const { t } = useTranslation();
     const clusterStateReset = () => {
         setSelectedReason('');
@@ -72,7 +73,8 @@ export function CaseOpenshiftClusterId() {
             const hasCluster = yield isClusterIdEnabledForProduct(product, (_b = allProducts.data) === null || _b === void 0 ? void 0 : _b.productsResult);
             setShowClusterId(hasCluster);
             // when product changes from a product with cluster to a product without cluster, reset the clusterId
-            const isResetClusterID = !hasCluster || isOpenShiftV3;
+            const IsProductHasChanged = previousProduct && previousProduct !== product;
+            const isResetClusterID = (!hasCluster || isOpenShiftV3) && IsProductHasChanged;
             if (isResetClusterID) {
                 const caseDetails = {
                     openshiftClusterID: '',