@rh-support/troubleshoot 2.2.40 → 2.2.43

package/README.md

@@ -1,6 +1,6 @@
 # `troubleshoot`
 
-Pluggable troubleshoot module
+Pluggable troubleshoot module.
 
 ## Usage
 

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-u-mb-lg" }),
-        React.createElement("div", { className: "account-selector-label-wrapper pf-u-display-flex" },
+        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("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-u-ml-auto", onClick: onFindMyAccountClick, disabled: selectedAccountDetails.isFetching, "data-tracking-id": "get-support-find-my-account" },
+            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" },
                 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 && (React.createElement(ManagedAccountsDropdown, { className: "managed-account-selector pf-u-mt-xl", onManagedAccountChange: onManagedAccountChange, managedAccounts: managedAccounts, selectedAccountNumber: accountNumber, disabled: selectedAccountDetails.isFetching })),
+        canAccessManagedAccounts && (React.createElement(ManagedAccountsDropdown, { className: "managed-account-selector pf-v5-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

@@ -26,7 +26,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-u-text-nowrap pf-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-v5-u-text-nowrap pf-v5-u-pr-sm" },
             ' ',
             React.createElement(InfoCircleIcon, null),
             " ",

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

@@ -28,7 +28,7 @@ export const ActiveCustomerEscalation = forwardRef((props, ref) => {
                 React.createElement("li", null, t('The customer thinks the case is not moving appropriately')),
                 React.createElement("li", null, t('The customer wants a new resource')),
                 React.createElement("li", null, t('The issue is more severe than originally thought'))),
-            React.createElement("a", { href: `/watchlist/internal/aces/new?caseNumber=${props.caseNumber}`, className: "pf-c-button pf-m-tertiary", target: "_blank", rel: "noopener noreferrer", "data-tracking-id": "request-ace-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation')))));
+            React.createElement("a", { href: `/watchlist/internal/aces/new?caseNumber=${props.caseNumber}`, className: "pf-v5-c-button pf-m-tertiary", target: "_blank", rel: "noopener noreferrer", "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())
@@ -51,7 +51,7 @@ export const ActiveCustomerEscalation = forwardRef((props, ref) => {
                 React.createElement("li", null, t('Needs a senior resource.')),
                 React.createElement("li", null, t('Is more severe or should be a higher priority.'))),
             commonElements,
-            React.createElement(Button, { className: "pf-c-button pf-m-tertiary", onClick: toggleModal, "data-tracking-id": "request-rme-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation')))));
+            React.createElement(Button, { className: "pf-v5-c-button pf-m-tertiary", 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":"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,eA0WnD"}
+{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAyCA,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,eA6WnD"}

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

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { escalations, publicApi } from '@cee-eng/hydrajs';
-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 { 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 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';
@@ -46,7 +46,7 @@ export function RequestEscalationModal(props) {
     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 setFormStateValue = (key) => (value) => setFormState(Object.assign(Object.assign({}, formState), { [key]: value }));
+    const setFormStateValue = (key, value) => setFormState((pre) => (Object.assign(Object.assign({}, pre), { [key]: value })));
     const createEscalationFetch = useFetch(escalations.createIceEscalation, { propgateErrors: true });
     const { request: postCommentRequest, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
         propgateErrors: true,
@@ -126,11 +126,11 @@ export function RequestEscalationModal(props) {
             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-u-mb-0", id: "custom-header-label", headingLevel: "h1" },
+    const header = (React.createElement(Title, { className: "pf-v5-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-u-ml-sm" }))));
+            React.createElement(InfoCircleIcon, { className: "pf-v5-u-ml-sm" }))));
     // load rme categories as soon as user opens the modal
     useEffect(() => {
         if (!props.show || categories.length !== 0)
@@ -148,37 +148,40 @@ export function RequestEscalationModal(props) {
         // 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-u-mb-md" },
+        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-u-mb-md", "aria-label": t('Could not create case escalation') }),
+        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)
                                 ? 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)))))),
+                                : 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.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" },
+                                : 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: onSubjectChange, "aria-label": t('Subject') })),
+                            : 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: setFormStateValue('description'), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.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') })),
+                            : 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: setFormStateValue('expectations'), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.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') })),
+                            : 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: setFormStateValue('businessImpactDescription'), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.businessImpactDescription)
+                    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') }))))));
+                            : 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" }))))));
 }

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":"AA8BA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAiW7C"}
+{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AA8BA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eA2W7C"}

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, Checkbox, Popover, PopoverPosition, Switch, Tooltip } from '@patternfly/react-core';
+import { Button, Checkbox, Icon, Popover, PopoverPosition, Switch, Tooltip } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/js/icons/angle-double-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-double-right-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
@@ -173,33 +173,38 @@ export function CaseDetailsAside(props) {
             React.createElement(Button, { variant: "link", isInline: true, title: t('Collapse sidebar') },
                 React.createElement("span", null,
                     React.createElement(Trans, null, "Collapse")),
-                React.createElement(AngleDoubleRightIcon, { className: "pf-u-ml-auto", size: "md" })))) : (React.createElement("div", { className: "pf-u-display-flex pf-u-flex-direction-column sidebar-section-collapsed" },
+                React.createElement(Icon, { className: "pf-v5-u-ml-auto", size: "md" },
+                    React.createElement(AngleDoubleRightIcon, null))))) : (React.createElement("div", { className: "pf-v5-u-display-flex pf-v5-u-flex-direction-column sidebar-section-collapsed" },
             React.createElement(Tooltip, { content: t('Expand sidebar'), position: "left" },
                 React.createElement(Button, { variant: "link" },
-                    React.createElement(AngleDoubleLeftIcon, { size: "md" }))),
+                    React.createElement(Icon, { size: "md" },
+                        React.createElement(AngleDoubleLeftIcon, null)))),
             canSeeToggleCustomerView && (React.createElement(Tooltip, { content: viewAsCustomer ? t('External view') : t('Internal view'), position: "left" },
                 React.createElement(Button, { variant: "link", onClick: () => setSectionToScollRef(toggleCustomerViewRef), className: "sidebar-section-toggle-btn" },
-                    React.createElement(LockIcon, { size: "md", className: viewAsCustomer ? 'blueLock' : 'greyLock' })))),
+                    React.createElement(Icon, { size: "md", className: viewAsCustomer ? 'blueLock' : 'greyLock' },
+                        React.createElement(LockIcon, null))))),
             !isLoadingRecommendations && allDocs.length > 0 && (React.createElement(Tooltip, { content: t('Top recommendations'), position: "left" },
                 React.createElement(Button, { variant: "link", onClick: () => setSectionToScollRef(topSolutionsRef), className: "sidebar-section-toggle-btn" },
-                    React.createElement(ListIcon, { size: "md" })))),
+                    React.createElement(Icon, { size: "md" },
+                        React.createElement(ListIcon, null))))),
             !caseEscalations.isFetching && (canCreateICE || (canCreateRME && isCreateRMEVisible)) && (React.createElement(Tooltip, { content: t('Request an escalation'), position: "left" },
                 React.createElement(Button, { variant: "link", className: "sidebar-section-toggle-btn", onClick: () => setSectionToScollRef(createEscalationRef) },
-                    React.createElement(TrendUpIcon, { size: "md" }))))))),
+                    React.createElement(Icon, { size: "md" },
+                        React.createElement(TrendUpIcon, null)))))))),
         React.createElement("pfe-collapse-panel", { className: "sidebar-content", "pfe-animation": "false", id: "case-details-aside-content", ref: caseDetailsAsidePanelRef },
             React.createElement("div", { className: "grid-aside-content" },
                 React.createElement("div", null,
-                    canSeeToggleCustomerView && (React.createElement("div", { className: "pf-u-display-flex customer-view-toggle", ref: toggleCustomerViewRef },
+                    canSeeToggleCustomerView && (React.createElement("div", { className: "pf-v5-u-display-flex customer-view-toggle", ref: toggleCustomerViewRef },
                         React.createElement("span", { className: "customer-view-switch-label" },
                             preferredOrDefaultCaseView() ? t('Customer view') : t('Internal view'),
                             React.createElement(Popover, { "aria-label": "Preferred-default-case-view-popover", position: PopoverPosition.top, bodyContent: React.createElement("p", { className: 'pref-case-popover-text' },
                                     React.createElement(Trans, null, renderCasePrefPopoverText())), showClose: false },
-                                React.createElement(InfoCircleIcon, { "aria-label": "Preferred-case-view-info-icon", className: "pf-u-ml-sm" }))),
+                                React.createElement(InfoCircleIcon, { "aria-label": "Preferred-case-view-info-icon", className: "pf-v5-u-ml-sm" }))),
                         React.createElement(Switch, { title: preferredOrDefaultCaseView() ? t('Customer view') : t('Internal view'), "data-tracking-id": preferredOrDefaultCaseView()
                                 ? 'disable-view-as-customer'
                                 : 'enable-view-as-customer', "aria-label": preferredOrDefaultCaseView()
                                 ? 'disable view as customer'
-                                : 'enable view as customer', id: "customer-view-switch", className: "pf-u-ml-auto", isChecked: preferredOrDefaultCaseView(), onChange: onCaseSwitchChange }))),
+                                : 'enable view as customer', id: "customer-view-switch", className: "pf-v5-u-ml-auto", isChecked: preferredOrDefaultCaseView(), onChange: onCaseSwitchChange }))),
                     canSeeToggleCustomerView && (React.createElement("div", null,
                         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') } },

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

@@ -46,7 +46,7 @@ export function CaseDetailsErrorMessage(props) {
             '404': { message: errorMessage404 },
         });
     };
