@rh-support/troubleshoot 2.6.14 → 2.6.16

package/lib/esm/components/Cve/CveModal.js

@@ -1,4 +1,4 @@
-import { Badge, Button, Flex, FlexItem, Modal, ModalVariant } from '@patternfly/react-core';
+import { Badge, Button, Flex, FlexItem, Modal, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { getAccessHostname } from '@rh-support/utils';
 import isEqual from 'lodash/isEqual';
@@ -32,14 +32,13 @@ export const CveModal = () => {
         const cveTitles = join(map(cveWorkflowRecommendation, 'title'), ',');
         return `https://${getAccessHostname()}/labs/cvechecker/?source=pcm&session=${activeSessionId}&id=${cveTitles}`;
     };
-    return (React.createElement(Modal, { variant: ModalVariant.medium, title: React.createElement(Flex, { alignItems: { default: 'alignItemsCenter' } },
-            React.createElement(FlexItem, { spacer: { default: 'spacerSm' } }, cveWorkflowRecommendation.length > 1 ? (React.createElement(Trans, null, "Handpicked for these CVEs")) : (React.createElement(Trans, null, "Handpicked for this CVE"))),
-            React.createElement(Badge, { isRead: true }, size(cveWorkflowRecommendation))), isOpen: isCveModalOpened &&
-            activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT), onClose: handleModalToggle, titleIconVariant: "info", disableFocusTrap: true, className: "cve-modal-fade-in-effect", onEscapePress: handleEscapePress, actions: [
-            React.createElement(Button, { key: "cve-checker-link", "data-tracking-id": "cve-checker-link", target: "_blank", variant: "secondary", isInline: true, component: "a", href: generateCveCheckerUrl() },
-                React.createElement(Trans, null, "Red Hat CVE Checker"),
-                " ",
-                React.createElement(ExternalLinkAltIcon, { className: "pf-v5-u-ml-sm" })),
-        ] },
-        React.createElement(CvePanel, null)));
+    return (React.createElement(Modal, { variant: ModalVariant.medium, isOpen: isCveModalOpened &&
+            activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT), onClose: handleModalToggle, disableFocusTrap: true, className: "cve-modal-fade-in-effect", onEscapePress: handleEscapePress },
+        React.createElement(ModalHeader, { title: React.createElement(Flex, { alignItems: { default: 'alignItemsCenter' } },
+                React.createElement(FlexItem, { spacer: { default: 'spacerSm' } }, cveWorkflowRecommendation.length > 1 ? (React.createElement(Trans, null, "Handpicked for these CVEs")) : (React.createElement(Trans, null, "Handpicked for this CVE"))),
+                React.createElement(Badge, { isRead: true }, size(cveWorkflowRecommendation))) }),
+        React.createElement(CvePanel, null),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { icon: React.createElement(ExternalLinkAltIcon, { className: "pf-v6-u-ml-sm" }), key: "cve-checker-link", "data-tracking-id": "cve-checker-link", target: "_blank", variant: "secondary", isInline: true, component: "a", href: generateCveCheckerUrl() },
+                React.createElement(Trans, null, "Red Hat CVE Checker")))));
 };

