@rh-support/troubleshoot 2.4.10-beta.8 → 2.5.1

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

@@ -1,5 +1,5 @@
 import { Modal, ModalVariant } from '@patternfly/react-core';
-import { AlertMessage, AlertType, LoadingIndicator } from '@rh-support/components';
+import { AlertMessage, AlertType } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
@@ -8,8 +8,10 @@ import isEqual from 'lodash/isEqual';
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
+import { RouteContext } from '../../context/RouteContext';
 import { TCStateContext } from '../../context/TopContentContext';
 import { setCaseDetails } from '../../reducers/CaseReducer';
+import { AppRouteSections } from '../../reducers/RouteConstNTypes';
 import RouteUtils from '../../utils/routeUtils';
 import OpenCaseIssue from '../CaseInformation/OpenCaseIssue';
 import Suggestions from '../Suggestions/Suggestions';
@@ -31,12 +33,14 @@ const AllProductsSelector = forwardRef((props, ref) => {
     var _a, _b;
     const { globalMetadataState: { allProducts, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const caseDispatch = useCaseDispatch();
-    const { product, version, contactSSOName } = useCaseSelector((state) => ({
+    const { product, version, contactSSOName, ABTestVariation } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
         contactSSOName: state.caseDetails.contactSSOName,
+        ABTestVariation: state.ABTestVariation,
     }), isEqual);
     const { topContentState: { topContent }, } = useContext(TCStateContext);
+    const { routeState: { activeSection }, } = useContext(RouteContext);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [showModal, setShowModal] = useState(false);
     const [showModalButton, setShowModalButton] = useState(false);
@@ -76,16 +80,32 @@ const AllProductsSelector = forwardRef((props, ref) => {
         RouteUtils.updateQueryParams(props.routeProps, newParams);
     }
     const entitledProducts = filter(allProducts.data.productsResult, (p) => p.isEntitledProduct);
+    const isATestvariation = ABTestVariation === 'A';
+    const isBTestvariation = ABTestVariation === 'B' || isEmpty(ABTestVariation);
+    // Determine whether to render the ProductVersionDropdownSelector
+    const renderProductVersionDropdownSelector = (activeSection === AppRouteSections.SUMMARIZE && !props.caseCreateExperience) ||
+        activeSection === AppRouteSections.GET_SUPPORT ||
+        isBTestvariation ||
+        (isATestvariation && (props.isOnGetSupportPage || props.isOnReviewPage));
+    // Determine whether to render the OpenCaseIssue component
+    const renderOpenCaseIssue = (isBTestvariation &&
+        (activeSection === AppRouteSections.SUMMARIZE ||
+            activeSection === AppRouteSections.REVIEW ||
+            activeSection === AppRouteSections.SUBMIT_CASE)) ||
+        (isATestvariation &&
+            (activeSection === AppRouteSections.SUMMARIZE ||
+                activeSection === AppRouteSections.REVIEW ||
+                activeSection === AppRouteSections.SUBMIT_CASE)) ||
+        (!props.caseCreateExperience && activeSection === AppRouteSections.SUMMARIZE);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "form-group product-selector-wrapper" },
-            React.createElement("div", { className: "case-details-summary" },
-                React.createElement(OpenCaseIssue, { inlineEditable: false, required: true })),
+        renderProductVersionDropdownSelector && (React.createElement("div", { className: "form-group product-selector-wrapper" },
             React.createElement("div", { className: "all-product-selector-dropdown" },
-                React.createElement(ProductVersionDropdownSelector, { isLoading: allProducts.isFetching, products: props.checkEntitledProduct ? entitledProducts : allProducts.data.productsResult, onProductChange: onProductChange, onVersionChange: onVersionChange, ref: ref }))),
-        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
+                React.createElement(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)
                 ? '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 }),
         showModalButton &&
             !isEmpty(product) &&
             !isEmpty(version) &&
@@ -93,7 +113,7 @@ const AllProductsSelector = forwardRef((props, ref) => {
             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" },
+                React.createElement("button", { key: "cancel", onClick: toggleTCModal, className: "btn btn-app btn-primary", type: "button" },
                     React.createElement(Trans, null, "Cancel")),
             ] },
             React.createElement("span", null,

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

@@ -1,10 +1,13 @@
 import { ISEProduct } from '@cee-eng/hydrajs/@types/models/product';
+import React from 'react';
 interface IProps {
     products: Partial<ISEProduct>[];
     onProductChange: (product: string) => any;
     isNextBtnClickedToShowValidationError: boolean;
     isCaseCreate: boolean;
+    isOnSummaryPage?: boolean;
+    isLoading?: boolean;
 }
-export declare const NewProductDropdownSelector: (props: IProps) => JSX.Element;
+export declare const NewProductDropdownSelector: (props: IProps) => React.JSX.Element;
 export {};
 //# 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;AAUpE,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,gBAuGvD,CAAC"}
+{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;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"}

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

@@ -1,14 +1,20 @@
-import { Divider, Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Divider } from '@patternfly/react-core';
+import { Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+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 { product } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
     }), isEqual);
@@ -18,7 +24,7 @@ export const NewProductDropdownSelector = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.isNextBtnClickedToShowValidationError]);
     const createOption = (product, id, type) => {
-        return (React.createElement(SelectOption, { key: `${type}-${id}`, value: product.name, className: "pf-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
+        return (React.createElement(SelectOption, { key: `${type}-${id}`, value: product.name, className: "pf-v5-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
     };
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);
@@ -31,10 +37,10 @@ export const NewProductDropdownSelector = (props) => {
         const productOptions = props.products.map((p, id) => createOption(p, id, 'product'));
         const allProductsTroubleshootOptions = allProducts.data.productsResult.map((p, id) => createOption(p, id, 'product'));
         return [
-            React.createElement(SelectGroup, { label: t('Top products'), key: "topProducts", value: '' }),
+            React.createElement(SelectGroup, { label: t('Top products'), key: "topProducts", value: '', className: "product-selector-group" }),
             ...topProductOptions,
             React.createElement(Divider, { key: "all-product-divider" }),
-            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '' }),
+            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '', className: "product-selector-group" }),
             ...(props.isCaseCreate ? productOptions : allProductsTroubleshootOptions),
         ];
     };
@@ -61,6 +67,15 @@ export const NewProductDropdownSelector = (props) => {
         props.onProductChange(selection);
         setIsOpen(false);
     };
+    useEffect(() => {
+        product &&
+            props.isOnSummaryPage &&
+            setIsSelectedProductSupportedForCustomer(isProductSupportedForCustomer(product, allProducts.data.productsResult));
+    }, [allProducts.data.productsResult, product, props.isOnSummaryPage]);
     return (React.createElement("div", null,
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search for or select a product'), onToggle: onToggle, onSelect: onSelect, isOpen: isOpen, placeholderText: t('Search for or select a product'), "aria-labelledby": t('Product-selector'), onFilter: onFilter, selections: product, validated: isEmpty(product) && showValidationLocal ? 'error' : 'default', "data-tracking-id": "get-support-product-dropdown-selector" }, getOptions())));
+        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search for or select a product'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, isOpen: isOpen, placeholderText: t('Search for or select a product'), "aria-labelledby": t('Product-selector'), onFilter: onFilter, selections: product, validated: isEmpty(product) && showValidationLocal ? 'error' : 'default', "data-tracking-id": "get-support-product-dropdown-selector", 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(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.")))));
 };

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

@@ -1,7 +1,8 @@
+import React from 'react';
 interface IProps {
     onVersionChange: (option: string) => void;
     isNextBtnClickedToShowValidationError: boolean;
 }
-export declare const NewProductVersionSelector: (props: IProps) => JSX.Element;
+export declare const NewProductVersionSelector: (props: IProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=NewProductVersionSelector.d.ts.map

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":"AAWA,UAAU,MAAM;IACZ,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,yBAAyB,UAAW,MAAM,gBAmItD,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,sBAoItD,CAAC"}

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

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

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

@@ -1,7 +1,13 @@
-import { RouteComponentProps } from 'react-router';
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
 interface IProps {
     routeProps: RouteComponentProps<IRouteUrlParams>;
+    userSeenRecommendations?: (value: React.SetStateAction<boolean>) => void;
+    userClickedNextonRecommendations?: boolean;
+    resultsRowRef?: React.MutableRefObject<HTMLDivElement | null>;
+    isOnGetSupportPage?: boolean;
+    caseCreateExperience?: boolean;
 }
 /**
  * Responsible for:
@@ -11,6 +17,6 @@ interface IProps {
  *
  * @param props
  */
-export default function ProductSelector(props: IProps): JSX.Element;
+export default function ProductSelector(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ProductSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProductSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelector.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAMlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eAgFpD"}
+{"version":3,"file":"ProductSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAOlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACzE,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBA0GpD"}

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

@@ -1,12 +1,16 @@
 import { Alert, AlertVariant } from '@patternfly/react-core';
 import { AlertMessage, AlertType, ErrorBoundary } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { getConfigField, PCM_CONFIG_FIELD_TYPE } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useCaseSelector } from '../../context/CaseContext';
+import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
+import { useFetchCVEData } from '../../hooks/useFetchCVEData';
+import { setCaseState } from '../../reducers/CaseReducer';
+import { CveModal } from '../Cve/CveModal';
 import { EARuleWidget } from '../Recommendations/EARules/EARuleWidget';
 import Recommendations from '../Recommendations/Recommendations';
 import { AllProductsSelector } from './AllProductsSelector';
@@ -20,37 +24,55 @@ import { ProductSelectorLoader } from './ProductSelectorLoader';
  * @param props
  */
 export default function ProductSelector(props) {
+    const { cveRecommendation } = useFetchCVEData();
     const { t } = useTranslation();
-    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
-    const { product, version } = useCaseSelector((state) => ({
+    const { globalMetadataState: { allProducts, pcmConfig }, } = useContext(GlobalMetadataStateContext);
+    const { product, version, ABTestVariation } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
+        ABTestVariation: state.ABTestVariation,
     }), isEqual);
     const { routeState: { isCaseCreate }, } = useContext(RouteContext);
+    const caseDispatch = useCaseDispatch();
+    const cveModalEnabledConfig = getConfigField(pcmConfig.data, 'isCVEModalEnabled', PCM_CONFIG_FIELD_TYPE.STRING);
+    const isCVEModalEnabled = cveModalEnabledConfig === '1';
+    const isATestvariation = ABTestVariation === 'A';
+    const isBTestvariation = ABTestVariation === 'B' || isEmpty(ABTestVariation);
+    useEffect(() => {
+        if (!isCVEModalEnabled) {
+            setCaseState(caseDispatch, {
+                isCveModalOpened: false,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isCVEModalEnabled]);
     /**
      * The all product selector and top product selector should always be "selected" because
      * the all product selector needs to show the selection from the top products selector and the top product selector
      * doesn't matter becasue it will be hidden whenever a product is selected.
      */
     const productSelectorRef = useRef(null);
+    const rederProductSelect = (React.createElement("form", null,
+        (cveRecommendation === null || cveRecommendation === void 0 ? void 0 : cveRecommendation.length) !== 0 && isCVEModalEnabled && React.createElement(CveModal, null),
+        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,
-        allProducts.isFetching && React.createElement(ProductSelectorLoader, null),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
-        !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 }),
-                product === 'Subscription Watch' && (React.createElement(Alert, { isInline: true, variant: AlertVariant.warning, title: React.createElement(Trans, null,
-                        ' ',
-                        "If you're having a subscription issue that doesn't relate to",
-                        ' ',
-                        React.createElement("a", { href: "/products/subscription-central", rel: "noopener noreferrer", target: "_blank" }, "Subscription Watch"),
-                        "product, then please contact",
-                        ' ',
-                        React.createElement("a", { href: "/support/contact", "data-tracking-id": "contact-customer-service" }, "customer service"),
-                        ' ',
-                        "for help.") })),
-                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, { routeProps: props.routeProps })))))))));
+        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 }),
+        isBTestvariation
+            ? !allProducts.isFetching && !allProducts.isError && rederProductSelect
+            : isATestvariation && rederProductSelect,
+        product === 'Subscription Watch' && (React.createElement(Alert, { isInline: true, variant: AlertVariant.warning, title: React.createElement(Trans, null,
+                ' ',
+                "If you're having a subscription issue that doesn't relate to",
+                ' ',
+                React.createElement("a", { href: "/products/subscription-central", rel: "noopener noreferrer", target: "_blank" }, "Subscription Watch"),
+                "product, then please contact",
+                ' ',
+                React.createElement("a", { href: "/support/contact", "data-tracking-id": "contact-customer-service" }, "customer service"),
+                ' ',
+                "for help.") })),
+        isBTestvariation && React.createElement(EARuleWidget, null),
+        !(props === null || props === void 0 ? void 0 : props.isOnGetSupportPage) && (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, { routeProps: props.routeProps, userSeenRecommendations: props.userSeenRecommendations, userClickedNextonRecommendationsValue: props.userClickedNextonRecommendations, resultsRowRef: props.resultsRowRef }))))))));
 }

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

