@rh-support/troubleshoot 2.6.361 → 2.6.364

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CaseAttachment.js

@@ -7,17 +7,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useApolloClient } from '@apollo/client/react';
+import { caseAttachments, kase } from '@cee-eng/hydrajs';
 import { Button, ButtonVariant, Icon, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import PaperclipIcon from '@patternfly/react-icons/dist/js/icons/paperclip-icon';
 import { InlineEdit, LoadingIndicator, ToastNotification, useConfirmation, useCopyToClipboard, useFetch, } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
 import { ability, CaseDiscussionFields, resourceActions, resources } from '@rh-support/user-permissions';
-import { deleteCaseAttachment, formatDateTime, humanizeSize, updateCaseAttachmentDescriptionByGraphQL, } from '@rh-support/utils';
+import { formatDateTime, humanizeSize } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
 import { ATTACHMENT_DESCRIPTION_LENGTH_LIMIT } from '../../../../reducers/CaseConstNTypes';
 import { DiscussionType } from '../../../../reducers/CaseDiscussionTabReducer';
 import { PDFContext } from '../../PDFContainer';
@@ -26,35 +25,20 @@ import { JumpAndCopyLink } from './JumpAndCopyLink';
 const CaseAttachment = React.forwardRef((props, ref) => {
     var _a;
     const { t } = useTranslation();
-    const caseUpdateError = useCaseUpdateErrorMessage();
     const clipboardRef = useRef(null);
     const { clipboardText, copyToClipboard } = useCopyToClipboard(clipboardRef);
-    const { request, isFetching: isDeleting } = useFetch(deleteCaseAttachment, { propgateErrors: true });
+    const { request, isFetching: isDeleting } = useFetch(caseAttachments.deleteAttachment, { propgateErrors: true });
     const canSeePrivateAttachments = ability.can(resourceActions.PATCH, resources.CASE_COMMENTS, CaseDiscussionFields.VIEW_PRIVATE_ATTACHMENT);
     const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const [isCardIsDeleted, setIsCardIsDeleted] = useState(false); // adds a class name needed for anim when card is removed
     const { isExportingPDF } = useContext(PDFContext);
     const confirm = useConfirmation();
     const [attachmentDescription, setAttachmentDescription] = useState(props.attachment.description);
-    const [isUpdating, setIsUpdating] = useState(false);
-    const apolloClient = useApolloClient();
+    const { request: updateDescriptionRequest, isFetching: isUpdating } = useFetch(kase.updateAttachment);
     const canEditCase = useCanEditCase();
     const onDescriptionSave = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (!apolloClient.mutate) {
-            caseUpdateError.showFieldError({}, t('Attachment description'));
-            return;
-        }
-        setIsUpdating(true);
-        try {
-            const updatedAttachment = yield updateCaseAttachmentDescriptionByGraphQL(apolloClient, props.attachment, attachmentDescription);
-            props.onMetadataUpdate && props.onMetadataUpdate(props.attachment.uuid, updatedAttachment);
-        }
-        catch (e) {
-            caseUpdateError.showFieldError(e, t('Attachment description'), onDescriptionSave);
-        }
-        finally {
-            setIsUpdating(false);
-        }
+        const updatedAttachment = yield updateDescriptionRequest(props.attachment.caseNumber, props.attachment.uuid, [{ path: 'description', op: 'update', value: attachmentDescription }], loggedInUsersAccount.data.secureSupport);
+        props.onMetadataUpdate && props.onMetadataUpdate(props.attachment.uuid, updatedAttachment);
     });
     const onDescriptionChange = (event) => {
         if (canEditCase.alert())
@@ -77,9 +61,7 @@ const CaseAttachment = React.forwardRef((props, ref) => {
                     "?")),
             });
             try {
-                // TODO: Re-enable when delete API accepts isSecureSupport again
-                // await request!(attachment.caseNumber!, attachment.uuid!, loggedInUsersAccount.data.secureSupport);
-                yield request(attachment.caseNumber, attachment.uuid);
+                yield request(attachment.caseNumber, attachment.uuid, loggedInUsersAccount.data.secureSupport);
                 ToastNotification.addSuccessMessage(t('Successfully deleted attachment: {{file}}', { file: attachment.fileName }));
                 setIsCardIsDeleted(true);
                 window.setTimeout(() => {
@@ -103,27 +85,29 @@ const CaseAttachment = React.forwardRef((props, ref) => {
             name: fileName,
         });
     };
-    // Prefer size (bytes); fall back to sizeKB when GraphQL only populated the KB field.
-    const attachmentSizeBytes = props.attachment.size > 0
-        ? props.attachment.size
-        : props.attachment.sizeKB > 0
-            ? props.attachment.sizeKB * 1024
-            : 0;
-    const attachmentSizeLabel = attachmentSizeBytes > 0 ? humanizeSize(attachmentSizeBytes) : '';
-    const attachmentLinkLabel = attachmentSizeLabel
-        ? `${props.attachment.fileName} (${attachmentSizeLabel})`
-        : props.attachment.fileName;
     const renderAttachmentLink = () => {
         if (!loggedInUsersAccount.data.secureSupport) {
             if (isExportingPDF) {
                 return (React.createElement("a", { href: props.attachment.link },
-                    React.createElement("span", null, attachmentLinkLabel)));
+                    React.createElement("span", null,
+                        props.attachment.fileName,
+                        " (",
+                        humanizeSize(props.attachment.size),
+                        ")")));
             }
-            return (React.createElement(Button, { className: "attachment-download-btn", title: t('Download {{fileName}}', { fileName: props.attachment.fileName }), variant: ButtonVariant.link, isInline: true, onClick: onAttachmentDownloadClick, "data-tracking-id": "attachment-download-button" },
-                React.createElement("span", null, attachmentLinkLabel)));
+            return (React.createElement(Button, { className: "attachment-download-btn", title: t('Download {{fileName}}', { fileName: props.attachment.fileName }), variant: ButtonVariant.link, onClick: onAttachmentDownloadClick, "data-tracking-id": "attachment-download-button" },
+                React.createElement("span", null,
+                    props.attachment.fileName,
+                    " (",
+                    humanizeSize(props.attachment.size),
+                    ")")));
         }
         return (React.createElement(Tooltip, { position: TooltipPosition.top, content: t(`You don't have appropriate permissions to download the attachment`) },
-            React.createElement("strong", null, attachmentLinkLabel)));
+            React.createElement("strong", null,
+                props.attachment.fileName,
+                " (",
+                humanizeSize(props.attachment.size),
+                ")")));
     };
     const onJumpToComment = (attachmentId) => () => props.showJumpToComment && props.onJumpToComment && props.onJumpToComment(attachmentId);
     if (((_a = props.attachment) === null || _a === void 0 ? void 0 : _a.isPrivate) && !canSeePrivateAttachments)
