@rh-support/troubleshoot 2.2.51 → 2.4.10-beta.7

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 } from '@patternfly/react-core';
 import { PaginatedList, ToastNotification } from '@rh-support/components';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import { getSolrParams } from '@rh-support/utils';
@@ -28,17 +28,12 @@ import isEqual from 'lodash/isEqual';
 import some from 'lodash/some';
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { CaseStatusEnum } from '../../../constants/caseDetailsConstants';
 import { useCaseDispatch, useCaseSelector } from '../../../context/CaseContext';
-import { CaseOverviewDispatchContext } from '../../../context/CaseOverviewContext';
 import { useRecommendationDispatchContext, useRecommendationStateContext, } from '../../../context/RecommendationContext';
 import { useCaseUpdateErrorMessage } from '../../../hooks/useCaseUpdateErrorMessage';
-import { setStatusUpdating } from '../../../reducers/CaseOverviewReducer';
 import { updateCaseDetails } from '../../../reducers/CaseReducer';
 import { fetchRecommendations } from '../../../reducers/RecommendationsReducer';
-import { usePostComment } from '../../shared/usePostComment';
 import { CaseSolutionsItem } from './CaseSolutionsItem';
-import { HandpickedItem } from './HandpicketItem';
 // some of the pinned and hadpicked titles are set to 'Red Hat Knowledge Base'
 // this workaround is added till backend fix
 const titleFix = (recommendations, allDocs) => __awaiter(void 0, void 0, void 0, function* () {
@@ -86,57 +81,26 @@ const titleFix = (recommendations, allDocs) => __awaiter(void 0, void 0, void 0,
 // A recommendation can be both link and pin. We use pinnedBy and linkedBy fileds to identify them
 export const CaseSolutions = forwardRef((props, ref) => {
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { product, version, summary, description, recomendationsObj, isFetchingCaseDetails, caseStatus } = useCaseSelector((state) => ({
+    const { product, version, summary, description, recomendationsObj, isFetchingCaseDetails } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
         summary: state.caseDetails.summary,
         description: state.caseDetails.description,
         recomendationsObj: state.caseDetails.caseResourceLinks,
         isFetchingCaseDetails: state.isFetchingCaseDetails,
-        caseStatus: state.caseDetails.status,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const caseOverviewDispatch = useContext(CaseOverviewDispatchContext);
     const { recommendationState: { isLoadingRecommendations, allDocs }, } = useRecommendationStateContext();
     const recommendationsDispatch = useRecommendationDispatchContext();
-    const { postComment } = usePostComment({ caseNumber: props.caseNumber });
     const { caseNumber, isSecureSupportAccount } = props;
     const [isPinLoading, setIsPinLoading] = useState({});
-    const [isCaseCloseLoading, setIsCaseCloseLoading] = useState(false);
-    const [handPickedOpen, setHandPickedOpen] = useState(true);
-    const [pinnedOpen, setPinnedOpen] = useState(true);
+    const [expanded, setExpanded] = useState('sol-handpicked');
     const [recommendations, setRecommendations] = useState([]);
     const [topRecommendations, setTopRecommendations] = useState([]);
-    const [isCloseCaseModalOpen, setIsCloseCaseModalOpen] = useState(false);
     const ability = useContext(AbilityContext);
     const { t } = useTranslation();
     const hasPin = some(recommendations, (p) => p.isPinned);
     const hasLink = some(recommendations, (p) => p.isLinked);
-    const getCommentBody = () => {
-        return `**Reason for closing case:** \nOther. Found a pinned article that perfectly resolved the issue. Closing this case now.`;
-    };
-    const handleCaseClose = () => __awaiter(void 0, void 0, void 0, function* () {
-        setStatusUpdating(caseOverviewDispatch, true);
-        try {
-            setIsCaseCloseLoading(true);
-            yield updateCaseDetails(caseDispatch, props.caseNumber, { status: CaseStatusEnum.CLOSED });
-            yield postComment({
-                commentBody: getCommentBody(),
-                contentType: 'markdown',
-                updateDiscussionState: true,
-                doNotChangeStatus: true,
-            });
-            ToastNotification.addSuccessMessage(t('Status has been successfully updated'));
-            setIsCloseCaseModalOpen(false);
-        }
-        catch (err) {
-            caseUpdateError.showError(err, t('Status failed to update'));
-        }
-        finally {
-            setIsCaseCloseLoading(false);
-            setStatusUpdating(caseOverviewDispatch, false);
-        }
-    });
     const updateRecommendation = (recommendationToUpdate, linked) => __awaiter(void 0, void 0, void 0, function* () {
         const recommendation = {
             resourceId: recommendationToUpdate.resourceId,
@@ -246,57 +210,49 @@ export const CaseSolutions = forwardRef((props, ref) => {
         }
     }, [allDocs, isFetchingCaseDetails, isLoadingRecommendations, recomendationsObj]);
     const renderTopRecommendations = (recommendation, index, type) => (React.createElement(React.Fragment, null,
-        canPinUnpin && (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) })),
-        canLinkUnlink && (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) }))));
+        canPinUnpin && (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) })),
+        canLinkUnlink && (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? 'Unlink' : 'Link', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }))));
     // customer logged in: we show pins and perform pin/unpin
