@rh-support/troubleshoot 2.6.358 → 2.6.363

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

@@ -7,291 +7,341 @@ 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, Checkbox } from '@patternfly/react-core';
+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 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 { 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 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 { useS3Upload } from '../../../../hooks/useS3Upload';
-import { checkForCaseStatusToggleOnAttachOrComment } from '../../../../reducers/CaseReducer';
-import { AttachmentDispatchContext, AttachmentStateContext, hasAbortedOrFailedAttachments, hasQueuedAttachmentUploads, hasSomeSelectedFiles, isUploadingAttachment, resetAttachment, } from '../../../shared/fileUpload';
+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 { 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';
-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, _c, _d, _e, _f, _g;
+    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 batchSuccessCountRef = useRef(0);
     const isUploadingAttachments = isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles);
-    const hasQueuedUploads = hasQueuedAttachmentUploads(attachmentState.caseFiles.selectedLocalFiles);
-    const hasAbortedOrFailed = hasAbortedOrFailedAttachments(attachmentState.caseFiles.selectedLocalFiles);
+    const hasSomeUnUploadedFiles = hasSomeUnUploadedAttachments(attachmentState.caseFiles.selectedLocalFiles);
     const hasSomeSelectedFilesLocal = hasSomeSelectedFiles(attachmentState.caseFiles.selectedLocalFiles);
-    const [isPublic, setIsPublic] = useState((_a = props.defaultIsPublic) !== null && _a !== void 0 ? _a : true);
+    const [commentType, setCommentType] = useState(EditorMode.PLAIN);
     const [commentSignature, setCommentSignature] = useState('');
-    const [commentText, setCommentText] = useState('');
     const { isExportingPDF } = useContext(PDFContext);
     const { getCommentTypeFromPreference, getCommentSignature } = useUserPreferences();
-    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(() => {
-        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);
-                }
-            });
+    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}` || '');
+            }
         }
-        loadPrefs();
+        catch (error) {
+            console.log(error);
+        }
+    });
+    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 { onFileAttach, cancelFileUpload } = useMarkdownFileUploader({
+    const { onFileAttach, onFileDelete, isUploadingFile, isMarkdownFileUploadInProgress, cancelFileUpload } = useMarkdownFileUploader({
         caseNumber,
-        onAttachmentAdded: (_b = props.onAttachmentAdded) !== null && _b !== void 0 ? _b : (() => undefined),
+        secureSupport: loggedInUsersAccount.data.secureSupport,
+        onAttachmentAdded: props.onAttachmentAdded,
     });
-    const { getRootProps, getInputProps } = useDropzone({
-        onDrop: (files) => onFileAttach(files, isPublic),
-        multiple: false,
-        noClick: true,
-        noKeyboard: true,
-    });
-    const { status, caseSalesforceId, existingCaseDetails } = useCaseSelector((state) => ({
+    const { selectedNotificationContacts, status, contactSSOName, selectedAccountDetails } = useCaseSelector((state) => ({
         status: state.caseDetails.status,
-        caseSalesforceId: state.caseDetails.id,
-        existingCaseDetails: state.caseDetails,
+        contactSSOName: state.caseDetails.contactSSOName,
+        selectedNotificationContacts: state.selectedNotificationContacts,
+        selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
-    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 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(status);
-    const isCaseReadOnly = canEditCase.isCaseNotEditable;
+    const canEditCase = useCanEditCase();
     const componentRef = useRef(null);
-    const resetIsPublic = useCallback(() => { var _a; return setIsPublic((_a = props.defaultIsPublic) !== null && _a !== void 0 ? _a : true); }, [props.defaultIsPublic]);
+    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(() => {
-        var _a;
         if (previousDefaultIsPublic === props.defaultIsPublic)
             return;
-        setIsPublic((_a = props.defaultIsPublic) !== null && _a !== void 0 ? _a : true);
+        props.defaultIsPublic === null ? resetIsPublic() : setIsPublic(props.defaultIsPublic);
     }, [props.defaultIsPublic, resetIsPublic, previousDefaultIsPublic]);
-    const quillEditorRef = useRef(null);
-    const loggedInUserSSO = loggedInUserRights.data.getSSOUsername();
-    const { saveDraft, clearDraft } = useCommentDrafts({
-        caseNumber,
-        loggedInUserSSO,
-        isInternal: loggedInUserRights.data.isInternal(),
-        commentSignature,
-        canPostPrivateComments,
-        setCommentText,
-        setIsPublic,
-        applySignature,
-    });
+    // 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 resetCommentSection = () => __awaiter(this, void 0, void 0, function* () {
         setCommentText('');
         setIsTextAreaFocused(false);
         resetIsPublic();
-        yield clearDraft();
-        setCommentText(commentSignature ? `<p><br></p><p>${commentSignature}</p>` : '');
+        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 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 plainTextContent = (_g = (_f = (_e = (_d = quillEditorRef.current) === null || _d === void 0 ? void 0 : _d.getText) === null || _e === void 0 ? void 0 : _e.call(_d)) === null || _f === void 0 ? void 0 : _f.trim()) !== null && _g !== void 0 ? _g : '';
-    const checkCommentSignature = plainTextContent.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)
-            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,
+    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,
             });
-            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);
+        });
+    }, 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'));
         }
-        catch (_c) {
-            ToastNotification.addDangerMessage(t('Could not submit comment. Please refresh the page and try again.'));
+    });
+    useEffect(() => {
+        isPublicRef.current = isPublic;
+    }, [isPublic]);
+    useEffect(() => {
+        if (isCommentEmpty) {
+            props.onCommentClear && props.onCommentClear();
         }
-        finally {
-            setIsProcessing(false);
+        // 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* () {
+        if (canEditCase.alert())
+            return;
+        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 = () => {
         setIsPublic((publicComment) => !publicComment);
     };
     function isCommentSignatureMatch() {
-        var _a, _b, _c, _d;
-        const plainText = (_d = (_c = (_b = (_a = quillEditorRef.current) === null || _a === void 0 ? void 0 : _a.getText) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : commentText.trim();
-        return plainText === commentSignature;
+        return commentText.trim() === commentSignature;
     }
     const isPostCommentDisabled = isProcessing || !commentText || isCommentSignatureMatch();
-    const isFileUploadDisabled = (isConfirmedStateSideSupport && !cssCommentAgreed) || isCaseReadOnly;
+    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
+            .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 = () => {
-        if (!commentText)
-            setIsTextAreaFocused(false);
+        !commentText && setIsTextAreaFocused(false);
     };
     const onCommentExceedCharsLimit = (lengthExceededNew) => {
         if (isCommentTooLong !== lengthExceededNew)
             setIsCommentTooLong(lengthExceededNew);
     };
-    // Submit stays independent of attachment upload so comments can be posted mid-upload (PCM-15915).
-    const isSubmitDisabled = isCommentEmpty || isPostCommentDisabled || (isConfirmedStateSideSupport && !cssCommentAgreed) || isCaseReadOnly;
+    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) => {
+        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 ||
+        isPostCommentDisabled ||
+        (isConfirmedStateSideSupport && !cssCommentAgreed);
     return (React.createElement("div", { className: `pf-v6-u-mb-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, ref: componentRef },
