@rh-support/troubleshoot 2.7.1 → 2.7.10

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

@@ -7,126 +7,213 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { caseAttachments } from '@cee-eng/hydrajs';
-import { MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import { useApolloClient } from '@apollo/client/react';
+import { Button, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
 import { AlertMessage, AlertType, ErrorBoundary, LoadingIndicator, ToastNotification } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
-import { dtmTrackEventCaseStepEncountered, getDropdownBtnPlaceholder, getUrlParsedParams, scrollIntoView, } from '@rh-support/utils';
+import { downloadCaseAttachment, dtmTrackEventCaseStepEncountered, getApiResourceObject, getDropdownBtnPlaceholder, getUrlParsedParams, scrollIntoView, } from '@rh-support/utils';
 import cloneDeep from 'lodash/cloneDeep';
 import filter from 'lodash/filter';
 import findIndex from 'lodash/findIndex';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
+import orderBy from 'lodash/orderBy';
 import Mark from 'mark.js';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useInView } from 'react-intersection-observer';
 import { useLocation } from 'react-router-dom';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List, WindowScroller } from 'react-virtualized';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseDetailsPageDispatchContext, useCaseDetailsPageStateContext, } from '../../../../context/CaseDetailsPageContext';
 import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../../../context/CaseDiscussionTabContext';
-import { clearReplyComment, discussionSortOrderConst, DiscussionType, setCommentText, setDiscussions, setFilter, setSort, updateAttachment, updateAttacmentsAfterRemoval, updateCommentStateFeedback, updateDiscussionStateAttachments, updateDiscussionStateComments, } from '../../../../reducers/CaseDiscussionTabReducer';
+import { CaseDetailsConstants } from '../../../../reducers/CaseDetailsPageReducer';
+import { clearReplyingTo, discussionSortOrderConst, DiscussionType, setDiscussions, setFilter, setReplyingTo, setSort, updateAttachment, updateAttacmentsAfterRemoval, updateDiscussionStateAttachments, } from '../../../../reducers/CaseDiscussionTabReducer';
 import { setCaseState } from '../../../../reducers/CaseReducer';
 import { AttachmentContextProvider } from '../../../shared/fileUpload/reducer/AttachmentReducerContext';
 import { PDFContext } from '../../PDFContainer';
 import CaseAttachment from './CaseAttachment';
-import CaseChat from './CaseChat';
 import CaseComments from './CaseComments';
-import CaseExternalTrackerUpdate from './CaseExternalTrackerUpdate';
+// import CaseExternalTrackerUpdate from './CaseExternalTrackerUpdate';
 import { CommentSearch } from './CommentSearch';
 import { PostComment } from './PostComment';
+/** Threshold above which comments render in a virtualized (windowed) list for performance. */
 const VC_MINIMUM_COMMENT = 150;