-    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, isPinned: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
+    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
     // customer logged in: we show links but perform pin/unpin
-    const renderHandpickedCustomerView = (recommendation, index, type) => (React.createElement(HandpickedItem, { type: type, caseNumber: props.caseNumber, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onRecommendationLike: () => setIsCloseCaseModalOpen(true) }));
+    const renderHandpickedCustomerView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
     // 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) }));
+    const renderPinnedByCustomerRedhatterView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
     // redhatter logged in: we show links and perform link/unlink
-    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement("div", { className: "pf-v5-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) })));
-    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: [
-            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.")));
+    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? 'Unlink' : 'Link', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
+    const setExpandedSection = (id) => {
+        expanded === id ? setExpanded('') : setExpanded(id);
+    };
     return (React.createElement(React.Fragment, null,
-        closeCaseModal,
-        React.createElement(Accordion, { isBordered: true, asDefinitionList: false, className: "card card-white case-details-aside-solutions" },
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-handpicked", isExpanded: handPickedOpen, 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
-                        ? 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 },
-                    ] })))),
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-pinned", isExpanded: pinnedOpen, 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
-                        ? 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" },
-                React.createElement(Trans, null, "Knowledgebase recommendations")),
+                React.createElement(Trans, null, "Top recommendations")),
             React.createElement("div", { className: "card-body" },
-                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: [
+                React.createElement(PaginatedList, { id: "case-details-top-recommendations", className: "list-icons list-icons-flush", listItems: topRecommendations.map((rec, index) => renderTopRecommendations(rec, index, 'top-recommendations')), perPage: 5, isFetching: !!isLoadingRecommendations, perPageOptions: [
                         { title: '5', value: 5 },
                         { title: '10', value: 10 },
-                    ] }))))));
+                    ] })))),
+        (hasPin || hasLink) && (React.createElement(Accordion, { asDefinitionList: false, className: "card card-white case-details-aside-solutions" },
+            hasLink && (React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { id: "sol-handpicked", isExpanded: expanded === 'sol-handpicked', onClick: () => setExpandedSection('sol-handpicked') }, canLinkUnlink ? React.createElement(Trans, null, "Handpicked by you") : React.createElement(Trans, null, "Handpicked for you")),
+                React.createElement(AccordionContent, { isHidden: expanded !== 'sol-handpicked' },
+                    React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: recommendations
+                            .filter((r) => r.isLinked)
+                            .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 },
+                        ] })))),
+            hasPin && (React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { id: "sol-pinned", isExpanded: expanded === 'sol-pinned', onClick: () => setExpandedSection('sol-pinned') }, canLinkUnlink ? React.createElement(Trans, null, "Pinned by customer") : React.createElement(Trans, null, "Your pins")),
+                React.createElement(AccordionContent, { isHidden: expanded !== 'sol-pinned' },
+                    React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: recommendations
+                            .filter((r) => r.isPinned)
+                            .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 },
+                        ] }))))))));
 });

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

@@ -1,8 +1,6 @@
 import { ICaseResourceLink } from '@cee-eng/hydrajs/@types/api/public/case';
