@rh-support/troubleshoot 2.6.14 → 2.6.15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,11 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { publicApi } from '@cee-eng/hydrajs';
 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';
 import ListIcon from '@patternfly/react-icons/dist/js/icons/list-icon';
 import LockIcon from '@patternfly/react-icons/dist/js/icons/lock-icon';
+import OpenDrawerRightIcon from '@patternfly/react-icons/dist/js/icons/open-drawer-right-icon';
 import TrendUpIcon from '@patternfly/react-icons/dist/js/icons/trend-up-icon';
 import { ErrorBoundary, ToastNotification, useBreakpoint, useFetch, useForceUpdate } from '@rh-support/components';
 import { GlobalMetadataDispatchContext, toggleViewAsCustomerFlag, useGlobalStateContext, useUserPreferences, } from '@rh-support/react-context';
@@ -196,38 +195,33 @@ export function CaseDetailsAside(props) {
             React.createElement("div", { className: "case-detail-collapse-panel" },
                 React.createElement("p", { className: "case-detail-collapse-label" },
                     React.createElement(Trans, null, "Collapse")),
-                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(OpenDrawerRightIcon, { className: "pf-v6-u-ml-auto" })))) : (React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-column sidebar-section-collapsed" },
             React.createElement(Tooltip, { content: t('Expand sidebar'), position: "left" },
-                React.createElement("div", { className: "case-detail-collapse-panel" },
-                    React.createElement(Icon, { size: "md" },
-                        React.createElement(AngleDoubleLeftIcon, null)))),
+                React.createElement("div", { className: "case-detail-collapse-panel pf-v6-u-mb-xs" },
+                    React.createElement(OpenDrawerRightIcon, { className: "mirrored" }))),
             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", "aria-label": viewAsCustomer ? t('External view') : t('Internal view') },
-                    React.createElement(Icon, { size: "md", className: viewAsCustomer ? 'blueLock' : 'greyLock' },
-                        React.createElement(LockIcon, null))))),
+                React.createElement(Button, { icon: React.createElement(Icon, { size: "md", className: viewAsCustomer ? 'blueLock' : 'greyLock' },
+                        React.createElement(LockIcon, null)), variant: "link", onClick: () => setSectionToScollRef(toggleCustomerViewRef), className: "sidebar-section-toggle-btn", "aria-label": viewAsCustomer ? t('External view') : t('Internal view') }))),
             !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", "aria-label": t('Top recommendations') },
-                    React.createElement(Icon, { size: "md" },
-                        React.createElement(ListIcon, null))))),
+                React.createElement(Button, { icon: React.createElement(Icon, { size: "md" },
+                        React.createElement(ListIcon, null)), variant: "link", onClick: () => setSectionToScollRef(topSolutionsRef), className: "sidebar-section-toggle-btn", "aria-label": t('Top recommendations') }))),
             !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), "aria-label": t('Request an escalation') },
-                    React.createElement(Icon, { size: "md" },
-                        React.createElement(TrendUpIcon, null)))))))),
+                React.createElement(Button, { icon: React.createElement(Icon, { size: "md" },
+                        React.createElement(TrendUpIcon, null)), variant: "link", className: "sidebar-section-toggle-btn", onClick: () => setSectionToScollRef(createEscalationRef), "aria-label": t('Request an escalation') })))))),
         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-v5-u-display-flex customer-view-toggle", ref: toggleCustomerViewRef },
+                    canSeeToggleCustomerView && (React.createElement("div", { className: "pf-v6-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-v5-u-ml-sm" }))),
+                                React.createElement(InfoCircleIcon, { "aria-label": "Preferred-case-view-info-icon", className: "pf-v6-u-ml-sm pf-v6-u-text-color-status-custom cursor-pointer" }))),
                         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-v5-u-ml-auto", isChecked: preferredOrDefaultCaseView(), onChange: onCaseSwitchChange }))),
