@rh-support/troubleshoot 2.6.340 → 2.6.349

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutions.js

@@ -22,14 +22,12 @@ import { search } from '@cee-eng/hydrajs';
 import { Button, Card, CardBody, CardExpandableContent, CardHeader, Label, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, } from '@patternfly/react-core';
 import { PaginatedList, ToastNotification } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
-// TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-// import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
+import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import { getSolrParams } from '@rh-support/utils';
 import { isEmpty } from 'lodash';
 import find from 'lodash/find';
 import isEqual from 'lodash/isEqual';
-// TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-// import some from 'lodash/some';
+import some from 'lodash/some';
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CaseStatusEnum } from '../../../constants/caseDetailsConstants';
@@ -44,6 +42,7 @@ import { fetchRecommendations, fetchWatsonXRecommendations } from '../../../redu
 import { extractKTQuestion1FromDescription } from '../../../utils/caseUtils';
 import { usePostComment } from '../../shared/usePostComment';
 import { CaseSolutionsItem } from './CaseSolutionsItem';
+import { HandpickedItem } from './HandpicketItem';
 // some of the pinned and hadpicked titles are set to 'Red Hat Knowledge Base'
 // this workaround is added till backend fix
 const titleFix = (recommendations, allDocs) => __awaiter(void 0, void 0, void 0, function* () {
@@ -119,32 +118,27 @@ export const CaseSolutions = forwardRef((props, ref) => {
     }), isEqual);
     const caseDispatch = useCaseDispatch();
     const caseOverviewDispatch = useContext(CaseOverviewDispatchContext);
-    // TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
-    // const [isExpanded, setIsExpanded] = useState<boolean>(false);
-    // const onExpand = () => {
-    //     setIsExpanded(!isExpanded);
-    // };
+    const [isExpanded, setIsExpanded] = useState(false);
+    const onExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
     const { recommendationState: { isLoadingRecommendations, allDocs }, } = useRecommendationStateContext();
     const { globalMetadataState: { loggedInUsersAccount }, } = useGlobalStateContext();
     const recommendationsDispatch = useRecommendationDispatchContext();
     const { postComment } = usePostComment({ caseNumber: props.caseNumber });
     const { caseNumber, isSecureSupportAccount } = props;
-    // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-    // const [isPinLoading, setIsPinLoading] = useState({});
+    const [isPinLoading, setIsPinLoading] = useState({});
     const [isCaseCloseLoading, setIsCaseCloseLoading] = useState(false);
     const [pinnedOpen, setPinnedOpen] = useState(true);
     const [recommendations, setRecommendations] = useState([]);
     const [topRecommendations, setTopRecommendations] = useState([]);
     const [isCloseCaseModalOpen, setIsCloseCaseModalOpen] = useState(false);
-    // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-    // const ability = useContext(AbilityContext);
+    const ability = useContext(AbilityContext);
     const { t } = useTranslation();
-    // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-    // const hasPin = some(recommendations, (p) => p.isPinned);
-    // TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
-    // const hasLink = some(recommendations, (p) => p.isLinked);
+    const hasPin = some(recommendations, (p) => p.isPinned);
+    const hasLink = some(recommendations, (p) => p.isLinked);
     const getCommentBody = () => {
-        return `<p><strong>Reason for closing case:</strong></p><p>Other. Found a pinned article that perfectly resolved the issue. Closing this case now.</p>`;
+        return `**Reason for closing case:** \nOther. Found a pinned article that perfectly resolved the issue. Closing this case now.`;
     };
     const handleCaseClose = () => __awaiter(void 0, void 0, void 0, function* () {
         setStatusUpdating(caseOverviewDispatch, true);
@@ -157,134 +151,88 @@ export const CaseSolutions = forwardRef((props, ref) => {
                 updateDiscussionState: true,
                 doNotChangeStatus: true,
             });
-            setIsCloseCaseModalOpen(false);
             ToastNotification.addSuccessMessage(t('Status has been successfully updated'));
+            setIsCloseCaseModalOpen(false);
         }
         catch (err) {
-            caseUpdateError.showError(err, t('Status failed to update, try refreshing the page. Please contact us if the problem persists.'));
+            caseUpdateError.showError(err, t('Status failed to update'));
         }
         finally {
             setIsCaseCloseLoading(false);
             setStatusUpdating(caseOverviewDispatch, false);
         }
     });