-    return (React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mb-lg", show: true, 
+    return (React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mb-lg", show: true, 
         // Here customizing title of alert based on case group error.
         title: errorMessageTitle(errorDetails, Object.assign({}, (isCaseGroupError && {
             '403': { title: invalidCaseGroupErrorTitle },

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

@@ -107,20 +107,20 @@ export function CaseDetailsTabs(props) {
     return (React.createElement("div", { className: "case-details-tabs", ref: props.tabdRef },
         React.createElement(Tabs, { className: isExportingPDF ? 'hide-in-pdf' : '', activeKey: getActiveTabKey(), component: TabsComponent.nav, onSelect: handleTabClick, role: "region", "aria-label": t('Case details tabs') }, 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("div", { className: "case-details-tabs-content pf-v5-u-pt-xl" }, tabsToRender.map((tab, index) => {
             return index === getActiveTabKey() && !isExportingPDF ? (React.createElement(TabContent, { eventKey: index, key: tab.key, id: tab.key, ref: tab.ref, "aria-label": tab.title, hidden: isExportingPDF ? !isTabVisibleInPdfExport(tab) : index !== getActiveTabKey() },
                 React.createElement(ErrorBoundary, { errorMsgInfo: {
                         message: t(`There was an error loading case ${tab.key}`),
                     } },
                     React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
-                        React.createElement(TextContent, { className: "show-in-pdf pf-u-mt-md" },
+                        React.createElement(TextContent, { className: "show-in-pdf pf-v5-u-mt-md" },
                             React.createElement(Text, { component: TextVariants.h2 }, tab.title)),
                         tab.component)))) : isExportingPDF ? (React.createElement(TabContent, { eventKey: index, key: tab.key, id: tab.key, ref: tab.ref, "aria-label": tab.title, hidden: isExportingPDF ? !isTabVisibleInPdfExport(tab) : index !== getActiveTabKey() },
                 React.createElement(ErrorBoundary, { errorMsgInfo: {
                         message: t(`There was an error loading case ${tab.key}`),
                     } },
                     React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
-                        React.createElement(TextContent, { className: "show-in-pdf pf-u-mt-md" },
+                        React.createElement(TextContent, { className: "show-in-pdf pf-v5-u-mt-md" },
                             React.createElement(Text, { component: TextVariants.h2 }, tab.title)),
                         tab.component)))) : (React.createElement(React.Fragment, null));
         }))));

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

@@ -46,5 +46,5 @@ export default function CaseOwnerInfo(props) {
                             React.createElement(Trans, null, "Office location")),
                         ": ",
                         props.caseDetailsHydra.data.caseOwner.officeLocation)) },
-                React.createElement(QuestionCircleIcon, { className: "pf-u-ml-xs icon-size", "aria-label": "Support Level Info" })))))));
+                React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": "Support Level Info" })))))));
 }

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

