@rh-support/troubleshoot 2.7.0 → 2.7.10

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

@@ -7,360 +7,306 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, debounce, Tooltip } from '@patternfly/react-core';
+import { useApolloClient } from '@apollo/client/react';
+import { Button, ButtonVariant, Checkbox } 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 TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { LoadingIndicator, RichTextEditor, 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 { formatDateTime, getHydraAttachmentImageUrl } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-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 { CaseDetailsCacheNamespaces } from '../../../../enums/cache';
-import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
-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 { useCreateCaseComment } from '../../../../hooks/useCaseComments';
+import { useS3Upload } from '../../../../hooks/useS3Upload';
+import { checkForCaseStatusToggleOnAttachOrComment } from '../../../../reducers/CaseReducer';
+import { AttachmentDispatchContext, AttachmentStateContext, hasAbortedOrFailedAttachments, hasQueuedAttachmentUploads, hasSomeSelectedFiles, isUploadingAttachment, resetAttachment, } from '../../../shared/fileUpload';
 import FileSelectorButton from '../../../shared/fileUpload/fileSelectors/FileSelectorButton';
 import FileUpload from '../../../shared/fileUpload/FileUpload';
 import { PDFContext } from '../../PDFContainer';
+import { useAttachmentUploadCompletion } from './PostComment/useAttachmentUploadCompletion';
+import { useCommentDrafts } from './PostComment/useCommentDrafts';
 import { useMarkdownFileUploader } from './PostComment/useMarkdownFileUploader';
 import { VerifyCaseStatusModal } from './VerifyCaseStatusModal/VerifyCaseStatusModal';
 export function PostComment(props) {
-    var _a, _b;
+    var _a, _b, _c;
     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 { request, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
-        propgateErrors: true,
-    });
+    const { createComment, loading: isPostingComment } = useCreateCaseComment();
     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 batchSuccessCountRef = useRef(0);
     const isUploadingAttachments = isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles);
-    const hasSomeUnUploadedFiles = hasSomeUnUploadedAttachments(attachmentState.caseFiles.selectedLocalFiles);
+    const hasQueuedUploads = hasQueuedAttachmentUploads(attachmentState.caseFiles.selectedLocalFiles);
+    const hasAbortedOrFailed = hasAbortedOrFailedAttachments(attachmentState.caseFiles.selectedLocalFiles);
     const hasSomeSelectedFilesLocal = hasSomeSelectedFiles(attachmentState.caseFiles.selectedLocalFiles);
-    const [commentType, setCommentType] = useState(EditorMode.PLAIN);
+    const [isPublic, setIsPublic] = useState((_a = props.defaultIsPublic) !== null && _a !== void 0 ? _a : true);
     const [commentSignature, setCommentSignature] = useState('');