+                                : 'enable view as customer', id: "customer-view-switch", className: "pf-v6-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-v5-u-mb-lg", show: true, 
+    return (React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v6-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.d.ts.map

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

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

@@ -1,4 +1,4 @@
-import { Label, Popover, Tab, TabContent, Tabs, TabsComponent, TabTitleText, Text, TextContent, TextVariants, } from '@patternfly/react-core';
+import { Content, ContentVariants, Label, Popover, Tab, TabContent, Tabs, TabsComponent, TabTitleText, } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { ErrorBoundary, LoadingIndicator } from '@rh-support/components';
@@ -135,6 +135,7 @@ export function CaseDetailsTabs(props) {
             component: React.createElement(CaseSummary, { caseNumber: caseNumber }),
         });
     const getActiveTabKey = () => {
+        console.warn(activeTab, activeTabKey);
         if (!activeTab)
             return activeTabKey;
         const tabIndex = tabsToRender.findIndex((item) => item.routePath === activeTab);
@@ -150,8 +151,7 @@ export function CaseDetailsTabs(props) {
                     ? 'tab-title-with-badge'
                     : undefined },
                 React.createElement(Trans, null, tab.title),
-                tab.title === CaseDetailsTabsEnum.GENERATE_AI_CASE_SUMMARY && (React.createElement("div", { className: "gradient-border-badge" },
-                    React.createElement(Label, { className: "preview-label" }, "Preview"))),
+                tab.title === CaseDetailsTabsEnum.GENERATE_AI_CASE_SUMMARY && (React.createElement(Label, { isCompact: true, variant: "outline", className: "preview-label" }, "Preview")),
                 tab.title === CaseDetailsTabsEnum.HISTORY && (React.createElement(Popover, { "aria-label": "Track support case evolution with case history", triggerAction: "hover", bodyContent: React.createElement(React.Fragment, null,
                         React.createElement("p", null, "Track support case evolution with case history"),
                         React.createElement("a", { href: "https://access.redhat.com/articles/7120652", target: "_blank", rel: "noreferrer" },
@@ -160,14 +160,14 @@ export function CaseDetailsTabs(props) {
                             React.createElement("span", { style: { marginLeft: '0.25rem' } },
                                 React.createElement(ExternalLinkAltIcon, null)))) },
                     React.createElement(InfoCircleIcon, { color: "gray" })))) })))),
