@rh-support/troubleshoot 2.6.361 → 2.6.363

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

@@ -7,173 +7,103 @@ 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, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import { caseAttachments } from '@cee-eng/hydrajs';
+import { Alert, 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 { downloadCaseAttachment, dtmTrackEventCaseStepEncountered, getDropdownBtnPlaceholder, getUrlParsedParams, scrollIntoView, } from '@rh-support/utils';
+import { dtmTrackEventCaseStepEncountered, 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, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, 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 { clearReplyingTo, discussionSortOrderConst, DiscussionType, setDiscussions, setFilter, setReplyingTo, setSort, updateAttachment, updateAttacmentsAfterRemoval, updateDiscussionStateAttachments, } from '../../../../reducers/CaseDiscussionTabReducer';
+import { clearReplyComment, discussionSortOrderConst, DiscussionType, setCommentText, setDiscussions, setFilter, setSort, updateAttachment, updateAttacmentsAfterRemoval, updateCommentStateFeedback, updateDiscussionStateAttachments, updateDiscussionStateComments, } from '../../../../reducers/CaseDiscussionTabReducer';
 import { setCaseState } from '../../../../reducers/CaseReducer';
 import { AttachmentContextProvider } from '../../../shared/fileUpload/reducer/AttachmentReducerContext';
 import { PDFContext } from '../../PDFContainer';
 import CaseAttachment from './CaseAttachment';
-import CaseComments from './CaseComments';
-// import CaseExternalTrackerUpdate from './CaseExternalTrackerUpdate';
+import CaseChat from './CaseChat';
+import CaseComments, { AUTOMATED_SUPPORT_ASSISTANT } from './CaseComments';
+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, product, version, caseSalesforceId } = useCaseSelector((state) => ({
+    const { isPostingRemoteRequestCommentCompleted, screenSessionRequested, product, version } = 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.attachmentId));
+    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 activeDiscussionElementRef = useRef(null);
-    const { sort, discussionFiltersListState, replyingToAuthor, replyingToTimestamp } = useCaseDiscussionTabStateContext();
-    const { globalMetadataState: { navBarRef, loggedInUsersAccount }, } = useGlobalStateContext();
+    const { sort, discussionFiltersListState, allDiscussions, replyCommentText, replyCommentCreator } = useCaseDiscussionTabStateContext();
+    const { globalMetadataState: { loggedInUsersAccount, navBarRef }, } = useGlobalStateContext();
     const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
-    const { caseDetailsPageState: { caseAttachmentHydra }, } = useCaseDetailsPageStateContext();
-    const dispatchCaseDetailsHydraAttachments = useCaseDetailsPageDispatchContext();
     const caseDispatch = useCaseDispatch();
-    const apolloClient = useApolloClient();
-    const ability = useContext(AbilityContext);
-    const canSeeAttachments = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_SEE_ATTACHMENTS);
+    const { caseDetailsPageState: { caseFeedbacksHydra, caseAttachmentHydra, caseExternalTrackersUpdate }, } = useCaseDetailsPageStateContext();
+    const dispatchCaseDetailsHydraAttachments = useCaseDetailsPageDispatchContext();
     const { caseNumber } = props;
     const activeElementId = useRef(null);
+    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 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');
-    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 (props.isDiscussionTab) {
+        cellMeasureCache = new CellMeasurerCache({
+            fixedWidth: true,
+            defaultHeight: 100,
         });
-        if (inView && hasNextPage && !isLoadingMore && !loadMoreError && fetchMore && isCommentFilterActive) {
-            fetchMore();
-        }
-    }, [inView, hasNextPage, isLoadingMore, loadMoreError, fetchMore, isCommentFilterActive]);
-    useEffect(() => {
-        if (props.isLoadingMore && props.hasNextPage) {
-            const timer = setTimeout(() => setDebouncedShowSkeleton(true), 300);
-            return () => clearTimeout(timer);
-        }
-        setDebouncedShowSkeleton(false);
-    }, [props.isLoadingMore, props.hasNextPage]);
-    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((f) => f.value === discussion.discussionType && f.isSelected);
+            const activeFilter = discussionFiltersListState.filter((filter) => filter.value === discussion.discussionType && filter.isSelected);
             return activeFilter.length === 1 ? discussion : null;
         });
     };
