@rh-support/troubleshoot 2.2.39 → 2.2.42

package/lib/esm/components/ImproveCase/KtQuestions.js

@@ -84,13 +84,13 @@ function KtQuestions(props) {
                 t(KtQuestionConstant.timeFramesAndUrgency),
                 ' ',
                 isKT4Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(timeFramesAndUrgency), usePreformattedTag: true, saveOnBlur: true, content: timeFramesAndUrgency },
-            React.createElement(TextArea, { className: `form-control${invalidateQT4(timeFramesAndUrgency) ||
+            React.createElement(TextArea, { validated: invalidateQT4(timeFramesAndUrgency) ||
                     (isNextBtnClickedToShowValidationError && isEmpty(timeFramesAndUrgency)) ||
                     isKTQ4InValid
-                    ? ' form-invalid'
-                    : ''}`, "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
+                    ? 'error'
+                    : 'default', "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
                     ? 'true'
-                    : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, isDisabled: isEmpty(timeFramesAndUrgency) && hasLargeCaseDescription && !isKTQ4TextAreaActive, onChange: onKtQ4Change, onFocus: onKTQ4FocusChange, onBlur: onKTQ4FocusChange, "aria-required": isKT4Required, "data-tracking-id": "get-support-ktQ4-timeFramesAndUrgency", placeholder: t("User or financial impact, and whether there's a legal, national, or medical urgency"), isRequired: isKT4Required }),
+                    : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, isDisabled: isEmpty(timeFramesAndUrgency) && hasLargeCaseDescription && !isKTQ4TextAreaActive, onChange: (e, value) => onKtQ4Change(value, e), onFocus: onKTQ4FocusChange, onBlur: onKTQ4FocusChange, "aria-required": isKT4Required, "data-tracking-id": "get-support-ktQ4-timeFramesAndUrgency", placeholder: t("User or financial impact, and whether there's a legal, national, or medical urgency"), isRequired: isKT4Required, resizeOrientation: "vertical" }),
             React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${isKTQ4TextAreaActive && ((_a = timeFramesAndUrgency) === null || _a === void 0 ? void 0 : _a.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
                 ? `Description cannot be more than ${CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT} characters`
                 : ''}`),
@@ -100,7 +100,7 @@ function KtQuestions(props) {
                     t(KtQuestionConstant.environment),
                     ' ',
                     isKT2Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(environment), usePreformattedTag: true, saveOnBlur: true, content: environment },
-                React.createElement(TextArea, { className: `form-control`, id: "ktQ2-environment", value: environment, isDisabled: isEmpty(environment) && hasLargeCaseDescription && !isKTQ2TextAreaActive, onChange: onKtQ2Change, onFocus: onKTQ2FocusChange, onBlur: onKTQ2FocusChange, "aria-required": isKT2Required, isRequired: isKT2Required, "data-tracking-id": "get-support-ktQ2-environment", "aria-invalid": environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? 'true' : 'false' }),
+                React.createElement(TextArea, { id: "ktQ2-environment", value: environment, isDisabled: isEmpty(environment) && hasLargeCaseDescription && !isKTQ2TextAreaActive, onChange: (e, value) => onKtQ2Change(value, e), onFocus: onKTQ2FocusChange, onBlur: onKTQ2FocusChange, "aria-required": isKT2Required, isRequired: isKT2Required, "data-tracking-id": "get-support-ktQ2-environment", "aria-invalid": environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? 'true' : 'false', resizeOrientation: "vertical" }),
                 React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${isKTQ2TextAreaActive && ((_b = environment) === null || _b === void 0 ? void 0 : _b.length) > CASE_DEATILS_ENVIRONMENT_LIMIT
                     ? `Description cannot be more than ${CASE_DEATILS_ENVIRONMENT_LIMIT} characters`
                     : ''}`),
@@ -109,9 +109,9 @@ function KtQuestions(props) {
                     t(KtQuestionConstant.periodicityOfIssue),
                     ' ',
                     isKT3Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(periodicityOfIssue), usePreformattedTag: true, saveOnBlur: true, content: periodicityOfIssue },
