@rh-support/troubleshoot 2.2.43 → 2.2.45

package/lib/esm/components/CaseInformation/Severity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Severity.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Severity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAKvE,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AAyBrE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChE,oBAAoB,EAAE,OAAO,CAAC;CACjC;AASD,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACxD;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,MAAM,eAyR9B;kBAzRQ,QAAQ;;;AA2RjB,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Severity.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Severity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAMvE,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AAyBrE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChE,oBAAoB,EAAE,OAAO,CAAC;CACjC;AASD,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACxD;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,MAAM,eA4R9B;kBA5RQ,QAAQ;;;AA8RjB,eAAe,QAAQ,CAAC"}

package/lib/esm/components/CaseInformation/Severity.js

@@ -1,4 +1,5 @@
 import { Icon, Popover, PopoverPosition, Tooltip, TooltipPosition } from '@patternfly/react-core';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/js/icons/warning-triangle-icon';
 import { Dropdown, ValueChangedIcon } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
@@ -161,7 +162,7 @@ function Severity(props) {
                 ' ',
                 React.createElement("a", { href: "/support/policy/severity", target: "_blank" },
                     React.createElement(Trans, null, "Red Hat Support Severity Level Definitions"))), closeBtnAriaLabel: "Close" },
-            React.createElement("i", { "aria-label": "Support Severity Level info", className: "fa fa-question-circle" }))),
+            React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": t(`Support Severity Level info`) }))),
         "\u00A0",
         filteredSeverities.filter((s) => s.disabled).length !== 0 && (React.createElement(Tooltip, { position: TooltipPosition.top, content: React.createElement(Trans, null, "Only the enabled severity levels are supported for selected product and version.") },
             React.createElement(Icon, { size: "sm" },

package/lib/esm/components/CaseManagement/Cep.js

@@ -156,33 +156,33 @@ export function Cep(props) {
                 React.createElement(Trans, null, "If requested, Red Hat Support will use this information to initiate direct contact (i.e. phone, chat) with listed contact(s) in order to provide faster assistance. The primary method of communication will continue to be this support ticket.")),
             React.createElement(Form, { className: "push-top-narrow" },
                 React.createElement(FormGroup, { label: t('Contact name'), isRequired: true, fieldId: "cep-contact-name" },
-                    React.createElement(FormHelperText, null,
-                        React.createElement(HelperText, null,
-                            React.createElement(HelperTextItem, null,
-                                React.createElement(Trans, null, "Provide main contact(s) troubleshooting the issue.")))),
                     React.createElement(TextInput, { type: "text", id: "cep-contact-name", isRequired: true, maxLength: 254, "aria-label": t('Contact name'), onChange: (_event, value) => onCepContactNameChange(value), validated: saveButtonIsClicked && isEmpty((_d = cepDetailsLocal.contactName) === null || _d === void 0 ? void 0 : _d.trim())
                             ? ValidatedOptions.error
-                            : ValidatedOptions.default })),
-                React.createElement(FormGroup, { label: t('Availability/Working hours'), isRequired: true, fieldId: "cep-workingHours" },
+                            : ValidatedOptions.default }),
                     React.createElement(FormHelperText, null,
                         React.createElement(HelperText, null,
                             React.createElement(HelperTextItem, null,
-                                React.createElement(Trans, null, "Indicate working hours, time zone; specify if not available on certain dates (i.e. weekends, holidays).")))),
+                                React.createElement(Trans, null, "Provide main contact(s) troubleshooting the issue."))))),
+                React.createElement(FormGroup, { label: t('Availability/Working hours'), isRequired: true, fieldId: "cep-workingHours" },
                     React.createElement(TextInput, { type: "text", id: "cep-workingHours", isRequired: true, maxLength: 254, "aria-label": t('Availability/Working hours'), onChange: (_event, value) => onCepWorkingHoursChange(value), validated: saveButtonIsClicked && isEmpty((_e = cepDetailsLocal.workingHours) === null || _e === void 0 ? void 0 : _e.trim())
                             ? ValidatedOptions.error
-                            : ValidatedOptions.default })),
-                React.createElement(FormGroup, { label: t('Contact information'), isRequired: true, fieldId: "cep-contactInformation" },
+                            : ValidatedOptions.default }),
                     React.createElement(FormHelperText, null,
                         React.createElement(HelperText, null,
                             React.createElement(HelperTextItem, null,
-                                React.createElement(Trans, null, "Please provide phone number, chat ID or email.")))),
+                                React.createElement(Trans, null, "Indicate working hours, time zone; specify if not available on certain dates (i.e. weekends, holidays)."))))),
+                React.createElement(FormGroup, { label: t('Contact information'), isRequired: true, fieldId: "cep-contactInformation" },
                     React.createElement(TextArea, { id: "cep-contactInformation", "aria-required": true, isRequired: true, maxLength: 2000, name: "cep-contactInformation", value: cepDetailsLocal.contactInformation, onChange: (_event, value) => onCepContactInformationsChange(value), "aria-label": "auto resizing text area example", autoResize: true, validated: saveButtonIsClicked && isEmpty((_f = cepDetailsLocal.contactInformation) === null || _f === void 0 ? void 0 : _f.trim())
                             ? ValidatedOptions.error
-                            : ValidatedOptions.default, resizeOrientation: "vertical" })),
+                            : ValidatedOptions.default, resizeOrientation: "vertical" }),
+                    React.createElement(FormHelperText, null,
+                        React.createElement(HelperText, null,
+                            React.createElement(HelperTextItem, null,
+                                React.createElement(Trans, null, "Please provide phone number, chat ID or email."))))),
                 React.createElement(FormGroup, { label: t('Notes'), fieldId: "cep-notes" },
+                    React.createElement(TextArea, { id: "cep-notes", "aria-required": false, isRequired: false, maxLength: 2000, name: "cep-notes", value: cepDetailsLocal.notes, onChange: (_event, value) => onCepNotesChange(value), autoResize: true, resizeOrientation: "vertical" }),
                     React.createElement(FormHelperText, null,
                         React.createElement(HelperText, null,
                             React.createElement(HelperTextItem, null,
-                                React.createElement(Trans, null, "Provide any pertinent information that Red Hat Support should be aware of that's not already captured in the issue statement or comments.")))),
-                    React.createElement(TextArea, { id: "cep-notes", "aria-required": false, isRequired: false, maxLength: 2000, name: "cep-notes", value: cepDetailsLocal.notes, onChange: (_event, value) => onCepNotesChange(value), autoResize: true, resizeOrientation: "vertical" }))))));
+                                React.createElement(Trans, null, "Provide any pertinent information that Red Hat Support should be aware of that's not already captured in the issue statement or comments.")))))))));
 }