package/lib/esm/components/Cve/CvePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CvePanel.d.ts","sourceRoot":"","sources":["../../../../src/components/Cve/CvePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,MAAM,sBAyCrC,CAAC"}
+{"version":3,"file":"CvePanel.d.ts","sourceRoot":"","sources":["../../../../src/components/Cve/CvePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,MAAM,sBAwCrC,CAAC"}

package/lib/esm/components/Cve/CvePanel.js

@@ -14,9 +14,9 @@ export const CvePanel = (props) => {
     const handleToggle = (id) => setExpanded(id === expanded ? '' : id);
     const renderAccordionItem = (cve, index) => {
         const isExpanded = expanded === (cve === null || cve === void 0 ? void 0 : cve.title);
-        return (React.createElement(AccordionItem, { key: `cve-item-${index}` },
-            React.createElement(AccordionToggle, { onClick: () => handleToggle(cve.title), isExpanded: isExpanded, id: `cve-toggle-${index}`, "data-tracking-id": "cve-accordion-toggle" }, cve.title),
-            React.createElement(AccordionContent, { id: `cve-content-${index}`, isHidden: !isExpanded },
+        return (React.createElement(AccordionItem, { isExpanded: isExpanded, key: `cve-item-${index}` },
+            React.createElement(AccordionToggle, { onClick: () => handleToggle(cve.title), id: `cve-toggle-${index}`, "data-tracking-id": "cve-accordion-toggle" }, cve.title),
+            React.createElement(AccordionContent, { id: `cve-content-${index}` },
                 React.createElement(CveItem, { cve: cve, isExpanded: isExpanded, index: index }))));
     };
     return (React.createElement(Accordion, { isBordered: true, displaySize: 'default', asDefinitionList: false, className: `${props.className ? props.className : ''}` }, map(slice(cveWorkflowRecommendation, 0, 4), renderAccordionItem)));

package/lib/esm/components/Cve/CveSidebar.js

@@ -14,9 +14,9 @@ export const CveSidebar = () => {
         return null;
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "card card-white card-support file-diag pf-v5-u-mb-md" },
+        React.createElement("div", { className: "card card-white card-support file-diag pf-v6-u-mb-md" },
             React.createElement("h3", { className: "card-heading popular-solutions green-card-heading card-header-bg" },
-                React.createElement("span", { className: "pf-v5-u-mr-sm" }, cveWorkflowRecommendation.length > 1 ? (React.createElement(Trans, null, "Handpicked for these CVEs")) : (React.createElement(Trans, null, "Handpicked for this CVE"))),
+                React.createElement("span", { className: "pf-v6-u-mr-sm" }, cveWorkflowRecommendation.length > 1 ? (React.createElement(Trans, null, "Handpicked for these CVEs")) : (React.createElement(Trans, null, "Handpicked for this CVE"))),
                 React.createElement(Badge, { isRead: true }, size(cveWorkflowRecommendation))),
             React.createElement("div", { className: "card-body" },
                 React.createElement(CvePanel, null)))));

package/lib/esm/components/IdeaInformation/IdeaInformation.js

@@ -72,14 +72,14 @@ export default function IdeaInformation() {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(LoadingIndicator, { show: isMetadataLoading(), size: "lg" }),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mb-md", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError(), isInline: true }),
-        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-v5-u-mb-md", isInline: true },
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v6-u-mb-md", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError(), isInline: true }),
+        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-v6-u-mb-md", isInline: true },
             React.createElement(Trans, { i18nKey: "i18ManageCaseContactCustomerService" },
                 "You need additional access to manage cases.\u00A0 Please contact",
                 ' ',
                 React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
                 " for assistance.")),
-        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-v5-u-mb-md", isInline: true },
+        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-v6-u-mb-md", isInline: true },
             React.createElement(Trans, { i18nKey: "i18ValidEntitlementContactCustomerService" },
                 "You need a valid entitlement to create a case.\u00A0 Please contact",
                 ' ',
@@ -93,15 +93,15 @@ export default function IdeaInformation() {
                 React.createElement(KtQuestions, { onlyShowKT4: true }),
                 React.createElement(SupportLevel, null),
                 React.createElement(Grid, { hasGutter: true },
-                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xl" },
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xl" },
                         React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
-                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xl" },
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xl" },
                         React.createElement(ContactPhoneNumber, null))),
                 React.createElement(ContactPhoneNumberAlert, null),
                 React.createElement(Grid, { hasGutter: true },
-                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                         React.createElement(CaseLanguageSelector, { isManageStep: true })),
-                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                         React.createElement(CaseGroup, { init: true }))),
                 React.createElement(CaseContactSelector, null),
                 React.createElement(RHAssociatesSelector, null),

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

@@ -97,8 +97,8 @@ function KtQuestions(props) {
                     (timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > KT4_QUESTION_MAX_LIMIT)
                     ? 'error'
                     : 'default', "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > KT4_QUESTION_MAX_LIMIT ? 'true' : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, onChange: (e, value) => onKtQ4Change(value, e), "aria-required": isKT4Required, "data-tracking-id": "get-support-ktQ4-timeFramesAndUrgency", placeholder: t('Describe the user or financial impact. Tell us about any legal, national, or medical urgency.'), isRequired: isKT4Required, resizeOrientation: "vertical", rows: 5 }),
-            React.createElement("p", { className: "form-instructions pf-v5-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${(timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > KT4_QUESTION_MAX_LIMIT ? KT4_QUESTION_ERROR_MESSAGE : ''}`),
-            React.createElement(Progress, { value: timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length, min: 0, max: KT4_QUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, valueText: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, variant: getVariantQ4(), title: ' ', className: `pf-v5-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
+            React.createElement("p", { className: "form-instructions pf-v6-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${(timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > KT4_QUESTION_MAX_LIMIT ? KT4_QUESTION_ERROR_MESSAGE : ''}`),
+            React.createElement(Progress, { value: timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length, min: 0, max: KT4_QUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, valueText: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, variant: getVariantQ4(), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         !props.onlyShowKT4 && (React.createElement(React.Fragment, null,
             React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ2-environment' }, labelContent: React.createElement(React.Fragment, null,
                     t(KtQuestionConstant.environment),
@@ -107,8 +107,8 @@ function KtQuestions(props) {
                 React.createElement(TextArea, { id: "ktQ2-environment", validated: environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT
                         ? 'error'
                         : 'default', value: environment, onChange: (e, value) => onKtQ2Change(value, e), "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", placeholder: t('Please provide details about the location, device, software version, etc. where you encounter this issue'), rows: 5 }),
-                React.createElement("p", { className: "form-instructions pf-v5-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${(environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? KTQ2LengthError : ''}`),
-                React.createElement(Progress, { value: environment === null || environment === void 0 ? void 0 : environment.length, min: 0, max: CASE_DEATILS_ENVIRONMENT_LIMIT, size: ProgressSize.sm, label: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, valueText: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, variant: getVariantQ2(), title: ' ', className: `pf-v5-u-mt-md  kt-progress-bar`, id: "summary-progress-bar" })),
+                React.createElement("p", { className: "form-instructions pf-v6-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${(environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? KTQ2LengthError : ''}`),
+                React.createElement(Progress, { value: environment === null || environment === void 0 ? void 0 : environment.length, min: 0, max: CASE_DEATILS_ENVIRONMENT_LIMIT, size: ProgressSize.sm, label: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, valueText: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, variant: getVariantQ2(), title: ' ', className: `pf-v6-u-mt-md  kt-progress-bar`, id: "summary-progress-bar" })),
             React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ3-periodicityOfIssue' }, labelContent: React.createElement(React.Fragment, null,
                     t(KtQuestionConstant.periodicityOfIssue),
                     ' ',
@@ -118,8 +118,8 @@ function KtQuestions(props) {
                         : 'default', value: periodicityOfIssue, onChange: (e, value) => onKtQ3Change(value, e), "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', resizeOrientation: "vertical", placeholder: t('Describe when and how often the problem occurs, e.g., daily, after specific actions, at particular times of day, etc.'), rows: 5 }),
-                React.createElement("p", { className: "form-instructions pf-v5-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${(periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT ? KTQ3LengthError : ''}`),
-                React.createElement(Progress, { value: periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length, min: 0, max: KTQUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, valueText: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, variant: getVariantQ3(), title: ' ', className: `pf-v5-u-mt-md kt-progress-bar`, id: "summary-progress-bar" }))))));
+                React.createElement("p", { className: "form-instructions pf-v6-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${(periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT ? KTQ3LengthError : ''}`),
+                React.createElement(Progress, { value: periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length, min: 0, max: KTQUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, valueText: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, variant: getVariantQ3(), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" }))))));
 }
 KtQuestions.defaultProps = defaultProps;
 export default KtQuestions;

package/lib/esm/components/OpenCase/SupportTypeSelectorPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SupportTypeSelectorPage.d.ts","sourceRoot":"","sources":["../../../../src/components/OpenCase/SupportTypeSelectorPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAiB/D,MAAM,CAAC,OAAO,UAAU,uBAAuB,sBA6M9C"}
+{"version":3,"file":"SupportTypeSelectorPage.d.ts","sourceRoot":"","sources":["../../../../src/components/OpenCase/SupportTypeSelectorPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAiB/D,MAAM,CAAC,OAAO,UAAU,uBAAuB,sBAiM9C"}

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

@@ -4,14 +4,13 @@ import { fetchCaseTypes, useGlobalDispatchContext, useGlobalStateContext } from
 import { haventLoadedMetadata, NewCaseTypes, PreviousCaseTypes } from '@rh-support/utils';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
 import { getUpdatedDescription } from '../../reducers/CaseHelpers';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 import { BugIcon, CertificationIcon, CustomerServiceIcon, DocumentationIcon, GearIcon, IdeaIcon, RcaIcon, } from './SupportTypeIcons';
 export default function SupportTypeSelectorPage() {
-    const { t } = useTranslation();
     const { globalMetadataState: { allCaseTypes, loggedInUsersAccount }, } = useGlobalStateContext();
     const globalDispatch = useGlobalDispatchContext();
     const [selectedSupportType, setSelectedSupportType] = useState('');
@@ -32,12 +31,6 @@ export default function SupportTypeSelectorPage() {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    // To handle support type selection change
-    const onChange = (labelledById, _event) => {
-        const newSelected = labelledById === selectedSupportType ? null : labelledById;
-        setSelectedSupportType(newSelected);
-        setCaseDetails(caseDispatch, { caseType: newSelected });
-    };
     // To handle enter and key down events for the support type card
     const onKeyDown = (event) => {
         if (event.target !== event.currentTarget) {
@@ -138,15 +131,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-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(Gallery, { hasGutter: true, className: "pf-v6-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, onKeyDown: onKeyDown, onClick: onSupportTypeClick, isSelected: !!caseType && supportTypesArrayValues.oldSupportType === caseType, isFullHeight: true, "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(SplitItem, { className: "pf-v6-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("header", { className: "pf-v6-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("header", { className: "pf-v6-u-font-family-redhatVF-heading-sans-serif" },
                         React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading))))))))))));
 }

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

@@ -1,4 +1,4 @@
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalFooter, ModalVariant } from '@patternfly/react-core';
 import { AlertMessage, AlertType } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import filter from 'lodash/filter';
@@ -105,7 +105,7 @@ const AllProductsSelector = forwardRef((props, ref) => {
                 React.createElement(ProductVersionDropdownSelector, { isLoading: allProducts.isFetching, products: props.checkEntitledProduct ? entitledProducts : allProducts.data.productsResult, onProductChange: onProductChange, onVersionChange: onVersionChange, ref: ref, isOnSummaryPage: props.isOnSummaryPage, loadTCOnChange: props.loadTCOnChange, isFetching: topContent.isFetching })))),
         renderOpenCaseIssue && (React.createElement("div", { className: "case-details-summary" },
             React.createElement(OpenCaseIssue, { inlineEditable: false, required: true, isOnSummaryPage: props.isOnSummaryPage }))),
-        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
+        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-v6-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) }),
         showModalButton &&
@@ -114,13 +114,14 @@ const AllProductsSelector = forwardRef((props, ref) => {
             !topContent.isFetching &&
             topContent.data.length !== 0 && (React.createElement("button", { className: "btn btn-bordered-blue btn-slim pull-top-narrow push-bottom-narrow", "data-tracking-id": "suggested-fixes-trigger", onClick: toggleTCModal, type: "button" },
             React.createElement(Trans, null, "Suggested fixes"))),
-        props.loadTCOnChange && !topContent.isFetching && topContent.data.length !== 0 && (React.createElement(Modal, { className: "feedback-modal", title: t('Suggested fixes'), description: t('There are new updates to suggested fixes after changing your product.'), "aria-describedby": "Feedback Form", isOpen: isModalOpen, variant: ModalVariant.large, onClose: toggleTCModal, actions: [
-                React.createElement("button", { key: "cancel", onClick: toggleTCModal, className: "btn btn-app btn-primary", type: "button" },
-                    React.createElement(Trans, null, "Cancel")),
-            ] },
+        props.loadTCOnChange && !topContent.isFetching && topContent.data.length !== 0 && (React.createElement(Modal, { className: "feedback-modal", title: t('Suggested fixes'), "aria-describedby": "Feedback Form", isOpen: isModalOpen, variant: ModalVariant.large, onClose: toggleTCModal },
+            React.createElement("p", null, t('There are new updates to suggested fixes after changing your product.')),
             React.createElement("span", null,
                 React.createElement(Trans, null, "Here are some common suggestions:")),
-            React.createElement(Suggestions, { showTitleDescription: false, showMax: 6 })))));
+            React.createElement(Suggestions, { showTitleDescription: false, showMax: 6 }),
+            React.createElement(ModalFooter, null,
+                React.createElement("button", { key: "cancel", onClick: toggleTCModal, className: "btn btn-app btn-primary", type: "button" },
+                    React.createElement(Trans, null, "Cancel")))))));
 });
 AllProductsSelector.defaultProps = defaultProps;
 export { AllProductsSelector };

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

@@ -9,5 +9,5 @@ interface IProps {
     isLoading?: boolean;
 }
 export declare const NewProductDropdownSelector: (props: IProps) => React.JSX.Element;
-export {};
+export default NewProductDropdownSelector;
 //# sourceMappingURL=NewProductDropdownSelector.d.ts.map

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;AAMpE,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,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;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAOD,eAAO,MAAM,0BAA0B,UAAW,MAAM,sBAyHvD,CAAC"}
+{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAoBpE,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,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;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,sBAsMvD,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

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

@@ -1,81 +1,108 @@
-import { Divider } from '@patternfly/react-core';
-import { Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Button, Divider, MenuToggle, Select, SelectGroup, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { useSelectKeyboardNavigator } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseSelector } from '../../context/CaseContext';
-const isProductSupportedForCustomer = (productName, productResults) => {
-    const foundItem = productResults.filter((item) => item.name === productName)[0];
-    return foundItem ? foundItem.supportedForCustomer : false;
-};
 export const NewProductDropdownSelector = (props) => {
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [showValidationLocal, setShowValidationLocal] = useState(props.isNextBtnClickedToShowValidationError);
-    const [isSelectedProductSupportedForCustomer, setIsSelectedProductSupportedForCustomer] = useState(true);
+    const [isSelectedProductSupportedForCustomer] = useState(true);
+    const [filteredProducts, setFilteredProducts] = useState(props.products);
+    const [shouldFilter, setShouldFilter] = useState(false);
+    const textInputRef = useRef();
     const { product } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
     }), isEqual);
+    const [inputValue, setInputValue] = useState('');
     const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
     useEffect(() => {
         setShowValidationLocal(props.isNextBtnClickedToShowValidationError);
-        // 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-v5-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
-    };
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
-    const getOptions = () => {
-        const topProductOptions = allProducts.data.topProducts
-            .filter((p) => p.isEntitledProduct)
-            .map((p, id) => createOption(p, id, 'topProduct'))
-            .slice(0, 3);
-        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: '', className: "product-selector-group" }),
-            ...topProductOptions,
-            React.createElement(Divider, { key: "all-product-divider" }),
-            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '', className: "product-selector-group" }),
-            ...(props.isCaseCreate ? productOptions : allProductsTroubleshootOptions),
-        ];
-    };
-    const onFilter = (e, textInput) => {
-        if (textInput === '') {
-            return getOptions();
+    useEffect(() => {
+        if (product && product !== inputValue) {
+            setInputValue(product);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [product]);
+    // Update filtered products whenever input changes
+    useEffect(() => {
+        const productsToFilter = props.isCaseCreate ? props.products : allProducts.data.productsResult;
+        if (!isEmpty(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
+            const filtered = productsToFilter.filter((p) => { var _a; return (_a = p.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase()); });
+            setFilteredProducts(filtered);
         }
         else {
-            let finalFilteredProducts = [];
-            let filteredProducts = props.products.filter((product) => { var _a; return (_a = product.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textInput.toLowerCase()); });
-            filteredProducts.forEach((product, index) => {
-                let selectProductItem = createOption(product, index, 'product');
-                finalFilteredProducts.push(selectProductItem);
-            });
-            return finalFilteredProducts;
+            setFilteredProducts(productsToFilter);
         }
+    }, [inputValue, props.products, props.isCaseCreate, allProducts.data.productsResult]);
+    const onToggleClick = () => {
+        var _a;
+        setIsOpen(!isOpen);
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const onSelect = (event, selection) => {
-        if (isEqual(selection, product)) {
-            props.onProductChange(''); // To unselect a product when user clicks on the same selected product
-            setIsOpen(false);
-            return;
+    const onSelect = (selection) => {
+        if (isEqual(selection.name, inputValue)) {
+            props.onProductChange('');
+            setInputValue('');
+        }
+        else {
+            props.onProductChange(selection.name);
+            setInputValue(selection.name);
         }
-        props.onProductChange(selection);
         setIsOpen(false);
     };
-    useEffect(() => {
-        product &&
-            props.isOnSummaryPage &&
-            setIsSelectedProductSupportedForCustomer(isProductSupportedForCustomer(product, allProducts.data.productsResult));
-    }, [allProducts.data.productsResult, product, props.isOnSummaryPage]);
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+        setShouldFilter(value.trim().length > 0);
+        if (value === '') {
+            props.onProductChange('');
+        }
+    };
+    const onClear = () => {
+        setInputValue('');
+        props.onProductChange('');
+        setShouldFilter(false);
+    };
+    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
+        list: filteredProducts,
+        isOpen,
+        setIsOpen,
+        onSelect: (item) => {
+            props.onProductChange(item.name);
+            setInputValue(item.name);
+            setIsOpen(false);
+        },
+    });
+    const createProductGroup = (products, label, type, shouldFilter = false) => {
+        const productsToShow = shouldFilter ? filteredProducts : products;
+        return productsToShow.length > 0 ? (React.createElement(React.Fragment, null,
+            !shouldFilter && (React.createElement(SelectGroup, { label: label, key: type, value: '', className: "product-selector-group", children: '' })),
+            productsToShow.map((prod, index) => {
+                var _a;
+                return (React.createElement(SelectOption, { key: `${type}-${index}`, value: prod, isFocused: focusedItemIndex === index, className: "pf-v6-c-select__menu-wrapper", "data-tracking-id": `${(_a = prod.name) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, '')}-${type}-dropdown`, isSelected: prod.name === product }, prod.name));
+            }))) : (React.createElement(SelectOption, { key: '', value: '', className: "pf-v6-c-select__menu-wrapper", isDisabled: true }, "No Results Found"));
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true, isDisabled: props.isLoading, status: isEmpty(inputValue) && showValidationLocal ? 'danger' : undefined },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: inputValue, onClick: onToggleClick, onChange: onTextInputChange, onKeyDown: onInputKeyDown, autoComplete: "off", innerRef: textInputRef, placeholder: t('Search for or select a product'), role: "combobox", isExpanded: isOpen, "aria-controls": "product-selector-listbox" }),
+            props.isLoading ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Spinner, { size: "md" }))) : (React.createElement(TextInputGroupUtilities, Object.assign({}, (!inputValue ? { style: { display: 'none' } } : {})),
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClear, "aria-label": "Clear input value" }))))));
+    const topProducts = allProducts.data.topProducts.filter((p) => p.isEntitledProduct).slice(0, 3);
     return (React.createElement("div", null,
-        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", isDisabled: props.isLoading }, getOptions()),
-        !props.isLoading && !isSelectedProductSupportedForCustomer && (React.createElement("div", { className: "pf-v5-u-ml-xs pf-v5-u-mt-sm form-instructions" },
+        React.createElement(Select, { id: "product-selector", isOpen: isOpen, onSelect: (e, selection) => onSelect(selection), onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, selected: product, shouldFocusFirstItemOnOpen: false, isScrollable: true, "data-tracking-id": "get-support-product-dropdown-selector" },
+            React.createElement(SelectList, { id: "product-selector-listbox" },
+                !shouldFilter && createProductGroup(topProducts, t('Top products'), 'topProduct'),
+                !shouldFilter && React.createElement(Divider, null),
+                createProductGroup(props.isCaseCreate ? props.products : allProducts.data.productsResult, t('All products'), 'product', shouldFilter))),
+        !props.isLoading && !isSelectedProductSupportedForCustomer && (React.createElement("div", { className: "pf-v6-u-ml-xs pf-v6-u-mt-sm form-instructions" },
             React.createElement(Trans, null, "Red Hat must confirm your subscription status before providing support."),
             React.createElement("br", null),
             React.createElement(Trans, null, "We'll contact you if we have any questions.")))));
 };
+export default NewProductDropdownSelector;

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

@@ -1 +1 @@
-{"version":3,"file":"NewProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductVersionSelector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;IACZ,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,yBAAyB,UAAW,MAAM,sBAoItD,CAAC"}
+{"version":3,"file":"NewProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductVersionSelector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;IACZ,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,yBAAyB,UAAW,MAAM,sBAmItD,CAAC"}

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

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { SingleSelectDropdown } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getUniqueSortedVersions } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
@@ -10,7 +10,6 @@ import { getVersionsDetails } from '../../reducers/CaseReducer';
 import { getProductObj } from '../shared/utils';
 export const NewProductVersionSelector = (props) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
     const [selectVersionOptions, setSelectVersionOptions] = useState([]);
     const [showValidationLocal, setShowValidationLocal] = useState(props.isNextBtnClickedToShowValidationError);
     const [isSEProductApiIsDown, setIsSEProductApiIsDown] = useState(false);