-                React.createElement(TextArea, { className: `form-control`, id: "ktQ3-periodicityOfIssue", value: periodicityOfIssue, isDisabled: isEmpty(periodicityOfIssue) && hasLargeCaseDescription && !isKTQ3TextAreaActive, onChange: onKtQ3Change, onFocus: onKTQ3FocusChange, onBlur: onKTQ3FocusChange, "aria-required": isKT3Required, isRequired: isKT3Required, "data-tracking-id": "get-support-ktQ3-periodicityOfIssue", "aria-invalid": periodicityOfIssue && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
+                React.createElement(TextArea, { id: "ktQ3-periodicityOfIssue", value: periodicityOfIssue, isDisabled: isEmpty(periodicityOfIssue) && hasLargeCaseDescription && !isKTQ3TextAreaActive, onChange: (e, value) => onKtQ3Change(value, e), onFocus: onKTQ3FocusChange, onBlur: onKTQ3FocusChange, "aria-required": isKT3Required, isRequired: isKT3Required, "data-tracking-id": "get-support-ktQ3-periodicityOfIssue", "aria-invalid": periodicityOfIssue && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
                         ? 'true'
-                        : 'false' }),
+                        : 'false', resizeOrientation: "vertical" }),
                 React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${isKTQ3TextAreaActive && ((_c = periodicityOfIssue) === null || _c === void 0 ? void 0 : _c.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
                     ? `Description cannot be more than ${CASE_DEATILS_PERIODICITYOFISSUE_LIMIT} characters`
                     : ''}`),

package/lib/esm/components/OpenCase/SupportTypeSelectorPage.js

@@ -15,7 +15,7 @@ export default function SupportTypeSelectorPage() {
     const globalDispatch = useGlobalDispatchContext();
     const [selectedSupportType, setSelectedSupportType] = useState('');
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
-    const { caseType, isFetchingSelectedAccountDetails, selectedAccountDetails } = useCaseSelector((state) => ({
+    const { caseType, isFetchingSelectedAccountDetails } = useCaseSelector((state) => ({
         caseType: state.caseDetails.caseType,
         isFetchingSelectedAccountDetails: state.selectedAccountDetails.isFetching,
         selectedAccountDetails: state.selectedAccountDetails,
@@ -122,18 +122,15 @@ export default function SupportTypeSelectorPage() {
             React.createElement(Trans, null, "What can we help you with?"),
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
         (allCaseTypes.isFetching || (isFetchingSelectedAccountDetails && haventLoadedMetadata(allCaseTypes))) && (React.createElement(LoadingIndicator, { size: "lg", show: true })),
-        React.createElement(Gallery, { hasGutter: true, className: "pf-u-mt-sm" }, SupportTypesArray.map((supportTypesArrayValues) => {
-            var _a;
-            return (React.createElement(GalleryItem, { key: supportTypesArrayValues.id },
-                React.createElement(Card, { id: supportTypesArrayValues.oldSupportType, key: supportTypesArrayValues.oldSupportType, className: `support-types-card${isNextBtnClickedToShowValidationError && !caseType ? ' support-types-invalid' : ''}`, onKeyDown: onKeyDown, onClick: onSupportTypeClick, onSelectableInputChange: onChange, isSelected: !!caseType && supportTypesArrayValues.oldSupportType === caseType, hasSelectableInput: true, isSelectable: true, isSelectableRaised: true, isFullHeight: true, isDisabledRaised: ((_a = selectedAccountDetails === null || selectedAccountDetails === void 0 ? void 0 : selectedAccountDetails.data) === null || _a === void 0 ? void 0 : _a.subscriptionAbuse) || false, selectableInputAriaLabel: t(supportTypesArrayValues.supportTypeHeading), "data-tracking-id": supportTypesArrayValues.dataTrackingID },
-                    React.createElement(CardBody, null, supportTypesArrayValues.icon ? (React.createElement(Split, null,
-                        React.createElement(SplitItem, { className: "pf-u-pr-lg" },
-                            React.createElement(Bullseye, null, supportTypesArrayValues.icon && supportTypesArrayValues.icon)),
-                        React.createElement(SplitItem, { isFilled: true },
-                            React.createElement("header", { className: "pf-u-font-family-redhatVF-heading-sans-serif" },
-                                React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading)),
-                            React.createElement(Trans, null, supportTypesArrayValues.supportTypeDescription)))) : (React.createElement(Bullseye, null,
-                        React.createElement("header", { className: "pf-u-font-family-redhatVF-heading-sans-serif" },
-                            React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading))))))));
-        }))));
+        React.createElement(Gallery, { hasGutter: true, className: "pf-v5-u-mt-sm" }, SupportTypesArray.map((supportTypesArrayValues) => (React.createElement(GalleryItem, { key: supportTypesArrayValues.id },
+            React.createElement(Card, { id: supportTypesArrayValues.oldSupportType, key: supportTypesArrayValues.oldSupportType, className: `support-types-card${isNextBtnClickedToShowValidationError && !caseType ? ' support-types-invalid' : ''}`, isSelectable: true, isSelectableRaised: true, onKeyDown: onKeyDown, onClick: onSupportTypeClick, onSelectableInputChange: (_event, labelledById) => onChange(labelledById, _event), isSelected: !!caseType && supportTypesArrayValues.oldSupportType === caseType, hasSelectableInput: true, isFullHeight: true, selectableInputAriaLabel: t(supportTypesArrayValues.supportTypeHeading), "data-tracking-id": supportTypesArrayValues.dataTrackingID, tabIndex: 0 },
+                React.createElement(CardBody, null, supportTypesArrayValues.icon ? (React.createElement(Split, null,
+                    React.createElement(SplitItem, { className: "pf-v5-u-pr-lg" },
+                        React.createElement(Bullseye, null, supportTypesArrayValues.icon && supportTypesArrayValues.icon)),
+                    React.createElement(SplitItem, { isFilled: true },
+                        React.createElement("header", { className: "pf-v5-u-font-family-redhatVF-heading-sans-serif" },
+                            React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading)),
+                        React.createElement(Trans, null, supportTypesArrayValues.supportTypeDescription)))) : (React.createElement(Bullseye, null,
+                    React.createElement("header", { className: "pf-v5-u-font-family-redhatVF-heading-sans-serif" },
+                        React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading))))))))))));
 }

package/lib/esm/components/ProductSelector/AllProductsSelector.js

@@ -82,7 +82,7 @@ const AllProductsSelector = forwardRef((props, ref) => {
                 React.createElement(OpenCaseIssue, { inlineEditable: false, required: true })),
             React.createElement("div", { className: "all-product-selector-dropdown" },
                 React.createElement(ProductVersionDropdownSelector, { isLoading: allProducts.isFetching, products: props.checkEntitledProduct ? entitledProducts : allProducts.data.productsResult, onProductChange: onProductChange, onVersionChange: onVersionChange, ref: ref }))),
-        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
+        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
                 ? 'You are'
                 : 'Selected owner is'} not allowed to create case on this product.`), show: !allProducts.isFetching && props.checkEntitledProduct && !isEntitledProduct && !isEmpty(product) }),
         React.createElement(LoadingIndicator, { show: topContent.isFetching && props.loadTCOnChange }),

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAUpE,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,gBAuGvD,CAAC"}
+{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAWpE,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,gBAuGvD,CAAC"}

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.js

@@ -1,4 +1,5 @@
-import { Divider, Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Divider } from '@patternfly/react-core';
+import { Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -18,7 +19,7 @@ export const NewProductDropdownSelector = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.isNextBtnClickedToShowValidationError]);
     const createOption = (product, id, type) => {
-        return (React.createElement(SelectOption, { key: `${type}-${id}`, value: product.name, className: "pf-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
+        return (React.createElement(SelectOption, { key: `${type}-${id}`, value: product.name, className: "pf-v5-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
     };
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);
@@ -62,5 +63,5 @@ export const NewProductDropdownSelector = (props) => {
         setIsOpen(false);
     };
     return (React.createElement("div", null,
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search for or select a product'), onToggle: onToggle, onSelect: onSelect, isOpen: isOpen, placeholderText: t('Search for or select a product'), "aria-labelledby": t('Product-selector'), onFilter: onFilter, selections: product, validated: isEmpty(product) && showValidationLocal ? 'error' : 'default', "data-tracking-id": "get-support-product-dropdown-selector" }, getOptions())));
+        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search for or select a product'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, isOpen: isOpen, placeholderText: t('Search for or select a product'), "aria-labelledby": t('Product-selector'), onFilter: onFilter, selections: product, validated: isEmpty(product) && showValidationLocal ? 'error' : 'default', "data-tracking-id": "get-support-product-dropdown-selector" }, getOptions())));
 };

package/lib/esm/components/ProductSelector/NewProductVersionSelector.js

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getUniqueSortedVersions } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
@@ -91,5 +91,5 @@ export const NewProductVersionSelector = (props) => {
         setIsOpen(false);
     };
     const titleId = 'version-selector';
-    return (React.createElement(Select, Object.assign({ variant: SelectVariant.single, onToggle: onToggle, onSelect: onSelect, isOpen: isOpen, placeholderText: t('Select a version'), "aria-labelledby": titleId, selections: version, validated: isEmpty(version) && showValidationLocal ? 'error' : 'default', isDisabled: isEmpty(product), "data-tracking-id": "get-support-version-dropdown-selector" }, (isSEProductApiIsDown && versionsDetails.isFetching && { loadingVariant: 'spinner' })), selectVersionOptions.map((version, index) => (React.createElement(SelectOption, { key: index, value: version })))));
+    return (React.createElement(Select, Object.assign({ variant: SelectVariant.single, onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, isOpen: isOpen, placeholderText: t('Select a version'), "aria-labelledby": titleId, selections: version, validated: isEmpty(version) && showValidationLocal ? 'error' : 'default', isDisabled: isEmpty(product), "data-tracking-id": "get-support-version-dropdown-selector" }, (isSEProductApiIsDown && versionsDetails.isFetching && { loadingVariant: 'spinner' })), selectVersionOptions.map((version, index) => (React.createElement(SelectOption, { key: index, value: version })))));
 };

package/lib/esm/components/ProductSelector/ProductSelector.js

@@ -35,7 +35,7 @@ export default function ProductSelector(props) {
     const productSelectorRef = useRef(null);
     return (React.createElement(React.Fragment, null,
         allProducts.isFetching && React.createElement(ProductSelectorLoader, null),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
         !allProducts.isFetching && !allProducts.isError && (React.createElement(React.Fragment, null,
             React.createElement("form", null,
                 React.createElement(AllProductsSelector, { routeProps: props.routeProps, checkEntitledProduct: isCaseCreate ? true : false, ref: productSelectorRef }),

package/lib/esm/components/Recommendations/ClusterRecommendationItems.js

@@ -32,7 +32,7 @@ export function ClusterRecommendationItems(props) {
                 React.createElement(Label, { icon: riskLabels[rule.total_risk].icon, className: riskLabels[rule.total_risk].className },
                     React.createElement(Trans, null, riskLabels[rule.total_risk].label))),
             React.createElement("p", null, rule.details || ''),
-            React.createElement("a", { onClick: (e) => onResourceClick(e, rule), className: "pf-u-font-weight-bold", "data-tracking-id": "cluster-recommendations", href: `https://console.redhat.com/openshift/insights/advisor/clusters/${openshiftClusterID}`, target: "_blank", rel: "noopener noreferrer" },
+            React.createElement("a", { onClick: (e) => onResourceClick(e, rule), className: "pf-v5-u-font-weight-bold", "data-tracking-id": "cluster-recommendations", href: `https://console.redhat.com/openshift/insights/advisor/clusters/${openshiftClusterID}`, target: "_blank", rel: "noopener noreferrer" },
                 React.createElement(Trans, null,
                     "View details and remediation steps ",
                     React.createElement(ArrowRightIcon, { "aria-hidden": "true" })))))))));

package/lib/esm/components/Recommendations/ClusterRecommendations.js

@@ -36,7 +36,7 @@ export default function ClusterRecommendations(props) {
                 React.createElement(Trans, null, "Cluster recommendations")),
             React.createElement("div", null,
                 React.createElement(ClusterRecommendationItems, { clusterRecommendations: clusterRecommendations.data.slice(0, NUMBER_OF_RULES_TO_DISPLAY) }),
-                clusterRecommendations.data.length > NUMBER_OF_RULES_TO_DISPLAY && (React.createElement(Button, { className: "pf-u-p-md", variant: "link", isBlock: true, onClick: onViewMoreRecommendation, "data-tracking-id": "cluster-recs-view-more" },
+                clusterRecommendations.data.length > NUMBER_OF_RULES_TO_DISPLAY && (React.createElement(Button, { className: "pf-v5-u-p-md", variant: "link", isBlock: true, onClick: onViewMoreRecommendation, "data-tracking-id": "cluster-recs-view-more" },
                     React.createElement(Trans, null, "View more recommendations")))))),
         showClusterRecommendationsModal && React.createElement(ClusterRecommendationsModal, null)));
 }

package/lib/esm/components/Recommendations/EARules/EARuleInfoAccordion.js

@@ -10,7 +10,7 @@ export function EARuleInfoAccordion({ rule, showNewTag }) {
             React.createElement(AccordionToggle, { isExpanded: isExpanded, id: "ea-rule-accordion-toggle", onClick: () => {
                     setIsExpanded(!isExpanded);
                 } },
-                showNewTag && ((_a = rule === null || rule === void 0 ? void 0 : rule.isNew) !== null && _a !== void 0 ? _a : false) && (React.createElement(Label, { color: "green", className: "pf-u-mr-md" },
+                showNewTag && ((_a = rule === null || rule === void 0 ? void 0 : rule.isNew) !== null && _a !== void 0 ? _a : false) && (React.createElement(Label, { color: "green", className: "pf-v5-u-mr-md" },
                     React.createElement(Trans, null, "NEW"))),
                 React.createElement("span", null,
                     React.createElement(EARuleTitle, null))),

package/lib/esm/components/Recommendations/EARules/EARuleInfoInline.js

@@ -93,18 +93,18 @@ export function EARuleInfoInline({ eaRules = [] }) {
     return (React.createElement(React.Fragment, null,
         React.createElement(RecommendationFeedbackModal, { isModalOpen: isModalVisible, handleModalToggle: onModalToggle, modalContent: t(`Great, we're glad that resolved your issue`) }),
         React.createElement(EARule, { rule: visibleRule },
-            React.createElement("div", { className: "pf-c-alert pf-m-info pf-m-inline pf-u-mb-md", "aria-label": "Success alert" },
-                React.createElement("div", { className: "pf-c-alert__icon" },
+            React.createElement("div", { className: "pf-v5-c-alert pf-m-info pf-m-inline pf-v5-u-mb-md", "aria-label": "Success alert" },
+                React.createElement("div", { className: "pf-v5-c-alert__icon" },
                     React.createElement(InfoCircleIcon, null)),
-                React.createElement("p", { className: "pf-c-alert__title" },
+                React.createElement("p", { className: "pf-v5-c-alert__title" },
                     React.createElement("strong", null,
                         React.createElement(EARuleTitle, null))),
-                React.createElement("div", { className: "pf-c-alert__action" },
+                React.createElement("div", { className: "pf-v5-c-alert__action" },
                     React.createElement(Button, { style: { fontSize: 15 }, variant: ButtonVariant.link, "data-tracking-id": "se-recommended-asa-ignore", type: "button", onClick: onIgnoreBtnClick }, validEARulesLength > 1 ? React.createElement(Trans, null, "Skip") : React.createElement(CloseIcon, null))),
-                React.createElement("div", { className: "pf-c-alert__description" },
+                React.createElement("div", { className: "pf-v5-c-alert__description" },
                     React.createElement(EARuleDescription, null)),
-                React.createElement("div", { className: "pf-c-alert__action-group pf-u-display-flex" },
-                    React.createElement(EARuleArticle, { className: "pf-u-align-self-center pf-u-mr-sm", linkTitle: "View details" }),
+                React.createElement("div", { className: "pf-v5-c-alert__action-group pf-v5-u-display-flex" },
+                    React.createElement(EARuleArticle, { className: "pf-v5-u-align-self-center pf-v5-u-mr-sm", linkTitle: "View details" }),
                     !isSecureSupportAccount && resolvedMyIssue(),
                     validEARulesLength > 1 && (React.createElement(PaginationCompact, { maxPage: validEARulesLength, onPageChange: onPaginationChange, dataTrackingId: 'se-recommended-asa-widget' })))))));
 }

package/lib/esm/components/Recommendations/InsightsRuleInfo.js

@@ -55,19 +55,19 @@ export function InsightsRuleInfo({ doc, showNewTag, duplicateKeys }) {
         React.createElement(AccordionToggle, { isExpanded: isParentExpanded, id: doc.id + doc.attachmentId, onClick: () => {
                 setIsParentExpanded(!isParentExpanded);
             } },
-            showNewTag && ((_b = (_a = insightsReport === null || insightsReport === void 0 ? void 0 : insightsReport.current) === null || _a === void 0 ? void 0 : _a.isNew) !== null && _b !== void 0 ? _b : false) && (React.createElement(Label, { color: "green", className: "pf-u-mr-md" },
+            showNewTag && ((_b = (_a = insightsReport === null || insightsReport === void 0 ? void 0 : insightsReport.current) === null || _a === void 0 ? void 0 : _a.isNew) !== null && _b !== void 0 ? _b : false) && (React.createElement(Label, { color: "green", className: "pf-v5-u-mr-md" },
                 React.createElement(Trans, null, "NEW"))),
             React.createElement("div", null,
                 React.createElement("div", null, ruleData === null || ruleData === void 0 ? void 0 : ruleData.summary),
-                React.createElement("div", { className: "pf-u-mb-sm pf-u-text-align-left" }, ((_d = (_c = insightsReport === null || insightsReport === void 0 ? void 0 : insightsReport.current) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : false) && (React.createElement(Label, null,
+                React.createElement("div", { className: "pf-v5-u-mb-sm pf-v5-u-text-align-left" }, ((_d = (_c = insightsReport === null || insightsReport === void 0 ? void 0 : insightsReport.current) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : false) && (React.createElement(Label, null,
                     React.createElement(Trans, null, insightsReport.current.name)))),
-                React.createElement("div", { className: "pf-u-text-align-left" },
-                    React.createElement(LabelGroup, { numLabels: 5 }, ((doc === null || doc === void 0 ? void 0 : doc.tag) || []).map((tag) => (React.createElement(Label, { color: "gold", className: "pf-u-mr-sm" }, tag))))))),
+                React.createElement("div", { className: "pf-v5-u-text-align-left" },
+                    React.createElement(LabelGroup, { numLabels: 5 }, ((doc === null || doc === void 0 ? void 0 : doc.tag) || []).map((tag) => (React.createElement(Label, { color: "gold", className: "pf-v5-u-mr-sm" }, tag))))))),
         React.createElement(AccordionContent, { isHidden: !isParentExpanded },
             React.createElement(Accordion, { asDefinitionList: false, className: "push-bottom-narrow" },
                 React.createElement(AccordionItem, null,
                     React.createElement(AccordionToggle, { isExpanded: isIssueExpanded, onClick: () => setIsIssueExpanded(!isIssueExpanded), id: `${doc.id}-detected-issue` },
-                        React.createElement(BullseyeIcon, { className: "pf-u-mr-sm" }),
+                        React.createElement(BullseyeIcon, { className: "pf-v5-u-mr-sm" }),
                         React.createElement(Trans, null, "Detected issues")),
                     React.createElement(AccordionContent, { isHidden: !isIssueExpanded },
                         React.createElement("p", { dangerouslySetInnerHTML: {
@@ -76,11 +76,11 @@ export function InsightsRuleInfo({ doc, showNewTag, duplicateKeys }) {
                             } }))),
                 ((_f = ruleData === null || ruleData === void 0 ? void 0 : ruleData.more_info) !== null && _f !== void 0 ? _f : false) && (React.createElement(AccordionItem, null,
                     React.createElement(AccordionToggle, { isExpanded: isAdditionalExpanded, onClick: () => setIsAdditionalExpanded(!isAdditionalExpanded), id: `${doc.id}-additional-info` },
-                        React.createElement(InfoCircleIcon, { className: "pf-u-mr-sm" }),
+                        React.createElement(InfoCircleIcon, { className: "pf-v5-u-mr-sm" }),
                         React.createElement(Trans, null, "Additional info")),
                     React.createElement(AccordionContent, { isHidden: !isAdditionalExpanded },
                         React.createElement("p", { onClick: onAdditionalInfoElemClick, dangerouslySetInnerHTML: parseMoreInfo(ruleData === null || ruleData === void 0 ? void 0 : ruleData.more_info, (_g = insightsReport === null || insightsReport === void 0 ? void 0 : insightsReport.current) === null || _g === void 0 ? void 0 : _g.details) }))))),
             React.createElement("pfe-cta", null,
-                React.createElement("a", { className: "se-recommended ts-result-insights pf-u-font-size-sm", rel: "noopener noreferrer", target: "_blank", onClick: onCtaClick(doc.view_uri), "data-tracking-id": "get-support-recommended-insights-rule", "aria-label": "Related article", role: "button", href: getTrackingULRWithQueryParams(doc.view_uri, SessionResourceSource.INSIGHTS) },
+                React.createElement("a", { className: "se-recommended ts-result-insights pf-v5-u-font-size-sm", rel: "noopener noreferrer", target: "_blank", onClick: onCtaClick(doc.view_uri), "data-tracking-id": "get-support-recommended-insights-rule", "aria-label": "Related article", role: "button", href: getTrackingULRWithQueryParams(doc.view_uri, SessionResourceSource.INSIGHTS) },
                     React.createElement(Trans, null, "Related article"))))))));
 }

package/lib/esm/components/Recommendations/RecommendationFeedbackModal.js

@@ -4,7 +4,7 @@ import { Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
 export function RecommendationFeedbackModal({ isModalOpen, handleModalToggle, modalContent }) {
     return (React.createElement(Modal, { variant: ModalVariant.small, id: "resolved-feedback-modal", "aria-describedby": "rec-feedback-modal", "aria-label": "Feedback modal", isOpen: isModalOpen, onClose: handleModalToggle, actions: [
-            React.createElement(Link, { "data-tracking-id": "resolved-feedback-cases", key: "view", className: "pf-c-button pf-m-primary", to: "/case/list" },
+            React.createElement(Link, { "data-tracking-id": "resolved-feedback-cases", key: "view", className: "pf-v5-c-button pf-m-primary", to: "/case/list" },
                 React.createElement(Trans, null, "View your cases")),
             React.createElement(Button, { "data-tracking-id": "resolved-feedback-continue", key: "continue", variant: "link", onClick: handleModalToggle },
                 React.createElement(Trans, null, "Continue troubleshooting")),

package/lib/esm/components/Recommendations/Recommendations.js

@@ -129,7 +129,7 @@ export default function Recommendations(props) {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(LoadingDots, { show: recommendationState.isLoadingRecommendations && !isEmpty(summary) }),
-        React.createElement("div", { className: "recommendation-list pf-u-mt-lg", ref: resultRowRef },
+        React.createElement("div", { className: "recommendation-list pf-v5-u-mt-lg", ref: resultRowRef },
             React.createElement("ul", { className: "list-flat" }, map(recommendationState.visibleDocs, (doc, i) => {
                 var _a, _b;
                 return (React.createElement("li", { className: "result", key: doc.id },

package/lib/esm/components/Recommendations/RulesModal.js

@@ -95,7 +95,7 @@ export function InsightResultModal(props) {
     }, [selectedLocalFiles, props.EARule]);
     if (props.isRenderedMain) {
         setCaseState(caseDispatch, { isFileRecommendationsTriggered: true });
-        return (React.createElement(Card, { id: "expandable-card", className: "card-support top-recommendations pf-u-mt-md", isExpanded: isExpanded, isCompact: true },
+        return (React.createElement(Card, { id: "expandable-card", className: "card-support top-recommendations pf-v5-u-mt-md", isExpanded: isExpanded, isCompact: true },
             React.createElement(CardHeader, { onExpand: onExpand, toggleButtonProps: {
                     id: 'toggle-button1',
                     'aria-label': t('File recommendations'),

package/lib/esm/components/RemoteRider/RemoteRiderBanner.js

@@ -33,7 +33,7 @@ export function RemoteRiderBanner(props) {
         setIsRemoteRiderModalVisible(false);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Alert, { isInline: true, className: "pf-u-mb-md", variant: areTermsAccepted ? AlertVariant.success : AlertVariant.info, title: "Remote support", actionLinks: areTermsAccepted ? (React.createElement("a", { href: "/articles/3566571", target: "_blank", rel: "noopener noreferrer", "data-tracking-id": "remote-rider-kbase" },
+        React.createElement(Alert, { isInline: true, className: "pf-v5-u-mb-md", variant: areTermsAccepted ? AlertVariant.success : AlertVariant.info, title: "Remote support", actionLinks: areTermsAccepted ? (React.createElement("a", { href: "/articles/3566571", target: "_blank", rel: "noopener noreferrer", "data-tracking-id": "remote-rider-kbase" },
                 t('Learn how to join a remote session'),
                 " ",
                 React.createElement(ExternalLinkAltIcon, null))) : (React.createElement(React.Fragment, null,

package/lib/esm/components/Review/Review.js

@@ -57,9 +57,9 @@ export default function Review(props) {
             React.createElement(CaseType, { hideIdea: true }),
             React.createElement(SupportLevel, null),
             React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
-                React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-u-mb-xl" },
+                React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-v5-u-mb-xl" },
                     React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
-                React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-u-mb-xl" },
+                React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-v5-u-mb-xl" },
                     React.createElement(ContactPhoneNumber, null))),
             React.createElement(ContactPhoneNumberAlert, null),
             React.createElement(Fts, { inlineEditable: true, initialIsEditing: isEmpty(contactInfo24x7), hideSaveCancel: true }),

package/lib/esm/components/SessionRestore/SessionRestoreCard.js

@@ -13,15 +13,15 @@ export function SessionRestoreCard(props) {
     };
     if (hidden || isEmpty(props.previousSessions))
         return React.createElement(React.Fragment, null);
-    return (React.createElement("div", { className: "pf-c-alert pf-m-inline", role: "alert" },
-        React.createElement("div", { className: "pf-c-alert__icon" },
+    return (React.createElement("div", { className: "pf-v5-c-alert pf-m-inline", role: "alert" },
+        React.createElement("div", { className: "pf-v5-c-alert__icon" },
             React.createElement(BellIcon, { "aria-hidden": "true" })),
-        React.createElement("h3", { className: "pf-c-alert__title" },
+        React.createElement("h3", { className: "pf-v5-c-alert__title" },
             React.createElement(Trans, null, "Restore a previous session")),
-        React.createElement("div", { className: "pf-c-alert__description" },
+        React.createElement("div", { className: "pf-v5-c-alert__description" },
             React.createElement("ul", { className: "restore-session-list" }, map(props.previousSessions, (sessionItem) => (React.createElement("li", { key: sessionItem.session.id },
                 React.createElement(SessionItem, { onRestore: props.onRestore, sessionItem: sessionItem })))))),
-        React.createElement("div", { className: "pf-c-alert__action" },
-            React.createElement("button", { className: "pf-c-button pf-m-plain", type: "button", "aria-label": "Close", onClick: onCardDismiss, "data-tracking-id": "session-restore-card-dismiss" },
+        React.createElement("div", { className: "pf-v5-c-alert__action" },
+            React.createElement("button", { className: "pf-v5-c-button pf-m-plain", type: "button", "aria-label": "Close", onClick: onCardDismiss, "data-tracking-id": "session-restore-card-dismiss" },
                 React.createElement(TimesIcon, { "aria-hidden": "true" })))));
 }

package/lib/esm/components/SubmitCase/SubmitCase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitCase.d.ts","sourceRoot":"","sources":["../../../../src/components/SubmitCase/SubmitCase.tsx"],"names":[],"mappings":"AAkCA,MAAM,CAAC,OAAO,UAAU,UAAU,gBAsTjC"}
+{"version":3,"file":"SubmitCase.d.ts","sourceRoot":"","sources":["../../../../src/components/SubmitCase/SubmitCase.tsx"],"names":[],"mappings":"AAkCA,MAAM,CAAC,OAAO,UAAU,UAAU,gBA0TjC"}

package/lib/esm/components/SubmitCase/SubmitCase.js

@@ -1,5 +1,5 @@
 import { Env, publicApi } from '@cee-eng/hydrajs';
-import { ActionList, ActionListItem, Button, Text, TextVariants, Tooltip } from '@patternfly/react-core';
+import { ActionList, ActionListItem, Button, Icon, Text, TextVariants, Tooltip } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { AlertMessage, AlertType, useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext, useGlobalStateContext } from '@rh-support/react-context';
@@ -84,27 +84,29 @@ export default function SubmitCase() {
     // To check if the user is ESS Customer and Product has ESS Support
     const isESSCustomer = isSpecialSupportOfferingEnabled((_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult, product);
     return (React.createElement("article", { className: "gird-main" },
-        React.createElement(AlertMessage, { className: "pf-u-mt-lg", title: t('Failed to add user.'), variant: AlertType.DANGER, show: addNotifiedUserError }),
-        React.createElement(AlertMessage, { className: "pf-u-mt-lg", variant: AlertType.DANGER, show: caseCreationError, title: t("Sorry, we're experiencing an error"), isInline: true },
+        React.createElement(AlertMessage, { className: "pf-v5-u-mt-lg", title: t('Failed to add user.'), variant: AlertType.DANGER, show: addNotifiedUserError }),
+        React.createElement(AlertMessage, { className: "pf-v5-u-mt-lg", variant: AlertType.DANGER, show: caseCreationError, title: t("Sorry, we're experiencing an error"), isInline: true },
             React.createElement(React.Fragment, null, caseCreationErrorMessage)),
         !isCreatingCase && !caseCreationError && (React.createElement(React.Fragment, null,
             !isESSCustomer && !screenSessionRequested && showRemoteRiderBanner && (React.createElement(RemoteRiderBanner, { onConfirm: onRemoteRiderConfirm, onClose: onRemoteRiderClose, caseNumber: caseNoOfCreatedCase, isSecureSupport: loggedInUsersAccount.data.secureSupport, loggedInUserRights: loggedInUserRights })),
             React.createElement("div", { className: "submit-case-header-container" },
-                React.createElement("p", { className: "kicker kicker-sm pf-u-mb-sm" }, !isEmpty(RouteUtils.seBasePath) &&
+                React.createElement("p", { className: "kicker kicker-sm pf-v5-u-mb-sm" }, !isEmpty(RouteUtils.seBasePath) &&
                     !isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles) ? (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "submit-page-title pf-u-mb-lg" },
-                        React.createElement(CheckCircleIcon, { className: "submit-case-check-icon", size: "lg" }),
+                    React.createElement("div", { className: "submit-page-title pf-v5-u-mb-lg" },
+                        React.createElement(Icon, { className: "submit-case-check-icon", size: "lg" },
+                            React.createElement(CheckCircleIcon, null)),
                         ' ',
-                        React.createElement(Text, { className: "pf-u-ml-md pf-u-mb-0", component: TextVariants.h1 },
+                        React.createElement(Text, { className: "pf-v5-u-ml-md pf-v5-u-mb-0", component: TextVariants.h1 },
                             React.createElement(Trans, null, "We've added your case to our queue"))),
-                    React.createElement("div", { className: "pf-u-mt-sm" },
+                    React.createElement("div", { className: "pf-v5-u-mt-sm" },
                         React.createElement(Trans, null, "Case number:"),
                         "\u00A0",
                         React.createElement(Link, { to: `/case/${caseNoOfCreatedCase}`, "data-tracking-id": "get-support-queued-case-number", className: isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles)
                                 ? 'case-link-disabled'
                                 : '' }, caseNoOfCreatedCase)))) : (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "submit-page-title" },
-                        React.createElement(CheckCircleIcon, { className: "submit-case-check-icon", size: "lg" }),
+                        React.createElement(Icon, { size: "lg", className: "submit-case-check-icon" },
+                            React.createElement(CheckCircleIcon, null)),
                         ' ',
                         React.createElement(Text, { component: TextVariants.h1 },
                             React.createElement(Trans, null, "We\u2019ve added your case to our queue"))),
@@ -119,10 +121,10 @@ export default function SubmitCase() {
                         getResponseTimeMessage(entitlementSla, severity),
                     React.createElement("a", { className: "inline-link", rel: "noopener noreferrer", href: "/support/offerings/production/sla", target: "_blank", "data-tracking-id": "get-support-sla" },
                         React.createElement(Trans, null, "Service Level Agreement (SLA)."))),
-                React.createElement("div", { className: "submit-page-contact-info pf-u-mt-lg pf-u-mb-sm" },
-                    React.createElement("p", { className: "contact-info-title pf-u-mb-sm" },
+                React.createElement("div", { className: "submit-page-contact-info pf-v5-u-mt-lg pf-v5-u-mb-sm" },
+                    React.createElement("p", { className: "contact-info-title pf-v5-u-mb-sm" },
                         React.createElement(Trans, null, "Is this contact information correct?")),
-                    React.createElement("p", { className: "pf-u-font-size-sm" },
+                    React.createElement("p", { className: "pf-v5-u-font-size-sm" },
                         React.createElement("strong", null,
                             React.createElement(Trans, null, "Email:")),
                         ' ',
@@ -133,16 +135,16 @@ export default function SubmitCase() {
                             React.createElement(Button, { component: "a", href: `${getRedhatDotComHost(Env.getEnvName())}/wapps/ugc/protected/${'personalInfo.html'}`, target: "_blank", variant: "secondary", "data-tracking-id": "get-support-update-info", className: "update-info-button" }, "Update info")),
                         React.createElement(ActionListItem, null, isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles) ? (React.createElement(React.Fragment, null,
                             React.createElement(Tooltip, { content: t('File upload in progress.'), position: "bottom" },
-                                React.createElement(Button, { className: "pf-u-ml-md", component: "a", href: getCaseURL(), variant: "primary", "data-tracking-id": "get-support-view-case", "aria-label": t('View case'), isAriaDisabled: isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles) }, "View case")))) : (React.createElement(Button, { className: "pf-u-ml-md", component: (props) => (React.createElement(Link, Object.assign({}, props, { to: `/case/${caseNoOfCreatedCase}` }))), variant: "primary", "data-tracking-id": "get-support-view-case", "aria-label": t('View case') }, "View case")))))),
+                                React.createElement(Button, { className: "pf-v5-u-ml-md", component: "a", href: getCaseURL(), variant: "primary", "data-tracking-id": "get-support-view-case", "aria-label": t('View case'), isAriaDisabled: isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles) }, "View case")))) : (React.createElement(Button, { className: "pf-v5-u-ml-md", component: (props) => (React.createElement(Link, Object.assign({}, props, { to: `/case/${caseNoOfCreatedCase}` }))), variant: "primary", "data-tracking-id": "get-support-view-case", "aria-label": t('View case') }, "View case")))))),
             !isEmpty(attachmentState.caseFiles.selectedLocalFiles) && (React.createElement(FileUploader, { idToUploadTo: caseNoOfCreatedCase, isSessionId: false, isSecureSupport: loggedInUsersAccount.data.secureSupport })),
             React.createElement("div", null,
                 (!isEmpty(topContent.data) || !rulesState.EARules.rules || !clusterRecommendations) &&
-                    !isIdea && (React.createElement(Text, { className: "pf-u-mt-2xl pf-u-font-weight-light", component: TextVariants.h2 },
+                    !isIdea && (React.createElement(Text, { className: "pf-v5-u-mt-2xl pf-v5-u-font-weight-light", component: TextVariants.h2 },
                     React.createElement(Trans, null, "Troubleshoot this case"))),
                 isNotAnIdea && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: isIdea ? 'pf-u-mt-lg' : '' },
+                    React.createElement("div", { className: isIdea ? 'pf-v5-u-mt-lg' : '' },
                         React.createElement(InsightsResults, { isDisplayOnMain: true })),
                     React.createElement(ClusterRecommendations, { showClusterRecommendationsModal: false }))),
-                React.createElement("div", { className: "pf-u-mt-lg" }, isIdea ? (React.createElement(AsideResults, null)) : (!isEmpty(topContent.data) &&
+                React.createElement("div", { className: "pf-v5-u-mt-lg" }, isIdea ? (React.createElement(AsideResults, null)) : (!isEmpty(topContent.data) &&
                     isNotAnIdea && (React.createElement(Suggestions, { title: isIdea ? t('Search recommendations') : t('Product recommendations'), showTitleDescription: true, showMax: 6 })))))))));
 }

package/lib/esm/components/Suggestions/TopContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/TopContent.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAGnC,OAAO,EAAE,WAAW,EAAE,MAAM,2DAA2D,CAAC;AAQxF,UAAU,MAAM;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,eA6C/C"}
+{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/TopContent.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAGnC,OAAO,EAAE,WAAW,EAAE,MAAM,2DAA2D,CAAC;AAaxF,UAAU,MAAM;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,eAwF/C"}

package/lib/esm/components/Suggestions/TopContent.js

@@ -1,21 +1,48 @@
 import '@patternfly/pfe-accordion';
 import { pcm } from '@cee-eng/hydrajs';
 import { Tooltip } from '@patternfly/react-core';
+import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
 import React from 'react';
+import { useCaseSelector } from '../../context/CaseContext';
+import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { getDescriptionWOQues } from '../../reducers/CaseHelpers';
+import { createOrUpdateSessionResources, getSessResTC } from '../../reducers/SessionRestoreReducer';
 import RouteUtils from '../../utils/routeUtils';
-const { SessionResourceSource } = pcm.preCase.session;
+const { SessionResourceVisibility, SessionResourceSource } = pcm.preCase.session;
 export default function TopContent(props) {
+    const sessionRestoreDispatch = React.useContext(SessionRestoreDispatchContext);
+    const { sessionRestore: { activeSessionId, sessionResourceTracking }, } = React.useContext(SessionRestoreStateContext);
+    const { product, version, summary, issue, environment, periodicityOfIssue, timeFramesAndUrgency } = useCaseSelector((state) => ({
+        product: state.caseDetails.product,
+        version: state.caseDetails.version,
+        summary: state.caseDetails.summary,
+        issue: state.caseDetails.issue,
+        environment: state.caseDetails.environment,
+        periodicityOfIssue: state.caseDetails.periodicityOfIssue,
+        timeFramesAndUrgency: state.caseDetails.timeFramesAndUrgency,
+    }), isEqual);
     const onLinkClick = (item) => (event) => {
         props.onResourceClick && props.onResourceClick(item);
     };
+    // when user opens a top content tab, presented resouces are sent to session api
+    const onTopContentTabClicked = (e, docs) => {
+        if (e.target.hasAttribute('expanded')) {
+            createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.TOP_CONTENT, docs.map((doc, index) => getSessResTC(doc, SessionResourceVisibility.PRESENTED, doc.id, index)), JSON.stringify({
+                product,
+                version,
+                summary,
+                description: getDescriptionWOQues(issue, environment, periodicityOfIssue, timeFramesAndUrgency),
+            }));
+        }
+    };
     return (React.createElement(React.Fragment, null,
         props.helperText ? (React.createElement(Tooltip, { content: React.createElement("div", null, props.helperText) },
-            React.createElement("pfe-accordion-header", { "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}` },
-                React.createElement("h3", null, props.name)))) : (React.createElement("pfe-accordion-header", { "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}` },
+            React.createElement("pfe-accordion-header", { "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, onClick: (e) => onTopContentTabClicked(e, props.items) },
+                React.createElement("h3", null, props.name)))) : (React.createElement("pfe-accordion-header", { "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, onClick: (e) => onTopContentTabClicked(e, props.items) },
             React.createElement("h3", null, props.name))),
         React.createElement("pfe-accordion-panel", null,
-            React.createElement("ul", { className: "list-flushleft" }, map(props.items, (item, i) => (React.createElement("li", { key: i + item.contentTitle },
+            React.createElement("ul", { className: "list-flushleft", style: { listStyleType: 'disc' } }, map(props.items, (item, i) => (React.createElement("li", { key: i + item.contentTitle },
                 React.createElement("p", null,
                     React.createElement("a", { className: "se-recommended ts-top-problems", "data-tracking-id": "se-recommended-top-content", onClick: onLinkClick(item), href: `${item.contentUrl}?${RouteUtils.getSEResourceQueryParams(props.seSessionId, props.seResourceOriginID, SessionResourceSource.TOP_CONTENT)}`, target: "_blank", rel: "noopener noreferrer" }, item.contentTitle)))))))));
 }

package/lib/esm/components/TroubleshootSection/TroubleshootSection.js

@@ -47,24 +47,24 @@ function TroubleshootSection(props) {
                         " ",
                         React.createElement("b", null, product))),
                 React.createElement(LoadingDots, { show: topContent.isFetching }),
-                topContent.data.length === 0 && (React.createElement(Card, { id: "card", className: "card-support top-recommendations pf-u-mb-md", isCompact: true },
+                topContent.data.length === 0 && (React.createElement(Card, { id: "card", className: "card-support top-recommendations pf-v5-u-mb-md", isCompact: true },
                     React.createElement(CardHeader, { "aria-label": t('Popular solutions and docs'), className: "popular-solutions" },
                         React.createElement(CardTitle, { id: "card-title", className: "card-title" },
                             React.createElement(Trans, { i18nKey: 'i18nKeyPopularSolutions' }, "Popular solutions and docs"))),
-                    React.createElement(CardBody, { "aria-label": t('No recommendations for this product'), className: "file-recs-no-recommendation pf-u-mt-md" },
+                    React.createElement(CardBody, { "aria-label": t('No recommendations for this product'), className: "file-recs-no-recommendation pf-v5-u-mt-md" },
                         React.createElement(Trans, null, "No recommendations for this product")))),
                 React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } }, canShowTopContent && !isEmpty(version) && React.createElement(Suggestions, null)),
-                !isCreatingCase && React.createElement(ClusterRecommendations, { className: "pf-u-mt-lg" }))),
-        React.createElement("section", { className: "pf-u-mt-lg" },
+                !isCreatingCase && React.createElement(ClusterRecommendations, { className: "pf-v5-u-mt-lg" }))),
+        React.createElement("section", { className: "pf-v5-u-mt-lg" },
             isNotAnIdea && (React.createElement(InsightsResults, { isDisplayOnMain: true, "data-tracking-id": "troubleshoot-section-file-recs" })),
-            React.createElement("div", { className: "pf-u-mt-lg" }, canAddAttachments ? (React.createElement(FileDiag, null)) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "pf-v5-u-mt-lg" }, canAddAttachments ? (React.createElement(FileDiag, null)) : (React.createElement(React.Fragment, null,
                 React.createElement(Card, { id: "card", className: "card-support card-white file-diag", isCompact: true },
                     React.createElement(CardHeader, { "aria-label": !isNotAnIdea || loggedInUsersAccount.data.secureSupport
                             ? t('File uploader')
                             : t('Upload file to analyze'), className: "card-heading" },
                         React.createElement(CardTitle, { id: "card-title", className: "card-title" }, !isNotAnIdea || loggedInUsersAccount.data.secureSupport ? (React.createElement(Trans, null, "File uploader")) : (React.createElement(Trans, null, "Upload file to analyze")))),
                     React.createElement(CardBody, { "aria-label": t('No recommendations for this product'), className: "no-access-file-diag" },
-                        React.createElement("div", { className: "display-dashed pf-u-font-weight-bold pf-u-text-align-center pf-u-mt-md" },
+                        React.createElement("div", { className: "display-dashed pf-v5-u-font-weight-bold pf-v5-u-text-align-center pf-v5-u-mt-md" },
                             React.createElement(Trans, null, "You do not have access to upload files"),
                             ".")))))))));
 }

package/lib/esm/components/UpdateSeverityModal/UpdateSeverityModal.js

@@ -286,7 +286,7 @@ export default function UpdateSeverityModal(props) {
     const modalBody = () => {
         return (React.createElement(React.Fragment, null,
             React.createElement("form", { "aria-label": t('form') },
-                React.createElement("div", { className: "form-group pf-u-mt-xs" },
+                React.createElement("div", { className: "form-group pf-v5-u-mt-xs" },
                     React.createElement("div", null,
                         React.createElement(Dropdown, { name: "get-support-severity-modal", placeholder: t(`Select a severity`), title: t(`Select a severity`), list: allCaseSeverities.data
                                 ? toOptions(filteredSeverities, {
@@ -304,11 +304,11 @@ export default function UpdateSeverityModal(props) {
                                 ownersEntitlements.isFetching ||
                                 versionsDetails.isFetching, isLoadingList: isFetching || versionsDetails.isFetching, isInValid: allCaseSeverities.isError || isSeverityInValid, required: true, onChange: onSeverityChange, onOuterClick: setIsSeverityInValidLocal, "data-tracking-id": "get-support-severity-modal" })),
                     React.createElement("div", null,
-                        React.createElement("label", { htmlFor: "date-input", className: "pf-u-mt-md" },
+                        React.createElement("label", { htmlFor: "date-input", className: "pf-v5-u-mt-md" },
                             React.createElement(Trans, null, "Describe update"),
                             React.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*")),
-                        React.createElement(TextArea, { placeholder: "Please identify any changes in the case's business impact", isDisabled: (caseOverviewState.caseSeverityUpdating && isCaseUpdating) || isPostingComment, value: descriptionValue, onChange: handleTextAreaChange, resizeOrientation: "vertical", "aria-label": "summary", isRequired: true }),
-                        React.createElement("div", { className: "pf-u-mt-xs" },
+                        React.createElement(TextArea, { placeholder: "Please identify any changes in the case's business impact", isDisabled: (caseOverviewState.caseSeverityUpdating && isCaseUpdating) || isPostingComment, value: descriptionValue, onChange: (_event, value) => handleTextAreaChange(value), resizeOrientation: "vertical", "aria-label": "summary", isRequired: true }),
+                        React.createElement("div", { className: "pf-v5-u-mt-xs" },
                             React.createElement(Trans, null, "Your comment will be visible under discussions")))))));
     };
     // Main modal and its headings