@@ -1,2 +1,3 @@
-export declare function ProductSelectorLoader(): JSX.Element;
+import React from 'react';
+export declare function ProductSelectorLoader(): React.JSX.Element;
 //# sourceMappingURL=ProductSelectorLoader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProductSelectorLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelectorLoader.tsx"],"names":[],"mappings":"AAGA,wBAAgB,qBAAqB,gBAkBpC"}
+{"version":3,"file":"ProductSelectorLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelectorLoader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,qBAAqB,sBAkBpC"}

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

@@ -8,6 +8,9 @@ interface IProps extends IDClassNameProps {
     disabled?: boolean;
     htmlForId?: string;
     isLoading?: boolean;
+    isOnSummaryPage?: boolean;
+    loadTCOnChange?: boolean;
+    isFetching?: boolean;
 }
 declare const ProductVersionDropdownSelector: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
 export { ProductVersionDropdownSelector };

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

@@ -1 +1 @@
-{"version":3,"file":"ProductVersionDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductVersionDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAiC,MAAM,OAAO,CAAC;AAOtD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAOD,QAAA,MAAM,8BAA8B,wEAmClC,CAAC;AAEH,OAAO,EAAE,8BAA8B,EAAE,CAAC"}
+{"version":3,"file":"ProductVersionDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductVersionDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAiC,MAAM,OAAO,CAAC;AAOtD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAOD,QAAA,MAAM,8BAA8B,wEAuDlC,CAAC;AAEH,OAAO,EAAE,8BAA8B,EAAE,CAAC"}

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