@@ -78,18 +77,23 @@ export const NewProductVersionSelector = (props) => {
         setSelectVersionOptions(productVersions);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [versionsDetails.data, isSEProductApiIsDown]);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
-    const onSelect = (event, selection) => {
+    const onSelect = (selectedOption) => {
+        const selection = selectedOption.value;
         if (isEqual(selection, version)) {
             props.onVersionChange(''); // To unselect a version when user clicks on the same selected product version
-            setIsOpen(false);
             return;
         }
         props.onVersionChange(selection);
-        setIsOpen(false);
     };
-    const titleId = 'version-selector';
-    return (React.createElement(Select, Object.assign({ variant: SelectVariant.single, onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, isOpen: isOpen, placeholderText: t('Select a version'), toggleAriaLabel: t('Select a version'), "aria-labelledby": titleId, selections: version, validated: isEmpty(version) && showValidationLocal ? 'error' : 'default', isDisabled: isEmpty(product) || allProducts.isFetching, "data-tracking-id": "get-support-version-dropdown-selector" }, (isSEProductApiIsDown && versionsDetails.isFetching && { loadingVariant: 'spinner' })), selectVersionOptions.map((version, index) => (React.createElement(SelectOption, { key: index, value: version })))));
+    // Create selected option for SingleSelectDropdown
+    const getSelectedOption = () => ({
+        label: version || '',
+        value: version || '',
+    });
+    // Create options array for SingleSelectDropdown
+    const getDropdownOptions = () => selectVersionOptions.map((versionOption) => ({
+        label: versionOption,
+        value: versionOption,
+    }));
+    return (React.createElement(SingleSelectDropdown, { onSelect: onSelect, selected: getSelectedOption(), options: getDropdownOptions(), placeholder: t('Select a version'), ariaLabel: t('Select a version'), isInvalid: isEmpty(version) && showValidationLocal, isDisabled: isEmpty(product) || allProducts.isFetching, dataTrackingId: "get-support-version-dropdown-selector", isLoading: isSEProductApiIsDown && versionsDetails.isFetching }));
 };

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