@@ -141,7 +125,7 @@ const CaseAttachment = React.forwardRef((props, ref) => {
             React.createElement("h4", null,
                 React.createElement(Icon, { className: "pf-v6-u-mr-xs" },
                     React.createElement(PaperclipIcon, null)),
-                props.attachment.createdBy),
+                props.attachment.modifiedBy),
             React.createElement("time", { className: "text-right" }, formatDateTime(props.attachment.lastModifiedDate))),
         React.createElement("div", { className: "comment-body" },
             React.createElement(Trans, null, "Attached file"),
@@ -157,7 +141,7 @@ const CaseAttachment = React.forwardRef((props, ref) => {
                             React.createElement("code", { ref: clipboardRef }, props.attachment.checksum)),
                         React.createElement(Tooltip, { position: TooltipPosition.top, content: clipboardText, trigger: "click" },
                             React.createElement("button", { "aria-label": "Copy to clipboard", className: "nimbus-icon-clipboard clip-code-raw-btn xs-icon", onClick: copyToClipboard, type: "button" }))))),
-                React.createElement(InlineEdit, { labelProps: { htmlFor: `case-details-file-description-${props.attachment.id}` }, allowInlineEdit: !canEditCase.isCaseNotEditable, labelContent: React.createElement(Trans, null, "Description"), content: React.createElement("div", { className: "clip-content-wrapper code-block" }, props.attachment.description), hideSaveCancel: false, onSave: onDescriptionSave, onCancel: onDescriptionCancel, dataTrackingId: "case-details-file-description", initialIsEditing: props.attachment.description ? false : true, saveDisabled: isCaseAttachmentDescriptionLengthy ||
+                React.createElement(InlineEdit, { labelProps: { htmlFor: `case-details-file-description-${props.attachment.id}` }, allowInlineEdit: true, labelContent: React.createElement(Trans, null, "Description"), content: React.createElement("div", { className: "clip-content-wrapper code-block" }, props.attachment.description), hideSaveCancel: false, onSave: onDescriptionSave, onCancel: onDescriptionCancel, dataTrackingId: "case-details-file-description", initialIsEditing: props.attachment.description ? false : true, saveDisabled: isCaseAttachmentDescriptionLengthy ||
                         isCaseAttachmentDescription ||
                         attachmentDescription === props.attachment.description ||
                         isUpdating, loadingIndicator: isUpdating ? React.createElement(LoadingIndicator, { isInline: true }) : undefined, isExportingPDF: isExportingPDF },
@@ -169,7 +153,7 @@ const CaseAttachment = React.forwardRef((props, ref) => {
             React.createElement("span", { className: "pull-right pf-v6-l-flex pf-m-align-items-center" },
                 props.showJumpToComment && (React.createElement(DiscussionItemLink, { onClick: onJumpToComment(props.attachment.id), discussionType: DiscussionType.ATTACHMENT, itemId: props.attachment.id, caseNumber: props.attachment.caseNumber, isCopyLink: false },
                     React.createElement(Trans, null, "Jump to attachment"))),
-                React.createElement("button", { className: `btn btn-app btn-link text-danger ${isExportingPDF ? 'hide-in-pdf' : ''}`, title: "Delete attachment", onClick: deleteAttachment(props.attachment), "data-tracking-id": "delete-attachmentid-button", type: "button", disabled: canEditCase.isCaseNotEditable },
+                React.createElement("button", { className: `btn btn-app btn-link text-danger ${isExportingPDF ? 'hide-in-pdf' : ''}`, title: "Delete attachment", onClick: deleteAttachment(props.attachment), "data-tracking-id": "delete-attachmentid-button", type: "button" },
                     React.createElement(Trans, null, "Delete")),
                 React.createElement(JumpAndCopyLink, { caseNumber: props.attachment.caseNumber, cardId: props.attachment.id, discussionType: DiscussionType.ATTACHMENT })))));
 });

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CaseComments.d.ts

@@ -1,12 +1,14 @@
 import { ICaseComment } from '@cee-eng/hydrajs/@types/api/public/case';
 import React from 'react';
+export declare const AUTOMATED_SUPPORT_ASSISTANT = "Support AI Assistant";
 interface IProps {
     caseNumber: string;
     comment: ICaseComment;
     feedback: number;
-    onFeedBackUpdate: (id: string, feedback: number) => void;
+    feedbackReason?: string;
+    onFeedBackUpdate: (id: string, feedback: number, feedbackReason?: string) => void;
     accountNumber: string;
-    onReply: (author: string, commentId: string, timestamp: string) => void;
+    onReply: (commentText: string, commentCreator: string, isPublic: boolean) => void;
     showJumpToComment?: boolean;
     onJumpToComment?: (commentId: string) => void;
     downloadAttachment: ({ caseNumber, uuid, name }: {

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CaseComments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseComments.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseComments.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AA2BvE,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAChH;AAED,QAAA,MAAM,YAAY,4EAgXhB,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CaseComments.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseComments.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AA+BvE,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,eAAO,MAAM,2BAA2B,yBAAyB,CAAC;AAElE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAChH;AAED,QAAA,MAAM,YAAY,4EAochB,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CaseComments.js

@@ -1,105 +1,122 @@
-// TODO: Re-enable after GraphQL migration of feedback (Allowed Regression #5)
-// import { ICommentFeedback } from '@cee-eng/hydrajs/@types/api/public/commentFeedback';
-import { EventTypes, linkifyBZIDs, linkifyWithCaseIDs, processRME } from '@cee-eng/ui-toolkit';
-import { Icon } from '@patternfly/react-core';
-// TODO: Re-enable after GraphQL migration of feedback (Allowed Regression #5)
-// import { Tooltip, TooltipPosition } from '@patternfly/react-core';
-// import FrownIcon from '@patternfly/react-icons/dist/js/icons/frown-icon';
-// import MehIcon from '@patternfly/react-icons/dist/js/icons/meh-icon';
-// import OutlinedFrownIcon from '@patternfly/react-icons/dist/js/icons/outlined-frown-icon';
-// import OutlinedMehIcon from '@patternfly/react-icons/dist/js/icons/outlined-meh-icon';
-// import OutlinedSmileIcon from '@patternfly/react-icons/dist/js/icons/outlined-smile-icon';
-// import SmileIcon from '@patternfly/react-icons/dist/js/icons/smile-icon';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { publicApi } from '@cee-eng/hydrajs';
+import { encodeAngularBrackets, EventTypes, htmlEntitiesEncode, linkifyBZIDs, linkifyWithCaseIDs, parseCommentMarkdown, processRME, } from '@cee-eng/ui-toolkit';
+import { Alert, Button, ButtonVariant, Icon, Tooltip, TooltipPosition } from '@patternfly/react-core';
+import FrownIcon from '@patternfly/react-icons/dist/js/icons/frown-icon';
+import MehIcon from '@patternfly/react-icons/dist/js/icons/meh-icon';
+import OutlinedFrownIcon from '@patternfly/react-icons/dist/js/icons/outlined-frown-icon';
+import OutlinedMehIcon from '@patternfly/react-icons/dist/js/icons/outlined-meh-icon';
+import OutlinedSmileIcon from '@patternfly/react-icons/dist/js/icons/outlined-smile-icon';
+import SmileIcon from '@patternfly/react-icons/dist/js/icons/smile-icon';
 import UserCircleIcon from '@patternfly/react-icons/dist/js/icons/user-circle-icon';
-// TODO: Re-enable after GraphQL migration of feedback (Allowed Regression #5)
-// import { LoadingIndicator, ToastNotification } from '@rh-support/components';
-import { AbilityContext, 
-// CaseDetailsFields, // TODO: Re-enable after GraphQL migration of feedback
-CaseDiscussionFields, resourceActions, resources, } from '@rh-support/user-permissions';
+import { EditorMode, LoadingIndicator, ToastNotification } from '@rh-support/components';
+import { AbilityContext, CaseDetailsFields, CaseDiscussionFields, resourceActions, resources, } from '@rh-support/user-permissions';
 import { formatDateTime, linkifyLinks } from '@rh-support/utils';
 import DOMPurify from 'dompurify';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useRef } from 'react';
-import { Trans } from 'react-i18next';
-// TODO: Re-enable after GraphQL migration of feedback
-// import { useTranslation } from 'react-i18next';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { DiscussionType } from '../../../../reducers/CaseDiscussionTabReducer';
-import { linkifyHtmlTextNodes } from '../../../../utils/linkifyHtmlTextNodes';
 import { PDFContext } from '../../PDFContainer';
+import { AsaCommentFeedbackModal } from './AsaCommentFeedbackModal';
 import { DiscussionItemLink } from './DiscussionItemLink';
 import { JumpAndCopyLink } from './JumpAndCopyLink';
+export const AUTOMATED_SUPPORT_ASSISTANT = 'Support AI Assistant';
 const CaseComments = React.forwardRef((props, ref) => {
-    var _a;
+    var _a, _b;
     const { caseNumber } = props;
     const markdownRef = useRef(null);
-    // TODO: Re-enable `t` after GraphQL migration of feedback (Allowed Regression #5)
-    // const { t } = useTranslation();
+    const { t } = useTranslation();
     const ability = useContext(AbilityContext);
     const canSeePrivateComments = ability.can(resourceActions.PATCH, resources.CASE_COMMENTS, CaseDiscussionFields.VIEW_PRIVATE_COMMENT);
-    // TODO: Re-enable after GraphQL migration of feedback (Allowed Regression #5)
-    // const canSeeFeedbackButtons =
-    //     ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_FEEDBACK_BUTTONS) &&
-    //     props.comment.isPublic &&
-    //     props.comment.createdBy !== 'Automated Support Assistant';
-    // TODO: Re-enable after GraphQL migration of feedback (Allowed Regression #5)
-    // const [isFeedbackUpdating, setIsFeedbackUpdating] = useState(false);
+    const isAsaComment = props.comment.createdBy === AUTOMATED_SUPPORT_ASSISTANT;
+    const canGiveCommentFeedback = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_FEEDBACK_BUTTONS);
+    const canSeeFeedbackButtons = canGiveCommentFeedback && props.comment.isPublic && !isAsaComment;
+    const [isFeedbackUpdating, setIsFeedbackUpdating] = useState(false);
+    const [isAsaFeedbackModalOpen, setIsAsaFeedbackModalOpen] = useState(false);
+    const [savedFeedbackValue, setSavedFeedbackValue] = useState(props.feedback);
+    const [savedFeedbackReason, setSavedFeedbackReason] = useState((_a = props.feedbackReason) !== null && _a !== void 0 ? _a : '');
     const { isExportingPDF } = useContext(PDFContext);
+    useEffect(() => {
+        setSavedFeedbackValue(props.feedback);
+    }, [props.feedback]);
+    useEffect(() => {
+        var _a;
+        setSavedFeedbackReason((_a = props.feedbackReason) !== null && _a !== void 0 ? _a : '');
+    }, [props.feedbackReason]);
+    const commentReply = (comment) => () => {
+        props.onReply(comment.commentBody, comment.createdBy, comment.isPublic);
+    };
     const onJumpToComment = (commentId) => () => props.showJumpToComment && props.onJumpToComment && props.onJumpToComment(commentId);
-    // TODO: Re-enable after GraphQL migration of feedback (Allowed Regression #5)
-    // const applyCommentFeedback = (comment: ICaseComment, feedback) => async (e) => {
-    //     e.preventDefault();
-    //     if (props.feedback === feedback) return;
-    //     const commJson: ICommentFeedback = {
-    //         feedback,
-    //         accountNumber: props.accountNumber,
-    //         commentId: comment.id,
-    //         commentCreatedBy: comment.createdBy,
-    //     };
-    //     try {
-    //         setIsFeedbackUpdating(true);
-    //         if (props.feedback !== undefined) {
-    //             await publicApi.commentFeedback.updateCommentFeedback(caseNumber, commJson);
-    //         } else {
-    //             await publicApi.commentFeedback.createCommentFeedback(caseNumber, commJson);
-    //         }
-    //         setIsFeedbackUpdating(false);
-    //         props.onFeedBackUpdate(comment.id, feedback);
-    //         ToastNotification.addSuccessMessage(t(`Comment feedback has been successfully updated`));
-    //     } catch (e) {
-    //         setIsFeedbackUpdating(false);
-    //         ToastNotification.addDangerMessage(t(`Comment feedback failed to update`));
-    //     }
-    // };
-    // TODO: Re-enable after GraphQL migration of feedback (Allowed Regression #5)
-    // const commentFeedbackButtons = (comment: ICaseComment, feedback: number) => (
-    //     <span className="comment-feedback-buttons">
-    //         <LoadingIndicator isInline={true} show={isFeedbackUpdating} />
-    //         <Tooltip position={TooltipPosition.top} content={t('Positive feedback')}>
-    //             <button className="btn btn-app btn-link" onClick={applyCommentFeedback(comment, 1)}
-    //                 data-tracking-id="case-comment-feedback-up" type="button">
-    //                 {feedback === 1 ? <SmileIcon title={t('Remove positive feedback')} />
-    //                     : <OutlinedSmileIcon title={t('Leave positive feedback')} />}
-    //             </button>
-    //         </Tooltip>
-    //         <Tooltip position={TooltipPosition.top} content={t('Neutral feedback')}>
-    //             <button className="btn btn-app btn-link" onClick={applyCommentFeedback(comment, 0)}
-    //                 data-tracking-id="case-comment-feedback-neutral" type="button">
-    //                 {feedback === 0 ? <MehIcon title={t('Remove neutral feedback')} />
-    //                     : <OutlinedMehIcon title={t('Leave neutral feedback')} />}
-    //             </button>
-    //         </Tooltip>
-    //         <Tooltip position={TooltipPosition.top} content={t('Negative feedback')}>
-    //             <button className="btn btn-app btn-link" onClick={applyCommentFeedback(comment, -1)}
-    //                 data-tracking-id="case-comment-feedback-down" type="button">
-    //                 {feedback === -1 ? <FrownIcon title={t('Remove negative feedback')} aria-label={t('Remove negative feedback')} />
-    //                     : <OutlinedFrownIcon title={t('Leave negative feedback')} aria-label={t('Leave negative feedback')} />}
-    //             </button>
-    //         </Tooltip>
-    //     </span>
-    // );
+    const applyCommentFeedback = (comment, feedback) => (e) => __awaiter(void 0, void 0, void 0, function* () {
+        e.preventDefault();
+        if (props.feedback === feedback) {
+            return;
+        }
+        yield submitCommentFeedback(comment, feedback);
+    });
+    const submitCommentFeedback = (comment, feedback, feedbackReason) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const commJson = Object.assign({ feedback, accountNumber: props.accountNumber, commentId: comment.id, commentCreatedBy: comment.createdBy }, (feedbackReason !== undefined ? { feedbackReason } : {}));
+        try {
+            setIsFeedbackUpdating(true);
+            const hasExistingFeedback = savedFeedbackValue !== undefined;
+            const response = hasExistingFeedback
+                ? yield publicApi.commentFeedback.updateCommentFeedback(caseNumber, commJson)
+                : yield publicApi.commentFeedback.createCommentFeedback(caseNumber, commJson);
+            setIsFeedbackUpdating(false);
+            const responseFeedback = (response === null || response === void 0 ? void 0 : response.feedback) !== undefined && (response === null || response === void 0 ? void 0 : response.feedback) !== null && `${response.feedback}` !== ''
+                ? parseInt(String(response.feedback), 10)
+                : feedback;
+            const savedFeedback = Number.isNaN(responseFeedback) ? feedback : responseFeedback;
+            const savedReason = (_a = response === null || response === void 0 ? void 0 : response.feedbackReason) !== null && _a !== void 0 ? _a : feedbackReason;
+            setSavedFeedbackValue(savedFeedback);
+            if (feedbackReason !== undefined) {
+                setSavedFeedbackReason(savedReason !== null && savedReason !== void 0 ? savedReason : '');
+                props.onFeedBackUpdate(comment.id, savedFeedback, savedReason !== null && savedReason !== void 0 ? savedReason : '');
+            }
+            else {
+                props.onFeedBackUpdate(comment.id, savedFeedback);
+            }
+            ToastNotification.addSuccessMessage(t(`Comment feedback has been successfully updated`));
+            return true;
+        }
+        catch (e) {
+            setIsFeedbackUpdating(false);
+            ToastNotification.addDangerMessage(t(`Comment feedback failed to update`));
+            return false;
+        }
+    });
+    const openAsaFeedbackModal = (e) => {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        setIsAsaFeedbackModalOpen(true);
+    };
+    const onSubmitAsaFeedback = (feedback, feedbackReason) => __awaiter(void 0, void 0, void 0, function* () {
+        const didSubmit = yield submitCommentFeedback(props.comment, feedback, feedbackReason);
+        if (didSubmit) {
+            setIsAsaFeedbackModalOpen(false);
+        }
+        return didSubmit;
+    });
+    const commentFeedbackButtons = (comment, feedback) => (React.createElement("span", { className: "comment-feedback-buttons" },
+        React.createElement(LoadingIndicator, { isInline: true, show: isFeedbackUpdating }),
+        React.createElement(Tooltip, { position: TooltipPosition.top, content: t('Positive feedback') },
+            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, 1), "data-tracking-id": "case-comment-feedback-up", type: "button" }, feedback === 1 ? (React.createElement(SmileIcon, { title: t('Remove positive feedback') })) : (React.createElement(OutlinedSmileIcon, { title: t('Leave positive feedback') })))),
+        React.createElement(Tooltip, { position: TooltipPosition.top, content: t('Neutral feedback') },
+            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, 0), "data-tracking-id": "case-comment-feedback-neutral", type: "button" }, feedback === 0 ? (React.createElement(MehIcon, { title: t('Remove neutral feedback') })) : (React.createElement(OutlinedMehIcon, { title: t('Leave neutral feedback') })))),
+        React.createElement(Tooltip, { position: TooltipPosition.top, content: t('Negative feedback') },
+            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, -1), "data-tracking-id": "case-comment-feedback-down", type: "button" }, feedback === -1 ? (React.createElement(FrownIcon, { title: t('Remove negative feedback'), "aria-label": t('Remove negative feedback') })) : (React.createElement(OutlinedFrownIcon, { title: t('Leave negative feedback'), "aria-label": t('Leave negative feedback') }))))));
     const computeDiscussionCardCalss = (comment) => {
-        if (comment.createdByType === 'Associate' && comment.createdBy === 'Automated Support Assistant') {
+        if (comment.createdByType === 'Associate' && comment.createdBy === AUTOMATED_SUPPORT_ASSISTANT) {
             return 'comment-automated';
         }
         else if (comment.createdByType === 'Associate') {
@@ -124,8 +141,9 @@ const CaseComments = React.forwardRef((props, ref) => {
         }
     };
     const computeCommentAuthorIcon = (comment) => {
-        if (comment.createdByType === 'Associate' && comment.createdBy === 'Automated support assistant') {
-            return (React.createElement("img", { src: "https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--hat-only.svg", height: "18", width: "18", "aria-hidden": "true", alt: "Automated support assistant comment", title: "Automated support assistant", style: { verticalAlign: '-0.125em', marginRight: '6px' } }));
+        if (comment.createdByType === 'Associate' && comment.createdBy === AUTOMATED_SUPPORT_ASSISTANT) {
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: "asa-comment-author-icon" },
+                React.createElement("path", { d: "M6.12402 2.4082C6.35218 2.4082 6.55997 2.60182 6.57812 2.8291C6.78299 5.41264 8.80708 7.4365 11.3906 7.6416C11.6179 7.65955 11.8115 7.86755 11.8115 8.0957C11.8115 8.32428 11.6179 8.53142 11.3906 8.5498C8.8071 8.75486 6.78376 10.7792 6.5791 13.3623C6.56075 13.5894 6.35227 13.7832 6.12402 13.7832C5.89623 13.783 5.68905 13.5895 5.6709 13.3623C5.46602 10.7788 3.44185 8.75501 0.858398 8.5498C0.63091 8.53187 0.43752 8.32385 0.4375 8.0957C0.4375 7.86636 0.632444 7.65796 0.861328 7.6416C3.44144 7.43655 5.46526 5.41223 5.66992 2.8291C5.68823 2.60207 5.89611 2.4084 6.12402 2.4082ZM6.125 4.69824C5.5068 6.24907 4.27802 7.47745 2.72656 8.0957C4.27872 8.71393 5.50601 9.94227 6.12402 11.4932C6.74225 9.94227 7.97113 8.71393 9.52246 8.0957C7.9703 7.47747 6.74301 6.24914 6.125 4.69824ZM10.9385 0.875C11.0648 0.875158 11.1728 0.966445 11.1963 1.09277C11.3749 2.06984 12.1518 2.84681 13.1289 3.02539C13.2552 3.04901 13.3467 3.15687 13.3467 3.2832C13.3467 3.40957 13.2552 3.51741 13.1289 3.54102C12.1518 3.7196 11.3749 4.49653 11.1963 5.47363C11.1728 5.6 11.0648 5.69125 10.9385 5.69141C10.812 5.69141 10.7032 5.60007 10.6797 5.47363C10.5015 4.49667 9.72542 3.71971 8.74805 3.54102C8.62158 3.51752 8.52931 3.40962 8.5293 3.2832C8.5293 3.15677 8.62157 3.04888 8.74805 3.02539C9.7254 2.8467 10.5015 2.06971 10.6797 1.09277C10.7032 0.966292 10.812 0.875 10.9385 0.875Z", fill: "#1F1F1F", stroke: "#1F1F1F", strokeWidth: "0.6", strokeLinejoin: "round" })));
         }
         else if (comment.createdByType === 'Associate') {
             return (React.createElement("img", { src: "https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--hat-only.svg", height: "18", width: "18", "aria-hidden": "true", alt: "Red Hat associate comment", title: "Red Hat associate", style: { verticalAlign: '-0.125em', marginRight: '6px' } }));
@@ -150,47 +168,8 @@ const CaseComments = React.forwardRef((props, ref) => {
             return React.createElement(Trans, null, "Automated comment");
         }
     };
-    // Tags the Quill RTE legitimately produces — everything else was typed
-    // literally by the user or injected from an external source (SFDC) and
-    // should render as visible text, not interpreted as HTML formatting.
-    const QUILL_TAGS = new Set([
-        'p',
-        'br',
-        'strong',
-        'em',
-        'u',
-        's',
-        'ul',
-        'ol',
-        'li',
-        'a',
-        'img',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'span',
-        'pre',
-        'blockquote',
-        'sub',
-        'sup',
-    ]);
-    const escapeNonQuillTags = (html) => html.replace(/<(\/?)([\w-]+)([^>]*)>/g, (match, slash, tag, attrs) => QUILL_TAGS.has(tag.toLowerCase()) ? match : `&lt;${slash}${tag}${attrs}&gt;`);
-    const sanitizeHtml = (html) => {
-        DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-            if (node.tagName === 'A') {
-                node.setAttribute('target', '_blank');
-                node.setAttribute('rel', 'noopener noreferrer');
-            }
-        });
-        const clean = DOMPurify.sanitize(escapeNonQuillTags(html), { ADD_ATTR: ['target', 'rel'] });
-        DOMPurify.removeHook('afterSanitizeAttributes');
-        return clean;
-    };
     const commentText = (text) => {
-        return { __html: sanitizeHtml(text) };
+        return { __html: DOMPurify.sanitize(text) };
     };
     // Transforms <strong> and <em> tags in HTML string to styled <span> tags to fix incorrect bold/italic rendering in exported PDF
     function formatMarkdownHtmlForPDF(htmlString) {
@@ -206,6 +185,15 @@ const CaseComments = React.forwardRef((props, ref) => {
             // Remove <ul> and </ul> tags completely
             .replace(/<\/?ul>/gi, ''));
     }
+    const commentMarkdown = (markdown) => {
+        let htmlString = parseCommentMarkdown(markdown, { showButtonForAttachmentLink: true, disableImagePreview: isExportingPDF }, 
+        // @ts-ignore
+        { openLinksInNewTab: true, gfm: true, breaks: true });
+        if (isExportingPDF) {
+            htmlString = formatMarkdownHtmlForPDF(htmlString);
+        }
+        return { __html: DOMPurify.sanitize(htmlString) };
+    };
     const onCommentAreaClick = (e) => {
         let { event } = e.target['dataset'];
         if (!event) {
@@ -221,13 +209,11 @@ const CaseComments = React.forwardRef((props, ref) => {
     };
     const parseCommentHtml = (commentText, contentType) => {
         let text = commentText;
-        if (contentType === 'plaintext') {
-            // Legacy plain-text comments: normalize SFDC HTML line breaks
-            text = text
-                .replace(/<br\s*\/?>/gi, '\n')
-                .replace(/<\/p>/gi, '\n')
-                .replace(/<p>/gi, '');
-            text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        if (contentType === EditorMode.PLAIN) {
+            text = HTMLEntityChecker(commentText);
+            // fix issue something like this <h1>ajhdjaj<d</h1>
+            text = htmlEntitiesEncode(text);
+            text = encodeAngularBrackets(text);
             text = linkifyLinks(text);
             text = linkifyWithCaseIDs(text);
             text = linkifyBZIDs(text);
@@ -235,21 +221,28 @@ const CaseComments = React.forwardRef((props, ref) => {
         }
         return text;
     };
+    /* Purpose of this method is to break the default HTML Entity rendering on the UI when in plaintext mode.
+    This is achieved by directly swapping the '&' in any html entity to `&amp` in e.g. &euro swaps to &ampeuro
+    so it is rendered -> &euro on the UI instead of '€' */
+    //PCM-10968
+    const HTMLEntityChecker = (comment) => {
+        if (comment.includes('&')) {
+            return comment.replace(/&/g, '&amp;');
+        }
+        else
+            return comment;
+    };
     const computeCommentText = (comment) => {
-        if (isEmpty(comment.commentBody))
-            return null;
-        // Legacy plain-text comments still need escaping and linkification
-        if (comment.contentType === 'plaintext') {
-            const parseComment = parseCommentHtml(comment.commentBody, comment.contentType);
+        const parseComment = parseCommentHtml(comment.commentBody, comment.contentType);
+        if (!isEmpty(comment.commentBody) && comment.contentType === EditorMode.MARKDOWN) {
+            return (React.createElement("div", { className: "push-top-narrow comment-markdown-text", dangerouslySetInnerHTML: commentMarkdown(comment.commentBody) }));
+        }
+        else if (!isEmpty(comment.commentBody) && comment.contentType === EditorMode.PLAIN) {
             return (React.createElement("pre", { className: "push-top-narrow comment-plaintext reset-pre-text", dangerouslySetInnerHTML: commentText(parseComment), style: { fontFamily: isExportingPDF ? 'DejaVu Sans' : '' } }));
         }
-        // HTML comments (new rich text or legacy markdown — both stored as HTML)
-        let htmlString = comment.commentBody;
-        htmlString = linkifyHtmlTextNodes(htmlString);
-        if (isExportingPDF) {
-            htmlString = formatMarkdownHtmlForPDF(htmlString);
+        else {
+            return (React.createElement("pre", { className: "push-top-narrow comment-plaintext reset-pre-text", dangerouslySetInnerHTML: commentText(parseComment), style: { fontFamily: isExportingPDF ? 'DejaVu Sans' : '' } }));
         }
-        return (React.createElement("div", { className: "push-top-narrow comment-richtext", dangerouslySetInnerHTML: { __html: sanitizeHtml(htmlString) }, style: { fontFamily: isExportingPDF ? 'DejaVu Sans' : '' } }));
     };
     useEffect(() => {
         if ((markdownRef === null || markdownRef === void 0 ? void 0 : markdownRef.current) && isExportingPDF) {
@@ -261,28 +254,31 @@ const CaseComments = React.forwardRef((props, ref) => {
             });
         }
     }, [props.comment, isExportingPDF]);
-    if (!((_a = props.comment) === null || _a === void 0 ? void 0 : _a.isPublic) && !canSeePrivateComments)
+    if (!((_b = props.comment) === null || _b === void 0 ? void 0 : _b.isPublic) && !canSeePrivateComments)
         return React.createElement(React.Fragment, null);
-    return (React.createElement("article", { ref: ref, id: props.comment.id, "aria-label": `Comment by ${props.comment.lastModifiedById}`, className: `prevent-split ${computePrivateComment(props.comment)} support-comment ${computeDiscussionCardCalss(props.comment)} ${ref ? 'selected-case-comment' : ''}` },
+    return (React.createElement("section", { ref: ref, id: props.comment.id, className: `prevent-split ${computePrivateComment(props.comment)} support-comment ${computeDiscussionCardCalss(props.comment)} ${ref ? 'selected-case-comment' : ''}` },
         React.createElement("header", null,
             React.createElement("h4", null,
                 computeCommentAuthorIcon(props.comment),
-                " ",
-                props.comment.lastModifiedById,
+                props.comment.createdBy,
                 props.comment.createdByType === 'Partner' && (React.createElement("span", null,
                     ' ',
                     "(",
                     React.createElement(Trans, null, "Partner"),
                     ")"))),
             React.createElement("time", null, formatDateTime(props.comment.lastModifiedDate))),
+        isAsaComment && (React.createElement(Alert, { className: `asa-comment-alert ${isExportingPDF ? 'hide-in-pdf' : ''}`, isInline: true, variant: "custom", title: t('Always review AI-Generated content prior to use') })),
         React.createElement("div", { className: "comment-body", onClick: onCommentAreaClick, ref: markdownRef }, computeCommentText(props.comment)),
         React.createElement("footer", null,
             React.createElement("span", { className: "comment-note" }, computeCommentFooter(props.comment)),
+            canSeeFeedbackButtons && commentFeedbackButtons(props.comment, props.feedback),
             React.createElement("span", { className: "pull-right pf-v6-l-flex pf-m-align-items-center" },
                 props.showJumpToComment && (React.createElement(DiscussionItemLink, { onClick: onJumpToComment(props.comment.id), discussionType: DiscussionType.COMMENT, itemId: props.comment.id, caseNumber: caseNumber, isCopyLink: false },
                     React.createElement(Trans, null, "Jump to comment"))),
-                React.createElement("button", { onClick: () => props.onReply(props.comment.lastModifiedById, props.comment.id, props.comment.lastModifiedDate), className: `btn btn-app btn-link case-reply-button ${isExportingPDF ? 'hide-in-pdf' : ''}`, "data-tracking-id": "case-comment-reply", type: "button" },
-                    React.createElement(Trans, null, "Reply")),
-                React.createElement(JumpAndCopyLink, { caseNumber: caseNumber, cardId: props.comment.id, discussionType: DiscussionType.COMMENT })))));
+                isAsaComment ? (React.createElement(Button, { variant: ButtonVariant.link, isInline: true, className: `asa-send-feedback-link ${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: openAsaFeedbackModal, "data-tracking-id": "case-asa-comment-send-feedback-footer" },
+                    React.createElement(Trans, null, "Send feedback"))) : (React.createElement("button", { onClick: commentReply(props.comment), className: `btn btn-app btn-link case-reply-button ${isExportingPDF ? 'hide-in-pdf' : ''}`, "data-tracking-id": "case-comment-reply", type: "button" },
+                    React.createElement(Trans, null, "Reply"))),
+                React.createElement(JumpAndCopyLink, { caseNumber: caseNumber, cardId: props.comment.id, discussionType: DiscussionType.COMMENT }))),
+        isAsaComment && (React.createElement(AsaCommentFeedbackModal, { isOpen: isAsaFeedbackModalOpen, isSubmitting: isFeedbackUpdating, initialFeedback: savedFeedbackValue, initialFeedbackReason: savedFeedbackReason, onClose: () => setIsAsaFeedbackModalOpen(false), onSubmit: onSubmitAsaFeedback }))));
 });
 export default CaseComments;

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.d.ts

@@ -1,20 +1,12 @@
-import { ICaseComment } from '@cee-eng/hydrajs/@types/api/public/case';
+import { ICaseChat, ICaseComment } from '@cee-eng/hydrajs/@types/api/public/case';
 import React from 'react';
 interface IProps {
     caseNumber: string;
     caseComments: ICaseComment[];
-    commentsLoading?: boolean;
-    commentsError?: unknown;
+    caseChats: ICaseChat[];
     accountNumber: string;
     tabRef: React.MutableRefObject<HTMLDivElement>;
     isDiscussionTab: boolean;
-    refetchComments: () => Promise<unknown> | void;
-    fetchMore?: () => Promise<unknown> | void;
-    hasNextPage?: boolean;
-    isLoadingMore?: boolean;
-    loadMoreError?: boolean;
-    loadMoreRetryCount?: number;
-    retryLoadMore?: () => Promise<unknown> | void;
 }
 export default function CaseDiscussion(props: IProps): React.JSX.Element;
 export {};

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDiscussion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAoBvE,OAAO,KAA6E,MAAM,OAAO,CAAC;AAwClG,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,qBAyzBnD"}
+{"version":3,"file":"CaseDiscussion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,YAAY,EAA0B,MAAM,yCAAyC,CAAC;AAkB1G,OAAO,KAAoE,MAAM,OAAO,CAAC;AAyCzF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;CAC5B;AAOD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,qBAsqBnD"}