-    // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-    // const updateRecommendation = async (recommendationToUpdate: ICaseDetailAsideRecommendation, linked: boolean) => {
-    //     const recommendation: any = {
-    //         resourceId: recommendationToUpdate.resourceId,
-    //         resourceType: recommendationToUpdate.resourceType,
-    //         linked,
-    //     };
-    //
-    //     if (recommendationToUpdate.resourceViewURI)
-    //         recommendation.resourceViewURI = recommendationToUpdate.resourceViewURI;
-    //
-    //     // for some doc types like Errata we don't have resourceURI. If resourceURI was not available,
-    //     // we constructe a 'fake' one to be used when linking in SFDC
-    //     recommendation.resourceURI = recommendationToUpdate.resourceURI
-    //         ? recommendationToUpdate.resourceURI
-    //         : recommendationToUpdate.resourceViewURI
-    //         ? recommendationToUpdate.resourceViewURI
-    //         : recommendationToUpdate.resourceId;
-    //
-    //     await updateCaseDetails(
-    //         caseDispatch,
-    //         caseNumber,
-    //         {
-    //             caseResourceLinks: [recommendation],
-    //         },
-    //         true
-    //     );
-    // };
-    // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-    // const canPinUnpin = ability.can(
-    //     resourceActions.PATCH,
-    //     resources.CASE_DETAILS,
-    //     CaseDetailsFields.CASE_DETAILS_PIN_UNPIN_RESOURCES
-    // );
-    // TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
-    // const canLinkUnlink = ability.can(
-    //     resourceActions.PATCH,
-    //     resources.CASE_DETAILS,
-    //     CaseDetailsFields.CASE_DETAILS_LINK_UNLINK_RESOURCES
-    // );
+    const updateRecommendation = (recommendationToUpdate, linked) => __awaiter(void 0, void 0, void 0, function* () {
+        const recommendation = {
+            resourceId: recommendationToUpdate.resourceId,
+            resourceType: recommendationToUpdate.resourceType,
+            linked,
+        };
+        if (recommendationToUpdate.resourceViewURI)
+            recommendation.resourceViewURI = recommendationToUpdate.resourceViewURI;
+        // for some doc types like Errata we don't have resourceURI. If resourceURI was not available,
+        // we constructe a 'fake' one to be used when linking in SFDC
+        recommendation.resourceURI = recommendationToUpdate.resourceURI
+            ? recommendationToUpdate.resourceURI
+            : recommendationToUpdate.resourceViewURI
+                ? recommendationToUpdate.resourceViewURI
+                : recommendationToUpdate.resourceId;
+        yield updateCaseDetails(caseDispatch, caseNumber, {
+            caseResourceLinks: [recommendation],
+        }, true);
+    });
+    const canPinUnpin = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_PIN_UNPIN_RESOURCES);
+    const canLinkUnlink = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_LINK_UNLINK_RESOURCES);
     const addDtmEvent = (stepName) => {
         // reserve for when fixing dtm
     };