-import { CaseRecommendationEvalEnum } from '../../../constants/caseDetailsConstants';
 interface IProps {
     showPin?: boolean;
-    isPinned?: boolean;
     showLink?: boolean;
     pinTitle: string;
     index: number;
@@ -11,11 +9,10 @@ interface IProps {
     onPinClicked: () => void;
     type: string;
 }
-export interface ICaseDetailAsideRecommendation extends Partial<ICaseResourceLink> {
+interface ICaseDetailAsideRecommendation extends Partial<ICaseResourceLink> {
     isPinned?: boolean;
     isLinked?: boolean;
     solutionAbstract?: string;
-    customerEvaluation?: CaseRecommendationEvalEnum;
 }
 export declare function CaseSolutionsItem(props: IProps): JSX.Element;
 export {};

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;AAU5E,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;CAChB;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,eAsD9C"}
+{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAS5E,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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;CAChB;AAED,UAAU,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,eA4C9C"}

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

@@ -1,7 +1,6 @@
-import { Button, Icon } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
-import OutlinedStarIcon from '@patternfly/react-icons/dist/js/icons/outlined-star-icon';
-import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
+import ThumbTackIcon from '@patternfly/react-icons/dist/js/icons/thumb-tack-icon';
 import { LoadingIndicator } from '@rh-support/components';
 import { cleanupMarkDown, decodeMarkTag, truncate } from '@rh-support/utils';
 import DOMPurify from 'dompurify';
@@ -10,12 +9,11 @@ export function CaseSolutionsItem(props) {
     const maxTitleLength = 150;
     const maxAbstractLength = 150;
     const isLoading = !!props.isPinLoading[props.recommendation.resourceId];
-    return (React.createElement("div", null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "recommendation-header" },
             React.createElement(Button, { title: props.pinTitle, onClick: props.onPinClicked, "data-tracking-id": `case-resource-${props.pinTitle}`, variant: "plain", className: "list-icon" },
                 isLoading && React.createElement(LoadingIndicator, { show: isLoading, size: "xs" }),
-                !isLoading && props.showPin && (React.createElement(React.Fragment, null,
-                    React.createElement(Icon, { size: "md" }, props.isPinned ? (React.createElement(StarIcon, { className: "pinned-resource", color: "0066cc" })) : (React.createElement(OutlinedStarIcon, { className: "pinned-resource", color: "0066cc" }))))),
+                !isLoading && props.showPin && React.createElement(ThumbTackIcon, { className: "pinned-resource" }),
                 !isLoading && props.showLink && React.createElement(LinkIcon, null)),
             React.createElement("a", { href: props.recommendation.resourceViewURI, "data-tracking-id": `case-resource-${props.type}-link-${props.index}`, target: "_blank", rel: "noopener noreferrer", dangerouslySetInnerHTML: {
                     __html: DOMPurify.sanitize(truncate(decodeMarkTag(props.recommendation.title || ''), maxTitleLength)),

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-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" },
+    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" },
             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":"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"}
+{"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"}

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, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, TextArea, } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+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 { formatDateTime } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useState } from 'react';
@@ -76,21 +76,15 @@ 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" },
-                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" },
+            (!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" },
                 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: (_event, text) => onDescriptionChange(text), isDisabled: props.isUpdating, resizeOrientation: "vertical" }),
-                React.createElement(FormHelperText, null,
-                    React.createElement(HelperText, null,
-                        React.createElement(HelperTextItem, null, t(`Your comment will be visible${props.isInternal ? ' to the customers' : ''} under discussions after reopening.`)))))))));
+                        : '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 }))))));
 }

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-v5-u-display-flex pf-v5-u-justify-content-space-between" },
+        React.createElement("h3", { className: "card-heading pf-u-display-flex pf-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.'), triggerRef: tooltipRef, "aria-live": 'polite' })),
+            screenSessionRequested && (React.createElement(Tooltip, { content: t('Remote session request has already been submitted.'), reference: 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,eAsKlD"}
+{"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"}

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, Icon, Modal, ModalVariant, Title, TitleSizes } from '@patternfly/react-core';
+import { Button, ButtonVariant, 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,19 +91,18 @@ export function ESSRemoteSessionModal(props) {
     // Body of ESS Modal
     const ESSRemoteSessionModalBody = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement("p", { className: "pf-v5-u-mt-xs" },
+            React.createElement("p", { className: "pf-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-v5-u-mt-xs" },
+            React.createElement("p", { className: "pf-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-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" })),
+        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" }),
             t('Remote session has been requested')))) : (React.createElement(React.Fragment, null,
-        React.createElement(Title, { className: "pf-v5-u-mb-xs", id: "modal-custom-header-label", headingLevel: "h1", size: TitleSizes['2xl'] }, t('Request a remote session?'))));
+        React.createElement(Title, { className: "pf-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":"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"}
+{"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"}

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

@@ -8,8 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, Modal } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { Button, ButtonVariant, Checkbox, Modal, Select, SelectOption } from '@patternfly/react-core';
 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';
@@ -137,7 +136,7 @@ export function NewEssTermsModal(props) {
         submitRemoteSessionAgreement(selectedTranslation.termsPdfId);
     };
     // Handle terms checkbox
-    const onCheckBoxChange = (_event, value) => {
+    const onCheckBoxChange = (value) => {
         setIsTermsChecked(value);
     };
     // Handle language change
@@ -156,26 +155,26 @@ export function NewEssTermsModal(props) {
     // Body of ESS RSA Modal
     const EssRSAModalBody = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement("p", { className: "pf-v5-u-mt-xs" },
+            React.createElement("p", { className: "pf-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-v5-u-mt-md" },
+            React.createElement("p", { className: "pf-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-v5-u-mt-md" },
+            React.createElement("p", { className: "pf-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-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" },
+                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" },
                     t('Download'),
                     " ",
-                    React.createElement(DownloadIcon, { className: "pf-v5-u-ml-xs" }))),
+                    React.createElement(DownloadIcon, { className: "pf-u-ml-xs" }))),
             React.createElement("div", null,
-                React.createElement(Checkbox, { className: "pf-v5-u-mt-md rsa-checkbox", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
+                React.createElement(Checkbox, { className: "pf-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-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("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(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-v5-u-display-flex pf-v5-u-justify-content-space-between" },
+        React.createElement("h3", { className: "card-heading pf-u-display-flex pf-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.'), triggerRef: tooltipRef, "aria-live": 'polite' })),
+            acceptedRemoteSessionTerms && (React.createElement(Tooltip, { content: t('Remote session agreement has already been accepted.'), reference: 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":"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"}
+{"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"}

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

@@ -8,8 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, Modal } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { Button, ButtonVariant, Checkbox, Modal, Select, SelectOption } from '@patternfly/react-core';
 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';
@@ -147,28 +146,28 @@ export function RemoteSessionAgreementModal(props) {
     // Body of RSA Modal
     const RemoteSessionAgreementModalBody = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement("p", { className: "pf-v5-u-mt-xs" },
+            React.createElement("p", { className: "pf-u-mt-xs" },
                 React.createElement(Trans, null,
                     "Your acceptance of this Remote Access Rider 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-v5-u-mt-md" },
+            React.createElement("p", { className: "pf-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-v5-u-mt-md" },
+            React.createElement("p", { className: "pf-u-mt-md" },
                 React.createElement(Trans, null, "Please read and accept the Remote Access Rider terms below to allow Red Hat to access your network or systems.")),
             React.createElement("div", null,
-                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" },
+                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" },
                     t('Download'),
                     " ",
-                    React.createElement(DownloadIcon, { className: "pf-v5-u-ml-xs" }))),
+                    React.createElement(DownloadIcon, { className: "pf-u-ml-xs" }))),
             React.createElement("div", null,
-                React.createElement(Checkbox, { className: "pf-v5-u-mt-md rsa-checkbox", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
+                React.createElement(Checkbox, { className: "pf-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-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("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(Trans, null, "terms "),
-                            React.createElement(ExternalLinkAltIcon, null))), isChecked: isTermsChecked, "aria-label": t('I have read and agree to the terms'), onChange: (_event, value) => onCheckBoxChange(value) }))));
+                            React.createElement(ExternalLinkAltIcon, null))), isChecked: isTermsChecked, "aria-label": t('I have read and agree to the terms'), onChange: onCheckBoxChange }))));
     };
     return (React.createElement(Modal, { id: "remote-session-agreement-modal", "aria-label": t('Remote Session Agreement'), title: t('Remote Session Agreement'), isOpen: props.show, onClose: onCancel, actions: modalActions }, RemoteSessionAgreementModalBody()));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseActionPlan/CaseActionPlan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseActionPlan.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseActionPlan/CaseActionPlan.tsx"],"names":[],"mappings":"AAqBA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,cAAc,CAAC,KAAK,EAAE,MAAM,eAwIpC;kBAxIQ,cAAc;;;AA2IvB,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CaseActionPlan.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseActionPlan/CaseActionPlan.tsx"],"names":[],"mappings":"AAqBA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,cAAc,CAAC,KAAK,EAAE,MAAM,eAyIpC;kBAzIQ,cAAc;;;AA4IvB,eAAe,cAAc,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseActionPlan/CaseActionPlan.js

@@ -82,13 +82,13 @@ function CaseActionPlan(props) {
         return { __html: htmlString };
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(AlertMessage, { show: isInternalWithoutSFDCUser, variant: AlertType.WARNING, isInline: true, className: "pf-v5-u-mb-lg", title: t('You need a Salesforce (SFDC) user to edit the action plan.') }),
+        React.createElement(AlertMessage, { show: isInternalWithoutSFDCUser, variant: AlertType.WARNING, isInline: true, className: "pf-u-mb-lg", title: t('You need a Salesforce (SFDC) user to edit the action plan.') }),
         React.createElement("label", { htmlFor: "rha-action-plan", className: "sr-only" },
             React.createElement(Trans, null, "Action plan")),
         !canUpdateActionPlan && (React.createElement("pre", { "aria-label": t('Case Action Plan'), dangerouslySetInnerHTML: commentMarkdown(actionPlan), style: { fontFamily: isExportingPDF ? 'DejaVu Sans' : '' } })),
         canUpdateActionPlan && (React.createElement("form", null,
             React.createElement("div", { className: isExportingPDF ? 'hide-in-pdf' : '' },
-                React.createElement(TextAreaResizable, { id: "rha-action-plan", disabled: isUpdating || isInternalWithoutSFDCUser, maxLength: 32768, name: "actionPlan", value: actionPlanState, onChange: onChange, rowsMin: 3 })),
+                React.createElement(TextAreaResizable, { className: "form-control", id: "rha-action-plan", disabled: isUpdating || isInternalWithoutSFDCUser, maxLength: 32768, name: "actionPlan", value: actionPlanState, onChange: onChange, rowsMin: 3 })),
             !isInternalWithoutSFDCUser && (React.createElement("div", { className: `${isExportingPDF ? 'hide-in-pdf' : ''} push-top-narrow` },
                 React.createElement("button", { className: "btn btn-app btn-primary", onClick: updateCase, disabled: isActionPlanEmpty || isUpdating || !formIsDirty },
                     React.createElement(Trans, null, "Submit"),
@@ -96,7 +96,7 @@ function CaseActionPlan(props) {
                     React.createElement(LoadingIndicator, { show: isUpdating, isInline: true })),
                 React.createElement("button", { className: "btn btn-app btn-link", onClick: discardActionPlan, disabled: isUpdating || !formIsDirty },
                     React.createElement(Trans, null, "Cancel")))),
-            React.createElement("p", { className: "pf-v5-u-mt-xl" },
+            React.createElement("p", { className: "pf-u-mt-xl" },
                 React.createElement(Trans, null,
                     "Updates to the action plan are ",
                     React.createElement("strong", null, "customer-facing"),

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { contacts } from '@cee-eng/hydrajs';
-import { InputGroupText, ValidatedOptions } from '@patternfly/react-core';
+import { InputGroupText, InputGroupTextVariant, ValidatedOptions } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { getPhoneObj, PhoneInput, ToastNotification } from '@rh-support/components';
@@ -146,13 +146,13 @@ export function CaseContactPhoneNumber() {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement("div", { className: "form-group pf-v5-u-pb-md", style: { minWidth: '200px' } },
+    return (React.createElement("div", { className: "form-group pf-u-pb-md", style: { minWidth: '200px' } },
         React.createElement("h3", { className: `subheading subheading-sm ${isExportingPDF ? 'expand-input' : ''}` },
             React.createElement(Trans, null, "Case owner's phone number"),
             !isExportingPDF ? ContactPhoneNumberPopOver() : ''),
-        React.createElement(InputGroupText, null,
+        React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
             React.createElement(PhoneInput, { phoneValue: localFullPhoneState, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, isDisabled: isCasePhoneUpdating || isCaseOwnerUpdating, isLoading: isCasePhoneUpdating, "data-tracking-id": "case-details-page-supplied-phone", invalid: invalid, setInvalid: setInvalid }),
-            React.createElement("button", { className: "btn btn-app btn-link pf-v5-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), disabled: (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT ||
+            React.createElement("button", { className: "btn btn-app btn-link pf-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), disabled: (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT ||
                     localFullPhoneState === phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber ||
                     (isSaveClicked && isPhoneValueCannotBeSaved), style: { display: isExportingPDF ? 'none' : '' } },
                 React.createElement(CheckIcon, null)),