package/lib/esm/components/CaseManagement/NoClusterIDReasonSelector.js

@@ -98,7 +98,7 @@ const NoClusterIDReasonSelector = (props) => {
             React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true },
                 ' ',
                 "*")),
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, selections: getSelectedItem(), isOpen: isOpen, placeholderText: t('Select an option or briefly describe your reason'), noValidate: props.isInValid, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper", validated: validated, className: `form-control${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged, "data-tracking-id": "no-openshift-cluster-id-reason" }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
+        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, selections: getSelectedItem(), isOpen: isOpen, placeholderText: t('Select an option or briefly describe your reason'), noValidate: props.isInValid, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper", validated: validated, className: `${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged, "data-tracking-id": "no-openshift-cluster-id-reason" }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
         React.createElement(LoadingIndicator, { show: caseNoClusterIdReasons.isFetching, size: "xs" }),
         React.createElement("p", { id: "validate-reason-helper", className: `form-instructions ${props.isInValid ? 'form-invalid' : ''}` },
             React.createElement(React.Fragment, null,

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

@@ -32,10 +32,10 @@ export const NewProductDropdownSelector = (props) => {
         const productOptions = props.products.map((p, id) => createOption(p, id, 'product'));
         const allProductsTroubleshootOptions = allProducts.data.productsResult.map((p, id) => createOption(p, id, 'product'));
         return [
-            React.createElement(SelectGroup, { label: t('Top products'), key: "topProducts", value: '' }),
+            React.createElement(SelectGroup, { label: t('Top products'), key: "topProducts", value: '', className: "product-selector-group" }),
             ...topProductOptions,
             React.createElement(Divider, { key: "all-product-divider" }),
-            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '' }),
+            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '', className: "product-selector-group" }),
             ...(props.isCaseCreate ? productOptions : allProductsTroubleshootOptions),
         ];
     };