@@ -1,3 +1,4 @@
+import { LoadingIndicator } from '@rh-support/components';
 import React, { forwardRef, useContext } from 'react';
 import { Trans } from 'react-i18next';
 import { RouteContext } from '../../context/RouteContext';
@@ -15,13 +16,20 @@ const ProductVersionDropdownSelector = forwardRef((props, ref) => {
                 React.createElement(Trans, null, "Product"),
                 ' ',
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-            React.createElement(NewProductDropdownSelector, { products: props.products, onProductChange: props.onProductChange, isNextBtnClickedToShowValidationError: isNextBtnClickedToShowValidationError, isCaseCreate: isCaseCreate })),
+            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(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" })))),
+            React.createElement(React.Fragment, null)),
         React.createElement("div", { className: "version-selector-wrapper" },
             React.createElement("label", { htmlFor: "version-selector-dropdown-toggle" },
                 React.createElement(Trans, null, "Version"),
                 ' ',
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-            React.createElement(NewProductVersionSelector, { onVersionChange: props.onVersionChange, isNextBtnClickedToShowValidationError: isNextBtnClickedToShowValidationError }))));
+            React.createElement("div", { className: "version-dropdown-wrapper" },
+                React.createElement(NewProductVersionSelector, { onVersionChange: props.onVersionChange, isNextBtnClickedToShowValidationError: isNextBtnClickedToShowValidationError }),
+                React.createElement(LoadingIndicator, { show: props.isFetching && props.loadTCOnChange })))));
 });
 ProductVersionDropdownSelector.defaultProps = defaultProps;
 export { ProductVersionDropdownSelector };

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

