@rh-support/troubleshoot 2.6.299 → 2.6.300

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

@@ -7,92 +7,104 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-// TODO: Re-enable after GraphQL migration of attachments
-// import { IAttachment } from '@cee-eng/hydrajs/@types/models/attachment';
-import { Button, ButtonVariant, Checkbox } from '@patternfly/react-core';
-import { EditorMode, LoadingIndicator, MarkdownEditor, ToastNotification, usePrevious } from '@rh-support/components';
-import { GlobalMetadataStateContext, useCanEditCase, useUserPreferences } from '@rh-support/react-context';
-import { ability, CaseDiscussionFields, resourceActions, resources } from '@rh-support/user-permissions';
+import { publicApi } from '@cee-eng/hydrajs';
+import { Button, ButtonVariant, Checkbox, debounce, Tooltip } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon';
+import { EditorMode, LoadingIndicator, MarkdownEditor, ToastNotification, useFetch, usePrevious, } from '@rh-support/components';
+import { FeatureAnnouncementKeys, GlobalMetadataStateContext, NewFeaturePopoverAnnouncement, useCanEditCase, useUserPreferences, } from '@rh-support/react-context';
+import { ability, CaseDiscussionFields, CaseListFields, resourceActions, resources, } from '@rh-support/user-permissions';
+import { pendoTrackEvent } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import uniqBy from 'lodash/uniqBy';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
-import { useCreateCaseComment } from '../../../../hooks/useCaseComments';
+import { CaseDetailsCacheNamespaces } from '../../../../enums/cache';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
-import { checkForCaseStatusToggleOnAttachOrComment } from '../../../../reducers/CaseReducer';
-// TODO: Re-enable after GraphQL migration of attachments
-// import { markdownFilePasteEvent } from '../../../shared/Constants';
-// import {
-//     AttachmentDispatchContext,
-//     AttachmentStateContext,
-//     hasSomeSelectedFiles,
-//     hasSomeUnUploadedAttachments,
-//     isUploadingAttachment,
-//     resetAttachment,
-// } from '../../../shared/fileUpload';
-// import FileSelectorButton from '../../../shared/fileUpload/fileSelectors/FileSelectorButton';
-// import FileUpload from '../../../shared/fileUpload/FileUpload';
+import { DiscussionType } from '../../../../reducers/CaseDiscussionTabReducer';
+import { addingNotifiedUsers, checkForCaseStatusToggleOnAttachOrComment, setNotifiedUser, } from '../../../../reducers/CaseReducer';
+import { CaseDetailsCacheUtils } from '../../../../utils/caseDetailsCacheUtils';
+import { markdownFilePasteEvent } from '../../../shared/Constants';
+import { AttachmentDispatchContext, AttachmentStateContext, hasSomeSelectedFiles, hasSomeUnUploadedAttachments, isUploadingAttachment, resetAttachment, } from '../../../shared/fileUpload';
+import FileSelectorButton from '../../../shared/fileUpload/fileSelectors/FileSelectorButton';
+import FileUpload from '../../../shared/fileUpload/FileUpload';
 import { PDFContext } from '../../PDFContainer';
-// TODO: Re-enable after GraphQL migration of attachments
-// import { useAttachmentUploadCompletion } from './PostComment/useAttachmentUploadCompletion';
-import { useCommentDrafts } from './PostComment/useCommentDrafts';
-// import { useMarkdownFileUploader } from './PostComment/useMarkdownFileUploader';
+import { useMarkdownFileUploader } from './PostComment/useMarkdownFileUploader';
 import { VerifyCaseStatusModal } from './VerifyCaseStatusModal/VerifyCaseStatusModal';
 export function PostComment(props) {
-    var _a;
+    var _a, _b;
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
     let { caseNumber } = props;
     const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
+    const canAddAttachments = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.ATTACHMENTS);
     const canPostPrivateComments = ability.can(resourceActions.PATCH, resources.CASE_COMMENTS, CaseDiscussionFields.POST_PRIVATE_COMMENT);
-    const { createComment, loading: isPostingComment } = useCreateCaseComment();
+    const { request, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
+        propgateErrors: true,
+    });
+    const dispatchToAttachmentReducer = useContext(AttachmentDispatchContext);
+    const { attachmentState } = useContext(AttachmentStateContext);
+    const [commentText, setCommentText] = useState(props.commentText || '');
     const [isPublic, setIsPublic] = useState(props.defaultIsPublic === null ? true : props.defaultIsPublic);