+    const shouldRenderRVComponent = !isExportingPDF && allDiscussions.length > VC_MINIMUM_COMMENT;
+    const hasAsaComment = (props.caseComments || []).some((comment) => (comment === null || comment === void 0 ? void 0 : comment.createdBy) === AUTOMATED_SUPPORT_ASSISTANT);
+    // 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 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 isSearchResultEmpty = !isEmpty(searchCommentText) && (searchResult.length === 0 || comuteSearchedComments.length === 0);
     const setVRCommentIndex = (cId) => {
         setCommentIndex(cId < 0 ? 0 : cId);
         setJumpToCommentClicked(true);
@@ -187,15 +117,13 @@ export default function CaseDiscussion(props) {
             (allDiscussions || []).length === 0) {
             return;
         }
-        const targetIndex = findIndex([...comuteSearchedComments], (discussion) => discussion.item.id === discussionIdFromUrl);
-        // Comment is on a later page — wait until keep-fetching brings it in.
-        if (targetIndex < 0) {
-            return;
-        }
         activeElementId.current = discussionIdFromUrl;
         if (allDiscussions.length > VC_MINIMUM_COMMENT) {
-            setVRCommentIndex(targetIndex);
-            if (targetIndex <= 3) {
+            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) {
                 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;
@@ -217,39 +145,58 @@ export default function CaseDiscussion(props) {
                 });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [discussionIdFromUrl]);
-    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]);
+    }, [discussionIdFromUrl, allDiscussions, activeElementId.current]);
     useEffect(() => {
         if (!caseAttachmentHydra.isFetching && caseAttachmentHydra.isError) {
-            ToastNotification.addDangerMessage(t('There was an error loading attachments.'));
+            ToastNotification.addDangerMessage(t(`There was an error loading attachments.`));
         }
-    }, [caseAttachmentHydra.isFetching, caseAttachmentHydra.isError, t]);
-    const onCommentAdded = () => __awaiter(this, void 0, void 0, function* () {
-        try {
-            yield props.refetchComments();
+        if (!caseExternalTrackersUpdate.isFetching && caseExternalTrackersUpdate.isError) {
+            ToastNotification.addDangerMessage(t(`There was an error loading external trackers.`));
         }
-        catch (e) {
-            console.error('Failed to refetch comments:', e);
+        if (!caseFeedbacksHydra.isFetching && caseFeedbacksHydra.isError) {
+            console.log(`There was an error loading feedback.`);
         }
+        // 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);
+        }
+        // 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, feedbackReason) => {
+        updateCommentStateFeedback(dispatchDiscussion, comment_id, feedback, allDiscussions, feedbackReason);
+    };
+    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 onReply = (author, commentId, timestamp) => {
-        setReplyingTo(dispatchDiscussion, author, commentId, timestamp);
+    const onAttachmentAdded = () => __awaiter(this, void 0, void 0, function* () {
+        ToastNotification.addSuccessMessage(t('Attachment(s) uploaded successfully'));
+        yield updateDiscussionStateAttachments(dispatchDiscussion, caseNumber, allDiscussions, sort, loggedInUsersAccount.data.secureSupport, discussionFiltersListState, dispatchCaseDetailsHydraAttachments);
+    });
+    const onReply = (commentText, commentCreator, isPublic) => {
+        var _a;
+        setReplyingToPrivateComment(!isPublic);
+        setCommentText(dispatchDiscussion, commentText, commentCreator);
         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 onClearReply = () => {
-        clearReplyingTo(dispatchDiscussion);
+    const resetReplyComment = () => {
+        clearReplyComment(dispatchDiscussion);
+        setReplyingToPrivateComment(null);
     };
-    /** 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;
@@ -263,10 +210,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);
+                const sanitizedSearchTerm = sanitizedSearchInput(searchTerm); // Sanitize the search term
                 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)) {
@@ -280,6 +227,9 @@ 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);
                 },
             });
@@ -291,26 +241,22 @@ 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 onAttachmentRemove = (uuid_removed) => {
-        updateAttacmentsAfterRemoval(dispatchDiscussion, uuid_removed, allDiscussions, discussionFiltersListState);
-    };
-    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 = (attachmentId, updatedAttachment) => {
         updateAttachment(dispatchDiscussion, attachmentId, updatedAttachment, allDiscussions);
     };
-    const downloadAttachment = ({ caseNumber: attachmentCaseNumber, uuid, name }) => {
+    const downloadAttachment = (_a) => __awaiter(this, [_a], void 0, function* ({ caseNumber, uuid, name }) {
         const tempToastId = ToastNotification.addInfoMessage(t('Starting file download'));
         try {
-            downloadCaseAttachment(attachmentCaseNumber, uuid, name);
+            yield caseAttachments.downloadAttachmentS3(caseNumber, uuid, name, false, loggedInUsersAccount.data.secureSupport);
         }
         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,
             }));
@@ -318,7 +264,11 @@ 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();
@@ -329,19 +279,11 @@ 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 },
@@ -355,19 +297,16 @@ 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: () => { }, 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.COMMENT && (React.createElement(CaseComments, { caseNumber: caseNumber, ref: discussionIdFromUrl === discussion.item.id ? activeDiscussionElementRef : null, comment: discussion.item, onFeedBackUpdate: onFeedbackUpdate, feedback: discussion.feedback, feedbackReason: discussion.feedbackReason, 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 }))));
     };
-    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) {
@@ -380,25 +319,23 @@ 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();
@@ -406,6 +343,7 @@ export default function CaseDiscussion(props) {
             }
         }
     };
+    const list = discussionFiltersListState.filter((filter) => filter.canSee);
     useEffect(() => {
         if (isPostingRemoteRequestCommentCompleted) {
             onCommentAdded();
@@ -417,109 +355,65 @@ export default function CaseDiscussion(props) {
         e.stopPropagation();
         setIsOpen(!isOpen);
     };
+    const onSortToggleClick = (e) => {
+        e.stopPropagation();
+        setIsSortOpen(!isSortOpen);
+    };
     const onFilterSelect = (_event, prevOption) => {
-        const isFilterSelected = !prevOption.isSelected;
-        const prevSelectedFilters = list.filter((option) => option.isSelected && option.value !== prevOption.value);
+        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 prevSelectedFiltersValue = prevSelectedFilters.map((option) => option.value);
-        const newSelectedFilters = isFilterSelected
+        const newSelectedFilters = isFilterSelected // has all the selected values of filter with the updated selected filter state
             ? [...prevSelectedFiltersValue, prevOption.value]
             : prevSelectedFiltersValue;
         setFilter(dispatchDiscussion, newSelectedFilters, discussionFiltersListState);
         shouldRenderRVComponent && setCanUpdateScrollTop(false);
         setSelectedFilterItems(prevSelectedFiltersValue);
     };
-    const filterToggle = (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 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);
-        }
+    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);
         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;
-        })(),
+        hasAsaComment && (React.createElement(Alert, { className: `asa-discussion-alert ${isExportingPDF ? 'hide-in-pdf' : ''}`, isInline: true, variant: "info", title: t('Important'), "data-tracking-id": "case-discussion-asa-notice" },
+            React.createElement(Trans, null,
+                "This feature uses AI technology to analyze interactions and provide you with support. Interactions may be used to improve Red Hat products or services. For more information about Red Hat's privacy practices, please refer to the",
+                ' ',
+                React.createElement("a", { href: "https://www.redhat.com/en/about/privacy-policy", target: "_blank", rel: "noopener noreferrer" }, "Red Hat Privacy Statement")))),
         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, 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(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("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-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(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("span", { className: "push-top-narrow" },
                     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, { 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 && (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, null, "We're having trouble loading your comments. Please refresh or"),
-                ' ',
-                React.createElement(Button, { variant: "link", isInline: true, onClick: props.retryLoadMore },
-                    React.createElement(Trans, null, "try again")),
-                ".")),
-            !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")))))));
+                        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()))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CommentSearch.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CommentSearch.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAkB,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5F,UAAU,MAAM;IACZ,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA6G1C"}
+{"version":3,"file":"CommentSearch.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CommentSearch.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAkB,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5F,UAAU,MAAM;IACZ,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBAgG1C"}