-    // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore when pin/unpin is re-enabled
-    // const updateRecommendations =
-    //     (recommendationToUpdate: ICaseDetailAsideRecommendation, isPinned: boolean, isLinked: boolean) => async () => {
-    //         try {
-    //             setIsPinLoading((prevPiningMap) => ({ ...prevPiningMap, [recommendationToUpdate.resourceId]: true }));
-    //             await updateRecommendation(recommendationToUpdate, isLinked !== undefined ? !isLinked : !isPinned);
-    //
-    //             setTopRecommendations((prevTopRecs) =>
-    //                 prevTopRecs.map((rec) =>
-    //                     rec.resourceId === recommendationToUpdate.resourceId
-    //                         ? {
-    //                               ...rec,
-    //                               isLinked: isLinked !== undefined ? !isLinked : !!rec.isLinked,
-    //                               isPinned: isPinned !== undefined ? !isPinned : !!rec.isPinned,
-    //                           }
-    //                         : rec
-    //                 )
-    //             );
-    //
-    //             setRecommendations((prevRecs) => {
-    //                 const toBeAdded = !prevRecs.some((r) => r.resourceId === recommendationToUpdate.resourceId);
-    //
-    //                 if (toBeAdded) {
-    //                     return [
-    //                         ...prevRecs,
-    //                         {
-    //                             ...recommendationToUpdate,
-    //                             isLinked: isLinked !== undefined ? !isLinked : recommendationToUpdate.isLinked,
-    //                             isPinned: isPinned !== undefined ? !isPinned : recommendationToUpdate.isPinned,
-    //                             isPinnedAndLinked:
-    //                                 (isPinned !== undefined ? !isPinned : recommendationToUpdate.isPinned) &&
-    //                                 (isLinked !== undefined ? !isLinked : recommendationToUpdate.isLinked),
-    //                         },
-    //                     ];
-    //                 } else {
-    //                     return prevRecs
-    //                         .map((rec) =>
-    //                             rec.resourceId === recommendationToUpdate.resourceId
-    //                                 ? {
-    //                                       ...rec,
-    //                                       isLinked: isLinked !== undefined ? !isLinked : !!rec.isLinked,
-    //                                       isPinned: isPinned !== undefined ? !isPinned : !!rec.isPinned,
-    //                                       isPinnedAndLinked:
-    //                                           (isPinned !== undefined ? !isPinned : rec.isPinned) &&
-    //                                           (isLinked !== undefined ? !isLinked : rec.isLinked),
-    //                                   }
-    //                                 : rec
-    //                         )
-    //                         .filter((rec) => rec.isLinked || rec.isPinned);
-    //                 }
-    //             });
-    //             setIsPinLoading((prevPiningMap) => ({ ...prevPiningMap, [recommendationToUpdate.resourceId]: false }));
-    //         } catch (error) {
-    //             if (error.status === 403) {
-    //                 ToastNotification.addDangerMessage(
-    //                     t('You do not have the proper entitlements to pin a recommendation.'),
-    //                     <>
-    //                         {t('Please')}
-    //                         <a href="/support/contact/customerService"> {t('contact Customer Service')} </a>
-    //                         {t('if you think this is an error.')}
-    //                     </>
-    //                 );
-    //             } else {
-    //                 isPinned !== undefined || isLinked !== undefined
-    //                     ? caseUpdateError.showError(error, t('Could not unpin the solution'))
-    //                     : caseUpdateError.showError(error, t('Could not pin the solution'));
-    //             }
-    //             setIsPinLoading((prevPiningMap) => {
-    //                 const newMap = { ...prevPiningMap };
-    //                 delete newMap[recommendationToUpdate.resourceId];
-    //                 return newMap;
-    //             });
-    //         }
-    //     };
+    const updateRecommendations = (recommendationToUpdate, isPinned, isLinked) => () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setIsPinLoading((prevPiningMap) => (Object.assign(Object.assign({}, prevPiningMap), { [recommendationToUpdate.resourceId]: true })));
+            yield updateRecommendation(recommendationToUpdate, isLinked !== undefined ? !isLinked : !isPinned);
+            setTopRecommendations((prevTopRecs) => prevTopRecs.map((rec) => rec.resourceId === recommendationToUpdate.resourceId
+                ? Object.assign(Object.assign({}, rec), { isLinked: isLinked !== undefined ? !isLinked : !!rec.isLinked, isPinned: isPinned !== undefined ? !isPinned : !!rec.isPinned }) : rec));
+            setRecommendations((prevRecs) => {
+                const toBeAdded = !prevRecs.some((r) => r.resourceId === recommendationToUpdate.resourceId);
+                if (toBeAdded) {
+                    return [
+                        ...prevRecs,
+                        Object.assign(Object.assign({}, recommendationToUpdate), { isLinked: isLinked !== undefined ? !isLinked : recommendationToUpdate.isLinked, isPinned: isPinned !== undefined ? !isPinned : recommendationToUpdate.isPinned, isPinnedAndLinked: (isPinned !== undefined ? !isPinned : recommendationToUpdate.isPinned) &&
+                                (isLinked !== undefined ? !isLinked : recommendationToUpdate.isLinked) }),
+                    ];
+                }
+                else {
+                    return prevRecs
+                        .map((rec) => rec.resourceId === recommendationToUpdate.resourceId
+                        ? Object.assign(Object.assign({}, rec), { isLinked: isLinked !== undefined ? !isLinked : !!rec.isLinked, isPinned: isPinned !== undefined ? !isPinned : !!rec.isPinned, isPinnedAndLinked: (isPinned !== undefined ? !isPinned : rec.isPinned) &&
+                                (isLinked !== undefined ? !isLinked : rec.isLinked) }) : rec)
+                        .filter((rec) => rec.isLinked || rec.isPinned);
+                }
+            });
+            setIsPinLoading((prevPiningMap) => (Object.assign(Object.assign({}, prevPiningMap), { [recommendationToUpdate.resourceId]: false })));
+        }
+        catch (error) {
+            if (error.status === 403) {
+                ToastNotification.addDangerMessage(t('You do not have the proper entitlements to pin a recommendation.'), React.createElement(React.Fragment, null,
+                    t('Please'),
+                    React.createElement("a", { href: "/support/contact/customerService" },
+                        " ",
+                        t('contact Customer Service'),
+                        " "),
+                    t('if you think this is an error.')));
+            }
+            else {
+                isPinned !== undefined || isLinked !== undefined
+                    ? caseUpdateError.showError(error, t('Could not unpin the solution'))
+                    : caseUpdateError.showError(error, t('Could not pin the solution'));
+            }
+            setIsPinLoading((prevPiningMap) => {
+                const newMap = Object.assign({}, prevPiningMap);
+                delete newMap[recommendationToUpdate.resourceId];
+                return newMap;
+            });
+        }
+    });
     // fetch top recommendations
     useEffect(() => {
         function fetchRecs() {
@@ -344,71 +292,18 @@ export const CaseSolutions = forwardRef((props, ref) => {
         }
     }, [allDocs, isFetchingCaseDetails, isLoadingRecommendations, recomendationsObj]);
     const renderTopRecommendations = (recommendation, index, type) => (React.createElement(React.Fragment, null,
-        React.createElement(CaseSolutionsItem
-        // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore showPin when pin/unpin is re-enabled
-        , { 
-            // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore showPin when pin/unpin is re-enabled
-            showPin: false, type: type, pinTitle: '', isPinLoading: {}, index: index, recommendation: recommendation, onPinClicked: () => { }, onLinkClick: (name) => addDtmEvent(name) })));
-    // TODO: KCS pin/unpin disabled -- PCM-15276 -- restore showPin when pin/unpin is re-enabled
-    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: false, type: type, pinTitle: '', isPinLoading: {}, index: index, recommendation: recommendation, onPinClicked: () => { }, onLinkClick: (name) => addDtmEvent(name) }));
-    // TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
+        canPinUnpin && (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined), onLinkClick: (name) => addDtmEvent(name) })),
+        canLinkUnlink && (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? t('Unlink') : t('Link'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked), onLinkClick: (name) => addDtmEvent(name) }))));
+    // customer logged in: we show pins and perform pin/unpin
+    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, isPinned: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined), onLinkClick: (name) => addDtmEvent(name) }));
     // customer logged in: we show links but perform pin/unpin