-let cellMeasureCache = new CellMeasurerCache({
-    fixedWidth: true,
-    defaultHeight: 100,
-});
 export default function CaseDiscussion(props) {
+    var _a;
     const { t } = useTranslation();
-    const { isPostingRemoteRequestCommentCompleted, screenSessionRequested, product, version } = useCaseSelector((state) => ({
+    const { isPostingRemoteRequestCommentCompleted, product, version, caseSalesforceId } = useCaseSelector((state) => ({
         isPostingRemoteRequestCommentCompleted: state.isPostingRemoteRequestCommentCompleted,
-        screenSessionRequested: state.caseDetails.screenSessionRequested,
         product: state.caseDetails.product,
         version: state.caseDetails.version,
+        caseSalesforceId: state.caseDetails.id,
     }), isEqual);
     const urlSearchParams = getUrlParsedParams(useLocation().search);
-    const discussionIdFromUrl = ((urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.commentId) ||
-        (urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.externalTrackerId) ||
-        (urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.attachmentId) ||
-        (urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.chatId));
+    const discussionIdFromUrl = ((urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.commentId) || (urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.attachmentId));
     const activeDiscussionElementRef = useRef(null);
-    const { sort, discussionFiltersListState, allDiscussions, replyCommentText, replyCommentCreator } = useCaseDiscussionTabStateContext();
-    const { globalMetadataState: { loggedInUsersAccount, navBarRef }, } = useGlobalStateContext();
+    const { sort, discussionFiltersListState, replyingToAuthor, replyingToTimestamp } = useCaseDiscussionTabStateContext();
+    const { globalMetadataState: { navBarRef, loggedInUsersAccount }, } = useGlobalStateContext();
     const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
-    const caseDispatch = useCaseDispatch();
-    const { caseDetailsPageState: { caseFeedbacksHydra, caseAttachmentHydra, caseExternalTrackersUpdate }, } = useCaseDetailsPageStateContext();
+    const { caseDetailsPageState: { caseAttachmentHydra }, } = useCaseDetailsPageStateContext();
     const dispatchCaseDetailsHydraAttachments = useCaseDetailsPageDispatchContext();
-    const { caseNumber } = props;
-    const activeElementId = useRef(null);
+    const caseDispatch = useCaseDispatch();
+    const apolloClient = useApolloClient();
     const ability = useContext(AbilityContext);
-    const canSeeExternalTracker = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_EXTERNAL_TRACKER);
-    const canSeeChat = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_CHAT);
     const canSeeAttachments = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_SEE_ATTACHMENTS);
+    const { caseNumber } = props;
+    const activeElementId = useRef(null);
     const listRef = React.useRef(null);
     const windowScrollerRef = React.useRef(null);
     const commentRef = React.useRef(null);
+    const cellMeasureCacheRef = useRef(new CellMeasurerCache({ fixedWidth: true, defaultHeight: 100 }));
     const { isExportingPDF } = useContext(PDFContext);
+    const { ref: sentinelRef, inView } = useInView({ threshold: 0, rootMargin: '200px' });
     const [searchResult, setSearchResult] = useState([]);
     const [searchCommentText, setSearchCommentText] = useState('');
     const [commentIndex, setCommentIndex] = useState(-1);
     const [isCommentSearchCleared, setIsCommentSearchCleared] = useState(false);
     const [isJumpToCommentClicked, setJumpToCommentClicked] = useState(false);
     const [canUpdateScrollTop, setCanUpdateScrollTop] = useState(true);
-    const [replyingToPrivateComment, setReplyingToPrivateComment] = useState(null);
-    // used for tracking comment section width changes
     const [discussionSectionWidth, setDiscussionSectionWidth] = useState(null);
+    const [debouncedShowSkeleton, setDebouncedShowSkeleton] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
     const [selectedFilterItems, setSelectedFilterItems] = useState([]);
     const [isSortOpen, setIsSortOpen] = useState(false);
     const [sortSelected, setSortSelected] = useState('Select a value');
-    if (props.isDiscussionTab) {
-        cellMeasureCache = new CellMeasurerCache({
-            fixedWidth: true,
-            defaultHeight: 100,
+    const { hasNextPage, isLoadingMore, loadMoreError, fetchMore } = props;
+    const isCommentFilterActive = discussionFiltersListState.some((f) => (f.value === DiscussionType.COMMENT || f.value === DiscussionType.ALL) && f.isSelected);
+    useEffect(() => {
+        console.log('[CaseDiscussion] fetchMore useEffect', {
+            inView,
+            hasNextPage,
+            isLoadingMore,
+            loadMoreError,
+            hasFetchMore: !!fetchMore,
+            isCommentFilterActive,
+            willFetch: inView && hasNextPage && !isLoadingMore && !loadMoreError && !!fetchMore && isCommentFilterActive,
         });
+        if (inView && hasNextPage && !isLoadingMore && !loadMoreError && fetchMore && isCommentFilterActive) {
+            fetchMore();
+        }
+    }, [inView, hasNextPage, isLoadingMore, loadMoreError, fetchMore, isCommentFilterActive]);
+    useEffect(() => {
+        if (props.loadMoreError) {
+            setDebouncedShowSkeleton(false);
+            return;
+        }
+        if (props.isLoadingMore && props.hasNextPage) {
+            const timer = setTimeout(() => setDebouncedShowSkeleton(true), 300);
+            return () => clearTimeout(timer);
+        }
+        setDebouncedShowSkeleton(false);
+    }, [props.isLoadingMore, props.hasNextPage, props.loadMoreError]);
+    const cellMeasureCache = cellMeasureCacheRef.current;
+    const allDiscussions = useMemo(() => {
+        var _a, _b, _c;
+        const allComments = (props.caseComments || [])
+            .filter((comment) => comment.isDraft === false)
+            .map((comment) => ({
+            item: Object.assign(Object.assign({}, comment), { isPublic: comment.isPublic === undefined ? true : comment.isPublic, last_modified_date: comment.lastModifiedDate || comment.createdDate }),
+            discussionType: DiscussionType.COMMENT,
+            last_modified_date: comment.lastModifiedDate || comment.createdDate,
+        }));
+        let allAttachments = canSeeAttachments
+            ? (caseAttachmentHydra.data || [])
+                .filter((attachment) => (attachment === null || attachment === void 0 ? void 0 : attachment.lastModifiedDate) || (attachment === null || attachment === void 0 ? void 0 : attachment.createdDate))
+                .map((attachment) => ({
+                item: Object.assign(Object.assign({}, attachment), { lastModifiedDate: attachment.lastModifiedDate || attachment.createdDate }),
+                last_modified_date: (attachment.lastModifiedDate || attachment.createdDate),
+                discussionType: DiscussionType.ATTACHMENT,
+            }))
+            : [];
+        if (props.hasNextPage && allComments.length > 0) {
+            const sortOrder = (_a = sort === null || sort === void 0 ? void 0 : sort.sortOrder) !== null && _a !== void 0 ? _a : 'desc';
+            const commentDates = allComments.map((c) => c.last_modified_date).filter(Boolean);
+            if (commentDates.length > 0) {
+                if (sortOrder === 'desc') {
+                    const oldestLoaded = commentDates.reduce((min, d) => (d < min ? d : min));
+                    allAttachments = allAttachments.filter((a) => a.last_modified_date >= oldestLoaded);
+                }
+                else {
+                    const newestLoaded = commentDates.reduce((max, d) => (d > max ? d : max));
+                    allAttachments = allAttachments.filter((a) => a.last_modified_date <= newestLoaded);
+                }
+            }
+        }
+        const merged = [...allComments, ...allAttachments];
+        return orderBy(merged, ['last_modified_date', (d) => { var _a; return (_a = d.item.id) !== null && _a !== void 0 ? _a : ''; }], [(_b = sort === null || sort === void 0 ? void 0 : sort.sortOrder) !== null && _b !== void 0 ? _b : 'desc', (_c = sort === null || sort === void 0 ? void 0 : sort.sortOrder) !== null && _c !== void 0 ? _c : 'desc']);
+    }, [props.caseComments, caseAttachmentHydra.data, canSeeAttachments, sort, props.hasNextPage]);
+    const usedPaginationRef = useRef(false);
+    if (props.hasNextPage || props.isLoadingMore) {
+        usedPaginationRef.current = true;
     }
+    const shouldRenderRVComponent = !isExportingPDF && allDiscussions.length > VC_MINIMUM_COMMENT && !usedPaginationRef.current;
+    const list = discussionFiltersListState.filter((f) => f.canSee);
     const computeFilterComment = () => {
         return filter(allDiscussions, (discussion) => {
-            const activeFilter = discussionFiltersListState.filter((filter) => filter.value === discussion.discussionType && filter.isSelected);
+            const activeFilter = discussionFiltersListState.filter((f) => f.value === discussion.discussionType && f.isSelected);
             return activeFilter.length === 1 ? discussion : null;
         });
     };
-    const shouldRenderRVComponent = !isExportingPDF && allDiscussions.length > VC_MINIMUM_COMMENT;
-    // filter comments on the basis of filterBy and search api
     const computeFilteredComments = computeFilterComment();
     const comuteSearchedComments = searchResult.length === 0
         ? cloneDeep(computeFilteredComments)
         : filter([...computeFilteredComments], (o) => { var _a; return searchResult.indexOf((_a = o === null || o === void 0 ? void 0 : o.item) === null || _a === void 0 ? void 0 : _a.id) !== -1; });
-    const isSearchResultEmpty = !isEmpty(searchCommentText) && (searchResult.length === 0 || comuteSearchedComments.length === 0);
+    const isRefetching = props.commentsLoading && !props.isLoadingMore;
+    const isSearchResultEmpty = !isRefetching &&
+        !isEmpty(searchCommentText) &&
+        (searchResult.length === 0 || comuteSearchedComments.length === 0);
+    // DEBUG: track every render of CaseDiscussion
+    console.log('[CaseDiscussion] render', {
+        commentsLoading: props.commentsLoading,
+        isLoadingMore: props.isLoadingMore,
+        hasNextPage: props.hasNextPage,
+        loadMoreError: props.loadMoreError,
+        isRefetching,
+        isSearchResultEmpty,
+        allDiscussionsLen: allDiscussions.length,
+        filteredLen: computeFilteredComments.length,
+        searchedLen: comuteSearchedComments.length,
+        caseCommentsLen: (_a = props.caseComments) === null || _a === void 0 ? void 0 : _a.length,
+        inView,
+        isCommentFilterActive,
+    });
     const setVRCommentIndex = (cId) => {
         setCommentIndex(cId < 0 ? 0 : cId);
         setJumpToCommentClicked(true);
         isCommentSearchCleared && setIsCommentSearchCleared(false);
     };
+    const canFetchNextPage = hasNextPage && !isLoadingMore && !loadMoreError && fetchMore && isCommentFilterActive;
+    const fetchUntilDeepLinkFound = useCallback(() => {
+        if (!discussionIdFromUrl || !canFetchNextPage)
+            return;
+        const found = comuteSearchedComments.some((discussion) => discussion.item.id === discussionIdFromUrl);
+        if (!found)
+            fetchMore();
+    }, [discussionIdFromUrl, canFetchNextPage, comuteSearchedComments, fetchMore]);
     useEffect(() => {
         var _a, _b;
         isCommentSearchCleared && setIsCommentSearchCleared(false);
         if (!discussionIdFromUrl ||
             (activeElementId && activeElementId.current === discussionIdFromUrl) ||
             (allDiscussions || []).length === 0) {
+            fetchUntilDeepLinkFound();
+            return;
+        }
+        const targetIndex = findIndex([...comuteSearchedComments], (discussion) => discussion.item.id === discussionIdFromUrl);
+        if (targetIndex < 0) {
+            fetchUntilDeepLinkFound();
             return;
         }
         activeElementId.current = discussionIdFromUrl;
         if (allDiscussions.length > VC_MINIMUM_COMMENT) {
-            const commentIndex = findIndex([...comuteSearchedComments], (discussion) => discussion.item.id === discussionIdFromUrl);
-            setVRCommentIndex(commentIndex);
-            // to fix scrolling to comment index when scrollTop value from window scroller is 0
-            // initial list items
-            if (0 <= commentIndex && commentIndex <= 3) {
+            setVRCommentIndex(targetIndex);
+            if (targetIndex <= 3) {
                 const offset = 80;
                 const scrollTopValue = ((_a = windowScrollerRef === null || windowScrollerRef === void 0 ? void 0 : windowScrollerRef.current) === null || _a === void 0 ? void 0 : _a._positionFromTop) - offset;
                 const scrollLeftValue = (_b = windowScrollerRef === null || windowScrollerRef === void 0 ? void 0 : windowScrollerRef.current) === null || _b === void 0 ? void 0 : _b._positionFromLeft;
-                window.scrollTo({
+                globalThis.scrollTo({
                     top: scrollTopValue,
                     left: scrollLeftValue,
                     behavior: 'smooth',
@@ -144,57 +231,51 @@ export default function CaseDiscussion(props) {
                 });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [discussionIdFromUrl, allDiscussions, activeElementId.current]);
+    }, [discussionIdFromUrl, comuteSearchedComments.length]);
+    // Intercept "Back to Top" primer footer link to prevent navigation away from case details
+    useEffect(() => {
+        const onClick = (e) => {
+            const anchor = e.target.closest('a.btn_slideto[href="#masthead"]');
+            if (anchor) {
+                e.preventDefault();
+                globalThis.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        };
+        document.addEventListener('click', onClick, true);
+        return () => document.removeEventListener('click', onClick, true);
+    }, []);
+    useEffect(() => {
+        if (isExportingPDF)
+            return;
+        setDiscussions(dispatchDiscussion, props.caseComments, [], caseAttachmentHydra.data, [], [], discussionFiltersListState, false, false, canSeeAttachments, sort);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.caseComments, caseAttachmentHydra, canSeeAttachments, sort]);
     useEffect(() => {
         if (!caseAttachmentHydra.isFetching && caseAttachmentHydra.isError) {
-            ToastNotification.addDangerMessage(t(`There was an error loading attachments.`));
+            ToastNotification.addDangerMessage(t('There was an error loading attachments.'));
         }
-        if (!caseExternalTrackersUpdate.isFetching && caseExternalTrackersUpdate.isError) {
-            ToastNotification.addDangerMessage(t(`There was an error loading external trackers.`));
-        }
-        if (!caseFeedbacksHydra.isFetching && caseFeedbacksHydra.isError) {
-            console.log(`There was an error loading feedback.`);
+    }, [caseAttachmentHydra.isFetching, caseAttachmentHydra.isError, t]);
+    const onCommentAdded = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            yield props.refetchComments();
         }
-        // Attachments, feedbacks and external tracker updates apis are called in advance
-        if (!isExportingPDF &&
-            !caseAttachmentHydra.isFetching &&
-            !caseFeedbacksHydra.isFetching &&
-            !caseExternalTrackersUpdate.isFetching) {
-            setDiscussions(dispatchDiscussion, props.caseComments, props.caseChats, caseAttachmentHydra.data, caseFeedbacksHydra.data, caseExternalTrackersUpdate.data, discussionFiltersListState, canSeeExternalTracker, canSeeChat, canSeeAttachments);
+        catch (e) {
+            console.error('Failed to refetch comments:', e);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.caseComments, caseAttachmentHydra, props.caseChats, caseFeedbacksHydra, caseExternalTrackersUpdate]);
-    const onAttachmentRemove = (uuid_removed) => {
-        updateAttacmentsAfterRemoval(dispatchDiscussion, uuid_removed, allDiscussions, discussionFiltersListState);
-    };
-    const onFeedbackUpdate = (comment_id, feedback) => {
-        updateCommentStateFeedback(dispatchDiscussion, comment_id, feedback, allDiscussions);
-    };
-    const onCommentAdded = () => __awaiter(this, void 0, void 0, function* () {
-        yield updateDiscussionStateComments(dispatchDiscussion, caseDispatch, caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
         dtmTrackEventCaseStepEncountered('comment', caseNumber, product, version);
     });
-    const onAttachmentAdded = () => __awaiter(this, void 0, void 0, function* () {
-        yield updateDiscussionStateAttachments(dispatchDiscussion, caseNumber, allDiscussions, sort, loggedInUsersAccount.data.secureSupport, discussionFiltersListState, dispatchCaseDetailsHydraAttachments);
-    });
-    const onReply = (commentText, commentCreator, isPublic) => {
-        var _a;
-        setReplyingToPrivateComment(!isPublic);
-        setCommentText(dispatchDiscussion, commentText, commentCreator);
+    const onReply = (author, commentId, timestamp) => {
+        setReplyingTo(dispatchDiscussion, author, commentId, timestamp);
         scrollIntoView(props.tabRef, { navBarRef, timeout: 0, onlyIfNotInViewport: true, offset: 30 });
-        commentIndex !== -1 && setCommentIndex(-1);
-        isCommentSearchCleared && setIsCommentSearchCleared(false);
-        (_a = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToPosition(0);
     };
-    const resetReplyComment = () => {
-        clearReplyComment(dispatchDiscussion);
-        setReplyingToPrivateComment(null);
+    const onClearReply = () => {
+        clearReplyingTo(dispatchDiscussion);
     };
+    /** Strips special chars to prevent regex injection, then HTML-escapes via DOM round-trip to prevent XSS. */
     const sanitizedSearchInput = (value) => {
         if (!value)
             return '';
         const sanitizedValue = value.replace(/[^a-zA-Z0-9]/g, '');
-        // To escape HTML-like characters (e.g., <, >, &) in sanitizedValue
         const div = document.createElement('div');
         div.textContent = sanitizedValue;
         return div.innerHTML;
@@ -208,10 +289,10 @@ export default function CaseDiscussion(props) {
         isCommentSearchCleared && setIsCommentSearchCleared(false);
     };
     const highlightSearchResults = (searchTerm) => {
+        // Delay allows the DOM (especially virtualized rows) to finish rendering before mark.js can highlight matches.
         setTimeout(() => {
-            // to mark attachment link button text
             if (!isEmpty(sanitizedSearchInput(searchTerm))) {
-                const sanitizedSearchTerm = sanitizedSearchInput(searchTerm); // Sanitize the search term
+                const sanitizedSearchTerm = sanitizedSearchInput(searchTerm);
                 document.querySelectorAll('button.attachment-download-btn').forEach((button) => {
                     var _a, _b;
                     if ((_a = button === null || button === void 0 ? void 0 : button.textContent) === null || _a === void 0 ? void 0 : _a.includes(sanitizedSearchTerm)) {
@@ -225,9 +306,6 @@ export default function CaseDiscussion(props) {
                 done: () => {
                     if (isEmpty(searchTerm))
                         return;
-                    // removed { separateWordSearch: false }
-                    // so the search term is split into individual words, and each word is matched separately.
-                    // Search Term: "frontend developer" Matches: Text containing "frontend" or "developer".
                     markInstance.mark(searchTerm);
                 },
             });
@@ -239,22 +317,31 @@ export default function CaseDiscussion(props) {
         highlightSearchResults('');
         setSearchResult([]);
         if (cId === discussionIdFromUrl) {
-            // reason to reset activeElementId if comment id is same in the url on click jump to comment button
-            // we need to re compute filtered comments after clear search results.
-            // it will call useEffect and will set virtual comment Index(setVRCommentIndex())
             activeElementId.current = '';
         }
     };
-    const onMetadataUpdate = (attachmentId, updatedAttachment) => {
-        updateAttachment(dispatchDiscussion, attachmentId, updatedAttachment, allDiscussions);
+    const onAttachmentRemove = (uuid_removed) => {
+        updateAttacmentsAfterRemoval(dispatchDiscussion, uuid_removed, allDiscussions, discussionFiltersListState);
     };
-    const downloadAttachment = (_a) => __awaiter(this, [_a], void 0, function* ({ caseNumber, uuid, name }) {
+    const onAttachmentAdded = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield updateDiscussionStateAttachments(dispatchDiscussion, caseNumber, allDiscussions, sort, discussionFiltersListState, dispatchCaseDetailsHydraAttachments, apolloClient, caseSalesforceId, Boolean((_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.secureSupport));
+    });
+    const onMetadataUpdate = (attachmentUuid, updatedAttachment) => {
+        updateAttachment(dispatchDiscussion, attachmentUuid, updatedAttachment, allDiscussions);
+        const updatedHydraAttachments = (caseAttachmentHydra.data || []).map((attachment) => (attachment === null || attachment === void 0 ? void 0 : attachment.uuid) === attachmentUuid ? Object.assign(Object.assign({}, attachment), updatedAttachment) : attachment);
+        dispatchCaseDetailsHydraAttachments({
+            type: CaseDetailsConstants.updateState,
+            payload: { caseAttachmentHydra: getApiResourceObject(updatedHydraAttachments) },
+        });
+    };
+    const downloadAttachment = ({ caseNumber: attachmentCaseNumber, uuid, name }) => {
         const tempToastId = ToastNotification.addInfoMessage(t('Starting file download'));
         try {
-            yield caseAttachments.downloadAttachmentS3(caseNumber, uuid, name, false, loggedInUsersAccount.data.secureSupport);
+            downloadCaseAttachment(attachmentCaseNumber, uuid, name);
         }
         catch (e) {
-            ToastNotification.addDangerMessage(t(`Could not download {{filename}}: {{error}}`, {
+            ToastNotification.addDangerMessage(t('Could not download {{filename}}: {{error}}', {
                 filename: name,
                 error: e === null || e === void 0 ? void 0 : e.message,
             }));
@@ -262,11 +349,7 @@ export default function CaseDiscussion(props) {
         finally {
             tempToastId && ToastNotification.clearToast(tempToastId);
         }
-    });
-    /**
-     * We need to clear the cell measurer cache if user resizes the window or discussion section width is changed
-     *  so that the height of the rows are re-calculated
-     */
+    };
     useEffect(() => {
         if (discussionSectionWidth && shouldRenderRVComponent) {
             cellMeasureCache && cellMeasureCache.clearAll();
@@ -277,11 +360,19 @@ export default function CaseDiscussion(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [discussionSectionWidth, shouldRenderRVComponent]);
+    useEffect(() => {
+        var _a;
+        if (shouldRenderRVComponent) {
+            cellMeasureCache.clearAll();
+            (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.recomputeRowHeights();
+        }
+        usedPaginationRef.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sort]);
     const renderVRCommentElement = () => {
         return (React.createElement(WindowScroller, { ref: windowScrollerRef, onScroll: handleScroll }, ({ height, registerChild, onChildScroll, isScrolling, scrollTop }) => {
             return (React.createElement("div", { ref: commentRef, "data-tracking-id": "vr-case-comments" },
                 React.createElement(AutoSizer, { disableHeight: true }, ({ width }) => {
-                    // setTimeout to update state in the next tick and avoid bad setState warnings
                     discussionSectionWidth !== width &&
                         setTimeout(() => setDiscussionSectionWidth(width), 0);
                     return (React.createElement("div", { ref: registerChild },
@@ -295,16 +386,19 @@ export default function CaseDiscussion(props) {
         if (isEmpty(discussion) || isEmpty(discussion.item))
             return null;
         return (React.createElement("div", { "data-tracking-id": "discussion-elements", key: discussion.item.id },
-            discussion.discussionType === DiscussionType.COMMENT && (React.createElement(CaseComments, { caseNumber: caseNumber, ref: discussionIdFromUrl === discussion.item.id ? activeDiscussionElementRef : null, comment: discussion.item, onFeedBackUpdate: onFeedbackUpdate, feedback: discussion.feedback, accountNumber: props.accountNumber, onReply: onReply, showJumpToComment: !isEmpty(searchCommentText), onJumpToComment: onJumpToComment, downloadAttachment: downloadAttachment })),
-            discussion.discussionType === DiscussionType.ATTACHMENT && (React.createElement(CaseAttachment, { attachment: discussion.item, onAttachmentRemove: onAttachmentRemove, onMetadataUpdate: onMetadataUpdate, showJumpToComment: !isEmpty(searchCommentText), onJumpToComment: onJumpToComment, downloadAttachment: downloadAttachment, ref: discussionIdFromUrl === discussion.item.id ? activeDiscussionElementRef : null })),
-            discussion.discussionType === DiscussionType.CHAT && (React.createElement(CaseChat, { caseNumber: caseNumber, ref: discussionIdFromUrl === discussion.item.id ? activeDiscussionElementRef : null, chat: discussion.item, showJumpToComment: !isEmpty(searchCommentText), onJumpToComment: onJumpToComment })),
-            discussion.discussionType === DiscussionType.EXTERNAL_TRACKER && (React.createElement(CaseExternalTrackerUpdate, { caseNumber: caseNumber, ref: discussionIdFromUrl === discussion.item.id ? activeDiscussionElementRef : null, trackerUpdate: discussion.item, showJumpToComment: !isEmpty(searchCommentText), onJumpToComment: onJumpToComment }))));
+            discussion.discussionType === DiscussionType.COMMENT && (React.createElement(CaseComments, { caseNumber: caseNumber, ref: discussionIdFromUrl === discussion.item.id ? activeDiscussionElementRef : null, comment: discussion.item, onFeedBackUpdate: () => { }, feedback: discussion.feedback, accountNumber: props.accountNumber, onReply: onReply, showJumpToComment: !isEmpty(searchCommentText), onJumpToComment: onJumpToComment, downloadAttachment: downloadAttachment })),
+            discussion.discussionType === DiscussionType.ATTACHMENT && (React.createElement(CaseAttachment, { attachment: discussion.item, onAttachmentRemove: onAttachmentRemove, onMetadataUpdate: onMetadataUpdate, showJumpToComment: !isEmpty(searchCommentText), onJumpToComment: onJumpToComment, downloadAttachment: downloadAttachment, ref: discussionIdFromUrl === discussion.item.id ? activeDiscussionElementRef : null }))));
     };
-    const rowRenderer = ({ index, parent, key, style }) => {
+    const rowRenderer = ({ index, parent, key, style, }) => {
         const discussion = comuteSearchedComments[index];
         return (React.createElement(CellMeasurer, { key: key, cache: cellMeasureCache, parent: parent, columnIndex: 0, rowIndex: index },
             React.createElement("div", { className: "comment-virtualized-row", key: key, style: style }, renderCaseCommentElement(discussion))));
     };
+    /**
+     * One-shot scroll override used after search/filter changes.
+     * Resets the virtualized list to the top, then yields control back to
+     * WindowScroller's default onChildScroll for subsequent scroll events.
+     */
     const customChildScroll = ({ scrollTop }) => {
         var _a;
         if (!canUpdateScrollTop) {
@@ -317,23 +411,25 @@ export default function CaseDiscussion(props) {
     };
     const handleScroll = ({ scrollTop }) => {
         var _a, _b, _c, _d, _e, _f;
-        // here we are doing couple of things
-        // 1. check scroll position on the first comment, 2. set scrollposition as par window top
-        // 3. if user click on jump to comment button then select row as per commentid and adding css class.
         isCommentSearchCleared && setIsCommentSearchCleared(false);
         if (listRef && commentRef) {
+            // Skip one scroll cycle after a search/filter reset to let customChildScroll re-sync
             if (!canUpdateScrollTop) {
                 setCanUpdateScrollTop(true);
                 return;
             }
             const commentTop = (_b = (_a = commentRef === null || commentRef === void 0 ? void 0 : commentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.top;
+            // Re-apply search highlights on scroll since virtualized rows re-mount
             !isEmpty(searchCommentText) && highlightSearchResults(searchCommentText);
+            // Normal browsing or comment section visible above viewport — sync list position
             if (isEmpty(discussionIdFromUrl) || commentTop > 0) {
                 (_c = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _c === void 0 ? void 0 : _c.scrollToPosition(commentTop > 0 ? 0 : Math.abs(commentTop));
             }
             else if (commentTop < 0 && !isEmpty(discussionIdFromUrl) && !isJumpToCommentClicked) {
+                // Deep-link navigation: let WindowScroller drive the list scroll position
                 (_d = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _d === void 0 ? void 0 : _d.scrollToPosition(scrollTop);
             }
+            // After a "jump to comment" click, scroll the virtualized list to the target row
             if (isJumpToCommentClicked) {
                 (_e = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _e === void 0 ? void 0 : _e.scrollToRow(commentIndex);
                 (_f = windowScrollerRef === null || windowScrollerRef === void 0 ? void 0 : windowScrollerRef.current) === null || _f === void 0 ? void 0 : _f.updatePosition();
@@ -341,7 +437,6 @@ export default function CaseDiscussion(props) {
             }
         }
     };
-    const list = discussionFiltersListState.filter((filter) => filter.canSee);
     useEffect(() => {
         if (isPostingRemoteRequestCommentCompleted) {
             onCommentAdded();
@@ -353,60 +448,116 @@ export default function CaseDiscussion(props) {
         e.stopPropagation();
         setIsOpen(!isOpen);
     };
-    const onSortToggleClick = (e) => {
-        e.stopPropagation();
-        setIsSortOpen(!isSortOpen);
-    };
     const onFilterSelect = (_event, prevOption) => {
-        const isFilterSelected = !prevOption.isSelected; // to get updated state of changed filter
-        const prevSelectedFilters = list.filter((option) => option.isSelected && option.value !== prevOption.value); // to get previously selected filters
+        const isFilterSelected = !prevOption.isSelected;
+        const prevSelectedFilters = list.filter((option) => option.isSelected && option.value !== prevOption.value);
         const prevSelectedFiltersValue = prevSelectedFilters.map((option) => option.value);
-        const newSelectedFilters = isFilterSelected // has all the selected values of filter with the updated selected filter state
+        const newSelectedFilters = isFilterSelected
             ? [...prevSelectedFiltersValue, prevOption.value]
             : prevSelectedFiltersValue;
         setFilter(dispatchDiscussion, newSelectedFilters, discussionFiltersListState);
         shouldRenderRVComponent && setCanUpdateScrollTop(false);
         setSelectedFilterItems(prevSelectedFiltersValue);
     };
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true }, getDropdownBtnPlaceholder(t('Select a filter'), list.filter((i) => i.isSelected).map((i) => i.filterLabel), ' ', list.length, t('All comments'))));
-    const onSortSelect = (_event, selectedSort) => {
-        setSort(dispatchDiscussion, selectedSort, allDiscussions);
-        setSortSelected(selectedSort.value);
+    const filterToggle = (toggleRef) => {
+        const selectedLabels = list.filter((i) => i.isSelected).map((i) => i.filterLabel);
+        const realFilters = list.filter((i) => i.value !== DiscussionType.ALL);
+        const allRealSelected = realFilters.length > 0 && realFilters.every((i) => i.isSelected);
+        const placeholder = allRealSelected
+            ? t('All')
+            : getDropdownBtnPlaceholder(t('Select a filter'), selectedLabels.filter((l) => l !== 'All'), ' ', realFilters.length, t('All'));
+        return (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true }, placeholder));
+    };
+    const onSortToggleClick = (e) => {
+        e.stopPropagation();
+        setIsSortOpen(!isSortOpen);
+    };
+    const onSortSelect = (_event, value) => {
+        const selectedSort = discussionSortOrderConst.find((option) => option.name === value);
+        if (selectedSort) {
+            setSort(dispatchDiscussion, selectedSort, allDiscussions);
+            setSortSelected(selectedSort.name);
+        }
         setIsSortOpen(false);
     };
     const onSortToggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onSortToggleClick, isExpanded: isSortOpen, isFullWidth: true }, sort.name));
     return (React.createElement(React.Fragment, null,
+        (() => {
+            const showInitialLoading = props.commentsLoading && allDiscussions.length === 0;
+            const showNoComments = !props.commentsLoading && !props.commentsError && allDiscussions.length === 0;
+            const showDiscussions = allDiscussions.length !== 0;
+            const showSkeleton = debouncedShowSkeleton;
+            const showNoMore = !props.hasNextPage &&
+                !props.isLoadingMore &&
+                !props.commentsLoading &&
+                !props.loadMoreError &&
+                comuteSearchedComments.length > 0;
+            console.log('[CaseDiscussion] RENDER DECISION', {
+                showInitialLoading,
+                showNoComments,
+                showDiscussions,
+                isRefetching,
+                showSkeleton,
+                showNoMore,
+                isSearchResultEmpty,
+                shouldRenderRVComponent,
+            });
+            return null;
+        })(),
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading post comment section') } },
             React.createElement(AttachmentContextProvider, null,
-                React.createElement(PostComment, { caseNumber: caseNumber, allDiscussions: allDiscussions, onCommentAdded: onCommentAdded, onAttachmentAdded: onAttachmentAdded, commentText: replyCommentText, onCommentClear: resetReplyComment, commentCreator: replyCommentCreator, defaultIsPublic: replyingToPrivateComment === null ? replyingToPrivateComment : !replyingToPrivateComment }))),
-        React.createElement(LoadingIndicator, { className: "text-center", isInline: true, show: caseAttachmentHydra.isFetching ||
-                caseExternalTrackersUpdate.isFetching ||
-                caseFeedbacksHydra.isFetching ||
-                (screenSessionRequested && allDiscussions.length === 0) }),
-        !caseAttachmentHydra.isFetching &&
-            !caseFeedbacksHydra.isFetching &&
-            !caseExternalTrackersUpdate.isFetching &&
-            !screenSessionRequested &&
-            allDiscussions.length === 0 && React.createElement(Trans, null, "No comments"),
-        !caseAttachmentHydra.isFetching &&
-            !caseFeedbacksHydra.isFetching &&
-            !caseExternalTrackersUpdate.isFetching &&
-            allDiscussions.length !== 0 && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading comments. Try refreshing.') } },
+                React.createElement(PostComment, { caseNumber: caseNumber, allDiscussions: allDiscussions, onCommentAdded: onCommentAdded, onAttachmentAdded: onAttachmentAdded, onAttachmentRemove: onAttachmentRemove, replyingToAuthor: replyingToAuthor, replyingToTimestamp: replyingToTimestamp, onClearReply: onClearReply }))),
+        props.commentsLoading && allDiscussions.length === 0 && React.createElement(LoadingIndicator, { size: "sm" }),
+        props.commentsError && allDiscussions.length === 0 && (React.createElement(AlertMessage, { variant: AlertType.DANGER, show: true, title: t('Failed to load comments. Try refreshing.') })),
+        !props.commentsLoading && !props.commentsError && allDiscussions.length === 0 && (React.createElement("p", null,
+            React.createElement(Trans, null, "No comments"))),
+        allDiscussions.length !== 0 && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading comments. Try refreshing.') } },
             React.createElement("div", { className: `pfe-l-grid pfe-m-all-6-col pfe-m-gutters push-bottom ${isExportingPDF ? 'hide-in-pdf' : ''}` },
                 React.createElement("div", { className: "pfe-m-12-col" }, allDiscussions.length > 20 && (React.createElement(CommentSearch, { caseDiscussions: computeFilteredComments || [], onCommentSearch: onCaseCommentSearch, isCommentSearchCleared: isCommentSearchCleared }))),
                 React.createElement("span", { className: "push-top-narrow" },
-                    React.createElement("label", { htmlFor: "case-list-comments-dropdown", className: "pf-v5-u-mb-sm" }, t('Filter by')),
-                    React.createElement(Select, { "data-tracking-id": "discussions-filter-comments-dropdown", id: "case-list-comments-dropdown", role: "menu", isOpen: isOpen, selected: selectedFilterItems, onSelect: onFilterSelect, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, zIndex: 9 },
-                        React.createElement(SelectList, null, list.map((option) => (React.createElement(SelectOption, { hasCheckbox: true, value: option, isSelected: option.isSelected, isDisabled: option.isDisabled }, option.filterLabel)))))),
+                    React.createElement("label", { htmlFor: "case-list-comments-dropdown", className: "pf-v6-u-mb-sm" }, t('Filter by')),
+                    React.createElement(Select, { "data-tracking-id": "discussions-filter-comments-dropdown", id: "case-list-comments-dropdown", role: "menu", isOpen: isOpen, selected: selectedFilterItems, onSelect: onFilterSelect, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: filterToggle, popperProps: { direction: 'down', enableFlip: false }, zIndex: 9 },
+                        React.createElement(SelectList, null, list.map((option) => (React.createElement(SelectOption, { key: option.value, hasCheckbox: true, value: option, isSelected: option.isSelected, isDisabled: option.isDisabled }, option.filterLabel)))))),
                 React.createElement("span", { className: "push-top-narrow" },
-                    React.createElement("label", { htmlFor: "se-discussion-sort", className: "pf-v5-u-mb-sm" }, t('Sort by')),
+                    React.createElement("label", { htmlFor: "se-discussion-sort", className: "pf-v6-u-mb-sm" }, t('Sort by')),
                     React.createElement(Select, { id: "se-discussion-sort", "data-tracking-id": "discussions-sort-dropdown", isOpen: isSortOpen, selected: sortSelected, onSelect: onSortSelect, onOpenChange: (isSortOpen) => setIsSortOpen(isSortOpen), toggle: onSortToggle, shouldFocusToggleOnSelect: true, popperProps: { direction: 'down', enableFlip: false }, zIndex: 9 },
-                        React.createElement(SelectList, null, discussionSortOrderConst.map((option) => (React.createElement(SelectOption, { value: option, isSelected: isEqual(sort.name, option.name) }, option.name))))))),
-            React.createElement("div", { className: "support-comment-section" }, !shouldRenderRVComponent &&
-                !isSearchResultEmpty &&
-                comuteSearchedComments.map((discussion, index) => {
-                    return renderCaseCommentElement(discussion);
-                })),
-            isSearchResultEmpty && (React.createElement(AlertMessage, { variant: AlertType.WARNING, show: true, title: t('No result found') })),
-            shouldRenderRVComponent && !isSearchResultEmpty && renderVRCommentElement()))));
+                        React.createElement(SelectList, null, discussionSortOrderConst.map((option) => (React.createElement(SelectOption, { key: option.name, value: option.name, isSelected: isEqual(sort.name, option.name) }, option.name))))))),
+            React.createElement("div", { className: "support-comment-section" },
+                isRefetching && React.createElement(LoadingIndicator, { size: "sm" }),
+                !isRefetching &&
+                    !shouldRenderRVComponent &&
+                    !isSearchResultEmpty &&
+                    comuteSearchedComments.map((discussion, index) => {
+                        return renderCaseCommentElement(discussion);
+                    })),
+            isSearchResultEmpty && (React.createElement("p", { className: "infinite-scroll-end-status" },
+                React.createElement(Trans, null, "No results found"))),
+            !isRefetching && shouldRenderRVComponent && !isSearchResultEmpty && renderVRCommentElement(),
+            React.createElement("div", { ref: sentinelRef, "aria-hidden": "true", style: { height: 10, marginBottom: -10 } }),
+            debouncedShowSkeleton && !props.loadMoreError && (React.createElement("div", { className: "load-more-skeleton", role: "status", "aria-label": t('Loading more comments') },
+                React.createElement("div", { className: "load-more-skeleton__header" },
+                    React.createElement("div", { className: "load-more-skeleton__avatar" }),
+                    React.createElement("div", { className: "load-more-skeleton__name" }),
+                    React.createElement("div", { className: "load-more-skeleton__timestamp" })),
+                React.createElement("div", { className: "load-more-skeleton__body" },
+                    React.createElement("div", { className: "load-more-skeleton__line", style: { width: '100%' } }),
+                    React.createElement("div", { className: "load-more-skeleton__line", style: { width: '85%' } }),
+                    React.createElement("div", { className: "load-more-skeleton__line", style: { width: '60%' } })))),
+            props.loadMoreError && props.loadMoreRetryCount <= 1 && (React.createElement("div", { className: "infinite-scroll-footer-message" },
+                React.createElement(Button, { variant: "secondary", onClick: props.retryLoadMore, icon: React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
+                        React.createElement("polyline", { points: "23 4 23 10 17 10" }),
+                        React.createElement("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })) },
+                    React.createElement(Trans, null, "try loading again")))),
+            props.loadMoreError && props.loadMoreRetryCount > 1 && (React.createElement("p", { className: "infinite-scroll-end-status" },
+                React.createElement(Trans, { i18nKey: "We're having trouble loading your comments. <refreshLink>Please refresh</refreshLink> or <retryLink>try again</retryLink>.", components: {
+                        refreshLink: (React.createElement(Button, { variant: "link", isInline: true, onClick: () => globalThis.location.reload() })),
+                        retryLink: React.createElement(Button, { variant: "link", isInline: true, onClick: props.retryLoadMore }),
+                    } }))),
+            !props.hasNextPage &&
+                !props.isLoadingMore &&
+                !props.commentsLoading &&
+                !props.loadMoreError &&
+                comuteSearchedComments.length > 0 &&
+                props.retryLoadMore !== undefined && (React.createElement("p", { className: "infinite-scroll-end-status" },
+                React.createElement(Trans, null, "No more comments to load")))))));
 }