+    const isPublicRef = useRef(isPublic);
+    const isUploadingAttachmentPrevious = useRef(false);
+    const isUploadingAttachments = isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles);
+    const hasSomeUnUploadedFiles = hasSomeUnUploadedAttachments(attachmentState.caseFiles.selectedLocalFiles);
+    const hasSomeSelectedFilesLocal = hasSomeSelectedFiles(attachmentState.caseFiles.selectedLocalFiles);
     const [commentType, setCommentType] = useState(EditorMode.PLAIN);
     const [commentSignature, setCommentSignature] = useState('');
-    const [commentText, setCommentText] = useState(props.commentText || '');
     const { isExportingPDF } = useContext(PDFContext);
     const { getCommentTypeFromPreference, getCommentSignature } = useUserPreferences();
-    const applySignature = useCallback((text) => {
-        if (isEmpty(commentSignature))
-            return;
-        const signed = text.includes(commentSignature) ? text : text + '\n' + commentSignature;
-        setCommentText(signed);
-    }, [commentSignature]);
-    useEffect(() => {
-        function loadPrefs() {
-            return __awaiter(this, void 0, void 0, function* () {
-                try {
-                    yield getCommentTypeFromPreference();
-                    const sig = (yield getCommentSignature()) || '';
-                    setCommentType(EditorMode.PLAIN);
-                    setCommentSignature(sig);
-                    if (isEmpty(commentText) && !isEmpty(sig)) {
-                        setCommentText(`\n ${sig}`);
-                    }
-                }
-                catch (error) {
-                    console.error('Failed to load comment preferences:', error);
-                }
-            });
+    const userOriginalCommentPrefs = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const retrievedComment = yield getCommentTypeFromPreference();
+            const retrievedCommentSignature = yield getCommentSignature();
+            const defaultCommentType = retrievedComment ? retrievedComment : EditorMode.PLAIN;
+            // @ts-ignore
+            setCommentType(defaultCommentType);
+            const defaultCommentSignature = retrievedCommentSignature || '';
+            setCommentSignature(defaultCommentSignature);
+            if (isEmpty(commentText) && !isEmpty(defaultCommentSignature)) {
+                setCommentText(`\n ${defaultCommentSignature}` || '');
+            }
+        }
+        catch (error) {
+            console.log(error);
         }
-        loadPrefs();
+    });
+    useEffect(() => {
+        userOriginalCommentPrefs();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [cssCommentAgreed, setCssCommentAgreed] = useState(false);
-    const [isProcessing, setIsProcessing] = useState(false);
+    const [isProcessing, setIsProcessing] = useState(isPostingComment || isUploadingAttachments);
     const { globalMetadataState: { loggedInUser, loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
-    const { status, caseSalesforceId } = useCaseSelector((state) => ({
+    const { onFileSelect, onFileAttach, onFileDelete, isUploadingFile, isMarkdownFileUploadInProgress, cancelFileUpload, } = useMarkdownFileUploader({
+        caseNumber,
+        secureSupport: loggedInUsersAccount.data.secureSupport,
+        onAttachmentAdded: props.onAttachmentAdded,
+    });
+    const { selectedNotificationContacts, status, contactSSOName, selectedAccountDetails } = useCaseSelector((state) => ({
         status: state.caseDetails.status,
-        caseSalesforceId: state.caseDetails.id,
+        contactSSOName: state.caseDetails.contactSSOName,
+        selectedNotificationContacts: state.selectedNotificationContacts,
+        selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
-    const isConfirmedStateSideSupport = (_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.hasConfirmedStatesideSupport;
+    const isConfirmedStateSideSupport = ((_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.hasConfirmedStatesideSupport) ||
+        ((_b = selectedAccountDetails === null || selectedAccountDetails === void 0 ? void 0 : selectedAccountDetails.data) === null || _b === void 0 ? void 0 : _b.hasConfirmedStatesideSupport);
     const caseDispatch = useCaseDispatch();
     const [isCommentTooLong, setIsCommentTooLong] = useState(false);
     const canEditCase = useCanEditCase();
     const componentRef = useRef(null);
     let passedReply = props.commentText;
+    const { getRootProps, getInputProps, open } = useDropzone({
+        onDrop: (files) => onFileAttach(files, isPublic),
+        multiple: false,
+    });
+    // Allows the isPublic default state to be changed by the parent component
     const resetIsPublic = useCallback(() => setIsPublic(props.defaultIsPublic === null ? true : props.defaultIsPublic), [props.defaultIsPublic]);
     const previousDefaultIsPublic = usePrevious(props.defaultIsPublic);
     useEffect(() => {
@@ -100,107 +112,99 @@ export function PostComment(props) {
             return;
         props.defaultIsPublic === null ? resetIsPublic() : setIsPublic(props.defaultIsPublic);
     }, [props.defaultIsPublic, resetIsPublic, previousDefaultIsPublic]);
+    // why usecallback instead of useRef?
+    // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
     const textAreaRef = useCallback((node) => {
-        const isReplyMatch = node !== null &&
+        if (node !== null &&
             props.commentText &&
             props.commentCreator &&
             commentText &&
-            commentText === getReplyText(props.commentText, props.commentCreator);
-        if (!isReplyMatch)
-            return;
-        node.scrollTop = node.scrollHeight;
-        node.focus();
+            commentText === getReplyText(props.commentText, props.commentCreator)) {
+            node.scrollTop = node.scrollHeight;
+            node.focus();
+        }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [commentText]);
-    const loggedInUserSSO = loggedInUserRights.data.getSSOUsername();
-    const { saveDraft, clearDraft } = useCommentDrafts({
-        caseNumber,
-        loggedInUserSSO,
-        commentSignature,
-        setCommentText,
-        setCommentType,
-        setIsPublic,
-        applySignature,
-    });
     const resetCommentSection = () => __awaiter(this, void 0, void 0, function* () {
-        var _a;
         setCommentText('');
         setIsTextAreaFocused(false);
         resetIsPublic();
-        yield clearDraft();
-        (_a = props.onCommentClear) === null || _a === void 0 ? void 0 : _a.call(props);
-        setCommentText(commentSignature ? `\n ${commentSignature}` : '');
+        const { value: prevDraftComments = {} } = (yield CaseDetailsCacheUtils.get(CaseDetailsCacheNamespaces.COMMENTS_DRAFT.name, loggedInUserRights.data.getSSOUsername())) || {};
+        if (prevDraftComments[caseNumber]) {
+            delete prevDraftComments[caseNumber];
+        }
+        CaseDetailsCacheUtils.set(CaseDetailsCacheNamespaces.COMMENTS_DRAFT.name, loggedInUserRights.data.getSSOUsername(), { value: prevDraftComments });
+        props.onCommentClear && props.onCommentClear();
+        setCommentText(`\n ${commentSignature}` || '');
     });
+    const resetAttachmentSection = () => {
+        resetAttachment(dispatchToAttachmentReducer);
+    };
     const onCancelClick = () => {
         resetCommentSection();
+        resetAttachmentSection();
+        cancelFileUpload();
     };
+    const loggedInUserSSO = loggedInUserRights.data.getSSOUsername();
+    // https://github.com/facebook/react/issues/19240
+    const debouncedCacheSave = useMemo(() => debounce(function (value, mode, publicFlag) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { value: prevDraftComments = {} } = (yield CaseDetailsCacheUtils.get(CaseDetailsCacheNamespaces.COMMENTS_DRAFT.name, loggedInUserSSO)) || {};
+            if (prevDraftComments[caseNumber]) {
+            }
+            prevDraftComments[caseNumber] = { text: value, privateFlag: !publicFlag, type: mode };
+            CaseDetailsCacheUtils.set(CaseDetailsCacheNamespaces.COMMENTS_DRAFT.name, loggedInUserSSO, {
+                value: prevDraftComments,
+            });
+        });
+    }, 500), [caseNumber, loggedInUserSSO]);
     const onCommentTextChange = (value, mode) => __awaiter(this, void 0, void 0, function* () {
-        setCommentType(mode !== null && mode !== void 0 ? mode : commentType);
-        setCommentText(value !== null && value !== void 0 ? value : '');
-        saveDraft(value, mode, isPublic);
+        setCommentType(mode);
+        setCommentText(value);
+        debouncedCacheSave(value, mode, isPublic);
     });
-    const onCancel = () => {
-        setIsModalOpen(false);
-    };
-    const isNotInternalConfirm = () => {
-        onPostComment();
-    };
-    const onConfirm = () => {
-        setIsModalOpen(false);
-        isNotInternalConfirm();
-    };
-    const onBtnClick = () => {
-        setIsModalOpen(true);
-    };
-    // TODO: Re-enable after GraphQL migration (REST notification)
-    // const addUserToNotifyList = async () => {
-    //     const sso = loggedInUserRights.data.getSSOUsername();
-    //     const alreadyNotified = (selectedNotificationContacts || []).some((item) => item.ssoUsername === sso);
-    //     if (sso === contactSSOName || alreadyNotified) return;
-    //     await addingNotifiedUsers(caseDispatch, caseNumber, [{ ssoUsername: sso }]);
-    //     setNotifiedUser(caseDispatch, uniqBy([...selectedNotificationContacts, loggedInUser.data], 'ssoUsername'));
-    // };
-    const checkCommentSignature = commentText.replace(commentSignature, '');
-    const isCommentEmpty = isEmpty(checkCommentSignature === null || checkCommentSignature === void 0 ? void 0 : checkCommentSignature.trim());
+    const addUserToNotifyList = () => __awaiter(this, void 0, void 0, function* () {
+        const loggedInUserSSO = loggedInUserRights.data.getSSOUsername();
+        if (loggedInUserSSO !== contactSSOName &&
+            !(selectedNotificationContacts || []).map((item) => item.ssoUsername).includes(loggedInUserSSO)) {
+            yield addingNotifiedUsers(caseDispatch, caseNumber, [{ ssoUsername: loggedInUserSSO }]);
+            setNotifiedUser(caseDispatch, uniqBy([...selectedNotificationContacts, loggedInUser.data], 'ssoUsername'));
+        }
+    });
+    useEffect(() => {
+        isPublicRef.current = isPublic;
+    }, [isPublic]);
     useEffect(() => {
-        var _a;
         if (isCommentEmpty) {
-            (_a = props.onCommentClear) === null || _a === void 0 ? void 0 : _a.call(props);
+            props.onCommentClear && props.onCommentClear();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [commentText]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const onPostComment = () => __awaiter(this, void 0, void 0, function* () {
-        var _a;
         if (canEditCase.alert())
             return;
-        if (!commentText)
-            return;
-        if (!caseSalesforceId)
-            return;
-        try {
-            setIsProcessing(true);
-            yield createComment({
-                caseId: caseSalesforceId,
-                body: commentText,
-                isPublic,
-                isAssociate: loggedInUserRights.data.isInternal(),
-            });
-            checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), status);
-            if (!isPublic)
-                setIsPublic(true);
-            // TODO: Re-enable after GraphQL migration (REST notification)
-            // addUserToNotifyList();
-            yield ((_a = props.onCommentAdded) === null || _a === void 0 ? void 0 : _a.call(props));
-            resetCommentSection();
-            ToastNotification.addSuccessMessage(t('Comment submitted'));
-            setCssCommentAgreed(false);
-        }
-        catch (e) {
-            caseUpdateError.showError(e, t('Could not submit comment'));
-        }
-        finally {
-            setIsProcessing(false);
+        if (commentText) {
+            try {
+                setIsProcessing(true);
+                const newCommentText = commentText.replace(/(^|\n)(-\s.+)(\n(?![-\s]))/g, '$1$2\n\n');
+                yield request({ caseNumber, commentBody: newCommentText, isPublic, contentType: commentType });
+                checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), status);
+                !isPublic && setIsPublic(true);
+                addUserToNotifyList();
+                // update state
+                yield props.onCommentAdded();
+                resetCommentSection();
+                ToastNotification.addSuccessMessage(t('Comment submitted'));
+                setCssCommentAgreed(false);
+            }
+            catch (e) {
+                caseUpdateError.showError(e, t('Could not submit comment'));
+            }
+            finally {
+                setIsProcessing(false);
+            }
         }
     });
     const handleCheckboxToggle = () => {
@@ -210,11 +214,10 @@ export function PostComment(props) {
         return commentText.trim() === commentSignature;
     }
     const isPostCommentDisabled = isProcessing || !commentText || isCommentSignatureMatch();
-    /**
-     * Formats a reply as a markdown blockquote. Truncates the original text
-     * to 1000 characters, prepends an attribution header, and prefixes each
-     * line with `> ` for blockquote rendering.
-     */
+    const isFileUploadDisabled = isConfirmedStateSideSupport && !cssCommentAgreed;
+    const onFileUploadClick = () => {
+        ToastNotification.addInfoMessage(t('Uploading Attachment(s)'));
+    };
     const getReplyText = (replyText, commentCreator) => {
         const person = t(`(replying to {{commentCreator}}) \n`, { commentCreator });
         const reply = replyText
@@ -223,29 +226,103 @@ export function PostComment(props) {
             .reduce((acc, line) => (acc += '> ' + line + '\n'), person);
         return reply;
     };
+    const addCommentSignature = (preSigComment) => {
+        if (!isEmpty(commentSignature)) {
+            let signedComment = '';
+            // Checks if somment signature already exists and depending on that check, adds the signature
+            if (preSigComment.includes(commentSignature)) {
+                signedComment = preSigComment;
+            }
+            else {
+                signedComment = preSigComment + '\n' + commentSignature;
+            }
+            setCommentText(signedComment);
+        }
+    };
     useEffect(() => {
-        if (!props.commentText || !props.commentCreator)
+        if (!props.commentText || !props.commentCreator) {
             return;
+        }
         const reply = getReplyText(props.commentText, props.commentCreator);
         if (reply.includes(commentSignature)) {
             setCommentText(reply);
         }
         else {
-            applySignature(reply);
+            addCommentSignature(reply);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.commentText, props.commentCreator]);
+    useEffect(() => {
+        if (isUploadingAttachmentPrevious.current && !isUploadingAttachments && !hasSomeUnUploadedFiles) {
+            ToastNotification.addSuccessMessage(t('Attachment(s) uploaded successfully'));
+            checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), status);
+            // update state
+            resetAttachmentSection();
+            props.onAttachmentAdded();
+            setCssCommentAgreed(false);
+        }
+        isUploadingAttachmentPrevious.current = isUploadingAttachments;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isUploadingAttachments]);
+    useEffect(() => {
+        function getDraftComments() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const { value: draftComments = {} } = (yield CaseDetailsCacheUtils.get(CaseDetailsCacheNamespaces.COMMENTS_DRAFT.name, loggedInUserRights.data.getSSOUsername())) || {};
+                if (draftComments[caseNumber]) {
+                    const { text, privateFlag, type } = draftComments[caseNumber];
+                    if (text.trim()) {
+                        addCommentSignature(text);
+                        privateFlag === true && setIsPublic(false);
+                        setCommentType(type);
+                    }
+                }
+            });
+        }
+        getDraftComments();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [commentSignature]);
     const onTextAreaBlur = () => {
-        if (!commentText)
-            setIsTextAreaFocused(false);
+        !commentText && setIsTextAreaFocused(false);
     };
     const onCommentExceedCharsLimit = (lengthExceededNew) => {
         if (isCommentTooLong !== lengthExceededNew)
             setIsCommentTooLong(lengthExceededNew);
     };
+    const showCaseIsNotEditableAlert = () => {
+        if (canEditCase.alert())
+            return;
+    };
+    const fileUploadButton = (React.createElement(React.Fragment, null, canEditCase.isCaseNotEditable ? (React.createElement(Button, { variant: ButtonVariant.secondary, onClick: showCaseIsNotEditableAlert, isDisabled: isFileUploadDisabled }, t(isPublic || !canPostPrivateComments ? 'Attach files' : 'Attach private files'))) : (React.createElement(FileSelectorButton, { buttonLabel: t(isPublic || !canPostPrivateComments ? 'Attach files' : 'Attach private files'), isSessionId: false, isPrivate: !isPublic, "data-tracking-id": "case-discussion-file-selector-button", isDisabled: isFileUploadDisabled }))));
+    const markdownToolbarFileSelectorBtn = (React.createElement(Button, { type: "button", onClick: open, "data-tracking-id": "inline-image-attach-file", isDisabled: isUploadingFile, variant: ButtonVariant.link, icon: React.createElement(PlusIcon, null) }, t(isPublic ? 'Attach files' : 'Attach private files')));
+    // This is where we get all attachments to show in dropdown
+    const getAllAttachments = () => {
+        return (props.allDiscussions || [])
+            .filter((item) => item.discussionType === DiscussionType.ATTACHMENT)
+            .map((elem) => elem.item);
+    };
+    const onClipboardPaste = (files) => {
+        pendoTrackEvent(markdownFilePasteEvent);
+        onFileAttach(files, isPublicRef.current);
+    };
+    const onCancel = () => {
+        setIsModalOpen(false);
+    };
+    const isNotInternalConfirm = () => {
+        onPostComment();
+    };
+    const onConfirm = (commentText) => {
+        setIsModalOpen(false);
+        isNotInternalConfirm();
+    };
+    const onBtnClick = () => {
+        setIsModalOpen(true);
+    };
+    // To check is commment is empty
+    const checkCommentSignature = commentText.replace(commentSignature, '');
+    const isCommentEmpty = isEmpty(checkCommentSignature === null || checkCommentSignature === void 0 ? void 0 : checkCommentSignature.trim());
+    // To check is comment reply is empty and disable if it is
     const isReplyDisabled = () => {
-        var _a;
-        let parsedPassedReply = getReplyText(passedReply !== null && passedReply !== void 0 ? passedReply : '', (_a = props.commentCreator) !== null && _a !== void 0 ? _a : '');
+        let parsedPassedReply = getReplyText(passedReply, props.commentCreator);
         return (parsedPassedReply === null || parsedPassedReply === void 0 ? void 0 : parsedPassedReply.trim()) === (commentText === null || commentText === void 0 ? void 0 : commentText.trim());
     };
     const isSubmitDisabled = isReplyDisabled() ||
@@ -253,10 +330,20 @@ export function PostComment(props) {
         isPostCommentDisabled ||
         (isConfirmedStateSideSupport && !cssCommentAgreed);
     return (React.createElement("div", { className: `pf-v6-u-mb-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, ref: componentRef },
-        React.createElement(MarkdownEditor, { className: `${!isPublic && canPostPrivateComments ? 'is-private' : ''}`, disabled: isProcessing || canEditCase.isCaseNotEditable, "aria-label": "comment text area", editorMode: commentType, hideToolbars: true, onFocus: () => setIsTextAreaFocused(true), onBlur: onTextAreaBlur, onChange: onCommentTextChange, value: commentText, rows: isTextAreaFocused ? 12 : 4, bindTextArea: textAreaRef, onCommentExceedCharsLimit: onCommentExceedCharsLimit, 
-            // TODO: After GraphQL migration of attachments, restore private-comment placeholder to
-            // "Add a comment or attach a file privately" when !isPublic && canPostPrivateComments
-            mdPlaceholder: "Add a comment to this case", plainTextPlaceholder: "Add a comment to this case" }),
+        React.createElement(MarkdownEditor, { className: `${!isPublic && canPostPrivateComments ? 'is-private' : ''}`, disabled: isProcessing || canEditCase.isCaseNotEditable, "aria-label": "comment text area", showMarkdownPlainTextToggle: true, editorMode: commentType, onFocus: () => setIsTextAreaFocused(true), onBlur: onTextAreaBlur, onChange: onCommentTextChange, value: commentText, rows: isTextAreaFocused ? 12 : 4, bindTextArea: textAreaRef, onCommentExceedCharsLimit: onCommentExceedCharsLimit, mdPlaceholder: isPublic || !canPostPrivateComments
+                ? 'Add a comment using markdown'
+                : 'Add a comment or attach a file privately', plainTextPlaceholder: isPublic || !canPostPrivateComments
+                ? 'Add a comment to this case'
+                : 'Add a comment or attach a file privately', fileSelectorProps: {
+                showFileSelectorInToolbar: !loggedInUsersAccount.data.secureSupport,
+                filesList: getAllAttachments(),
+                onFileSelect: onFileSelect,
+                onFileDelete: onFileDelete,
+                isSupportedFile: (extension) => true,
+                attachFileBtn: markdownToolbarFileSelectorBtn,
+                isUploadingFile: isMarkdownFileUploadInProgress,
+                onClipboardPaste,
+            } }),
         isConfirmedStateSideSupport && (React.createElement("div", { className: "pf-v6-u-mt-md pf-v6-u-mb-lg" },
             React.createElement("input", { type: "checkbox", id: "css-case-comment-agreement", name: "css-case-comment-agreement", "data-tracking-id": "css-case-comment-agreement", checked: cssCommentAgreed, onChange: (e) => setCssCommentAgreed(e.target.checked) }),
             React.createElement("label", { htmlFor: "css-case-comment-agreement", className: "pf-v6-u-font-weight-normal pf-v6-u-font-size-sm" },
@@ -266,8 +353,15 @@ export function PostComment(props) {
             isModalOpen && loggedInUserRights.data.isInternal() && isPublic && (React.createElement(VerifyCaseStatusModal, { onClose: onCancel, onConfirm: onConfirm, isUpdating: isPostingComment, caseNumber: props.caseNumber })),
             React.createElement(Button, { "data-tracking-id": "postcomment-submit-button", type: "button", variant: ButtonVariant.primary, onClick: loggedInUser.data.isInternal && isPublic ? onBtnClick : isNotInternalConfirm, isDisabled: isSubmitDisabled, className: "postcomment-submit" },
                 React.createElement(Trans, null, "Submit")),
+            canAddAttachments &&
+                (isPublic && canPostPrivateComments ? (React.createElement(Tooltip, { content: t('You can attach files privately') }, fileUploadButton)) : (fileUploadButton)),
             React.createElement(Button, { className: "secondary-button-pill", "data-tracking-id": "postcomment-cancel-button", type: "button", variant: ButtonVariant.link, onClick: onCancelClick, isDisabled: isPostCommentDisabled },
                 React.createElement(Trans, null, "Cancel")),
             canPostPrivateComments && (React.createElement("span", { className: "post-comment-checkbox" },
-                React.createElement(Checkbox, { label: t('Private'), isChecked: !isPublic && canPostPrivateComments, onChange: handleCheckboxToggle, "aria-label": t('Private'), id: "private-comment", name: "private-comment", "data-tracking-id": "private-comment-checkbox" })))))));
+                React.createElement(Checkbox, { label: t('Private'), isChecked: !isPublic && canPostPrivateComments, onChange: handleCheckboxToggle, "aria-label": t('Private'), id: "private-comment", name: "private-comment", "data-tracking-id": "private-comment-checkbox" }))))),
+        React.createElement(FileUpload, { className: `file-upload-section ${hasSomeSelectedFilesLocal ? 'card card-white pf-v6-u-mt-lg pf-v6-u-p-lg' : ''}`, idToUploadTo: caseNumber, onUploadClick: onFileUploadClick, isSessionId: false, isSecureSupport: loggedInUsersAccount.data.secureSupport, isPrivate: !isPublic, autoUploadOnSelect: true, showDescriptionInfoMsg: true }),
+        React.createElement("span", Object.assign({}, getRootProps(), { tabIndex: -1 }),
+            React.createElement("input", Object.assign({ style: { display: 'none !important' } }, getInputProps()))),
+        !loggedInUsersAccount.data.secureSupport && (React.createElement(NewFeaturePopoverAnnouncement, { "aria-label": "Attach and embed images! You'll find all of your uploaded images here.", featureName: FeatureAnnouncementKeys.MARKDOWN_INLINE_IMAGES, sectionRef: componentRef, bodyContent: React.createElement("div", null,
+                React.createElement(Trans, null, "Attach and embed images! You'll find all of your uploaded images here.")), triggerRef: () => document.getElementById('md-editor-toolbar-file-selector') }))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"VerifyCaseStatusModal.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/VerifyCaseStatusModal/VerifyCaseStatusModal.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAa3E,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBA8IlD"}
+{"version":3,"file":"VerifyCaseStatusModal.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/VerifyCaseStatusModal/VerifyCaseStatusModal.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAa3E,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBA6IlD"}

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

@@ -7,7 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useApolloClient } from '@apollo/client/react';
 import { Button, ButtonVariant, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, } from '@patternfly/react-core';
 import { SingleSelectDropdown, ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
@@ -44,12 +43,11 @@ export function VerifyCaseStatusModal(props) {
         selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
     const { status } = caseState.caseDetails;
-    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
-    const apolloClient = useApolloClient();
+    const { globalMetadataState: { loggedInUsersAccount, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const canManageCase = loggedInUserRights.data.canManageCases();
     useEffect(() => {
-        fetchAllStatuses(caseOverviewDispatch, apolloClient);
-    }, [caseOverviewDispatch, apolloClient]);
+        fetchAllStatuses(caseOverviewDispatch, loggedInUsersAccount.data.secureSupport);
+    }, [caseOverviewDispatch, loggedInUsersAccount.data.secureSupport]);
     const { isCaseUpdating } = caseState;
     const canEditCase = useCanEditCase();
     const caseDispatch = useCaseDispatch();

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

@@ -1 +1 @@
-{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,MAAM,sBAQjC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,MAAM,sBAMjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/CaseHistory.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import { useCaseSelector } from '../../../../context/CaseContext';
 import Timeline from './Timeline';
 const CaseHistory = (props) => {
-    const sfdcCaseId = useCaseSelector((state) => { var _a; return (_a = state.caseDetails) === null || _a === void 0 ? void 0 : _a.id; });
     return (React.createElement("div", { className: "pf-v6-u-p-sm" },
-        React.createElement(Timeline, { caseNumber: props.caseNumber, sfdcCaseId: sfdcCaseId !== null && sfdcCaseId !== void 0 ? sfdcCaseId : '' })));
+        React.createElement(Timeline, { caseNumber: props.caseNumber })));
 };
 export default CaseHistory;

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/Timeline.css

@@ -121,8 +121,8 @@
 
 .timeline-avatar {
     position: absolute;
-    left: calc(20% + 2.5px);
-    transform: translateX(-50%);
+    left: calc(20% + 15px);
+    transform: translateX(-91%);
     top: 12px;
     z-index: 5;
 }
@@ -134,8 +134,8 @@
     width: 10px;
     height: 10px;
     z-index: 2;
-    left: calc(20% + 2.5px);
-    transform: translateX(-50%);
+    left: calc(20% + 18px);
+    transform: translateX(-195%);
     top: 25px;
 }
 

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/Timeline.d.ts

@@ -1,39 +1,7 @@
 import './Timeline.css';
 import React from 'react';
-import type { ICaseHistoryItem } from '../../../../models/caseHistory';
-import { type IHistoryChangeItem } from '../../../../utils/TimelineUtils';
-export interface ITimelineEvent {
-    date: string;
-    text: string;
-    user?: string;
-    useAvatar?: boolean;
-}
-export interface ITimelineNodeData {
-    left: ITimelineEvent;
-    right: ITimelineEvent;
-    photoUrl?: string | null;
-    userName?: string;
-}
-/**
- * Builds the display text for a "Change" history item by resolving values and
- * delegating to field-specific formatters.
- */
-export declare const applyReplacements: (item: IHistoryChangeItem | null | undefined) => string;
-/**
- * Converts normalized history items into timeline node data for rendering.
- *
- * Applies a secondary filter (excludes `FolderId__c` and `OwnerId` whose resolved
- * display names are unavailable), then maps each item to a left (date/time) and
- * right (user action text) event pair. Avatar/date-header boundaries are computed
- * sequentially: a new boundary is set on the first item, user change, or date change.
- */
-export declare const transformApiResponseToTimelineData: (apiResponse: {
-    historyItems: ICaseHistoryItem[];
-}) => ITimelineNodeData[];
-interface ITimelineProps {
-    caseNumber: string;
-    sfdcCaseId: string | undefined;
-}
-declare const Timeline: ({ caseNumber, sfdcCaseId }: ITimelineProps) => React.JSX.Element;
+declare const Timeline: ({ caseNumber }: {
+    caseNumber: any;
+}) => React.JSX.Element;
 export default Timeline;
 //# sourceMappingURL=Timeline.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAsBxB,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,KAAK,kBAAkB,EAA0C,MAAM,iCAAiC,CAAC;AAElH,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AACD,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAmID;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,kBAAkB,GAAG,IAAI,GAAG,SAAS,KAAG,MAU/E,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kCAAkC,GAAI,aAAa;IAC5D,YAAY,EAAE,gBAAgB,EAAE,CAAC;CACpC,KAAG,iBAAiB,EAoDpB,CAAC;AAEF,UAAU,cAAc;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAED,QAAA,MAAM,QAAQ,GAAI,4BAA4B,cAAc,sBAyU3D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAwBxB,OAAO,KAAsC,MAAM,OAAO,CAAC;AA8W3D,QAAA,MAAM,QAAQ,GAAI;;CAAc,sBAmV/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}