-        React.createElement("div", { className: "case-details-tabs-content pf-v5-u-pt-xl" }, tabsToRender.map((tab, index) => {
+        React.createElement("div", { className: "case-details-tabs-content pf-v6-u-pt-xl" }, tabsToRender.map((tab, index) => {
             return index === getActiveTabKey() && !isExportingPDF ? (React.createElement(TabContent, { eventKey: index, key: tab.key, id: `pf-tab-${index}-${tab.title.split(' ')[0]}-tabpanel`, 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-v5-u-mt-md" },
-                            React.createElement(Text, { component: TextVariants.h2 },
+                        React.createElement(Content, { className: "show-in-pdf pf-v6-u-mt-md" },
+                            React.createElement(Content, { component: ContentVariants.h2 },
                                 React.createElement(Trans, null, tab.title))),
                         tab.component)))) : isExportingPDF && isTabVisibleInPdfExport(tab) ? (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: "page-break" }),
@@ -176,8 +176,8 @@ export function CaseDetailsTabs(props) {
                             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-v5-u-mt-md" },
-                                React.createElement(Text, { component: TextVariants.h2 },
+                            React.createElement(Content, { className: "show-in-pdf pf-v6-u-mt-md" },
+                                React.createElement(Content, { component: ContentVariants.h2 },
                                     React.createElement(Trans, null, 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-v5-u-ml-xs icon-size", "aria-label": "Support Level Info" })))))));
+                React.createElement(QuestionCircleIcon, { className: "pf-v6-u-ml-xs icon-size", "aria-label": "Support Level Info" })))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/DateTime.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC/C,cAAc,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,WAAkB,EAClB,iBAA4C,EAC5C,cAAsC,EACtC,cAAmB,EACnB,MAAgB,GACnB,EAAE,MAAM,qBAqBR"}
+{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/DateTime.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC/C,cAAc,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,WAAkB,EAClB,iBAA4C,EAC5C,cAAsC,EACtC,cAAmB,EACnB,MAAgB,GACnB,EAAE,MAAM,qBAyBR"}

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-v5-u-ml-sm ${isExportingPDF ? 'hide-in-pdf' : ''}` })))));
+            React.createElement(InfoIcon, { className: `pf-v6-u-ml-sm pf-v6-u-text-color-status-custom cursor-pointer ${isExportingPDF ? 'hide-in-pdf' : ''}` })))));
 }

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

@@ -226,15 +226,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-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" },
+                    firstCaseInactivityWarningSentAt && !secondCaseInactivityWarningSentAt && (React.createElement(Alert, { className: "pf-v6-u-mb-md", isInline: true, title: React.createElement(React.Fragment, null,
+                            React.createElement("h3", { className: "pf-v6-u-mb-sm pf-v6-c-alert__title" },
                                 React.createElement(Trans, null, "Case inactivity notification")),
-                            React.createElement("p", { className: "pf-v5-u-mb-sm" },
+                            React.createElement("p", { className: "pf-v6-u-mb-sm" },
                                 React.createElement(Trans, null, "The customer has received one warning regarding inactivity."))) })),
-                    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" },
+                    firstCaseInactivityWarningSentAt && secondCaseInactivityWarningSentAt && (React.createElement(Alert, { className: "pf-v6-u-mb-md", isInline: true, variant: AlertVariant.warning, title: React.createElement(React.Fragment, null,
+                            React.createElement("h3", { className: "pf-v6-u-mb-sm pf-v6-c-alert__title" },
                                 React.createElement(Trans, null, "Case inactivity warning")),
-                            React.createElement("p", { className: "pf-v5-u-mb-sm" },
+                            React.createElement("p", { className: "pf-v6-u-mb-sm" },
                                 React.createElement(Trans, null, "The customer has received two warnings regarding inactivity. This case will be closed soon if we don't receive any input."))) })))),
                 React.createElement(CaseContactPhoneNumberAlert, { isReview: true, tabRef: props.tabsRef }),
                 React.createElement("header", null,
@@ -244,7 +244,7 @@ export default function CaseOverview(props) {
                         props.caseNumber),
                     React.createElement("div", null,
                         exportPDFButton(props.caseNumber),
-                        React.createElement(Button, Object.assign({ className: `pf-v5-u-ml-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, isDisabled: !canManageCase }, ((showCloseCaseModal || showReOpenCaseModal) &&
+                        React.createElement(Button, Object.assign({ className: `pf-v6-u-ml-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, isDisabled: !canManageCase }, ((showCloseCaseModal || showReOpenCaseModal) &&
                             isCaseUpdating && {
                             isLoading: true,
                         }), { onClick: () => (isCaseInOpenState ? onCaseClose() : onCaseReopen()), variant: isCaseInOpenState ? ButtonVariant.secondary : ButtonVariant.tertiary, "data-tracking-id": isCaseInOpenState
@@ -288,7 +288,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-v5-l-grid pf-m-gutter pf-m-all-4-col-on-lg" },
+                React.createElement("div", { className: "pf-v6-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/CaseSolutions/CaseSolutions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSolutions.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutions.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAwE3E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAUD,eAAO,MAAM,aAAa,+EAohBxB,CAAC"}
+{"version":3,"file":"CaseSolutions.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutions.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAwE3E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAUD,eAAO,MAAM,aAAa,+EA8gBxB,CAAC"}

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

@@ -19,7 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { search } from '@cee-eng/hydrajs';
-import { Accordion, AccordionContent, AccordionItem, AccordionToggle, Button, Modal, ModalVariant, } from '@patternfly/react-core';
+import { Accordion, AccordionContent, AccordionItem, AccordionToggle, Button, Card, CardBody, CardHeader, Modal, ModalFooter, ModalVariant, } from '@patternfly/react-core';
 import { PaginatedList, ToastNotification } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -282,44 +282,45 @@ export const CaseSolutions = forwardRef((props, ref) => {
     // redhatter logged in: we show pins but perform link/unlink
     const renderPinnedByCustomerRedhatterView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked), onLinkClick: (name) => addDtmEvent(name) }));
     // redhatter logged in: we show links and perform link/unlink
-    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement("div", { className: "pf-v5-u-ml-lg" },
+    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement("div", { className: "pf-v6-u-ml-lg" },
         React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? t('Unlink') : t('Link'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked), onLinkClick: (name) => addDtmEvent(name) })));
     const linkedRecommendations = recommendations.filter((r) => r.isLinked);
     const pinnedRecommendations = recommendations.filter((r) => r.isPinned);
-    const closeCaseModal = (React.createElement(Modal, { variant: ModalVariant.small, title: t('Did this solve your case?'), isOpen: isCloseCaseModalOpen && caseStatus !== CaseStatusEnum.CLOSED, onClose: () => setIsCloseCaseModalOpen(false), actions: [
+    const closeCaseModal = (React.createElement(Modal, { variant: ModalVariant.small, title: t('Did this solve your case?'), isOpen: isCloseCaseModalOpen && caseStatus !== CaseStatusEnum.CLOSED, onClose: () => setIsCloseCaseModalOpen(false) },
+        React.createElement(Trans, null, "We're glad to hear this article was helpful. Would you like to close this case or keep it open? You can still view the case after it closes."),
+        React.createElement(ModalFooter, null,
             React.createElement(Button, { variant: "primary", isDisabled: isCaseCloseLoading, onClick: () => setIsCloseCaseModalOpen(false), key: "keep-case-open-btn" },
                 React.createElement(Trans, null, "Keep it open")),
             React.createElement(Button, { variant: "secondary", isDisabled: isCaseCloseLoading, isLoading: isCaseCloseLoading, key: "close-case-btn", onClick: handleCaseClose },
-                React.createElement(Trans, null, "Close case")),
-        ] },
-        React.createElement(Trans, null, "We're glad to hear this article was helpful. Would you like to close this case or keep it open? You can still view the case after it closes.")));
+                React.createElement(Trans, null, "Close case")))));
     return (React.createElement(React.Fragment, null,
         closeCaseModal,
-        React.createElement(Accordion, { isBordered: true, asDefinitionList: false, className: "card card-white case-details-aside-solutions" },
-            linkedRecommendations.length !== 0 && (React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-handpicked", isExpanded: handPickedOpen, onClick: () => setHandPickedOpen((pre) => !pre) },
+        React.createElement(Accordion, { className: "card card-white case-details-aside-solutions" },
+            linkedRecommendations.length !== 0 && (React.createElement(AccordionItem, { isExpanded: handPickedOpen },
+                React.createElement(AccordionToggle, { id: "sol-handpicked", onClick: () => setHandPickedOpen((pre) => !pre) },
                     React.createElement("span", null, canLinkUnlink ? (React.createElement(Trans, null, "Handpicked by you")) : (React.createElement(Trans, null, "Handpicked for this case"))),
-                    React.createElement("span", { className: "badge-item pf-v5-u-font-size-sm pf-v5-u-mx-sm" }, linkedRecommendations.length)),
-                React.createElement(AccordionContent, { isHidden: !handPickedOpen }, !hasLink ? (!canLinkUnlink ? (React.createElement(Trans, null, "If a Red Hat engineer finds an article or solution that can help with your case, they'll pin it here.")) : (React.createElement(React.Fragment, null))) : (React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: linkedRecommendations.map((rec, index) => canLinkUnlink
+                    React.createElement("span", { className: "badge-item pf-v6-u-font-size-sm pf-v6-u-mx-sm" }, linkedRecommendations.length)),
+                React.createElement(AccordionContent, null, !hasLink ? (!canLinkUnlink ? (React.createElement(Trans, null, "If a Red Hat engineer finds an article or solution that can help with your case, they'll pin it here.")) : (React.createElement(React.Fragment, null))) : (React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: linkedRecommendations.map((rec, index) => canLinkUnlink
                         ? renderHandPickedByRedHatter(rec, index, 'handpicked-recommendations')
                         : renderHandpickedCustomerView(rec, index, 'handpicked-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
                         { title: '5', value: 5 },
                         { title: '10', value: 10 },
                     ] }))))),
-            pinnedRecommendations.length !== 0 && (React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-pinned", isExpanded: pinnedOpen, onClick: () => setPinnedOpen((pre) => !pre) },
+            pinnedRecommendations.length !== 0 && (React.createElement(AccordionItem, { isExpanded: pinnedOpen },
+                React.createElement(AccordionToggle, { id: "sol-pinned", onClick: () => setPinnedOpen((pre) => !pre) },
                     React.createElement("span", null, canLinkUnlink ? (React.createElement(Trans, null, "Pinned by customer")) : (React.createElement(Trans, null, "My pinned recommendations"))),
-                    React.createElement("span", { className: "badge-item pf-v5-u-font-size-sm pf-v5-u-mx-sm" }, pinnedRecommendations.length)),
-                React.createElement(AccordionContent, { isHidden: !pinnedOpen }, !hasPin ? (!canLinkUnlink ? (React.createElement(Trans, null, "When you save a recommended article or solution, you'll see it here. Saved items display only in this case and are not saved for later.")) : (React.createElement(React.Fragment, null))) : (React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: pinnedRecommendations.map((rec, index) => canLinkUnlink
+                    React.createElement("span", { className: "badge-item pf-v6-u-font-size-sm pf-v6-u-mx-sm" }, pinnedRecommendations.length)),
+                React.createElement(AccordionContent, null, !hasPin ? (!canLinkUnlink ? (React.createElement(Trans, null, "When you save a recommended article or solution, you'll see it here. Saved items display only in this case and are not saved for later.")) : (React.createElement(React.Fragment, null))) : (React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: pinnedRecommendations.map((rec, index) => canLinkUnlink
                         ? renderPinnedByCustomerRedhatterView(rec, index, 'pinned-recommendations')
                         : renderPinsByCustomer(rec, index, 'pinned-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
                         { title: '5', value: 5 },
                         { title: '10', value: 10 },
                     ] })))))),
-        topRecommendations.length > 0 && (React.createElement("div", { className: "card card-white card-support recommendations", ref: ref },
-            React.createElement("h3", { className: "card-heading case-detail-panel-card-heading card-header-bg" },
-                React.createElement(Trans, null, "Knowledgebase recommendations")),
-            React.createElement("div", { className: "card-body" },
+        topRecommendations.length > 0 && (React.createElement(Card, { className: "card-support recommendations", ref: ref },
+            React.createElement(CardHeader, null,
+                React.createElement("h3", { className: "card-heading case-detail-panel-card-heading" },
+                    React.createElement(Trans, null, "Knowledgebase recommendations"))),
+            React.createElement(CardBody, null,
                 React.createElement(PaginatedList, { id: "case-details-top-recommendations", className: "list-icons list-icons-flush", listItems: topRecommendations
                         .filter((r) => !pinnedRecommendations.some((pr) => pr.resourceId === r.resourceId))
                         .map((rec, index) => renderTopRecommendations(rec, index, 'top-recommendations')), perPage: 5, isFetching: !!isLoadingRecommendations, perPageOptions: [

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAQ5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AACrF,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;CACnD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBAwD9C"}
+{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAQ5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AACrF,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;CACnD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBA2D9C"}