+    const [commentText, setCommentText] = useState('');
+    const derivedPlainText = useMemo(() => {
+        var _a, _b;
+        if (!commentText)
+            return '';
+        const tmp = document.createElement('div');
+        tmp.innerHTML = commentText;
+        return (_b = (_a = tmp.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+    }, [commentText]);
     const { isExportingPDF } = useContext(PDFContext);
     const { getCommentTypeFromPreference, getCommentSignature } = useUserPreferences();
-    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);
-        }
-    });
+    const applySignature = useCallback((text) => {
+        if (isEmpty(commentSignature))
+            return;
+        const signatureHtml = `<p>${commentSignature}</p>`;
+        const signed = text.includes(commentSignature) ? text : text + signatureHtml;
+        setCommentText(signed);
+    }, [commentSignature]);
     useEffect(() => {
-        userOriginalCommentPrefs();
+        function loadPrefs() {
+            return __awaiter(this, void 0, void 0, function* () {
+                try {
+                    yield getCommentTypeFromPreference();
+                    const sig = (yield getCommentSignature()) || '';
+                    setCommentSignature(sig);
+                    if (isEmpty(commentText) && !isEmpty(sig)) {
+                        setCommentText(`<p><br></p><p>${sig}</p>`);
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to load comment preferences:', error);
+                }
+            });
+        }
+        loadPrefs();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [cssCommentAgreed, setCssCommentAgreed] = useState(false);
-    const [isProcessing, setIsProcessing] = useState(isPostingComment || isUploadingAttachments);
+    const [isProcessing, setIsProcessing] = useState(false);
     const { globalMetadataState: { loggedInUser, loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
-    const { onFileSelect, onFileAttach, onFileDelete, isUploadingFile, isMarkdownFileUploadInProgress, cancelFileUpload, } = useMarkdownFileUploader({
+    const { onFileAttach, cancelFileUpload } = useMarkdownFileUploader({
         caseNumber,
-        secureSupport: loggedInUsersAccount.data.secureSupport,
-        onAttachmentAdded: props.onAttachmentAdded,
+        onAttachmentAdded: (_b = props.onAttachmentAdded) !== null && _b !== void 0 ? _b : (() => undefined),
+    });
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop: (files) => onFileAttach(files, isPublic),
+        multiple: false,
+        noClick: true,
+        noKeyboard: true,
     });
-    const { selectedNotificationContacts, status, contactSSOName, selectedAccountDetails } = useCaseSelector((state) => ({
+    const { status, caseSalesforceId, existingCaseDetails } = useCaseSelector((state) => ({
         status: state.caseDetails.status,
-        contactSSOName: state.caseDetails.contactSSOName,
-        selectedNotificationContacts: state.selectedNotificationContacts,
-        selectedAccountDetails: state.selectedAccountDetails,
+        caseSalesforceId: state.caseDetails.id,
+        existingCaseDetails: state.caseDetails,
     }), isEqual);
-    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 apolloClient = useApolloClient();
+    const { uploadFile: uploadImageFile } = useS3Upload(caseNumber, apolloClient, caseSalesforceId);
+    const onImageUpload = useCallback((file) => __awaiter(this, void 0, void 0, function* () {
+        const attachmentId = yield uploadImageFile({ file });
+        if (!attachmentId) {
+            throw new Error('Upload did not return an attachment id.');
+        }
+        return getHydraAttachmentImageUrl(caseNumber, attachmentId);
+    }), [caseNumber, uploadImageFile]);
+    const isConfirmedStateSideSupport = (_c = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _c === void 0 ? void 0 : _c.hasConfirmedStatesideSupport;
     const caseDispatch = useCaseDispatch();
     const [isCommentTooLong, setIsCommentTooLong] = useState(false);
-    const canEditCase = useCanEditCase();
+    const canEditCase = useCanEditCase(status);
+    const isCaseReadOnly = canEditCase.isCaseNotEditable;
     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 resetIsPublic = useCallback(() => { var _a; return setIsPublic((_a = props.defaultIsPublic) !== null && _a !== void 0 ? _a : true); }, [props.defaultIsPublic]);
     const previousDefaultIsPublic = usePrevious(props.defaultIsPublic);
     useEffect(() => {
+        var _a;
         if (previousDefaultIsPublic === props.defaultIsPublic)
             return;
-        props.defaultIsPublic === null ? resetIsPublic() : setIsPublic(props.defaultIsPublic);
+        setIsPublic((_a = props.defaultIsPublic) !== null && _a !== void 0 ? _a : true);
     }, [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) => {
-        if (node !== null &&
-            props.commentText &&
-            props.commentCreator &&
-            commentText &&
-            commentText === getReplyText(props.commentText, props.commentCreator)) {
-            node.scrollTop = node.scrollHeight;
-            node.focus();
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [commentText]);
+    const quillEditorRef = useRef(null);
+    const loggedInUserSSO = loggedInUserRights.data.getSSOUsername();
+    const { saveDraft, clearDraft } = useCommentDrafts({
+        caseNumber,
+        loggedInUserSSO,
+        isInternal: loggedInUserRights.data.isInternal(),
+        commentSignature,
+        canPostPrivateComments,
+        setCommentText,
+        setIsPublic,
+        applySignature,
+    });
     const resetCommentSection = () => __awaiter(this, void 0, void 0, function* () {
-        setCommentText('');
-        setIsTextAreaFocused(false);
+        yield clearDraft();
+        const resetText = commentSignature ? `<p><br></p><p>${commentSignature}</p>` : '';
+        setCommentText(resetText);
         resetIsPublic();
-        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 onCaseFileUploaded = () => {
+        ToastNotification.addSuccessMessage(t('Attachment uploaded successfully'));
+        batchSuccessCountRef.current += 1;
+    };
+    useAttachmentUploadCompletion({
+        isUploadingAttachments,
+        hasQueuedUploads,
+        hasAbortedOrFailed,
+        isUploadingAttachmentPrevious,
+        batchSuccessCountRef,
+        caseDispatch,
+        apolloClient,
+        caseNumber,
+        existingCaseDetails,
+        isInternal: loggedInUserRights.data.isInternal(),
+        status,
+        resetAttachmentSection,
+        setCssCommentAgreed,
+        onAttachmentBatchAdded: props.onAttachmentAdded,
+    });
     const onCancelClick = () => {
+        // Cancel only clears comment text; file removal stays on FileLister Remove.
         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);
-        setCommentText(value);
-        debouncedCacheSave(value, mode, isPublic);
-    });
-    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(() => {
-        if (isCommentEmpty) {
-            props.onCommentClear && props.onCommentClear();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [commentText]);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const onCommentTextChange = (html) => {
+        setCommentText(html);
+        saveDraft(html, 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 = derivedPlainText.replace(commentSignature, '');
+    const isCommentEmpty = isEmpty(checkCommentSignature === null || checkCommentSignature === void 0 ? void 0 : checkCommentSignature.trim());
     const onPostComment = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
         if (canEditCase.alert())
             return;
-        if (commentText) {
-            try {
-                setIsProcessing(true);
-                yield request({ caseNumber, commentBody: commentText, 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);
-            }
+        if (!commentText)
+            return;
+        if (!caseSalesforceId)
+            return;
+        let body = commentText;
+        if (props.replyingToAuthor) {
+            const formattedTimestamp = props.replyingToTimestamp ? formatDateTime(props.replyingToTimestamp) : '';
+            const replyPrefix = formattedTimestamp
+                ? t('(replying to {{commentCreator}}, {{timestamp}}) \n', {
+                    commentCreator: props.replyingToAuthor,
+                    timestamp: formattedTimestamp,
+                })
+                : t('(replying to {{commentCreator}}) \n', {
+                    commentCreator: props.replyingToAuthor,
+                });
+            body = `<p>${replyPrefix}</p>${body}`;
+        }
+        try {
+            setIsProcessing(true);
+            yield createComment({
+                caseId: caseSalesforceId,
+                body,
+                isPublic,
+                isAssociate: loggedInUserRights.data.isInternal(),
+            });
+            yield checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), status, {
+                apolloClient,
+                caseNumber,
+                existingCaseDetails,
+            });
+            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();
+            (_b = props.onClearReply) === null || _b === void 0 ? void 0 : _b.call(props);
+            ToastNotification.addSuccessMessage(t('Comment submitted'));
+            setCssCommentAgreed(false);
+        }
+        catch (_c) {
+            ToastNotification.addDangerMessage(t('Could not submit comment. Please refresh the page and try again.'));
+        }
+        finally {
+            setIsProcessing(false);
         }
     });
     const handleCheckboxToggle = () => {
         setIsPublic((publicComment) => !publicComment);
     };
     function isCommentSignatureMatch() {
-        return commentText.trim() === commentSignature;
+        return derivedPlainText === commentSignature;
     }
     const isPostCommentDisabled = isProcessing || !commentText || isCommentSignatureMatch();
-    const isFileUploadDisabled = isConfirmedStateSideSupport && !cssCommentAgreed;
+    const isFileUploadDisabled = (isConfirmedStateSideSupport && !cssCommentAgreed) || isCaseReadOnly;
     const onFileUploadClick = () => {
         ToastNotification.addInfoMessage(t('Uploading Attachment(s)'));
     };
-    const getReplyText = (replyText, commentCreator) => {
-        const person = t(`(replying to {{commentCreator}}) \n`, { commentCreator });
-        const reply = replyText
-            .substring(0, 1000)
-            .split(/\n/)
-            .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) {
-            return;
-        }
-        const reply = getReplyText(props.commentText, props.commentCreator);
-        if (reply.includes(commentSignature)) {
-            setCommentText(reply);
-        }
-        else {
-            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 = () => {
-        !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 = () => {
-        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() ||
-        isCommentEmpty ||
+    // Submit stays independent of attachment upload so comments can be posted mid-upload (PCM-15915).
+    const isSubmitDisabled = isCommentEmpty ||
         isPostCommentDisabled ||
-        (isConfirmedStateSideSupport && !cssCommentAgreed);
-    return (React.createElement("div", { className: `pf-v5-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", 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,
+        isCommentTooLong ||
+        (isConfirmedStateSideSupport && !cssCommentAgreed) ||
+        isCaseReadOnly;
+    return (React.createElement("div", { className: `pf-v6-u-mb-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, ref: componentRef },
+        props.replyingToAuthor && (React.createElement("output", { className: "post-comment-reply-banner pf-v6-u-mb-sm", "aria-label": `Replying to ${props.replyingToAuthor}`, "data-tracking-id": "reply-banner" },
+            React.createElement("span", null,
+                React.createElement(Trans, null, "Replying to"),
+                " ",
+                React.createElement("strong", null, props.replyingToAuthor),
+                props.replyingToTimestamp && (React.createElement("span", { className: "pf-v6-u-ml-xs pf-v6-u-color-200" },
+                    "(",
+                    formatDateTime(props.replyingToTimestamp),
+                    ")"))),
+            React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": t('Cancel reply'), onClick: props.onClearReply, "data-tracking-id": "cancel-reply-button" },
+                React.createElement(TimesIcon, null)))),
+        React.createElement(RichTextEditor, { key: `${caseNumber}-${isCaseReadOnly}`, className: `${!isPublic && canPostPrivateComments ? 'is-private' : ''}`, disabled: isProcessing || isCaseReadOnly, hideToolbar: isCaseReadOnly, "aria-label": "comment text area", onChange: onCommentTextChange, value: commentText, height: 313, onCharLimitExceeded: onCommentExceedCharsLimit, placeholder: !isPublic && canPostPrivateComments
+                ? 'Add a comment or attach a file privately'
+                : 'Add a comment to this case', charLimit: 32000, onImageUpload: onImageUpload, bindEditor: (editor) => {
+                quillEditorRef.current = editor;
             } }),
-        isConfirmedStateSideSupport && (React.createElement("div", { className: "pf-v5-u-mt-md pf-v5-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-v5-u-font-weight-normal pf-v5-u-font-size-sm" },
+        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, disabled: isCaseReadOnly, 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" },
                 React.createElement(Trans, null, "I will not transmit controlled unclassified information to or export it from the Red Hat Customer Portal."),
                 React.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*")))),
-        isProcessing ? (React.createElement(LoadingIndicator, { isInline: true, size: "sm" })) : (React.createElement("div", { className: "pf-v5-l-flex post-comment-btn-group push-top-narrow" },
+        isProcessing ? (React.createElement(LoadingIndicator, { isInline: true, size: "sm" })) : (React.createElement("div", { className: "pf-v6-l-flex post-comment-btn-group push-top-narrow" },
             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, { "data-tracking-id": "postcomment-cancel-button", type: "button", variant: ButtonVariant.link, onClick: onCancelClick, isDisabled: isPostCommentDisabled },
+            React.createElement(FileSelectorButton, { isSessionId: false, isDisabled: isFileUploadDisabled, buttonLabel: React.createElement(React.Fragment, null,
+                    React.createElement(PlusIcon, null),
+                    " ",
+                    React.createElement(Trans, null, "Attach files")) }),
+            React.createElement(Button, { className: "secondary-button-pill", "data-tracking-id": "postcomment-cancel-button", type: "button", variant: ButtonVariant.link, onClick: onCancelClick, isDisabled: isCommentSignatureMatch() || isProcessing || isCaseReadOnly },
                 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(FileUpload, { className: `file-upload-section ${hasSomeSelectedFilesLocal ? 'card card-white pf-v5-u-mt-lg pf-v5-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') }))));
+                React.createElement(Checkbox, { label: t('Private'), isChecked: !isPublic && canPostPrivateComments, isDisabled: isCaseReadOnly, onChange: handleCheckboxToggle, "aria-label": t('Private'), id: "private-comment", name: "private-comment", "data-tracking-id": "private-comment-checkbox" }))))),
+        React.createElement("div", Object.assign({}, getRootProps(), { className: "post-comment-dropzone" }),
+            React.createElement("input", Object.assign({}, getInputProps())),
+            React.createElement(FileUpload, { className: `file-upload-section ${hasSomeSelectedFilesLocal ? 'card card-white pf-v6-u-mt-lg pf-v6-u-p-lg' : ''}`, idToUploadTo: caseNumber, caseSalesforceId: caseSalesforceId, onUploadClick: onFileUploadClick, onCaseFileUploaded: onCaseFileUploaded, isSessionId: false, needsAnalyzing: false, autoUploadOnSelect: true, isPrivate: !isPublic, showDescriptionInfoMsg: true }))));
 }

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":"AAMA,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,qBAsIlD"}
+{"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"}