@@ -19,5 +19,5 @@ export default function DateTime({ showToolTip = true, toolTipTimeFormat = defau
     return (React.createElement(React.Fragment, null,
         React.createElement("time", { dateTime: dateTimeString }, formatDateTime(dateTimeString, locale, dateTimeFormat)),
         showToolTip && (React.createElement(Tooltip, { content: React.createElement("time", { dateTime: dateTimeString }, formatDateTime(dateTimeString, locale, toolTipTimeFormat)) },
-            React.createElement(InfoIcon, { className: `pf-u-ml-sm ${isExportingPDF ? 'hide-in-pdf' : ''}` })))));
+            React.createElement(InfoIcon, { className: `pf-v5-u-ml-sm ${isExportingPDF ? 'hide-in-pdf' : ''}` })))));
 }

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

@@ -221,15 +221,15 @@ export default function CaseOverview(props) {
             React.createElement("div", { className: "case-overview-header" },
                 canSeeInactivityWarning && isCaseInOpenState && (React.createElement(React.Fragment, null,
                     ' ',
-                    firstCaseInactivityWarningSentAt && !secondCaseInactivityWarningSentAt && (React.createElement(Alert, { className: "pf-u-mb-md", isInline: true, title: React.createElement(React.Fragment, null,
-                            React.createElement("h3", { className: "pf-u-mb-sm pf-c-alert__title" },
+                    firstCaseInactivityWarningSentAt && !secondCaseInactivityWarningSentAt && (React.createElement(Alert, { className: "pf-v5-u-mb-md", isInline: true, title: React.createElement(React.Fragment, null,
+                            React.createElement("h3", { className: "pf-v5-u-mb-sm pf-v5-c-alert__title" },
                                 React.createElement(Trans, null, "Case inactivity notification")),
-                            React.createElement("p", { className: "pf-u-mb-sm" },
+                            React.createElement("p", { className: "pf-v5-u-mb-sm" },
                                 React.createElement(Trans, null, "The customer has received one warning regarding inactivity."))) })),
-                    firstCaseInactivityWarningSentAt && secondCaseInactivityWarningSentAt && (React.createElement(Alert, { className: "pf-u-mb-md", isInline: true, variant: AlertVariant.warning, title: React.createElement(React.Fragment, null,
-                            React.createElement("h3", { className: "pf-u-mb-sm pf-c-alert__title" },
+                    firstCaseInactivityWarningSentAt && secondCaseInactivityWarningSentAt && (React.createElement(Alert, { className: "pf-v5-u-mb-md", isInline: true, variant: AlertVariant.warning, title: React.createElement(React.Fragment, null,
+                            React.createElement("h3", { className: "pf-v5-u-mb-sm pf-v5-c-alert__title" },
                                 React.createElement(Trans, null, "Case inactivity warning")),
-                            React.createElement("p", { className: "pf-u-mb-sm" },
+                            React.createElement("p", { className: "pf-v5-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(CasePhoneNumberSev1ConfirmAlert, { isReview: true, tabRef: props.tabsRef }),
@@ -240,7 +240,7 @@ export default function CaseOverview(props) {
                         props.caseNumber),
                     React.createElement("div", null,
                         exportPDFButton(props.caseNumber),
-                        React.createElement(Button, Object.assign({ className: `pf-u-ml-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, isDisabled: !canManageCase || (caseOverviewState.caseStatusUpdating && isCaseUpdating) }, (caseOverviewState.caseStatusUpdating &&
+                        React.createElement(Button, Object.assign({ className: `pf-v5-u-ml-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, isDisabled: !canManageCase || (caseOverviewState.caseStatusUpdating && isCaseUpdating) }, (caseOverviewState.caseStatusUpdating &&
                             isCaseUpdating && {
                             isLoading: true,
                         }), { onClick: () => (isCaseInOpenState ? onCaseClose() : onCaseReopen()), variant: isCaseInOpenState ? ButtonVariant.secondary : ButtonVariant.tertiary, "data-tracking-id": isCaseInOpenState
@@ -280,7 +280,7 @@ export default function CaseOverview(props) {
                     React.createElement("div", null, createdDate ? React.createElement(DateTime, { dateTimeString: createdDate }) : null)),
                 canSeeCaseOwnerInfo && (React.createElement(CaseOwnerInfo, { owner: ownerId, caseDetailsHydra: caseOverviewState.caseDetailsHydra }))),
             React.createElement("div", { className: "case-overview-secondary card card-md card-light push-bottom" },
-                React.createElement("div", { className: "pf-l-grid pf-m-gutter pf-m-all-4-col-on-lg" },
+                React.createElement("div", { className: "pf-v5-l-grid pf-m-gutter pf-m-all-4-col-on-lg" },
                     React.createElement("div", { className: "form-wrapper" },
                         React.createElement(CaseStatus, { selectedStatus: status, onStatusChange: onStatusChange, isDisabled: !canManageCase || caseOverviewState.allCaseStatuses.isFetching, allStatuses: caseOverviewState.allCaseStatuses.data, isFetching: caseOverviewState.caseStatusUpdating && isCaseUpdating, hasError: caseOverviewState.allCaseStatuses.isError })),
                     React.createElement("div", { className: "form-wrapper" },

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

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

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

@@ -3,6 +3,6 @@ import { SubscriptionAbuseModalText, SubscriptionAbuseModalTitle } from '@rh-sup
 import React from 'react';
 import { Trans } from 'react-i18next';
 export function CaseSubscriptionAbuseAlert() {
-    return (React.createElement(Alert, { className: "pf-u-mb-md", isInline: true, variant: AlertVariant.warning, title: React.createElement(Trans, null, SubscriptionAbuseModalTitle), children: React.createElement("p", { className: "pf-u-mb-sm" },
+    return (React.createElement(Alert, { className: "pf-v5-u-mb-md", isInline: true, variant: AlertVariant.warning, title: React.createElement(Trans, null, SubscriptionAbuseModalTitle), children: React.createElement("p", { className: "pf-v5-u-mb-sm" },
             React.createElement(Trans, null, SubscriptionAbuseModalText)) }));
 }

package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReopenCaseModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ConfirmationModals/ReopenCaseModal.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAEzE,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,KAAA,EAAE,SAAS,KAAA,EAAE,UAAU,CAAC,KAAA,EAAE,iBAAiB,CAAC,KAAA,EAAE,cAAc,CAAC,KAAA,EAAE,mBAAmB,CAAC,KAAA,KAAK,IAAI,CAAC;IACpH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,cAAc,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;CACzB;AAMD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,eA8L5C"}
+{"version":3,"file":"ReopenCaseModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ConfirmationModals/ReopenCaseModal.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAEzE,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,KAAA,EAAE,SAAS,KAAA,EAAE,UAAU,CAAC,KAAA,EAAE,iBAAiB,CAAC,KAAA,EAAE,cAAc,CAAC,KAAA,EAAE,mBAAmB,CAAC,KAAA,KAAK,IAAI,CAAC;IACpH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,cAAc,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;CACzB;AAMD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,eAuM5C"}

package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, ButtonVariant, Form, FormGroup, Modal, ModalVariant, Select, SelectOption, TextArea, } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { Button, ButtonVariant, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, TextArea, } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { formatDateTime } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useState } from 'react';
@@ -76,15 +76,21 @@ export function ReopenCaseModal(props) {
                 React.createElement(Trans, null, "Cancel")),
         ], variant: ModalVariant.medium },
         React.createElement(Form, { className: "case-reopen-modal-form" },
-            (!props.isInternal || !props.reopenStatus) && (React.createElement(FormGroup, { label: t(props.isInternal ? 'Status' : 'Reason'), isRequired: true, fieldId: "case-resolution", helperTextInvalid: "Required field", validated: showValidationError && (props.isInternal ? !selectedStatus : !selectedReason)
-                    ? 'error'
-                    : 'default', helperTextInvalidIcon: React.createElement(ExclamationCircleIcon, null) }, props.isInternal ? (React.createElement(Select, { "aria-label": t('Select an option that best fits'), id: "reopen-case-status", selections: selectedStatus, onSelect: onStatusChange, isOpen: showDropdown, isDisabled: props.isUpdating, menuAppendTo: document.body, validated: showValidationError && !selectedStatus ? 'error' : 'default', placeholderText: t('Select an option that best fits'), onToggle: onDropdownToggle }, props.allStatuses
-                .filter((status) => status !== CaseStatusEnum.CLOSED)
-                .map((option, index) => (React.createElement(SelectOption, { key: index, value: option },
-                React.createElement(Trans, null, option)))))) : (React.createElement(Select, { "aria-label": t('Select an option that best fits'), id: "case-resolution", selections: selectedReason, onSelect: onReasonChange, isOpen: showDropdown, isDisabled: props.isUpdating, menuAppendTo: document.body, validated: showValidationError && !selectedReason ? 'error' : 'default', placeholderText: t('Select an option that best fits'), onToggle: onDropdownToggle }, reasonsList.map((option, index) => (React.createElement(SelectOption, { key: index, value: option },
-                React.createElement(Trans, null, option)))))))),
-            showTextArea && (React.createElement(FormGroup, { label: t('Please describe your reason'), type: "text", helperText: t(`Your comment will be visible${props.isInternal ? ' to the customers' : ''} under discussions after reopening.`), isRequired: true, fieldId: "reopen-case-description" },
+            (!props.isInternal || !props.reopenStatus) && (React.createElement(FormGroup, { label: t(props.isInternal ? 'Status' : 'Reason'), isRequired: true, fieldId: "case-resolution" },
+                showValidationError && (props.isInternal ? !selectedStatus : !selectedReason) && (React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: "error", hasIcon: true },
+                            React.createElement(Trans, null, "Required field"))))),
+                props.isInternal ? (React.createElement(Select, { "aria-label": t('Select an option that best fits'), id: "reopen-case-status", selections: selectedStatus, onSelect: onStatusChange, isOpen: showDropdown, isDisabled: props.isUpdating, menuAppendTo: document.body, validated: showValidationError && !selectedStatus ? 'error' : 'default', placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onDropdownToggle(toggle) }, props.allStatuses
+                    .filter((status) => status !== CaseStatusEnum.CLOSED)
+                    .map((option, index) => (React.createElement(SelectOption, { key: index, value: option },
+                    React.createElement(Trans, null, option)))))) : (React.createElement(Select, { "aria-label": t('Select an option that best fits'), id: "case-resolution", selections: selectedReason, onSelect: onReasonChange, isOpen: showDropdown, isDisabled: props.isUpdating, menuAppendTo: document.body, validated: showValidationError && !selectedReason ? 'error' : 'default', placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onDropdownToggle(toggle) }, reasonsList.map((option, index) => (React.createElement(SelectOption, { key: index, value: option },
+                    React.createElement(Trans, null, option)))))))),
+            showTextArea && (React.createElement(FormGroup, { label: t('Please describe your reason'), type: "text", isRequired: true, fieldId: "reopen-case-description" },
+                React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { hasIcon: true }, t(`Your comment will be visible${props.isInternal ? ' to the customers' : ''} under discussions after reopening.`)))),
                 React.createElement(TextArea, { placeholder: t(props.isInternal
                         ? 'Describe the reason for reopening with the selected status'
-                        : 'The better the description, the easier it will be for our support team to address your case.'), validated: showValidationError && isDescriptionEmpty && !reopenDescription ? 'error' : 'default', isRequired: true, id: "reopen-case-description", name: "reopen-case-description", "aria-describedby": "reopen-case-description", value: reopenDescription, onChange: onDescriptionChange, isDisabled: props.isUpdating }))))));
+                        : 'The better the description, the easier it will be for our support team to address your case.'), validated: showValidationError && isDescriptionEmpty && !reopenDescription ? 'error' : 'default', isRequired: true, id: "reopen-case-description", name: "reopen-case-description", "aria-describedby": "reopen-case-description", value: reopenDescription, onChange: (_event, text) => onDescriptionChange(text), isDisabled: props.isUpdating, resizeOrientation: "vertical" }))))));
 }

package/lib/esm/components/CaseEditView/RequestRemoteSession/ESSRemoteSession.js

@@ -29,7 +29,7 @@ export const ESSRemoteSession = forwardRef((props, ref) => {
     const termsAcked = remoteSessionTermsAcked && !screenSessionRequested;
     // ESS RS Aside Section Body
     const ESSRemoteSessionSectionBody = (React.createElement("div", { className: "card card-white card-support escalations", ref: ref },
-        React.createElement("h3", { className: "card-heading pf-u-display-flex pf-u-justify-content-space-between" },
+        React.createElement("h3", { className: "card-heading pf-v5-u-display-flex pf-v5-u-justify-content-space-between" },
             t('Remote session'),
             React.createElement(Popover, { "aria-label": t('Remote Session Helper Info'), bodyContent: t('A remote session allows support engineers to view or access your computer to simplify collaboration and troubleshooting.'), footerContent: React.createElement("a", { href: "/articles/3566571", target: "_blank", rel: "noopener noreferrer", "aria-label": t('Read more about remote sessions') }, t('Read more about remote sessions')) },
                 React.createElement(InfoCircleIcon, null))),
@@ -40,7 +40,7 @@ export const ESSRemoteSession = forwardRef((props, ref) => {
                 React.createElement("li", null, t(`Such access will help diagnose, debug or lead to the resolution of a software defect`)),
                 React.createElement("li", null, t('Agreed upon by both Red Hat and you, the end user'))),
             React.createElement("p", { className: "rrs-light-grey-text" }, t('Red Hat will add a comment to your case to schedule your remote session.')),
-            screenSessionRequested && (React.createElement(Tooltip, { content: t('Remote session request has already been submitted.'), reference: tooltipRef, "aria-live": 'polite' })),
+            screenSessionRequested && (React.createElement(Tooltip, { content: t('Remote session request has already been submitted.'), triggerRef: tooltipRef, "aria-live": 'polite' })),
             React.createElement(Button, { "aria-label": screenSessionRequested ? t('Remote session requested') : t('Request remote session'), variant: screenSessionRequested ? 'primary' : 'secondary', onClick: termsAcked ? toggleESSRemoteSessionModal : toggleNewESSRemoteSessionModal, "data-tracking-id": "accept-remote-session-agreement-trigger", isAriaDisabled: screenSessionRequested, ref: tooltipRef }, screenSessionRequested ? t('Remote session requested') : t('Request remote session')))));
     return (React.createElement(React.Fragment, null,
         ESSRemoteSessionSectionBody,

package/lib/esm/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ESSRemoteSessionModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAiBxD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,eAoKlD"}
+{"version":3,"file":"ESSRemoteSessionModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAiBxD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,eAsKlD"}

package/lib/esm/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Modal, ModalVariant, Title, TitleSizes } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, Modal, ModalVariant, Title, TitleSizes } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ToastNotification, useFetch } from '@rh-support/components';
 import React, { useState } from 'react';
@@ -91,18 +91,19 @@ export function ESSRemoteSessionModal(props) {
     // Body of ESS Modal
     const ESSRemoteSessionModalBody = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement("p", { className: "pf-u-mt-xs" },
+            React.createElement("p", { className: "pf-v5-u-mt-xs" },
                 React.createElement(Trans, null, "To troubleshoot your problem, Red Hat support accesses your network or systems remotely."))));
     };
     const RequestedESSRemoteSessionModalBody = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement("p", { className: "pf-u-mt-xs" },
+            React.createElement("p", { className: "pf-v5-u-mt-xs" },
                 React.createElement(Trans, null, "Red Hat will add a comment to your case to schedule your remote session."))));
     };
     const essModalHeader = props.screenSessionRequested ? (React.createElement(React.Fragment, null,
-        React.createElement(Title, { className: "pf-u-mb-xs", id: "modal-custom-header-label", headingLevel: "h1", size: TitleSizes['2xl'] },
-            React.createElement(CheckCircleIcon, { color: "#3E8635", size: "lg", className: "pf-u-mr-md" }),
+        React.createElement(Title, { className: "pf-v5-u-mb-xs", id: "modal-custom-header-label", headingLevel: "h1", size: TitleSizes['2xl'] },
+            React.createElement(Icon, { size: "lg" },
+                React.createElement(CheckCircleIcon, { color: "#3E8635", className: "pf-v5-u-mr-md" })),
             t('Remote session has been requested')))) : (React.createElement(React.Fragment, null,
-        React.createElement(Title, { className: "pf-u-mb-xs", id: "modal-custom-header-label", headingLevel: "h1", size: TitleSizes['2xl'] }, t('Request a remote session?'))));
+        React.createElement(Title, { className: "pf-v5-u-mb-xs", id: "modal-custom-header-label", headingLevel: "h1", size: TitleSizes['2xl'] }, t('Request a remote session?'))));
     return (React.createElement(Modal, { variant: ModalVariant.small, id: "remote-session-agreement-modal", "aria-label": props.screenSessionRequested ? t('Remote session has been requested') : t('Request a remote session?'), header: essModalHeader, isOpen: props.show, onClose: onCancel, actions: props.screenSessionRequested ? acceptedModalActions : modalActions }, props.screenSessionRequested ? RequestedESSRemoteSessionModalBody() : ESSRemoteSessionModalBody()));
 }

package/lib/esm/components/CaseEditView/RequestRemoteSession/NewEssTermsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewEssTermsModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/NewEssTermsModal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAaxD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAiBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eA6P7C"}
+{"version":3,"file":"NewEssTermsModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/NewEssTermsModal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAaxD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAiBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eA6P7C"}

package/lib/esm/components/CaseEditView/RequestRemoteSession/NewEssTermsModal.js

@@ -8,7 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, Modal, Select, SelectOption } from '@patternfly/react-core';
+import { Button, ButtonVariant, Checkbox, Modal } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { ToastNotification, useFetch } from '@rh-support/components';
@@ -136,7 +137,7 @@ export function NewEssTermsModal(props) {
         submitRemoteSessionAgreement(selectedTranslation.termsPdfId);
     };
     // Handle terms checkbox
-    const onCheckBoxChange = (value) => {
+    const onCheckBoxChange = (_event, value) => {
         setIsTermsChecked(value);
     };
     // Handle language change
@@ -155,26 +156,26 @@ export function NewEssTermsModal(props) {
     // Body of ESS RSA Modal
     const EssRSAModalBody = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement("p", { className: "pf-u-mt-xs" },
+            React.createElement("p", { className: "pf-v5-u-mt-xs" },
                 React.createElement(Trans, null,
                     "Your acceptance of this remote session agreement is required ",
                     React.createElement("strong", null, "for each case"),
                     " when you request Red Hat\u2019s support team to directly access your network or systems.")),
-            React.createElement("p", { className: "pf-u-mt-md" },
+            React.createElement("p", { className: "pf-v5-u-mt-md" },
                 React.createElement(Trans, null, "Remote access to your network or systems is not a standard Red Hat problem resolution process. Before Red Hat logs into your systems to analyze your support issue during a remote session, Red Hat needs your approval and authorization for such remote access.")),
-            React.createElement("p", { className: "pf-u-mt-md" },
+            React.createElement("p", { className: "pf-v5-u-mt-md" },
                 React.createElement(Trans, null, "Please read and accept the remote session terms below to allow Red Hat to access your network or systems.")),
             React.createElement("div", null,
-                React.createElement(Select, { className: "pf-u-mt-md", "aria-label": t('Select language'), id: "terms-language-selector", selections: selectedTranslation.localeCode, onSelect: onLangChange, isOpen: isLangSelectorDropdownOpen, menuAppendTo: document.body, placeholderText: t('Select an option that best fits'), onToggle: onDropdownToggle, width: 350 }, Object.keys(allTranslations).map((option, index) => (React.createElement(SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option))))),
-                React.createElement("a", { "aria-label": t('Download'), "data-tracking-id": "rsa-modal-terms-download", className: "pf-u-ml-md", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
+                React.createElement(Select, { className: "pf-v5-u-mt-md", "aria-label": t('Select language'), id: "terms-language-selector", selections: selectedTranslation.localeCode, onSelect: onLangChange, isOpen: isLangSelectorDropdownOpen, menuAppendTo: document.body, placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onDropdownToggle(toggle), width: 350 }, Object.keys(allTranslations).map((option, index) => (React.createElement(SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option))))),
+                React.createElement("a", { "aria-label": t('Download'), "data-tracking-id": "rsa-modal-terms-download", className: "pf-v5-u-ml-md", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
                     t('Download'),
                     " ",
-                    React.createElement(DownloadIcon, { className: "pf-u-ml-xs" }))),
+                    React.createElement(DownloadIcon, { className: "pf-v5-u-ml-xs" }))),
             React.createElement("div", null,
-                React.createElement(Checkbox, { className: "pf-u-mt-md rsa-checkbox", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
+                React.createElement(Checkbox, { className: "pf-v5-u-mt-md rsa-checkbox", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
                         React.createElement(Trans, null, "I have read and agree to the"),
                         ' ',
-                        React.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline align-link-items", rel: "noopener noreferrer", target: "_blank", href: selectedTranslation.pdfDownloadUrl, "data-tracking-id": "case-details-request-remote-session-terms" },
+                        React.createElement("a", { className: "pf-v5-c-button pf-m-link pf-m-inline align-link-items", rel: "noopener noreferrer", target: "_blank", href: selectedTranslation.pdfDownloadUrl, "data-tracking-id": "case-details-request-remote-session-terms" },
                             React.createElement(Trans, null, "terms "),
                             React.createElement(ExternalLinkAltIcon, null))), isChecked: isTermsChecked, "aria-label": t('I have read and agree to the terms'), onChange: onCheckBoxChange }))));
     };

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreement.js

@@ -20,7 +20,7 @@ export const RemoteSessionAgreement = forwardRef((props, ref) => {
     };
     // RSA Aside Section Body
     const RemoteSessionAgreementSectionBody = (React.createElement("div", { className: "card card-white card-support escalations", ref: ref },
-        React.createElement("h3", { className: "card-heading pf-u-display-flex pf-u-justify-content-space-between" },
+        React.createElement("h3", { className: "card-heading pf-v5-u-display-flex pf-v5-u-justify-content-space-between" },
             t('Remote session agreement'),
             React.createElement(Popover, { "aria-label": t('Remote Session Helper Info'), bodyContent: t('Before Red Hat logs into your systems to analyze your support issue during a remote session, Red Hat needs your approval and authorization for such remote access'), footerContent: React.createElement("a", { href: "/articles/3566571", target: "_blank", rel: "noopener noreferrer", "aria-label": t('Read more about remote sessions') }, t('Read more about remote sessions')) },
                 React.createElement(InfoCircleIcon, null))),
@@ -31,7 +31,7 @@ export const RemoteSessionAgreement = forwardRef((props, ref) => {
                 React.createElement("li", null, t(`Such access helps diagnose, debug or lead to the resolution of a software defect.`)),
                 React.createElement("li", null, t('Both you and Red Hat agree to remote access.'))),
             React.createElement("p", { className: "rrs-light-grey-text" }, t('This action does not initiate a remote session. Please make a case comment if you would like to submit a request.')),
-            acceptedRemoteSessionTerms && (React.createElement(Tooltip, { content: t('Remote session agreement has already been accepted.'), reference: tooltipRef, "aria-live": 'polite' })),
+            acceptedRemoteSessionTerms && (React.createElement(Tooltip, { content: t('Remote session agreement has already been accepted.'), triggerRef: tooltipRef, "aria-live": 'polite' })),
             React.createElement(Button, { "aria-label": acceptedRemoteSessionTerms ? t('Agreement accepted') : t('Accept agreement'), variant: acceptedRemoteSessionTerms ? 'primary' : 'secondary', onClick: toggleRemoteSessionAgreementModal, "data-tracking-id": "accept-remote-session-agreement-trigger", isAriaDisabled: acceptedRemoteSessionTerms, ref: tooltipRef }, acceptedRemoteSessionTerms ? t('Agreement accepted') : t('Accept agreement')))));
     return (React.createElement(React.Fragment, null,
         RemoteSessionAgreementSectionBody,

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteSessionAgreementModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAiBxD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAiBD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,eAuPxD"}
+{"version":3,"file":"RemoteSessionAgreementModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAiBxD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAiBD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,eAuPxD"}