@@ -57,7 +57,7 @@ export default function ProductSelector(props) {
         React.createElement(AllProductsSelector, { routeProps: props.routeProps, checkEntitledProduct: isCaseCreate ? true : false, ref: productSelectorRef, isOnSummaryPage: true, isOnGetSupportPage: props === null || props === void 0 ? void 0 : props.isOnGetSupportPage, caseCreateExperience: props.caseCreateExperience })));
     return (React.createElement(React.Fragment, null,
         isBTestvariation && allProducts.isFetching && React.createElement(ProductSelectorLoader, null),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v6-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
         isBTestvariation
             ? !allProducts.isFetching && !allProducts.isError && rederProductSelect
             : isATestvariation && rederProductSelect,

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

@@ -16,11 +16,11 @@ const ProductVersionDropdownSelector = forwardRef((props, ref) => {
                 React.createElement(Trans, null, "Product"),
                 ' ',
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-            React.createElement("div", { className: "pf-v5-u-display-flex pf-v5-u-align-items-center" },
-                React.createElement("div", { className: "pf-v5-u-flex-1" },
+            React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-align-items-center" },
+                React.createElement("div", { className: "pf-v6-u-flex-1" },
                     React.createElement(NewProductDropdownSelector, { products: props.products, onProductChange: props.onProductChange, isNextBtnClickedToShowValidationError: isNextBtnClickedToShowValidationError, isCaseCreate: isCaseCreate, isOnSummaryPage: props.isOnSummaryPage, isLoading: props.isLoading })),
-                props.isLoading && (React.createElement("div", { className: "pf-v5-u-flex-basis-auto" },
-                    React.createElement(LoadingIndicator, { className: "pf-v5-u-ml-sm", isInline: true, show: props.isLoading, size: "sm" })))),
+                props.isLoading && (React.createElement("div", { className: "pf-v6-u-flex-basis-auto" },
+                    React.createElement(LoadingIndicator, { className: "pf-v6-u-ml-sm", isInline: true, show: props.isLoading, size: "sm" })))),
             React.createElement(React.Fragment, null)),
         React.createElement("div", { className: "version-selector-wrapper" },
             React.createElement("label", { htmlFor: "version-selector-dropdown-toggle" },

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

@@ -1 +1 @@
-{"version":3,"file":"AsideResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AsideResults.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,eAAe,EAAsC,MAAM,iCAAiC,CAAC;AAUtG,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBAsMzC"}
+{"version":3,"file":"AsideResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AsideResults.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,eAAe,EAAsC,MAAM,iCAAiC,CAAC;AAUtG,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBA6MzC"}

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

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { pcm, search } from '@cee-eng/hydrajs';
+import { Card, CardBody, CardHeader } from '@patternfly/react-core';
 import { useDebounce } from '@rh-support/components';
 import { computeRecommendationAbstract, computeRecommendationTitle, convertObjToEncodedQueryParams, dtmTrackEventContentListingItemClicked, getRecommendationTitle, getSolrParams, getTrimmedCharacters, PreviousCaseTypes, replaceHighlightingData, } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
@@ -130,9 +131,10 @@ export function AsideResults(props) {
     const isIdea = caseType === PreviousCaseTypes.FEATURE_ENHANCEMENT;
     if (!canShowSideRecommendations())
         return React.createElement(React.Fragment, null);
-    return (React.createElement("div", { className: `card card-white card-support top-recommendations ${props.className ? props.className : ''}` },
-        React.createElement("h3", { className: "card-heading popular-solutions green-card-heading card-header-bg" }, isIdea ? React.createElement(Trans, null, "Search recommendations") : React.createElement(Trans, null, "Articles recommended by OpenShift AI")),
-        React.createElement("div", { className: "card-body" },
+    return (React.createElement(Card, { className: "pf-v6-u-m-sm" },
+        React.createElement(CardHeader, null,
+            React.createElement("h3", null, isIdea ? (React.createElement(Trans, null, "Search recommendations")) : (React.createElement(Trans, null, "Articles recommended by OpenShift AI")))),
+        React.createElement(CardBody, null,
             React.createElement("ul", { className: "list-flat" }, recommendationState.sideRecommendation.map((doc, index) => {
                 var _a, _b;
                 return (React.createElement("li", { className: "result", key: doc.id },

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

@@ -35,7 +35,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, i), className: "pf-v5-u-font-weight-bold", "data-tracking-id": "cluster-recommendations", href: detailsUrl, target: "_blank", rel: "noopener noreferrer" },
+            React.createElement("a", { onClick: (e) => onResourceClick(e, rule, i), className: "pf-v6-u-font-weight-bold", "data-tracking-id": "cluster-recommendations", href: detailsUrl, 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-v5-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-v6-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/ClusterRecommendationsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClusterRecommendationsModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationsModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAYpD,UAAU,MAAM;CAAG;AAEnB,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBAwFxD"}
+{"version":3,"file":"ClusterRecommendationsModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationsModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAYpD,UAAU,MAAM;CAAG;AAEnB,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBAqFxD"}