@rh-support/troubleshoot 0.2.116 → 0.2.119

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,KAA+B,MAAM,OAAO,CAAC;AAMpD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,+EAuGnC,CAAC"}
+{"version":3,"file":"ActiveCustomerEscalation.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAMpD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,+EAkHnC,CAAC"}

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

@@ -1,4 +1,4 @@
-import { Button } from '@patternfly/react-core';
+import { Button, 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';
@@ -37,9 +37,11 @@ export const ActiveCustomerEscalation = forwardRef((props, ref) => {
     };
     const isNotInternalElements = (React.createElement("div", { className: "card card-white card-support escalations", ref: ref },
         React.createElement("h3", { className: "card-heading" },
-            t('Case escalation'),
-            React.createElement("a", { href: "/support/escalation", target: "_blank" },
-                React.createElement(InfoCircleIcon, null))),
+            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" },
+                        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')}`),

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":"AAwBA,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,eAqNnD"}
+{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAwCA,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,eA+VnD"}

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

@@ -8,11 +8,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { escalations, publicApi } from '@cee-eng/hydrajs';
-import { Button, Modal, Select, SelectDirection, SelectOption } from '@patternfly/react-core';
+import { Button, Form, FormGroup, Grid, GridItem, Modal, Popover, Select, SelectOption, TextArea, TextInput, Title, ValidatedOptions, } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { AlertMessage, AlertType, LoadingIndicator, ToastNotification, useFetch } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch } from '../../../context/CaseContext';
 import { useCaseDetailsPageDispatchContext, useCaseDetailsPageStateContext, } from '../../../context/CaseDetailsPageContext';
@@ -26,23 +28,31 @@ const customerGEOKeys = Object.keys(CustomerGEOs);
 export function RequestEscalationModal(props) {
     const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useGlobalStateContext();
     const { t } = useTranslation();
-    const [showDropdown, setShowDropdown] = useState(false);
-    const onDropdownToggle = (toggle) => setShowDropdown(toggle);
-    const [formState, setFormState] = useState({
+    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: '',
         description: '',
         expectations: '',
         geo: '',
-    });
+        businessImpactDescription: '',
+        rmeCategory: '',
+    };
+    const [formState, setFormState] = useState(initialState);
     const [hasLargeSubject, setHasLargeSubject] = useState(false);
+    const [submitButtonIsClicked, setSubmitSaveButtonIsClicked] = useState(false);
     // checks if all the fields have values.
     const hasRequiredInfo = () => Object.keys(formState).reduce((accumulator, currentValue) => { var _a; return !accumulator ? accumulator : formState[currentValue].length > 0 && ((_a = formState[currentValue]) === null || _a === void 0 ? void 0 : _a.trim()); }, true);
-    const setFormStateThunk = (key) => (event) => setFormState(Object.assign(Object.assign({}, formState), { [key]: event.target.value }));
+    const setFormStateValue = (key) => (value) => setFormState(Object.assign(Object.assign({}, formState), { [key]: value }));
     const createEscalationFetch = useFetch(escalations.createIceEscalation, { propgateErrors: true });
     const { request: postCommentRequest, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
         propgateErrors: true,
     });
     const { request: updateCaseRequest, isFetching: isUpdatingCase } = useFetch(publicApi.kase.updateCase);
+    const { request: getRmeCategories, isFetching: isCategoriesFetching } = useFetch(escalations.getEscalationCategories, { propgateErrors: true });
     const { sort, allDiscussions, discussionFiltersListState } = useCaseDiscussionTabStateContext();
     const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
     const { caseDetailsPageState: { caseFeedbacksHydra }, } = useCaseDetailsPageStateContext();
@@ -52,7 +62,11 @@ export function RequestEscalationModal(props) {
     const onErrorClose = () => setCreationError(false);
     const setGeoState = (event, selection) => {
         setFormState(Object.assign(Object.assign({}, formState), { geo: selection }));
-        onDropdownToggle(false);
+        onGeoDropdownToggle(false);
+    };
+    const setCategoryState = (event, selection) => {
+        setFormState(Object.assign(Object.assign({}, formState), { rmeCategory: selection }));
+        onCategoryDropdownToggle(false);
     };
     const submitEscalationComment = (escalationNum, comment) => __awaiter(this, void 0, void 0, function* () {
         escalationNum &&
@@ -63,60 +77,108 @@ export function RequestEscalationModal(props) {
         checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), props.caseStatus);
         escalationNum &&
             ToastNotification.addSuccessMessage(t('Your escalation request has been successfully submitted.'));
-        props.onClose();
     });
-    const onSubjectChange = (e) => {
-        var _a;
-        const subject = isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) ? '' : e.target.value;
+    const onSubjectChange = (subject) => {
         const isSubjectLarge = subject.length > ESCALATION_SUBJECT_LENGTH_LIMIT;
         setHasLargeSubject(isSubjectLarge);
-        isSubjectLarge ? setFormState(Object.assign(Object.assign({}, formState), { subject: '' })) : setFormState(Object.assign(Object.assign({}, formState), { subject }));
+        setFormState(Object.assign(Object.assign({}, formState), { subject }));
+    };
+    const onCancel = () => {
+        if (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching)
+            return;
+        setSubmitSaveButtonIsClicked(false);
+        setFormState(initialState);
+        setHasLargeSubject(false);
+        props.onClose();
     };
-    const onCancel = () => props.onClose();
     const onSubmit = () => __awaiter(this, void 0, void 0, function* () {
+        setSubmitSaveButtonIsClicked(true);
+        if (!hasRequiredInfo() || hasLargeSubject)
+            return;
         try {
             const res = yield createEscalationFetch.request(Object.assign(Object.assign({}, formState), { recordType: 'Active Customer Escalation', escalationSource: 'RME Escalation', status: 'New', accountNumber: loggedInUserRights.data.getAccountNumber(), caseNumber: props.caseNumber, requestor: `${loggedInUser.data.firstName} ${loggedInUser.data.lastName}`, requestorEmail: loggedInUser.data.email, requestorPhone: loggedInUser.data.phone, alreadyEscalated: false, severity: props.severity ? props.severity.charAt(0) : '3' }));
-            const fullComment = t('### Request Management Escalation:\n\n**Subject**\n{{subject}}\n\n**Description**\n{{description}}\n\n**Expectations**\n{{expectations}}', { subject: formState.subject, description: formState.description, expectations: formState.expectations });
-            yield submitEscalationComment(res.name, fullComment);
+            const fullComment = t('### Request Management Escalation:\n\n**Subject**\n{{subject}}\n\n**Category**\n{{rmeCategory}}\n\n**Description**\n{{description}}\n\n**Expectations**\n{{expectations}}\n\n**Business Impact**\n{{businessImpactDescription}}', {
+                category: formState.rmeCategory,
+                subject: formState.subject,
+                description: formState.description,
+                expectations: formState.expectations,
+                businessImpactDescription: formState.businessImpactDescription,
+                rmeCategory: formState.rmeCategory,
+            });
+            try {
+                yield submitEscalationComment(res.name, fullComment);
+            }
+            catch (e) {
+                // silently fails, escalation is created but adding comment fails
+            }
+            props.onClose();
         }
         catch (error) {
+            //=> handle error
             setCreationError(true);
         }
     });
-    const modalActions = isPostingComment || isUpdatingCase || createEscalationFetch.isFetching
-        ? [React.createElement(LoadingIndicator, { key: "loading", isInline: true })]
-        : [
-            React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: createEscalationFetch.isFetching || !hasRequiredInfo() }, t('Submit request')),
-            React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, "data-tracking-id": "request-rme-cancel", isDisabled: createEscalationFetch.isFetching }, t('Cancel')),
-        ];
-    return (React.createElement(Modal, { title: t('Request an escalation'), isOpen: props.show, onClose: onCancel, actions: modalActions },
-        React.createElement("p", null,
-            React.createElement(Trans, { i18nKey: "i18RequestEscalationLearnMore" },
-                "If you feel the issue has become more severe or the case should be a higher priority, please provide a detailed comment, and the case will be reviewed by a support manager.",
-                ' ',
-                React.createElement("a", { href: "https://access.redhat.com/site/support/policy/mgt_escalation", target: "_blank", rel: "noopener noreferrer" }, "Learn more."))),
-        React.createElement("p", { className: "rha-bold" },
-            React.createElement("b", null,
-                React.createElement(Trans, null, "* All fields are mandatory."))),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose }),
-        React.createElement("form", { "aria-label": t('form') },
-            React.createElement("div", { className: "form-group" },
-                React.createElement("label", { htmlFor: "subject-input" },
-                    React.createElement(Trans, null, "Subject")),
-                React.createElement("input", { type: "text", id: "subject-input", className: `form-control ${hasLargeSubject ? 'form-invalid' : ''}`, onChange: onSubjectChange }),
-                hasLargeSubject && (React.createElement("p", { className: "form-instructions" }, t('Subject cannot be more than {{limit}} characters', {
-                    limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
-                })))),
-            React.createElement("div", { className: "form-group" },
-                React.createElement("label", { htmlFor: "description-textarea" },
-                    React.createElement(Trans, null, "Description")),
-                React.createElement("textarea", { id: "description-textarea", className: "form-control", onChange: setFormStateThunk('description') })),
-            React.createElement("div", { className: "form-group" },
-                React.createElement("label", { htmlFor: "expectations-textarea" },
-                    React.createElement(Trans, null, "Expectations")),
-                React.createElement("textarea", { id: "expectations-textarea", className: "form-control", onChange: setFormStateThunk('expectations') })),
-            React.createElement("div", { className: "form-group" },
-                React.createElement("label", { htmlFor: "customer-geo-select" },
-                    React.createElement(Trans, null, "Customer GEO")),
-                React.createElement(Select, { "aria-label": t('Select an option'), id: "customer-geo-select", selections: formState.geo, onSelect: setGeoState, isOpen: showDropdown, direction: SelectDirection.up, placeholderText: t('Select an option'), onToggle: onDropdownToggle }, customerGEOKeys.map((key, index) => (React.createElement(SelectOption, { key: index, value: CustomerGEOs[key].value }, t(CustomerGEOs[key].label)))))))));
+    const modalActions = [
+        React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: submitButtonIsClicked &&
+                (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching || !hasRequiredInfo()) },
+            (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 }, t('Cancel')),
+    ];
+    const header = (React.createElement(Title, { 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" },
+                React.createElement(Trans, null, "Learn more about escalation cases."))) },
+            React.createElement(InfoCircleIcon, { className: "pf-u-ml-sm" }))));
+    // load rme categories as soon as user opens the modal
+    useEffect(() => {
+        if (!props.show || categories.length !== 0)
+            return;
+        const fetchCategories = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const categories = yield getRmeCategories();
+                setCategories((categories === null || categories === void 0 ? void 0 : categories.items) || []);
+            }
+            catch (e) {
+                console.log(e);
+            }
+        });
+        fetchCategories();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.show]);
+    return (React.createElement(Modal, { isOpen: props.show, onClose: onCancel, actions: modalActions, header: header },
+        React.createElement("p", { className: "pf-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 yor escalation request.")),
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose, isInline: true, className: "pf-u-mb-md" }),
+        React.createElement(Form, { "aria-label": t('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)
+                                ? ValidatedOptions.error
+                                : ValidatedOptions.default, "aria-invalid": submitButtonIsClicked && isEmpty(formState.rmeCategory), onSelect: setCategoryState, isOpen: showCategoryDropdown, placeholderText: t('Select an option that best fits'), onToggle: onCategoryDropdownToggle }, (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.error
+                                : ValidatedOptions.default, placeholderText: t('Select a location'), onToggle: onGeoDropdownToggle, "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, validated: submitButtonIsClicked && hasLargeSubject ? ValidatedOptions.error : ValidatedOptions.default, helperTextInvalid: t('Subject cannot be more than {{limit}} characters', {
+                        limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
+                    }), helperTextInvalidIcon: React.createElement(ExclamationCircleIcon, null), label: t('Subject'), fieldId: "escalation-subject" },
+                    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: onSubjectChange, "aria-label": t('Subject') })),
+                React.createElement(FormGroup, { isRequired: true, label: t('Description'), fieldId: "escalation-description" },
+                    React.createElement(TextArea, { value: formState.description, onChange: setFormStateValue('description'), 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') })),
+                React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
+                    React.createElement(TextArea, { onChange: setFormStateValue('expectations'), 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') })),
+                React.createElement(FormGroup, { isRequired: true, label: t('Business impact'), fieldId: "escalation-business-impact" },
+                    React.createElement(TextArea, { onChange: setFormStateValue('businessImpactDescription'), 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') }))))));
 }

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

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

@@ -13,14 +13,14 @@ import { getVersion } from '@rh-support/utils';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../../context/CaseContext';
 import { setCaseDetails, updateCaseDetails } from '../../../../../reducers/CaseReducer';
-import { getIsClusterIdInvalid, isClusterIdEnabledForProduct } from '../../../../../utils/caseOpenshiftClusterIdUtils';
+import { getIsClusterIdInvalid, isClusterIdEnabledForProduct, } from '../../../../../utils/caseOpenshiftClusterIdUtils';
 import { NoClusterIDReasonSelector } from '../../../../CaseManagement/NoClusterIDReasonSelector';
 import { discoverV4ClusterIdLink, discoverV4ClusterIdLinkError, isInvalidErrorMessage, v3Tov4TransitionLink, } from '../../../../CaseManagement/OpenShiftClusterId';
-import { fetchClusterIdDetails, OpenshiftDropdownV4 } from '../../../../CaseManagement/OpenshiftDropdownV4';
+import { OpenshiftDropdownV4 } from '../../../../CaseManagement/OpenshiftDropdownV4';
 export function CaseOpenshiftClusterId() {
     const { openshiftClusterID, product, version, caseNumber, openshiftClusterVersion, noClusterIdReason, noClusterIdReasonExplanation, selectedAccountDetails, description, } = useCaseSelector((state) => ({
         openshiftClusterID: state.caseDetails.openshiftClusterID,
@@ -42,30 +42,25 @@ export function CaseOpenshiftClusterId() {
     const [isClusterIdInvalid, setIsClusterIdInValid] = useState(false);
     const [dontKnowSelected, setDontKnowSelected] = useState(false);
     const [selectedReason, setSelectedReason] = useState('');
-    const [isFetchingClusterDetails, setIsFetchingClusterDetails] = useState(false);
     const [localOpenshiftClusterIDState, setLocalOpenshiftClusterIDState] = useState(openshiftClusterID);
     const [isClusterIdUpdating, setIsClusterIdUpdating] = useState(false);
     const [isReasonUpdating, setIsReasonUpdating] = useState(false);
+    const displayName = useRef('');
     const { t } = useTranslation();
     const clusterStateReset = () => {
         setSelectedReason('');
         setDontKnowSelected(false);
     };
-    const setClusterVersion = (openshiftClusterID, clusterDetails) => __awaiter(this, void 0, void 0, function* () {
-        if (!openshiftClusterID || getIsClusterIdInvalid(openshiftClusterID))
-            return;
-        let openshiftClusterVersion;
-        if (clusterDetails &&
-            clusterDetails.external_cluster_id === openshiftClusterID &&
-            clusterDetails.openshift_version) {
-            openshiftClusterVersion = clusterDetails.openshift_version;
-        }
-        else {
-            const clusterDetails = yield fetchClusterIdDetails(openshiftClusterID);
-            openshiftClusterVersion = clusterDetails === null || clusterDetails === void 0 ? void 0 : clusterDetails.openshift_version;
-        }
-        setCaseDetails(caseDispatch, { openshiftClusterVersion });
-    });
+    const resetClusterData = () => {
+        setLocalOpenshiftClusterIDState('');
+        clusterStateReset();
+        setCaseDetails(caseDispatch, {
+            openshiftClusterID: '',
+            openshiftClusterVersion: '',
+            noClusterIdReasonExplanation: '',
+            noClusterIdReason: '',
+        });
+    };
     useEffect(() => {
         var _a;
         const isClusterVisible = () => __awaiter(this, void 0, void 0, function* () {
@@ -103,9 +98,6 @@ export function CaseOpenshiftClusterId() {
     useEffect(() => {
         const isClusterIdInvalid = getIsClusterIdInvalid(openshiftClusterID);
         setIsClusterIdInValid(isClusterIdInvalid);
-        if (openshiftClusterID && !isClusterIdInvalid && isEmpty(openshiftClusterVersion)) {
-            setClusterVersion(openshiftClusterID);
-        }
         if (!isEmpty(noClusterIdReason)) {
             setDontKnowSelected(true);
             setSelectedReason('dont-have-id');
@@ -138,13 +130,6 @@ export function CaseOpenshiftClusterId() {
             setDontKnowSelected(true);
             setSelectedReason(selectedClusterId);
             setIsClusterIdInValid(false);
-            const caseDetails = {
-                openshiftClusterID: '',
-                noClusterIdReasonExplanation: '',
-                noClusterIdReason: '',
-                openshiftClusterVersion: '',
-            };
-            yield clusterIdUpdate(caseDetails);
         }
         else if (selectedClusterId === 'v3-cluster') {
             setSelectedReason('dont-have-id');
@@ -160,25 +145,18 @@ export function CaseOpenshiftClusterId() {
         else {
             const isClusterIdInvalid = getIsClusterIdInvalid(selectedClusterId);
             setIsClusterIdInValid(isClusterIdInvalid);
+            setDontKnowSelected(false);
+            setSelectedReason('');
+            displayName.current = selectedCluster.display_name;
             if (isClusterIdInvalid || selectedClusterId === openshiftClusterID)
                 return;
             const caseDetails = {
                 openshiftClusterID: selectedClusterId,
                 noClusterIdReasonExplanation: '',
                 noClusterIdReason: '',
+                openshiftClusterVersion: selectedCluster.openshift_version,
             };
-            if (selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.openshift_version) {
-                caseDetails.openshiftClusterVersion = selectedCluster.openshift_version;
-            }
-            else {
-                setIsFetchingClusterDetails(true);
-                const clusterDetails = yield fetchClusterIdDetails(selectedClusterId);
-                caseDetails.openshiftClusterVersion = (clusterDetails === null || clusterDetails === void 0 ? void 0 : clusterDetails.openshift_version) || '';
-                setIsFetchingClusterDetails(false);
-            }
             yield clusterIdUpdate(caseDetails);
-            setDontKnowSelected(false);
-            setSelectedReason('');
         }
     });
     const isDedicatedV3 = () => noClusterIdReason === 'Other' && noClusterIdReasonExplanation === 'v3-cluster';
@@ -212,13 +190,18 @@ export function CaseOpenshiftClusterId() {
         }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debounceFn = useCallback(debounce(onReasonExplanationInputBoxChanged, 1000), []);
+    const debounceFn = debounce(onReasonExplanationInputBoxChanged, 1000);
     const onReasonChange = (reason) => __awaiter(this, void 0, void 0, function* () {
         if (!reason || reason === noClusterIdReason)
             return;
         try {
             setIsReasonUpdating(true);
-            const caseDetails = { openshiftClusterID: '', noClusterIdReason: reason, noClusterIdReasonExplanation: '' };
+            const caseDetails = {
+                openshiftClusterID: '',
+                openshiftClusterVersion: '',
+                noClusterIdReason: reason,
+                noClusterIdReasonExplanation: '',
+            };
             setCaseDetails(caseDispatch, { noClusterIdReason: reason });
             yield clusterIdUpdate(caseDetails);
         }
@@ -236,9 +219,9 @@ export function CaseOpenshiftClusterId() {
     }
     else {
         return (React.createElement(React.Fragment, null,
-            React.createElement(OpenshiftDropdownV4, { openshiftClusterIDState: localOpenshiftClusterIDState || selectedReason, onClusterIdStateUpdate: onClusterIdSave, isClusterIdInvalid: (isEmpty(localOpenshiftClusterIDState) && isEmpty(selectedReason)) || isClusterIdInvalid, clusterIdDropdownFormInstructions: clusterIdDropdownFormInstructions(), onClusterClear: () => setLocalOpenshiftClusterIDState(''), isV4: majorVersion === '4', isDisabled: isClusterIdUpdating || isFetchingClusterDetails, noClusterIdReasonExplanation: noClusterIdReasonExplanation }),
+            React.createElement(OpenshiftDropdownV4, { openshiftDisplayName: displayName.current, openshiftClusterIDState: localOpenshiftClusterIDState || selectedReason, onClusterIdStateUpdate: onClusterIdSave, isClusterIdInvalid: (isEmpty(localOpenshiftClusterIDState) && isEmpty(selectedReason)) || isClusterIdInvalid, clusterIdDropdownFormInstructions: clusterIdDropdownFormInstructions(), onClusterClear: resetClusterData, isV4: majorVersion === '4', 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 || isFetchingClusterDetails })),
+                (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/RMEEscalations/RMEEscalationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RMEEscalationList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAqB,MAAM,2CAA2C,CAAC;AAwB/F,UAAU,MAAM;IACZ,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAoMtD"}
+{"version":3,"file":"RMEEscalationList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAqB,MAAM,2CAA2C,CAAC;AAwB/F,UAAU,MAAM;IACZ,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAsMtD"}

package/lib/esm/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.js

@@ -8,10 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { escalations, publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, FlexItem } from '@patternfly/react-core';
 import { LoadingIndicator, PFTable, Table, ToastNotification, useFetch } from '@rh-support/components';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
-import { formatDate } from '@rh-support/utils';
+import { formatDate, sendToSentry } from '@rh-support/utils';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useRef, useState } from 'react';
@@ -71,10 +71,7 @@ export default function RMEEscalationList(props) {
         }
         catch (e) {
             ToastNotification.addDangerMessage(e);
-            window === null || window === void 0 ? void 0 : window.Raven.captureException(e);
-            window === null || window === void 0 ? void 0 : window.Raven.captureMessage('RME form submit error', {
-                level: 'error',
-            });
+            sendToSentry(e, {}, 'RME form submit error');
         }
         finally {
             escalationUpdateInProgessIds.current = escalationUpdateInProgessIds.current.filter((item) => item !== escalationNum);
@@ -119,11 +116,13 @@ export default function RMEEscalationList(props) {
                 React.createElement(Trans, null, "Request Re-Open")));
         }
         else {
-            return (React.createElement(React.Fragment, null,
-                React.createElement(Button, { variant: ButtonVariant.secondary, onClick: () => requestUpdateRMEEscalation(escalation.name), "data-tracking-id": "case-details-rme-req-update" },
-                    React.createElement(Trans, null, "Request Update")),
-                React.createElement(Button, { variant: ButtonVariant.secondary, className: "pf-u-mt-sm", onClick: () => requestClosureRMEEscalation(escalation.name), "data-tracking-id": "case-details-rme-req-closure" },
-                    React.createElement(Trans, null, "Request Closure"))));
+            return (React.createElement(Flex, null,
+                React.createElement(FlexItem, null,
+                    React.createElement(Button, { variant: ButtonVariant.secondary, onClick: () => requestUpdateRMEEscalation(escalation.name), "data-tracking-id": "case-details-rme-req-update", className: "" },
+                        React.createElement(Trans, null, "Request Update"))),
+                React.createElement(FlexItem, null,
+                    React.createElement(Button, { variant: ButtonVariant.secondary, className: "pf-u-mt-sm", onClick: () => requestClosureRMEEscalation(escalation.name), "data-tracking-id": "case-details-rme-req-closure" },
+                        React.createElement(Trans, null, "Request Closure")))));
         }
     };
     const canSeeClosedColumn = !isEmpty(find(escalationList, (e) => e.status === escalationStatus.closed));

package/lib/esm/components/CaseManagement/OpenShiftClusterId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,oBAAoB,mBAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAKxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAIjC,CAAC;AAEF,wBAAgB,kBAAkB,gBAoSjC"}
+{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,oBAAoB,mBAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAKxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAIjC,CAAC;AAEF,wBAAgB,kBAAkB,gBAkRjC"}