@rh-support/troubleshoot 2.7.1 → 2.32.2-prodBackup

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

@@ -109,17 +109,17 @@ function AccountSelector(props) {
     if (isEmpty(loggedInUserRights.data))
         return React.createElement(React.Fragment, null);
     return (React.createElement("div", { id: props.id, className: `form-group ${props.className}` },
-        React.createElement(AlertMessage, { show: showNotEntitledMessage, variant: AlertType.DANGER, isInline: true, title: t("The selected account doesn't have entitlement"), className: "pf-v5-u-mb-lg" }),
-        React.createElement("div", { className: "account-selector-label-wrapper pf-v5-u-display-flex" },
+        React.createElement(AlertMessage, { show: showNotEntitledMessage, variant: AlertType.DANGER, isInline: true, title: t("The selected account doesn't have entitlement"), className: "pf-v6-u-mb-lg" }),
+        React.createElement("div", { className: "account-selector-label-wrapper pf-v6-u-display-flex" },
             React.createElement("label", { htmlFor: "account-selector" },
                 React.createElement(Trans, null, "Account"),
                 ' ',
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-            canUseFindMyAccount && (React.createElement("button", { role: "link", className: "btn btn-link btn-app find-my-account pf-v5-u-ml-auto", onClick: onFindMyAccountClick, disabled: selectedAccountDetails.isFetching, "data-tracking-id": "get-support-find-my-account", type: "button" },
+            canUseFindMyAccount && (React.createElement("button", { role: "link", className: "btn btn-link btn-app find-my-account pf-v6-u-ml-auto", onClick: onFindMyAccountClick, disabled: selectedAccountDetails.isFetching, "data-tracking-id": "get-support-find-my-account", type: "button" },
                 React.createElement(Trans, null, "Find my account")))),
         React.createElement("div", { className: "account-selector-wrapper" },
             React.createElement(AccountSelectorInternal, { selectedAccounts: [selectedAccount], canBookmarkAccount: canBookmarkAccounts, bookmarkedAccounts: bookmarkedGroupAccounts.data, id: "account-or-bookmark-selector", className: "account-selector", name: "account-or-bookmark-selector", placeholder: t(`Search for an account ${loggedInUserRights.data.isExternal() ? 'or select a bookmark' : ''} `), onSelect: onInternalAccountSelect, disabled: loggedInUserRights.data.isExternal() || selectedAccountDetails.isFetching, isInValid: isSelectedAccountSubscriptionAbused, restrictedOnSubscriptionAbuse: true })),
-        canAccessManagedAccounts && !isEmpty(managedAccounts.data) && (React.createElement(ManagedAccountsDropdown, { className: "managed-account-selector pf-v5-u-mt-xl", onManagedAccountChange: onManagedAccountChange, managedAccounts: managedAccounts, selectedAccountNumber: accountNumber, disabled: selectedAccountDetails.isFetching })),
+        canAccessManagedAccounts && !isEmpty(managedAccounts.data) && (React.createElement(ManagedAccountsDropdown, { className: "managed-account-selector pf-v6-u-mt-xl", onManagedAccountChange: onManagedAccountChange, managedAccounts: managedAccounts, selectedAccountNumber: accountNumber, disabled: selectedAccountDetails.isFetching })),
         isSelectedAccountSubscriptionAbused && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(InfoCircleIcon, null),
             ' ',

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

@@ -35,7 +35,7 @@ function ManagedAccountsDropdown(props) {
     }, [props.managedAccounts.data, props.selectedAccountNumber]);
     // Only accounts that have granted access permission to partner should be listed
     const managedAccountsWithPermission = () => props.managedAccounts.data.filter((account) => account.partnerCaseAccess === 'All') || [];
-    const managedAccountsOptions = managedAccountsWithPermission().map((account) => (Object.assign({ actionItem: (React.createElement(React.Fragment, null, account.subscriptionAbuse && (React.createElement("span", { className: "form-instructions form-invalid pf-v5-u-text-nowrap pf-v5-u-pr-sm" },
+    const managedAccountsOptions = managedAccountsWithPermission().map((account) => (Object.assign({ actionItem: (React.createElement(React.Fragment, null, account.subscriptionAbuse && (React.createElement("span", { className: "form-instructions form-invalid pf-v6-u-text-nowrap pf-v6-u-pr-sm" },
             React.createElement(InfoCircleIcon, null),
             " ",
             React.createElement(Trans, null, "Subscription abuse"))))), children: (React.createElement(React.Fragment, null, account.subscriptionAbuse ? (React.createElement("span", { className: "form-instructions form-invalid" }, getLabelForAccountOption(account))) : (getLabelForAccountOption(account)))) }, account))) || [];

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

@@ -1 +1 @@
-{"version":3,"file":"ActiveCustomerEscalation.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,+EA6HnC,CAAC"}
+{"version":3,"file":"ActiveCustomerEscalation.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,+EAwInC,CAAC"}

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

@@ -1,4 +1,4 @@
-import { Button, ButtonVariant, List, ListItem, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Card, CardBody, CardHeader, List, ListItem, Popover } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { useCanEditCase } from '@rh-support/react-context';
 import { Can, resourceActions, resources } from '@rh-support/user-permissions';
@@ -14,44 +14,49 @@ export const ActiveCustomerEscalation = forwardRef((props, ref) => {
     const commonElements = (React.createElement(React.Fragment, null,
         React.createElement("p", null,
             React.createElement(Trans, null, "After submitting, your case will be reviewed by a support manager."))));
-    const isInternalElements = (React.createElement("div", { className: "card card-white card-support escalations", ref: ref },
-        React.createElement("h3", { className: "card-heading case-detail-panel-card-heading card-header-bg" },
-            React.createElement(Trans, null, "Active Customer Escalation (ACE)"),
-            React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about Red Hat support case escalation') },
-                React.createElement(InfoCircleIcon, null))),
-        React.createElement("div", { className: "card-body" },
-            React.createElement("p", null,
-                React.createElement("strong", null, t('Red Hat associates can open an ACE escalation when')),
-                ":"),
-            React.createElement(List, { className: "pf-v5-u-pl-lg" },
-                React.createElement(ListItem, null, t('The customer wants an update')),
-                React.createElement(ListItem, null, t('The customer thinks the case is not moving appropriately')),
-                React.createElement(ListItem, null, t('The customer wants a new resource')),
-                React.createElement(ListItem, null, t('The issue is more severe than originally thought'))),
-            React.createElement("a", { href: `/watchlist/internal/aces/new?caseNumber=${props.caseNumber}`, target: "_blank", rel: "noopener noreferrer", className: "pf-v5-c-button pf-m-tertiary", "data-tracking-id": "request-ace-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation')))));
+    const isInternalElements = (React.createElement(Card, { className: "card-support escalations", ref: ref },
+        React.createElement(CardHeader, null,
+            React.createElement("div", { className: "escalation-header" },
+                React.createElement("h3", { className: "card-heading case-detail-panel-card-heading" },
+                    React.createElement(Trans, null, "Active Customer Escalation (ACE)")),
+                React.createElement("a", { href: "/support/escalation", target: "_blank", rel: "noopener noreferrer", "aria-label": t('Learn more about Red Hat support case escalation') },
+                    React.createElement(InfoCircleIcon, null)))),
+        React.createElement(CardBody, null,
+            React.createElement(React.Fragment, null,
+                React.createElement("p", null,
+                    React.createElement("strong", null, t('Red Hat associates can open an ACE escalation when')),
+                    ":"),
+                React.createElement(List, { className: "pf-v6-u-pl-lg" },
+                    React.createElement(ListItem, null, t('The customer wants an update')),
+                    React.createElement(ListItem, null, t('The customer thinks the case is not moving appropriately')),
+                    React.createElement(ListItem, null, t('The customer wants a new resource')),
+                    React.createElement(ListItem, null, t('The issue is more severe than originally thought'))),
+                React.createElement("a", { href: `/watchlist/internal/aces/new?caseNumber=${props.caseNumber}`, target: "_blank", rel: "noopener noreferrer", className: "pf-v6-c-button pf-m-tertiary", "data-tracking-id": "request-ace-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation'))))));
     const [openRequestEscalationModal, setOpenRequestEscalationModal] = useState(false);
     const toggleModal = () => {
         if (canEditCase.alert())
             return;
         setOpenRequestEscalationModal((openRequestEscalationModal) => !openRequestEscalationModal);
     };
-    const isNotInternalElements = (React.createElement("div", { className: "card card-white card-support escalations", ref: ref },
-        React.createElement("h3", { className: "card-heading case-detail-panel-card-heading card-header-bg" },
-            t('Request an escalation'),
-            React.createElement("div", { style: { marginLeft: 'auto' } },
-                React.createElement(Popover, { showClose: false, position: 'left', hasAutoWidth: true, bodyContent: (hide) => (React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about escalation cases.') },
-                        React.createElement(Trans, null, "Learn more about escalation cases."))) },
-                    React.createElement(InfoCircleIcon, { title: t('Learn more about escalation cases popover') })))),
-        React.createElement("div", { className: "card-body" },
-            React.createElement("p", null,
-                React.createElement("strong", null, t('Request a management escalation if your issue')),
-                ":"),
-            React.createElement(List, { className: "pf-v5-u-pl-lg" },
-                React.createElement(ListItem, null, t(`Isn't being resolved appropriately.`)),
-                React.createElement(ListItem, null, t('Needs a senior resource.')),
-                React.createElement(ListItem, null, t('Is more severe or should be a higher priority.'))),
-            commonElements,
-            React.createElement(Button, { variant: ButtonVariant.secondary, onClick: toggleModal, "data-tracking-id": "request-rme-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation')))));
+    const isNotInternalElements = (React.createElement(Card, { className: "card-support escalations", ref: ref },
+        React.createElement(CardHeader, null,
+            React.createElement("div", { className: "escalation-header" },
+                React.createElement("h3", { className: "card-heading case-detail-panel-card-heading" }, t('Request an escalation')),
+                React.createElement("div", { style: { marginLeft: 'auto' } },
+                    React.createElement(Popover, { showClose: false, position: 'left', hasAutoWidth: true, bodyContent: (hide) => (React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about escalation cases.') },
+                            React.createElement(Trans, null, "Learn more about escalation cases."))) },
+                        React.createElement(InfoCircleIcon, { title: t('Learn more about escalation cases popover') }))))),
+        React.createElement(CardBody, null,
+            React.createElement(React.Fragment, null,
+                React.createElement("p", null,
+                    React.createElement("strong", null, t('Request a management escalation if your issue')),
+                    ":"),
+                React.createElement(List, { className: "pf-v6-u-pl-lg" },
+                    React.createElement(ListItem, null, t(`Isn't being resolved appropriately.`)),
+                    React.createElement(ListItem, null, t('Needs a senior resource.')),
+                    React.createElement(ListItem, null, t('Is more severe or should be a higher priority.'))),
+                commonElements,
+                React.createElement(Button, { variant: ButtonVariant.secondary, onClick: toggleModal, "data-tracking-id": "request-rme-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation'))))));
     return (React.createElement(React.Fragment, null,
         React.createElement(RequestEscalationModal, { caseNumber: props.caseNumber, severity: props.caseSeverity, caseStatus: props.caseStatus, show: openRequestEscalationModal, onClose: toggleModal }),
         React.createElement(Can, { do: resourceActions.CREATE, on: resources.ICE_ESCALATION, passThrough: true }, (canCreateICE) => canCreateICE ? isInternalElements : isCreateRMEVisible ? isNotInternalElements : React.createElement(React.Fragment, null))));

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkBnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBA+WnD"}
+{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkBnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBA6WnD"}

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.js

@@ -8,10 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { escalations, publicApi } from '@cee-eng/hydrajs';
-import { Button, Form, FormGroup, FormHelperText, Grid, GridItem, HelperText, HelperTextItem, Modal, Popover, TextArea, TextInput, Title, ValidatedOptions, } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { Button, Form, FormGroup, FormHelperText, Grid, GridItem, HelperText, HelperTextItem, Modal, ModalBody, ModalFooter, ModalHeader, Popover, TextArea, TextInput, Title, ValidatedOptions, } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { AlertMessage, AlertType, LoadingIndicator, ToastNotification, useFetch } from '@rh-support/components';
+import { AlertMessage, AlertType, LoadingIndicator, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
@@ -28,10 +27,6 @@ const customerGEOKeys = Object.keys(CustomerGEOs);
 export function RequestEscalationModal(props) {
     const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useGlobalStateContext();
     const { t } = useTranslation();
-    const [showGeoDropdown, setGeoShowDropdown] = useState(false);
-    const onGeoDropdownToggle = (toggle) => setGeoShowDropdown(toggle);
-    const [showCategoryDropdown, setCategoryShowDropdown] = useState(false);
-    const onCategoryDropdownToggle = (toggle) => setCategoryShowDropdown(toggle);
     const [categories, setCategories] = useState([]);
     const initialState = {
         subject: '',
@@ -60,13 +55,11 @@ export function RequestEscalationModal(props) {
     const caseDispatch = useCaseDispatch();
     const [creationError, setCreationError] = useState(false);
     const onErrorClose = () => setCreationError(false);
-    const setGeoState = (event, selection) => {
-        setFormState(Object.assign(Object.assign({}, formState), { geo: selection }));
-        onGeoDropdownToggle(false);
+    const setGeoState = (selection) => {
+        setFormState(Object.assign(Object.assign({}, formState), { geo: selection.value }));
     };
-    const setCategoryState = (event, selection) => {
-        setFormState(Object.assign(Object.assign({}, formState), { rmeCategory: selection }));
-        onCategoryDropdownToggle(false);
+    const setCategoryState = (selection) => {
+        setFormState(Object.assign(Object.assign({}, formState), { rmeCategory: selection.value }));
     };
     const submitEscalationComment = (escalationNum, comment) => __awaiter(this, void 0, void 0, function* () {
         escalationNum &&
@@ -119,19 +112,11 @@ export function RequestEscalationModal(props) {
             setCreationError(true);
         }
     });
-    const modalActions = [
-        React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: submitButtonIsClicked &&
-                (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching || !hasRequiredInfo()), "aria-label": t('Submit') },
-            (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching) && (React.createElement(LoadingIndicator, { key: "loading", isInline: true })),
-            ' ',
-            t('Submit')),
-        React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, "data-tracking-id": "request-rme-cancel", isDisabled: createEscalationFetch.isFetching || isPostingComment || isUpdatingCase, "aria-label": t('Cancel') }, t('Cancel')),
-    ];
-    const header = (React.createElement(Title, { className: "pf-v5-u-mb-0", id: "custom-header-label", headingLevel: "h1" },
+    const header = (React.createElement(Title, { className: "pf-v6-u-mb-0", id: "custom-header-label", headingLevel: "h1" },
         React.createElement(Trans, null, "Request an escalation"),
         React.createElement(Popover, { showClose: false, position: 'top', hasAutoWidth: true, bodyContent: () => (React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about escalation cases.') },
                 React.createElement(Trans, null, "Learn more about escalation cases."))) },
-            React.createElement(InfoCircleIcon, { className: "pf-v5-u-ml-sm" }))));
+            React.createElement(InfoCircleIcon, { className: "pf-v6-u-ml-sm" }))));
     // load rme categories as soon as user opens the modal
     useEffect(() => {
         if (!props.show || categories.length !== 0)
@@ -148,41 +133,68 @@ export function RequestEscalationModal(props) {
         fetchCategories();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.show]);
-    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal", isOpen: props.show, onClose: onCancel, actions: modalActions, header: header, "aria-label": t('Request an escalation') },
-        React.createElement("p", { className: "pf-v5-u-mb-md" },
-            React.createElement(Trans, { i18nKey: "i18RequestEscalationDescription" }, "Submit an escalation if an issue has become more severe or you feel the case needs a higher priority. A support manager will review your escalation request.")),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose, isInline: true, className: "pf-v5-u-mb-md", "aria-label": t('Could not create case escalation') }),
-        React.createElement(Form, { "aria-label": t('form'), className: "request-escalation-form" },
-            React.createElement(Grid, { hasGutter: true, md: 12 },
-                React.createElement(GridItem, { span: 6 },
-                    React.createElement(FormGroup, { isRequired: true, label: t('Category'), fieldId: "escalation-category" },
-                        React.createElement(Select, Object.assign({ "aria-label": t('Category'), id: "customer-category-select", selections: formState.rmeCategory, validated: submitButtonIsClicked && isEmpty(formState.rmeCategory)
+    const categoryOptions = categories.map((value) => ({
+        value: value,
+        label: value,
+    }));
+    // Create selected option object based on current selection
+    const selectedCategory = {
+        value: formState.rmeCategory,
+        label: formState.rmeCategory || t('Select an option that best fits'),
+    };
+    const geoOptions = customerGEOKeys.map((key) => ({
+        value: CustomerGEOs[key].value,
+        label: t(CustomerGEOs[key].label),
+    }));
+    // Create selected option object based on current selection
+    const findSelectedGeoLabel = () => {
+        const selectedKey = customerGEOKeys.find((key) => CustomerGEOs[key].value === formState.geo);
+        return selectedKey ? t(CustomerGEOs[selectedKey].label) : '';
+    };
+    const selectedGeo = {
+        value: formState.geo,
+        label: findSelectedGeoLabel() || t('Select a location'),
+    };
+    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal", isOpen: props.show, onClose: onCancel, "aria-label": t('Request an escalation') },
+        React.createElement(ModalHeader, null, header),
+        React.createElement(ModalBody, null,
+            React.createElement("p", { className: "pf-v6-u-mb-md" },
+                React.createElement(Trans, { i18nKey: "i18RequestEscalationDescription" }, "Submit an escalation if an issue has become more severe or you feel the case needs a higher priority. A support manager will review your escalation request.")),
+            React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose, isInline: true, className: "pf-v6-u-mb-md", "aria-label": t('Could not create case escalation') }),
+            React.createElement(Form, { "aria-label": t('form'), className: "request-escalation-form" },
+                React.createElement(Grid, { hasGutter: true, md: 12 },
+                    React.createElement(GridItem, { span: 6 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('Category'), fieldId: "escalation-category" },
+                            React.createElement(SingleSelectDropdown, { id: "customer-category-select", ariaLabel: t('Category'), selected: selectedCategory, options: categoryOptions, isDisabled: false, isLoading: isCategoriesFetching, isInvalid: submitButtonIsClicked && isEmpty(formState.rmeCategory), placeholder: t('Select an option that best fits'), onSelect: (option) => setCategoryState(option), isScrollable: true }))),
+                    React.createElement(GridItem, { span: 6 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('My region'), fieldId: "escalation-region" },
+                            React.createElement(SingleSelectDropdown, { ariaLabel: t('My region'), id: "customer-geo-select", selected: selectedGeo, options: geoOptions, isInvalid: submitButtonIsClicked && isEmpty(formState.geo), placeholder: t('Select a location'), onSelect: (option) => setGeoState(option) }))),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Subject'), fieldId: "escalation-subject" },
+                        submitButtonIsClicked && hasLargeSubject && (React.createElement(FormHelperText, null,
+                            React.createElement(HelperText, null,
+                                React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Subject cannot be more than {{limit}} characters', {
+                                    limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
+                                }))))),
+                        React.createElement(TextInput, { isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.subject)) || hasLargeSubject
+                                ? ValidatedOptions.error
+                                : ValidatedOptions.default, type: "text", placeholder: t('Enter a subject for your request'), id: "subject-input", name: "subject-input", value: formState.subject, onChange: (_event, subject) => onSubjectChange(subject), "aria-label": t('Subject') })),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Description'), fieldId: "escalation-description" },
+                        React.createElement(TextArea, { value: formState.description, onChange: (e, value) => setFormStateValue('description', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.description)
+                                ? ValidatedOptions.error
+                                : ValidatedOptions.default, "aria-label": t('Description'), id: "description-textarea", placeholder: t('Provide a detailed comment for us to best assist you'), resizeOrientation: "vertical" })),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
+                        React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('expectations', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.expectations)
                                 ? ValidatedOptions.error
-                                : ValidatedOptions.default, "aria-invalid": submitButtonIsClicked && isEmpty(formState.rmeCategory), onSelect: setCategoryState, isOpen: showCategoryDropdown, placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onCategoryDropdownToggle(toggle) }, (isCategoriesFetching && { loadingVariant: 'spinner' })), categories.map((value, index) => (React.createElement(SelectOption, { key: index, value: value }, value)))))),
-                React.createElement(GridItem, { span: 6 },
-                    React.createElement(FormGroup, { isRequired: true, label: t('My region'), fieldId: "escalation-region" },
-                        React.createElement(Select, { "aria-label": t('My region'), id: "customer-geo-select", selections: formState.geo, onSelect: setGeoState, isOpen: showGeoDropdown, validated: submitButtonIsClicked && isEmpty(formState.geo)
+                                : ValidatedOptions.default, placeholder: t('What do you expect to happen with this escalation?'), id: "expectations-input", value: formState.expectations, "aria-label": t('Expectations'), resizeOrientation: "vertical" })),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Business impact'), fieldId: "escalation-business-impact" },
+                        React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('businessImpactDescription', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.businessImpactDescription)
                                 ? ValidatedOptions.error
-                                : ValidatedOptions.default, placeholderText: t('Select a location'), onToggle: (_event, toggle) => onGeoDropdownToggle(toggle), "aria-invalid": submitButtonIsClicked && isEmpty(formState.geo) }, customerGEOKeys.map((key, index) => (React.createElement(SelectOption, { key: index, value: CustomerGEOs[key].value }, t(CustomerGEOs[key].label))))))),
-                React.createElement(FormGroup, { isRequired: true, label: t('Subject'), fieldId: "escalation-subject" },
-                    submitButtonIsClicked && hasLargeSubject && (React.createElement(FormHelperText, null,
-                        React.createElement(HelperText, null,
-                            React.createElement(HelperTextItem, { variant: ValidatedOptions.error, hasIcon: true }, t('Subject cannot be more than {{limit}} characters', {
-                                limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
-                            }))))),
-                    React.createElement(TextInput, { isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.subject)) || hasLargeSubject
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, type: "text", placeholder: t('Enter a subject for your request'), id: "subject-input", name: "subject-input", value: formState.subject, onChange: (_event, subject) => onSubjectChange(subject), "aria-label": t('Subject') })),
-                React.createElement(FormGroup, { isRequired: true, label: t('Description'), fieldId: "escalation-description" },
-                    React.createElement(TextArea, { value: formState.description, onChange: (e, value) => setFormStateValue('description', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.description)
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, "aria-label": t('Description'), id: "description-textarea", placeholder: t('Provide a detailed comment for us to best assist you'), resizeOrientation: "vertical" })),
-                React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
-                    React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('expectations', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.expectations)
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, placeholder: t('What do you expect to happen with this escalation?'), id: "expectations-input", value: formState.expectations, "aria-label": t('Expectations'), resizeOrientation: "vertical" })),
-                React.createElement(FormGroup, { isRequired: true, label: t('Business impact'), fieldId: "escalation-business-impact" },
-                    React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('businessImpactDescription', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.businessImpactDescription)
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, placeholder: t('Does your business impact change with this escalation? Please describe how it changed.'), id: "business-impact-input", value: formState.businessImpactDescription, "aria-label": t('Business impact'), resizeOrientation: "vertical" }))))));
+                                : ValidatedOptions.default, placeholder: t('Does your business impact change with this escalation? Please describe how it changed.'), id: "business-impact-input", value: formState.businessImpactDescription, "aria-label": t('Business impact'), resizeOrientation: "vertical" }))))),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: submitButtonIsClicked &&
+                    (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching || !hasRequiredInfo()), "aria-label": t('Submit') },
+                (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching) && (React.createElement(LoadingIndicator, { key: "loading", isInline: true })),
+                ' ',
+                t('Submit')),
+            React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, "data-tracking-id": "request-rme-cancel", isDisabled: createEscalationFetch.isFetching || isPostingComment || isUpdatingCase, "aria-label": t('Cancel') }, t('Cancel')))));
 }

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":"AAcA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAS,mBAAmB,EAAiD,MAAM,kBAAkB,CAAC;AAkB7G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,qBA6LzC"}
+{"version":3,"file":"Case.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/Case.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,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,qBA4OzC"}

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

@@ -1,3 +1,12 @@
+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 { CoverSpinner, ErrorBoundary, OverviewContentLoader, ToastNotification, useDocumentTitle, usePrevious, } from '@rh-support/components';
 import { GlobalMetadataStateContext, HostnameAwarenessModal } from '@rh-support/react-context';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -9,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { Route, Switch, useLocation, useParams, useRouteMatch } from 'react-router-dom';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { useCaseDetailsPageDispatchContext } from '../../context/CaseDetailsPageContext';
+import { CaseReducerConstants } from '../../reducers/CaseConstNTypes';
 import { fetchAttachments, fetchCaseEscalations, fetchExternalTrackers, fetchFeedbacks, } from '../../reducers/CaseDetailsPageReducer';
 import { fetchCaseDetails, setCaseAccountNumber } from '../../reducers/CaseReducer';
 import { CaseDetailsAside } from './CaseDetailsAside';
@@ -29,6 +39,7 @@ export default function Case(props) {
     const queryParams = getUrlParsedParams(useLocation().search);
     const ability = useContext(AbilityContext);
     const caseDetailsTabsRef = useRef(null);
+    const currentCaseRef = useRef();
     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);
@@ -80,20 +91,45 @@ export default function Case(props) {
             props.routeProps.history.replace('/case/list');
             return;
         }
-        if (caseNumber) {
-            fetchCaseDetails(caseDispatch, caseNumber, loggedInUserRights.data, loggedInUser.data);
-            canSeeRMEs &&
-                fetchCaseEscalations(caseDetailsPageDispatch, caseNumber, loggedInUserRights.data.getAccountNumber());
-            // fetch data in advance
-            canSeeAttachments &&
-                fetchAttachments(caseDetailsPageDispatch, caseNumber, loggedInUsersAccount.data.secureSupport);
-            canSeeExternalTracker && fetchExternalTrackers(caseDetailsPageDispatch, caseNumber);
-            checkRemoteSessionFlag();
-        }
-        if (canSeeFeedbackButtons && caseNumber) {
-            // fetch data in advance
-            fetchFeedbacks(caseDetailsPageDispatch, caseNumber);
-        }
+        const targetCaseNumber = caseNumber;
+        caseDispatch({ type: CaseReducerConstants.resetCaseState });
+        // Update reference after reset
+        currentCaseRef.current = targetCaseNumber;
+        const safeFetchCaseDetails = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                // Check that we're still on the intended case before fetching
+                if (currentCaseRef.current !== targetCaseNumber)
+                    return;
+                const safeDispatch = (action) => {
+                    // Only dispatch if we're still working with the target case number
+                    if (currentCaseRef.current === targetCaseNumber) {
+                        caseDispatch(action);
+                    }
+                };
+                yield fetchCaseDetails(safeDispatch, targetCaseNumber, loggedInUserRights.data, loggedInUser.data);
+                if (currentCaseRef.current !== targetCaseNumber)
+                    return;
+                if (canSeeRMEs) {
+                    fetchCaseEscalations((action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action), targetCaseNumber, loggedInUserRights.data.getAccountNumber());
+                }
+                if (canSeeAttachments) {
+                    fetchAttachments((action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action), targetCaseNumber, loggedInUsersAccount.data.secureSupport);
+                }
+                if (canSeeExternalTracker) {
+                    fetchExternalTrackers((action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action), targetCaseNumber);
+                }
+                if (canSeeFeedbackButtons) {
+                    fetchFeedbacks((action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action), targetCaseNumber);
+                }
+                if (currentCaseRef.current === targetCaseNumber) {
+                    checkRemoteSessionFlag();
+                }
+            }
+            catch (error) {
+                console.error('Error fetching case details:', error);
+            }
+        });
+        safeFetchCaseDetails();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         caseNumber,

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

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAqX7C"}
+{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAYhF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBA6Y7C"}