@@ -2,8 +2,11 @@
  * 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;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"}
+{"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"}

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 }) => {
+const AlertToastWrapper = ({ submitCaseAndNavigate, routeProps }) => {
     const { routeState: { activeSection }, } = useContext(RouteContext);
     const [isCriticalSolutionsVisible, setIsCriticalSolutionsVisible] = useState(true);
     const { caseType } = useCaseSelector((state) => ({
@@ -33,6 +33,6 @@ const AlertToastWrapper = ({ submitCaseAndNavigate }) => {
     return (React.createElement(AlertGroup, { isToast: true },
         isCriticalSolutionsVisible && isNotAnIdea && React.createElement(CriticalSolutionsToast, { userClosed: userClosed }),
         !hideClusterIdReportModal && isNotAnIdea && React.createElement(ClusterRecommendationToast, null),
-        React.createElement(ResubmitToast, { submitCaseAndNavigate: submitCaseAndNavigate })));
+        React.createElement(ResubmitToast, { submitCaseAndNavigate: submitCaseAndNavigate, routeProps: routeProps })));
 };
 export default AlertToastWrapper;

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

@@ -1,8 +1,10 @@
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
 interface IProps {
     routeProps: RouteComponentProps<IRouteUrlParams>;
+    className?: string;
 }
-export declare function AsideResults(props: IProps): JSX.Element;
+export declare function AsideResults(props: IProps): React.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":"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"}
+{"version":3,"file":"AsideResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AsideResults.tsx"],"names":[],"mappings":"AAgBA,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"}

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

@@ -9,8 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { pcm, search } from '@cee-eng/hydrajs';
 import { useDebounce } from '@rh-support/components';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { computeRecommendationAbstract, computeRecommendationTitle, getConfigField, getSolrParams, getTrimmedSpecialCharacters, PCM_CONFIG_FIELD_TYPE, PreviousCaseTypes, replaceHighlightingData, } from '@rh-support/utils';
+import { computeRecommendationAbstract, computeRecommendationTitle, convertObjToEncodedQueryParams, dtmTrackEventRecommendationListingItemClicked, getSolrParams, getTrimmedCharacters, PreviousCaseTypes, replaceHighlightingData, } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useRef } from 'react';
@@ -20,32 +19,24 @@ import { RecommendationDispatchContext, RecommendationStateContext } from '../..
 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(props) {
     /*
      * Sidebar recommendation logic
      */
-    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) => ({
+    const { isSelectedAccounntSecureSupport, product, version, caseResourceLinks, summary, issue, caseType } = useCaseSelector((state) => ({
         isSelectedAccounntSecureSupport: state.selectedAccountDetails.data.secureSupport,
         product: state.caseDetails.product,
         version: state.caseDetails.version,
         caseResourceLinks: state.caseDetails.caseResourceLinks,
         summary: state.caseDetails.summary,
         issue: state.caseDetails.issue,
-        environment: state.caseDetails.environment,
-        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
@@ -59,7 +50,7 @@ export function AsideResults(props) {
         product: product,
         version: version,
         summary: summary,
-        description: getDescriptionWOQues(issue, environment, periodicityOfIssue, timeFramesAndUrgency),
+        description: issue, // on recommendation API we only pass issue and skip other KTQs
     });
     // abort controller ref
     const controllerRef = useRef(new AbortController());
@@ -76,18 +67,18 @@ export function AsideResults(props) {
                     product: product,
                     version: version,
                     summary: summary,
-                    description: getDescriptionWOQues(issue, environment, periodicityOfIssue, timeFramesAndUrgency),
+                    description: issue, // on recommendation API we only pass issue and skip other KTQs
                 };
                 const queryFilters = {
                     id: { values: recommendationState.insightsKcsIds, exclude: true },
                 };
-                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 payloadData = {
+                    product: product,
+                    version: version,
+                    summary: getTrimmedCharacters(payload.summary, WATSONX_SUMMARY_LIMIT),
+                    description: getTrimmedCharacters(payload.description, WATSONX_DESCRIPTION_LIMIT),
+                };
+                const response = yield search.getWatsonXRecommendationsForCase2(convertObjToEncodedQueryParams(Object.assign({ rerank: true }, getSolrParams(PAGE_SIZE, 129, queryFilters))), payloadData, controllerRef.current.signal);
                 const sideDocs = replaceHighlightingData(response.response.docs, response.highlighting);
                 recommendationDispatch({
                     type: RecommendationsConstants.receiveSidebarRecommendation,
@@ -117,10 +108,7 @@ export function AsideResults(props) {
         version,
         summary,
         issue,
-        environment,
         activeSection,
-        timeFramesAndUrgency,
-        periodicityOfIssue,
         recommendationState.insightsKcsIds,
     ], 2000);
     const canShowSideRecommendations = () => showSidebarRecommendationsSections.includes(activeSection) &&
@@ -129,26 +117,27 @@ export function AsideResults(props) {
     const onResourceClick = (doc, index) => (event) => {
         if (isSelectedAccounntSecureSupport)
             return;
-        createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.RECOMMENDATIONS_ASIDE, [getSessResFromRec(doc, SessionResourceVisibility.VISITED, index)], payload);
+        const rank = index + 1 + PAGE_SIZE * ((recommendationState.currentPage || 1) - 1);
+        createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.RECOMMENDATIONS_ASIDE, [getSessResFromRec(doc, SessionResourceVisibility.VISITED, index + 1)], payload);
+        dtmTrackEventRecommendationListingItemClicked(window.location.href, activeSection, 'middle', doc.id, rank, doc.allTitle, doc.view_uri, 'Recommendation Aside', 'Live troubleshooting powered by OpenShift AI');
     };
     useEffect(() => {
         if (isSelectedAccounntSecureSupport)
             return;
-        createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.RECOMMENDATIONS_ASIDE, getSessResFromRecs(recommendationState.sideRecommendation, SessionResourceVisibility.PRESENTED), JSON.stringify(payload));
+        createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.RECOMMENDATIONS_ASIDE, getSessResFromRecs(recommendationState.sideRecommendation, SessionResourceVisibility.PRESENTED), typeof payload === 'string' ? payload : JSON.stringify(payload));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [recommendationState.sideRecommendation, activeSessionId, activeSection]);
     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" },
-        React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" }, isIdea ? React.createElement(Trans, null, "Search recommendations") : React.createElement(Trans, null, "Knowledgebase recommendations")),
+    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" }, isIdea ? React.createElement(Trans, null, "Search recommendations") : React.createElement(Trans, null, "Articles recommended by OpenShift AI")),
         React.createElement("div", { className: "card-body" },
             React.createElement("ul", { className: "list-flat" }, recommendationState.sideRecommendation.map((doc, index) => {
                 var _a, _b;
                 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.d.ts

@@ -1,7 +1,8 @@
 import { IClusterRecommendation } from '@cee-eng/hydrajs/@types/api/pcm/preCaseDiagnostics';
+import React from 'react';
 interface IProps {
     clusterRecommendations: IClusterRecommendation[];
 }
-export declare function ClusterRecommendationItems(props: IProps): JSX.Element;
+export declare function ClusterRecommendationItems(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ClusterRecommendationItems.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ClusterRecommendationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationItems.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AAe5F,UAAU,MAAM;IACZ,sBAAsB,EAAE,sBAAsB,EAAE,CAAC;CACpD;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,eA0EvD"}
+{"version":3,"file":"ClusterRecommendationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/ClusterRecommendationItems.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AAI5F,OAAO,KAAgC,MAAM,OAAO,CAAC;AAWrD,UAAU,MAAM;IACZ,sBAAsB,EAAE,sBAAsB,EAAE,CAAC;CACpD;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,qBAiFvD"}