package/lib/esm/components/Recommendations/RulesModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RulesModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/RulesModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAI5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,UAAU,MAAM;IACZ,cAAc,EAAE,wBAAwB,EAAE,CAAC;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,eA8M/C"}
+{"version":3,"file":"RulesModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/RulesModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAI5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,UAAU,MAAM;IACZ,cAAc,EAAE,wBAAwB,EAAE,CAAC;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,eA+M/C"}

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

@@ -101,6 +101,7 @@ export function InsightResultModal(props) {
                     'aria-label': t('File recommendations'),
                     'aria-labelledby': 'expandable-card-title toggle-button1',
                     'aria-expanded': isExpanded,
+                    className: 'popular-solutions-toggle-button',
                 }, className: "popular-solutions" },
                 React.createElement(CardTitle, { id: "expandable-card-title", className: "card-title" },
                     React.createElement(Trans, null, "File recommendations"))),

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,gBA0TjC"}
+{"version":3,"file":"SubmitCase.d.ts","sourceRoot":"","sources":["../../../../src/components/SubmitCase/SubmitCase.tsx"],"names":[],"mappings":"AAkCA,MAAM,CAAC,OAAO,UAAU,UAAU,gBAyTjC"}

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

@@ -93,10 +93,10 @@ export default function SubmitCase() {
                 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-v5-u-mb-lg" },
-                        React.createElement(Icon, { className: "submit-case-check-icon", size: "lg" },
+                        React.createElement(Icon, { className: "submit-case-check-icon pf-v5-u-mt-sm", size: "lg" },
                             React.createElement(CheckCircleIcon, null)),
                         ' ',
-                        React.createElement(Text, { className: "pf-v5-u-ml-md pf-v5-u-mb-0", component: TextVariants.h1 },
+                        React.createElement(Text, { className: "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-v5-u-mt-sm" },
                         React.createElement(Trans, null, "Case number:"),
@@ -135,7 +135,7 @@ 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-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")))))),
+                                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, { 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) &&

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

@@ -42,7 +42,7 @@ export default function Suggestions(props) {
             (_b = accordionRef.current) === null || _b === void 0 ? void 0 : _b.collapseAll();
         }
     };
-    return (React.createElement("div", null,
+    return (React.createElement("div", { className: "top-content-suggestion-accordion" },
         showTitleDescription && (React.createElement("div", { className: "card card-support" },
             !isTCSearchEnabled && (React.createElement(Trans, null,
                 React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" }, props.title ? props.title : t('i18nKeyPopularSolutions', 'Popular solutions and docs')))),

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;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"}
+{"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,eA8I/C"}

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

@@ -1,9 +1,9 @@
 import '@patternfly/pfe-accordion';
 import { pcm } from '@cee-eng/hydrajs';
-import { Tooltip } from '@patternfly/react-core';
+import { Accordion, AccordionContent, AccordionItem, AccordionToggle, Tooltip } from '@patternfly/react-core';
 import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
-import React from 'react';
+import React, { useState } from 'react';
 import { useCaseSelector } from '../../context/CaseContext';
 import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
 import { getDescriptionWOQues } from '../../reducers/CaseHelpers';
@@ -13,6 +13,7 @@ const { SessionResourceVisibility, SessionResourceSource } = pcm.preCase.session
 export default function TopContent(props) {
     const sessionRestoreDispatch = React.useContext(SessionRestoreDispatchContext);
     const { sessionRestore: { activeSessionId, sessionResourceTracking }, } = React.useContext(SessionRestoreStateContext);
+    const [expanded, setExpanded] = useState('');
     const { product, version, summary, issue, environment, periodicityOfIssue, timeFramesAndUrgency } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
@@ -25,24 +26,42 @@ export default function TopContent(props) {
     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),
-            }));
+    const onToggle = (id) => {
+        if (id === expanded) {
+            setExpanded('');
+        }
+        else {
+            setExpanded(id);
+            onTopContentTabClicked(props.items);
         }
     };
-    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}`, 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", 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)))))))));
+    // when user opens a top content tab, presented resouces are sent to session api
+    const onTopContentTabClicked = (docs) => {
+        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(Accordion, { isBordered: true },
+            React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { onClick: () => {
+                        onToggle(`${props.topContentIndex}`);
+                    }, isExpanded: expanded === `${props.topContentIndex}`, "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, id: `${props.topContentIndex}` },
+                    React.createElement("h3", null, props.name)),
+                React.createElement(AccordionContent, { id: `${props.topContentIndex}`, isHidden: expanded !== `${props.topContentIndex}` },
+                    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))))))))))) : (React.createElement(Accordion, { isBordered: true },
+        React.createElement(AccordionItem, null,
+            React.createElement(AccordionToggle, { onClick: () => {
+                    onToggle(`${props.topContentIndex}`);
+                }, isExpanded: expanded === `${props.topContentIndex}`, "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, id: `${props.topContentIndex}` },
+                React.createElement("h3", null, props.name)),
+            React.createElement(AccordionContent, { id: `${props.topContentIndex}`, isHidden: expanded !== `${props.topContentIndex}` },
+                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/scss/{_pf4-overrides.scss → _pf-overrides.scss}

@@ -289,6 +289,12 @@
         color: white !important;
     }
 }
+
+.popular-solutions-toggle-button {
+    padding-right: 5px;
+    margin-top: 2px;
+}
+
 .file-diag {
     border: 1px solid #ededed;
 }
@@ -534,3 +540,24 @@ span.pf-v5-c-input-group__text {
 .pf-v5-c-list {
     padding: 0;
 }
+
+.product-selector-group {
+    .pf-v5-c-select__menu-group-title {
+        font-weight: 700;
+    }
+}
+
+.pf-v5-c-accordion__expandable-content {
+    margin: 0;
+}
+.top-content-suggestion-accordion {
+    dl dt {
+        margin: 0px;
+    }
+    .pf-v5-c-accordion.pf-m-bordered {
+        margin: 0px;
+        padding: 0px;
+    }
+
+    border: 1px solid #d2d2d2;
+}

package/lib/esm/scss/index.scss

@@ -5,5 +5,5 @@
     font-size: inherit !important;
 }
 
-@import './pf4-overrides';
+@import './pf-overrides';
 @import './main';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "2.2.43",
+    "version": "2.2.45",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -66,7 +66,7 @@
         "@progress/kendo-drawing": "^1.6.0",
         "@progress/kendo-react-pdf": "^3.12.0",
         "@rh-support/components": "2.1.26",
-        "@rh-support/react-context": "2.1.28",
+        "@rh-support/react-context": "2.1.29",
         "@rh-support/types": "2.0.2",
         "@rh-support/user-permissions": "2.1.19",
         "@rh-support/utils": "2.1.12",
@@ -131,5 +131,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "0273a1330065ecbdbd6e0cddf5bbbd96d562c191"
+    "gitHead": "ed9cba460bdbf0d0104fe6e8f21a0ca554bdaee8"
 }