-        props.replyingToAuthor && (React.createElement("div", { className: "post-comment-reply-banner pf-v6-u-mb-sm", "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", onFocus: () => {
-                if (isCaseReadOnly)
-                    return;
-                setIsTextAreaFocused(true);
-            }, onBlur: onTextAreaBlur, onChange: onCommentTextChange, value: commentText, height: isTextAreaFocused ? 313 : 120, 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;
+        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(),
+                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, disabled: isCaseReadOnly, onChange: (e) => setCssCommentAgreed(e.target.checked) }),
+            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" },
                 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" }, "*")))),
@@ -299,15 +349,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")),
-            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: isCommentEmpty || isProcessing || isCaseReadOnly },
+            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, 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: loggedInUsersAccount.data.secureSupport ? false : true, isPrivate: !isPublic, showDescriptionInfoMsg: true }))));
+                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,qBAiJlD"}
+{"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();
@@ -71,7 +69,7 @@ export function VerifyCaseStatusModal(props) {
             }
             catch (e) {
                 setStatusUpdating(caseOverviewDispatch, false);
-                caseUpdateError.showError(e, t('Status failed to update, try refreshing the page. Please contact us if the problem persists.'));
+                caseUpdateError.showError(e, t('Status failed to update'));
             }
         }
         else {

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"}