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

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, { validated: invalidateQT4(timeFramesAndUrgency) ||
+            React.createElement(TextArea, { className: `form-control${invalidateQT4(timeFramesAndUrgency) ||
                     (isNextBtnClickedToShowValidationError && isEmpty(timeFramesAndUrgency)) ||
                     isKTQ4InValid
-                    ? 'error'
-                    : 'default', "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
+                    ? ' form-invalid'
+                    : ''}`, "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: (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" }),
+                    : '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 }),
             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, { 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(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("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, { 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
+                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
                         ? 'true'
-                        : 'false', resizeOrientation: "vertical" }),
+                        : 'false' }),
                 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 } = useCaseSelector((state) => ({
+    const { caseType, isFetchingSelectedAccountDetails, selectedAccountDetails } = useCaseSelector((state) => ({
         caseType: state.caseDetails.caseType,
         isFetchingSelectedAccountDetails: state.selectedAccountDetails.isFetching,
         selectedAccountDetails: state.selectedAccountDetails,
@@ -122,15 +122,18 @@ 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(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))))))))))));
+        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))))))));
+        }))));
 }

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-v5-u-mt-lg", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
+        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-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;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"}
+{"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"}

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

@@ -1,5 +1,4 @@
-import { Divider } from '@patternfly/react-core';
-import { Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Divider, Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -19,7 +18,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-v5-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-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
     };
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);
@@ -32,10 +31,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: '', className: "product-selector-group" }),
+            React.createElement(SelectGroup, { label: t('Top products'), key: "topProducts", value: '' }),
             ...topProductOptions,
             React.createElement(Divider, { key: "all-product-divider" }),
-            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '', className: "product-selector-group" }),
+            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '' }),
             ...(props.isCaseCreate ? productOptions : allProductsTroubleshootOptions),
         ];
     };
@@ -63,5 +62,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: (_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())));
+        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())));
 };

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

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 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: (_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 })))));
+    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 })))));
 };

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-v5-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-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 }),
@@ -52,5 +52,5 @@ export default function ProductSelector(props) {
                 React.createElement(EARuleWidget, null)),
             React.createElement("div", { className: "suggestions-result-section" },
                 React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading recommendations') } }, !isEmpty(version) && (React.createElement("div", { className: "common-suggestions" },
-                    React.createElement(Recommendations, null)))))))));
+                    React.createElement(Recommendations, { routeProps: props.routeProps })))))))));
 }

package/lib/esm/components/Recommendations/AlertToastWrapper.d.ts

@@ -2,11 +2,8 @@
  * We need to wrap Critical solution toast notification and Cluster recommendation toast notification so they don't get overlapped.
  */
 import { FC } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
 interface IProps {
     submitCaseAndNavigate: (isReSubmitting: boolean) => void;
-    routeProps: RouteComponentProps<IRouteUrlParams>;
 }
 declare const AlertToastWrapper: FC<IProps>;
 export default AlertToastWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"AlertToastWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AlertToastWrapper.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,OAAc,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAiC,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAMjG,UAAU,MAAM;IACZ,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAuCjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"AlertToastWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AlertToastWrapper.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,OAAc,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AAWnE,UAAU,MAAM;IACZ,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAuCjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -13,7 +13,7 @@ import { AttachmentStateContext } from '../shared/fileUpload';
 import { ResubmitToast } from '../SubmitCase/ResubmitToast';
 import ClusterRecommendationToast from './ClusterRecommendationToast';
 import CriticalSolutionsToast from './CriticalSolutionsToast';