-    // const renderHandpickedCustomerView = (
-    //     recommendation: ICaseDetailAsideRecommendation,
-    //     index: number,
-    //     type: string
-    // ) => (
-    //     <HandpickedItem
-    //         type={type}
-    //         caseNumber={props.caseNumber}
-    //         pinTitle={recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin')}
-    //         isPinLoading={isPinLoading}
-    //         index={index}
-    //         recommendation={recommendation}
-    //         onRecommendationLike={() => setIsCloseCaseModalOpen(true)}
-    //         onLinkClick={(name) => addDtmEvent(name)}
-    //     />
-    // );
-    // TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
+    const renderHandpickedCustomerView = (recommendation, index, type) => (React.createElement(HandpickedItem, { type: type, caseNumber: props.caseNumber, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onRecommendationLike: () => setIsCloseCaseModalOpen(true), onLinkClick: (name) => addDtmEvent(name) }));
     // redhatter logged in: we show pins but perform link/unlink
-    // const renderPinnedByCustomerRedhatterView = (
-    //     recommendation: ICaseDetailAsideRecommendation,
-    //     index: number,
-    //     type: string
-    // ) => (
-    //     <CaseSolutionsItem
-    //         showLink={true}
-    //         type={type}
-    //         pinTitle={recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin')}
-    //         isPinLoading={isPinLoading}
-    //         index={index}
-    //         recommendation={recommendation}
-    //         onPinClicked={updateRecommendations(recommendation, undefined, recommendation.isLinked)}
-    //         onLinkClick={(name) => addDtmEvent(name)}
-    //     />
-    // );
-    // TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
+    const renderPinnedByCustomerRedhatterView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked), onLinkClick: (name) => addDtmEvent(name) }));
     // redhatter logged in: we show links and perform link/unlink