-const AlertToastWrapper = ({ submitCaseAndNavigate, routeProps }) => {
+const AlertToastWrapper = ({ submitCaseAndNavigate }) => {
     const { routeState: { activeSection }, } = useContext(RouteContext);
     const [isCriticalSolutionsVisible, setIsCriticalSolutionsVisible] = useState(true);
     const { caseType } = useCaseSelector((state) => ({
@@ -33,6 +33,6 @@ const AlertToastWrapper = ({ submitCaseAndNavigate, routeProps }) => {
     return (React.createElement(AlertGroup, { isToast: true },
         isCriticalSolutionsVisible && isNotAnIdea && React.createElement(CriticalSolutionsToast, { userClosed: userClosed }),
         !hideClusterIdReportModal && isNotAnIdea && React.createElement(ClusterRecommendationToast, null),
-        React.createElement(ResubmitToast, { submitCaseAndNavigate: submitCaseAndNavigate, routeProps: routeProps })));
+        React.createElement(ResubmitToast, { submitCaseAndNavigate: submitCaseAndNavigate })));
 };
 export default AlertToastWrapper;

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

@@ -1,2 +1,8 @@
-export declare function AsideResults(): JSX.Element;
+import { RouteComponentProps } from 'react-router-dom';
+import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
+interface IProps {
+    routeProps: RouteComponentProps<IRouteUrlParams>;
+}
+export declare function AsideResults(props: IProps): JSX.Element;
+export {};
 //# sourceMappingURL=AsideResults.d.ts.map

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":"AAiCA,wBAAgB,YAAY,gBAkM3B"}
+{"version":3,"file":"AsideResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AsideResults.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAUvD,OAAO,EAAE,eAAe,EAAsC,MAAM,iCAAiC,CAAC;AAWtG,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,eAuOzC"}

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

@@ -9,7 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { pcm, search } from '@cee-eng/hydrajs';
 import { useDebounce } from '@rh-support/components';
-import { computeRecommendationAbstract, computeRecommendationTitle, getSolrParams, PreviousCaseTypes, replaceHighlightingData, } from '@rh-support/utils';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { computeRecommendationAbstract, computeRecommendationTitle, getConfigField, getSolrParams, getTrimmedSpecialCharacters, PCM_CONFIG_FIELD_TYPE, PreviousCaseTypes, replaceHighlightingData, } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useRef } from 'react';
@@ -18,18 +19,22 @@ import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RecommendationDispatchContext, RecommendationStateContext } from '../../context/RecommendationContext';
 import { RouteContext } from '../../context/RouteContext';
 import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { WATSONX_DESCRIPTION_LIMIT, WATSONX_SUMMARY_LIMIT } from '../../reducers/CaseConstNTypes';
 import { getDescriptionWOQues } from '../../reducers/CaseHelpers';
 import { setCaseRecommendations } from '../../reducers/CaseReducer';
 import { RecommendationsConstants } from '../../reducers/RecommendationsReducer';
 import { showSidebarRecommendationsSections } from '../../reducers/RouteConstNTypes';
 import { createOrUpdateSessionResources, getSessResFromRec, getSessResFromRecs, } from '../../reducers/SessionRestoreReducer';
 import RouteUtils from '../../utils/routeUtils';
+import { ShowRank } from './ShowRank';
 const { SessionResourceSource, SessionResourceVisibility } = pcm.preCase.session;
-export function AsideResults() {
+export function AsideResults(props) {
     /*
      * Sidebar recommendation logic
      */
-    const { isSelectedAccounntSecureSupport, product, version, caseResourceLinks, summary, issue, environment, periodicityOfIssue, timeFramesAndUrgency, caseType, } = useCaseSelector((state) => ({
+    const { globalMetadataState: { loggedInUsersAccount, pcmConfig }, } = useContext(GlobalMetadataStateContext);
+    const isRerankEnabled = getConfigField(pcmConfig.data, 'isRerankEnabled', PCM_CONFIG_FIELD_TYPE.FEATURE_FLAG);
+    const { isSelectedAccounntSecureSupport, product, version, caseResourceLinks, summary, issue, environment, periodicityOfIssue, timeFramesAndUrgency, caseType, isFetchingRecommendationsFromWatsonX, } = useCaseSelector((state) => ({
         isSelectedAccounntSecureSupport: state.selectedAccountDetails.data.secureSupport,
         product: state.caseDetails.product,
         version: state.caseDetails.version,
@@ -40,6 +45,7 @@ export function AsideResults() {
         periodicityOfIssue: state.caseDetails.periodicityOfIssue,
         timeFramesAndUrgency: state.caseDetails.timeFramesAndUrgency,
         caseType: state.caseDetails.caseType,
+        isFetchingRecommendationsFromWatsonX: state.isFetchingRecommendationsFromWatsonX,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
     // getting recommendation dispatch and state via context
@@ -75,7 +81,13 @@ export function AsideResults() {
                 const queryFilters = {
                     id: { values: recommendationState.insightsKcsIds, exclude: true },
                 };
-                const response = yield search.getRecommendationsForCase(payload, getSolrParams(PAGE_SIZE, 129, queryFilters), controllerRef.current.signal);
+                const response = isFetchingRecommendationsFromWatsonX && !loggedInUsersAccount.data.secureSupport
+                    ? yield search.getWatsonXRecommendationsForCase(Object.assign(Object.assign(Object.assign(Object.assign({ product: product, version: version }, ((payload === null || payload === void 0 ? void 0 : payload.summary) && {
+                        summary: getTrimmedSpecialCharacters(payload.summary, WATSONX_SUMMARY_LIMIT),
+                    })), ((payload === null || payload === void 0 ? void 0 : payload.description) && {
+                        description: getTrimmedSpecialCharacters(payload === null || payload === void 0 ? void 0 : payload.description, WATSONX_DESCRIPTION_LIMIT),
+                    })), { rerank: isRerankEnabled }), getSolrParams(PAGE_SIZE, 129, queryFilters)), controllerRef.current.signal)
+                    : yield search.getRecommendationsForCase(payload, getSolrParams(PAGE_SIZE, 129, queryFilters), controllerRef.current.signal);
                 const sideDocs = replaceHighlightingData(response.response.docs, response.highlighting);
                 recommendationDispatch({
                     type: RecommendationsConstants.receiveSidebarRecommendation,
@@ -136,6 +148,7 @@ export function AsideResults() {
                 return (React.createElement("li", { className: "result", key: doc.id },
                     React.createElement("header", { className: "result-header" },
                         React.createElement("a", { href: `${doc.view_uri}?${RouteUtils.getSEResourceQueryParams(activeSessionId, (_b = (_a = sessionResourceTracking[SessionResourceSource.RECOMMENDATIONS_ASIDE]) === null || _a === void 0 ? void 0 : _a.resourceOriginId) !== null && _b !== void 0 ? _b : '', SessionResourceSource.RECOMMENDATIONS_ASIDE)}`, className: "se-recommended ts-result-aside", "data-tracking-id": `se-recommended-sidebar-recommendations-${index}`, rel: "noopener noreferrer", target: "_blank", onClick: onResourceClick(doc, index), dangerouslySetInnerHTML: computeRecommendationTitle(doc) })),
+                    isFetchingRecommendationsFromWatsonX && (React.createElement(ShowRank, { index: index, originalRank: doc.original_rank, routeProps: props.routeProps })),
                     React.createElement("p", { className: "result-body", dangerouslySetInnerHTML: computeRecommendationAbstract(doc, 150) })));
             })))));
 }

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-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("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(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-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-v5-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-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-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("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(InfoCircleIcon, null)),
-                React.createElement("p", { className: "pf-v5-c-alert__title" },
+                React.createElement("p", { className: "pf-c-alert__title" },
                     React.createElement("strong", null,
                         React.createElement(EARuleTitle, null))),
-                React.createElement("div", { className: "pf-v5-c-alert__action" },
+                React.createElement("div", { className: "pf-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-v5-c-alert__description" },
+                React.createElement("div", { className: "pf-c-alert__description" },
                     React.createElement(EARuleDescription, null)),
-                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" }),
+                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" }),
                     !isSecureSupportAccount && resolvedMyIssue(),
                     validEARulesLength > 1 && (React.createElement(PaginationCompact, { maxPage: validEARulesLength, onPageChange: onPaginationChange, dataTrackingId: 'se-recommended-asa-widget' })))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"InsightsResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/InsightsResults.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAgC,MAAM,0CAA0C,CAAC;AAG7G,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAwB5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD,MAAM,WAAW,wBAAyB,SAAQ,mBAAmB;IACjE,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;CAClB;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eA0PrC;kBA1PQ,eAAe;;;AA6PxB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"InsightsResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/InsightsResults.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAgC,MAAM,0CAA0C,CAAC;AAG7G,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAwB5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD,MAAM,WAAW,wBAAyB,SAAQ,mBAAmB;IACjE,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;CAClB;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eAyPrC;kBAzPQ,eAAe;;;AA4PxB,eAAe,eAAe,CAAC"}

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

@@ -87,7 +87,7 @@ function InsightsResults(props) {
             payload: { isRuleModalVisible: isVisible },
         });
     };
-    function fetchRecommendations(localFile) {
+    function fetchFileRecommendations(localFile) {
         var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             const analysisResults = (_a = localFile === null || localFile === void 0 ? void 0 : localFile.analysisMetadata) === null || _a === void 0 ? void 0 : _a.analysisResults;
@@ -190,7 +190,7 @@ function InsightsResults(props) {
                     !(insightResultsMap[localFile.attachmentId] || recommendedResultsMap[localFile.attachmentId]) &&
                     isAnalysisComplete(localFile.analysisMetadata.analysisStatus) &&
                     ((_b = (_a = localFile.analysisMetadata.analysisResults) === null || _a === void 0 ? void 0 : _a.kcs_ids) !== null && _b !== void 0 ? _b : []).length > 0 &&
-                    fetchRecommendations(localFile);
+                    fetchFileRecommendations(localFile);
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -240,7 +240,7 @@ function InsightsResults(props) {
     }
     return (React.createElement(React.Fragment, null,
         !rulesState.triggerRuleNotification && caseType !== PreviousCaseTypes.FEATURE_ENHANCEMENT && (React.createElement(Alert, { isInline: true, title: t('File recommendations are ready to view'), "data-tracking-id": "inline-view-critical-solution-alert", children: React.createElement("p", null,
-                React.createElement(Trans, null, "Troubleshooting specific for your uploaded files.")), className: "file-recommendations-file-upload-alert" })),
+                React.createElement(Trans, null, "Troubleshooting specific for your uploaded files.")) })),
         React.createElement(InsightResultModal, { EARule: validEARules, onModalToggle: insightsModalToggle, isOpen: isRuleModalVisible, insightResults: allResults })));
 }
 InsightsResults.defaultProps = defaultProps;

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-v5-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-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-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("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(Trans, null, insightsReport.current.name)))),
-                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("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(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-v5-u-mr-sm" }),
+                        React.createElement(BullseyeIcon, { className: "pf-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-v5-u-mr-sm" }),
+                        React.createElement(InfoCircleIcon, { className: "pf-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-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("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(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-v5-c-button pf-m-primary", to: "/case/list" },
+            React.createElement(Link, { "data-tracking-id": "resolved-feedback-cases", key: "view", className: "pf-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.d.ts

@@ -1,4 +1,7 @@
+import { RouteComponentProps } from 'react-router-dom';
+import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
 interface IProps {
+    routeProps: RouteComponentProps<IRouteUrlParams>;
 }
 export default function Recommendations(props: IProps): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Recommendations.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/Recommendations.tsx"],"names":[],"mappings":"AA4CA,UAAU,MAAM;CAAG;AACnB,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eAkOpD"}
+{"version":3,"file":"Recommendations.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/Recommendations.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAelE,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAWpF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eAwQpD"}

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

@@ -2,7 +2,7 @@ import { pcm } from '@cee-eng/hydrajs';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
 import { LoadingDots, useDebounce, usePrevious } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
-import { computeRecommendationAbstract, computeRecommendationTitle, formatDate, scrollIntoView, } from '@rh-support/utils';
+import { computeRecommendationAbstract, computeRecommendationTitle, formatDate, getConfigField, PCM_CONFIG_FIELD_TYPE, scrollIntoView, } from '@rh-support/utils';
 import differenceBy from 'lodash/differenceBy';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -16,10 +16,11 @@ import { RouteContext } from '../../context/RouteContext';
 import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
 import { getRecommendationObject } from '../../reducers/CaseHelpers';
 import { setCaseRecommendations } from '../../reducers/CaseReducer';
-import { fetchRecommendations, RecommendationsConstants, setCurrentPage, setVisibleDocs, } from '../../reducers/RecommendationsReducer';
+import { fetchRecommendations, fetchWatsonXRecommendations, RecommendationsConstants, setCurrentPage, setVisibleDocs, } from '../../reducers/RecommendationsReducer';
 import { AppRouteSections } from '../../reducers/RouteConstNTypes';
 import { createOrUpdateSessionResources, getSessResFromRec, getSessResFromRecs, } from '../../reducers/SessionRestoreReducer';
 import RouteUtils from '../../utils/routeUtils';
+import { ShowRank } from './ShowRank';
 const { SessionResourceSource, SessionResourceVisibility } = pcm.preCase.session;
 export default function Recommendations(props) {
     var _a, _b, _c;
@@ -33,7 +34,10 @@ export default function Recommendations(props) {
     const caseDispatch = useCaseDispatch();
     // Use Case Number
     const { caseNumber } = useParams();
-    const { globalMetadataState: { navBarRef, loggedInUsersAccount }, } = useGlobalStateContext();
+    const { globalMetadataState: { navBarRef, loggedInUsersAccount, pcmConfig }, } = useGlobalStateContext();
+    const { isFetchingRecommendationsFromWatsonX } = useCaseSelector((state) => ({
+        isFetchingRecommendationsFromWatsonX: state.isFetchingRecommendationsFromWatsonX,
+    }), isEqual);
     const isSecureSupportAccount = loggedInUsersAccount.data.secureSupport;
     const { routeState: { activeSection }, } = useContext(RouteContext);
     const { sessionRestore: { activeSessionId, sessionResourceTracking }, } = useContext(SessionRestoreStateContext);
@@ -42,7 +46,9 @@ export default function Recommendations(props) {
     const [pageSize, setPageSize] = useState(null);
     const { recommendationState } = useContext(RecommendationStateContext);
     const prevMainRecommendations = usePrevious((_a = recommendationState === null || recommendationState === void 0 ? void 0 : recommendationState.visibleDocs) !== null && _a !== void 0 ? _a : []);
+    const prevIsFetchingRecommendationsFromWatsonX = usePrevious(isFetchingRecommendationsFromWatsonX);
     const recommendationDispatch = useContext(RecommendationDispatchContext);
+    const isRerankEnabled = getConfigField(pcmConfig.data, 'isRerankEnabled', PCM_CONFIG_FIELD_TYPE.FEATURE_FLAG);
     const DEFAULTPAGESIZE = 8;
     const MAXROW = 24;
     const recPageSize = pageSize !== null && pageSize !== void 0 ? pageSize : DEFAULTPAGESIZE;
@@ -65,7 +71,10 @@ export default function Recommendations(props) {
      * Also, log the newly presented resources on the session
      */
     useDebounce(() => {
-        if (activeSection !== AppRouteSections.SUMMARIZE || !summary || isRecSearchPayloadSame) {
+        if (activeSection !== AppRouteSections.SUMMARIZE ||
+            !summary ||
+            (isRecSearchPayloadSame &&
+                prevIsFetchingRecommendationsFromWatsonX === isFetchingRecommendationsFromWatsonX)) {
             return;
         }
         setCurrentPage(recommendationDispatch, 1);
@@ -79,7 +88,9 @@ export default function Recommendations(props) {
         // recreate a new AbortController for each call
         let controller = new AbortController();
         abortControllerRef.current = controller;
-        fetchRecommendations(recommendationDispatch, payload, MAXROW, recPageSize, 0, true, caseNumber, isSecureSupportAccount, queryFilters, controller.signal);
+        isFetchingRecommendationsFromWatsonX && !loggedInUsersAccount.data.secureSupport
+            ? fetchWatsonXRecommendations(recommendationDispatch, payload, MAXROW, recPageSize, 0, true, caseNumber, isSecureSupportAccount, queryFilters, controller.signal, isRerankEnabled)
+            : fetchRecommendations(recommendationDispatch, payload, MAXROW, recPageSize, 0, true, caseNumber, isSecureSupportAccount, queryFilters, controller.signal);
     }, [
         activeSection,
         environment,
@@ -89,6 +100,7 @@ export default function Recommendations(props) {
         summary,
         version,
         recommendationState.insightsKcsIds,
+        isFetchingRecommendationsFromWatsonX,
     ], 1000);
     useEffect(() => {
         const visibleRecs = [];
@@ -129,7 +141,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-v5-u-mt-lg", ref: resultRowRef },
+        React.createElement("div", { className: "recommendation-list pf-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 },
@@ -142,6 +154,7 @@ export default function Recommendations(props) {
                             React.createElement("span", { className: "meta" }, doc.documentKind),
                             React.createElement("span", { className: "list-separator" }, "\u2013"),
                             React.createElement("time", { className: "moment_date meta", title: doc.lastModifiedDate.toString() }, formatDate(doc.lastModifiedDate)))),
+                    isFetchingRecommendationsFromWatsonX && (React.createElement(ShowRank, { index: i, originalRank: doc.original_rank, routeProps: props.routeProps, perPage: recPageSize, pageNo: recommendationState.currentPage })),
                     React.createElement("p", { className: "result-body", dangerouslySetInnerHTML: computeRecommendationAbstract(doc, 300) })));
             })),
             recommendationState.numFound !== 0 && recommendationState.numFound > DEFAULTPAGESIZE && (React.createElement("div", { className: "pagination-footer" },

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,eA+M/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,eA8M/C"}

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

@@ -95,13 +95,12 @@ 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-v5-u-mt-md", isExpanded: isExpanded, isCompact: true },
+        return (React.createElement(Card, { id: "expandable-card", className: "card-support top-recommendations pf-u-mt-md", isExpanded: isExpanded, isCompact: true },
             React.createElement(CardHeader, { onExpand: onExpand, toggleButtonProps: {
                     id: 'toggle-button1',
                     '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"))),