-    // const renderHandPickedByRedHatter = (
-    //     recommendation: ICaseDetailAsideRecommendation,
-    //     index: number,
-    //     type: string
-    // ) => (
-    //     <div className="pf-v6-u-ml-lg">
-    //         <CaseSolutionsItem
-    //             showLink={true}
-    //             type={type}
-    //             pinTitle={recommendation.isLinked ? t('Unlink') : t('Link')}
-    //             isPinLoading={isPinLoading}
-    //             index={index}
-    //             recommendation={recommendation}
-    //             onPinClicked={updateRecommendations(recommendation, undefined, recommendation.isLinked)}
-    //             onLinkClick={(name) => addDtmEvent(name)}
-    //         />
-    //     </div>
-    // );
-    // TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
-    // const linkedRecommendations = recommendations.filter((r) => r.isLinked);
+    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement("div", { className: "pf-v6-u-ml-lg" },
+        React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? t('Unlink') : t('Link'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked), onLinkClick: (name) => addDtmEvent(name) })));
+    const linkedRecommendations = recommendations.filter((r) => r.isLinked);
     const pinnedRecommendations = recommendations.filter((r) => r.isPinned);
     const closeCaseModal = (React.createElement(Modal, { variant: ModalVariant.small, isOpen: isCloseCaseModalOpen && caseStatus !== CaseStatusEnum.CLOSED, onClose: () => setIsCloseCaseModalOpen(false) },
         React.createElement(ModalHeader, { title: t('Did this solve your case?') }),
@@ -421,19 +316,30 @@ export const CaseSolutions = forwardRef((props, ref) => {
                 React.createElement(Trans, null, "Close case")))));
     return (React.createElement(React.Fragment, null,
         closeCaseModal,
+        linkedRecommendations.length > 0 && (React.createElement(Card, { isExpanded: isExpanded },
+            React.createElement(CardHeader, { className: "pf-v6-u-display-flex", onExpand: onExpand },
+                React.createElement("span", null, canLinkUnlink ? React.createElement(Trans, null, "Handpicked by you") : React.createElement(Trans, null, "Handpicked for this case")),
+                React.createElement("span", { className: "badge-item pf-v6-u-font-size-sm pf-v6-u-mx-sm" }, linkedRecommendations.length)),
+            React.createElement(CardExpandableContent, null,
+                React.createElement(CardBody, null, !hasLink ? (!canLinkUnlink ? (React.createElement(Trans, null, "If a Red Hat engineer finds an article or solution that can help with your case, they'll pin it here.")) : (React.createElement(React.Fragment, null))) : (React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: linkedRecommendations.map((rec, index) => canLinkUnlink
+                        ? renderHandPickedByRedHatter(rec, index, 'handpicked-recommendations')
+                        : renderHandpickedCustomerView(rec, index, 'handpicked-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
+                        { title: '5', value: 5 },
+                        { title: '10', value: 10 },
+                    ] })))))),
         pinnedRecommendations.length > 0 && (React.createElement(Card, { isExpanded: pinnedOpen },
             React.createElement(CardHeader, { className: "pf-v6-u-display-flex", onExpand: () => setPinnedOpen((pre) => !pre) },
                 React.createElement("h3", { className: "card-heading case-detail-panel-card-heading" },
-                    React.createElement("span", null,
-                        React.createElement(Trans, null, "My pinned recommendations")),
+                    React.createElement("span", null, canLinkUnlink ? (React.createElement(Trans, null, "Pinned by customer")) : (React.createElement(Trans, null, "My pinned recommendations"))),
                     React.createElement("span", { className: "badge-item pf-v6-u-font-size-sm pf-v6-u-mx-sm", style: { lineHeight: '18px' } },
                         React.createElement(Label, null, pinnedRecommendations.length)))),
             React.createElement(CardExpandableContent, null,
-                React.createElement(CardBody, null,
-                    React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: pinnedRecommendations.map((rec, index) => renderPinsByCustomer(rec, index, 'pinned-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
-                            { title: '5', value: 5 },
-                            { title: '10', value: 10 },
-                        ] }))))),
+                React.createElement(CardBody, null, !hasPin ? (!canLinkUnlink ? (React.createElement(Trans, null, "When you save a recommended article or solution, you'll see it here. Saved items display only in this case and are not saved for later.")) : (React.createElement(React.Fragment, null))) : (React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: pinnedRecommendations.map((rec, index) => canLinkUnlink
+                        ? renderPinnedByCustomerRedhatterView(rec, index, 'pinned-recommendations')
+                        : renderPinsByCustomer(rec, index, 'pinned-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
+                        { title: '5', value: 5 },
+                        { title: '10', value: 10 },
+                    ] })))))),
         topRecommendations.length > 0 && (React.createElement(Card, { className: "card-support recommendations", ref: ref },
             React.createElement(CardHeader, null,
                 React.createElement("h3", { className: "card-heading case-detail-panel-card-heading" },

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.d.ts

@@ -4,6 +4,7 @@ import { CaseRecommendationEvalEnum } from '../../../constants/caseDetailsConsta
 interface IProps {
     showPin?: boolean;
     isPinned?: boolean;
+    showLink?: boolean;
     pinTitle: string;
     index: number;
     recommendation: ICaseDetailAsideRecommendation;

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAS5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AACrF,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;CACnD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBA+D9C"}
+{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAQ5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AACrF,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;CACnD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBA2D9C"}

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.js

@@ -1,6 +1,5 @@
 import { Button, Icon } from '@patternfly/react-core';
-// TODO: KCS linking disabled -- PCM-15276 -- restore when linking is re-enabled
-// import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
+import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
 import OutlinedStarIcon from '@patternfly/react-icons/dist/js/icons/outlined-star-icon';
 import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
 import { LoadingIndicator } from '@rh-support/components';
@@ -13,10 +12,11 @@ export function CaseSolutionsItem(props) {
     const isLoading = !!props.isPinLoading[props.recommendation.resourceId];
     return (React.createElement("div", null,
         React.createElement("div", { className: "recommendation-header" },
-            props.showPin && (React.createElement(Button, { icon: React.createElement(React.Fragment, null,
+            React.createElement(Button, { icon: React.createElement(React.Fragment, null,
                     isLoading && React.createElement(LoadingIndicator, { show: isLoading, size: "xs" }),
-                    !isLoading && (React.createElement(React.Fragment, null,
-                        React.createElement(Icon, { size: "md", color: "0066cc" }, props.isPinned ? (React.createElement(StarIcon, { className: "pinned-resource" })) : (React.createElement(OutlinedStarIcon, { className: "pinned-resource" })))))), title: props.pinTitle, onClick: props.onPinClicked, "data-tracking-id": `case-resource-${props.pinTitle}`, variant: "plain", className: "list-icon" })),
+                    !isLoading && props.showPin && (React.createElement(React.Fragment, null,
+                        React.createElement(Icon, { size: "md", color: "0066cc" }, props.isPinned ? (React.createElement(StarIcon, { className: "pinned-resource" })) : (React.createElement(OutlinedStarIcon, { className: "pinned-resource" }))))),
+                    !isLoading && props.showLink && React.createElement(LinkIcon, null)), title: props.pinTitle, onClick: props.onPinClicked, "data-tracking-id": `case-resource-${props.pinTitle}`, variant: "plain", className: "list-icon" }),
             React.createElement("a", { href: props.recommendation.resourceViewURI, "data-tracking-id": `case-resource-${props.type}-link-${props.index}`, target: "_blank", rel: "noopener noreferrer", className: "case-resource-recommendation-link", dangerouslySetInnerHTML: {
                     __html: DOMPurify.sanitize(truncate(decodeMarkTag(props.recommendation.title || ''), maxTitleLength)),
                 }, onClick: () => props.onLinkClick('case solution click') })),

package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
+import { CaseStatusEnum } from '../../../constants/caseDetailsConstants';
 interface IProps {
     onConfirm: (commentBody: any, newStatus: any, reopenedAt?: any, reopenedBySSOName?: any, reopenedReason?: any, reopenedReasonOther?: any) => void;
     onClose: () => void;
     caseNumber: string;
     isInternal: boolean;
+    allStatuses: string[];
     isUpdating: boolean;
-    reopenStatus: string;
+    reopenStatus: CaseStatusEnum;
     whoIsUpdating: string;
 }
 export declare function ReopenCaseModal(props: IProps): React.JSX.Element;

package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReopenCaseModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ConfirmationModals/ReopenCaseModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,KAAA,EAAE,SAAS,KAAA,EAAE,UAAU,CAAC,KAAA,EAAE,iBAAiB,CAAC,KAAA,EAAE,cAAc,CAAC,KAAA,EAAE,mBAAmB,CAAC,KAAA,KAAK,IAAI,CAAC;IACpH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACzB;AAMD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAmN5C"}
+{"version":3,"file":"ReopenCaseModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ConfirmationModals/ReopenCaseModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAEzE,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,KAAA,EAAE,SAAS,KAAA,EAAE,UAAU,CAAC,KAAA,EAAE,iBAAiB,CAAC,KAAA,EAAE,cAAc,CAAC,KAAA,EAAE,mBAAmB,CAAC,KAAA,KAAK,IAAI,CAAC;IACpH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,cAAc,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;CACzB;AAMD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAkN5C"}

package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.js

@@ -9,11 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Button, ButtonVariant, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, TextArea, } from '@patternfly/react-core';
 import { SingleSelectDropdown } from '@rh-support/components';
-import { formatDateTime, PORTAL_OPEN_DISPLAY_STATUSES } from '@rh-support/utils';
+import { formatDateTime } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { CaseStatusEnum } from '../../../constants/caseDetailsConstants';
 const reasonWithDescription = ['Other'];
 const reasonWithoutDescription = ['I am experiencing the same issue', 'My case has been closed prematurely'];
 const reasonsList = [...reasonWithoutDescription, ...reasonWithDescription];
@@ -42,15 +43,18 @@ export function ReopenCaseModal(props) {
         return isValid;
     };
     const getCommentBody = () => {
-        return `<p><strong>Reason for reopening case:</strong></p><p>${selectedReason}${reasonWithDescription.includes(selectedReason) || props.isInternal
+        return `**Reason for reopening case:** \n${selectedReason}${reasonWithDescription.includes(selectedReason) || props.isInternal
             ? `${props.isInternal ? '' : '. '}${reopenDescription}`
-            : ''}</p><p><strong>Reopened date:</strong></p><p>${formatDateTime(Date())}</p><p><strong>Reopened by:</strong></p><p>${props.whoIsUpdating}</p><p><strong>Reopened reason other description:</strong></p><p>${reopenDescription}</p>`;
+            : ''}
+        \n **Reopened date:** \n${formatDateTime(Date())}
+        \n**Reopened by:** \n${props.whoIsUpdating}
+        \n**Reopened reason other description:**\n${reopenDescription}`;
     };
     const onSubmit = () => __awaiter(this, void 0, void 0, function* () {
         if (!checkForRequiredFields())
             return;
         let submissionDate = new Date();
-        props.onConfirm(getCommentBody(), props.reopenStatus || selectedStatus || 'In Progress', submissionDate, props.whoIsUpdating, selectedReason, reopenDescription);
+        props.onConfirm(getCommentBody(), props.reopenStatus || selectedStatus || CaseStatusEnum.WAITING_ON_REDHAT, submissionDate, props.whoIsUpdating, selectedReason, reopenDescription);
     });
     const onReasonChange = (option) => {
         setSelectedReason(option.value);
@@ -66,7 +70,7 @@ export function ReopenCaseModal(props) {
         label: option,
         value: option,
     }));
-    const getStatusDropdownOptions = map(PORTAL_OPEN_DISPLAY_STATUSES, (option) => ({
+    const getStatusDropdownOptions = map(props.allStatuses.filter((status) => status !== CaseStatusEnum.CLOSED), (option) => ({
         label: option,
         value: option,
     }));

package/lib/esm/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ESSRemoteSessionModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBA+JlD"}
+{"version":3,"file":"ESSRemoteSessionModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBAsKlD"}

package/lib/esm/components/CaseEditView/RequestRemoteSession/ESSRemoteSessionModal.js

@@ -7,24 +7,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useApolloClient } from '@apollo/client/react';
+import { publicApi } from '@cee-eng/hydrajs';
 import { Button, ButtonVariant, Icon, Modal, ModalFooter, ModalHeader, ModalVariant, Title, TitleSizes, } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import { ToastNotification } from '@rh-support/components';
-import isEqual from 'lodash/isEqual';
+import { ToastNotification, useFetch } from '@rh-support/components';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useCaseDispatch, useCaseSelector } from '../../../context/CaseContext';
-import { GET_CASE_COMMENTS, useCreateCaseComment } from '../../../hooks/useCaseComments';
+import { useCaseDispatch } from '../../../context/CaseContext';
+import { useCaseDetailsPageStateContext } from '../../../context/CaseDetailsPageContext';
+import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../../context/CaseDiscussionTabContext';
+import { updateDiscussionStateComments } from '../../../reducers/CaseDiscussionTabReducer';
 import { checkForCaseStatusToggleOnAttachOrComment, setCaseDetails, updateCaseDetails, } from '../../../reducers/CaseReducer';
 export function ESSRemoteSessionModal(props) {
     const { t } = useTranslation();
     const caseDispatch = useCaseDispatch();
     const [agreeLoading, setAgreeLoading] = useState(false);
-    const client = useApolloClient();
-    const { createComment, loading: isPostingComment } = useCreateCaseComment();
-    const caseSalesforceId = useCaseSelector((state) => state.caseDetails.id, isEqual);
-    const existingCaseDetails = useCaseSelector((state) => state.caseDetails, isEqual);
+    const { request: postCommentRequest, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
+        propgateErrors: true,
+    });
+    const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
+    const { sort, allDiscussions, discussionFiltersListState } = useCaseDiscussionTabStateContext();
+    const { caseDetailsPageState: { caseFeedbacksHydra }, } = useCaseDetailsPageStateContext();
     // To handle modal cancel and close
     const onCancel = () => {
         props.onClose && props.onClose();
@@ -38,17 +41,13 @@ export function ESSRemoteSessionModal(props) {
                 screenSessionRequested: true,
             });
             try {
-                yield createComment({
-                    caseId: caseSalesforceId,
-                    body: requestComment,
-                    isPublic: true,
-                });
-                client.refetchQueries({ include: [GET_CASE_COMMENTS] });
-                yield checkForCaseStatusToggleOnAttachOrComment(caseDispatch, props.loggedInUserRights.data.isInternal(), props.caseStatus, {
-                    apolloClient: client,
+                yield postCommentRequest({
                     caseNumber: props.caseNumber,
-                    existingCaseDetails,
+                    commentBody: requestComment,
+                    contentType: 'markdown',
                 });
+                updateDiscussionStateComments(dispatchDiscussion, caseDispatch, props.caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
+                checkForCaseStatusToggleOnAttachOrComment(caseDispatch, props.loggedInUserRights.data.isInternal(), props.caseStatus);
                 onCancel();
                 setAgreeLoading(false);
                 ToastNotification.addSuccessMessage(t('Remote session has been requested successfully'), t('Red Hat will add a comment to your case to schedule your remote session.'));

package/lib/esm/components/CaseEditView/RequestRemoteSession/NewEssTermsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewEssTermsModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/NewEssTermsModal.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAYnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAwb7C"}
+{"version":3,"file":"NewEssTermsModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/NewEssTermsModal.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAYnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AA4BD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAmY7C"}