@rh-support/troubleshoot 2.6.299 → 2.6.300

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

@@ -7,13 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-// TODO: Re-enable after GraphQL migration of chats, external trackers, attachments
-// import { ICaseChat, IExternalTrackerUpdate } from '@cee-eng/hydrajs/@types/api/public/case';
-// import { IAttachment } from '@cee-eng/hydrajs/@types/models/attachment';
+import { caseAttachments } from '@cee-eng/hydrajs';
 import { MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
-import { AlertMessage, AlertType, ErrorBoundary, LoadingIndicator } from '@rh-support/components';
+import { AlertMessage, AlertType, ErrorBoundary, LoadingIndicator, ToastNotification } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
-import { dtmTrackEventCaseStepEncountered, getUrlParsedParams, scrollIntoView } from '@rh-support/utils';
+import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
+import { dtmTrackEventCaseStepEncountered, getDropdownBtnPlaceholder, getUrlParsedParams, scrollIntoView, } from '@rh-support/utils';
 import cloneDeep from 'lodash/cloneDeep';
 import filter from 'lodash/filter';
 import findIndex from 'lodash/findIndex';
@@ -25,27 +24,18 @@ import { Trans, useTranslation } from 'react-i18next';
 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, setSort,
-// TODO: Re-enable after GraphQL migration
-// setFilter,
-// updateAttachment,
-// updateAttacmentsAfterRemoval,
-// updateCommentStateFeedback,
-// 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';
-// TODO: Re-enable after GraphQL migration of attachments
-// import { AttachmentContextProvider } from '../../../shared/fileUpload/reducer/AttachmentReducerContext';
+import { AttachmentContextProvider } from '../../../shared/fileUpload/reducer/AttachmentReducerContext';
 import { PDFContext } from '../../PDFContainer';
-// TODO: Re-enable after GraphQL migration
-// import CaseAttachment from './CaseAttachment';
-// import CaseChat from './CaseChat';
+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,
@@ -53,20 +43,30 @@ let cellMeasureCache = new CellMeasurerCache({
 });
 export default function CaseDiscussion(props) {
     const { t } = useTranslation();
-    const { isPostingRemoteRequestCommentCompleted, product, version } = useCaseSelector((state) => ({
+    const { isPostingRemoteRequestCommentCompleted, screenSessionRequested, product, version } = useCaseSelector((state) => ({
         isPostingRemoteRequestCommentCompleted: state.isPostingRemoteRequestCommentCompleted,
+        screenSessionRequested: state.caseDetails.screenSessionRequested,
         product: state.caseDetails.product,
         version: state.caseDetails.version,
     }), isEqual);
     const urlSearchParams = getUrlParsedParams(useLocation().search);
-    const discussionIdFromUrl = urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.commentId;
+    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, allDiscussions, replyCommentText, replyCommentCreator } = useCaseDiscussionTabStateContext();
-    const { globalMetadataState: { navBarRef }, } = useGlobalStateContext();
+    const { sort, discussionFiltersListState, allDiscussions, replyCommentText, replyCommentCreator } = useCaseDiscussionTabStateContext();
+    const { globalMetadataState: { loggedInUsersAccount, navBarRef }, } = useGlobalStateContext();
     const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
     const caseDispatch = useCaseDispatch();
+    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);
@@ -78,7 +78,10 @@ export default function CaseDiscussion(props) {
     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 [isOpen, setIsOpen] = useState(false);
+    const [selectedFilterItems, setSelectedFilterItems] = useState([]);
     const [isSortOpen, setIsSortOpen] = useState(false);
     const [sortSelected, setSortSelected] = useState('Select a value');
     if (props.isDiscussionTab) {
@@ -87,10 +90,18 @@ export default function CaseDiscussion(props) {
             defaultHeight: 100,
         });
     }
+    const computeFilterComment = () => {
+        return filter(allDiscussions, (discussion) => {
+            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;
+    // filter comments on the basis of filterBy and search api
+    const computeFilteredComments = computeFilterComment();
     const comuteSearchedComments = searchResult.length === 0
-        ? cloneDeep(allDiscussions)
-        : filter([...allDiscussions], (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; });
+        ? 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 setVRCommentIndex = (cId) => {
         setCommentIndex(cId < 0 ? 0 : cId);
@@ -109,6 +120,8 @@ export default function CaseDiscussion(props) {
         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) {
                 const offset = 80;
                 const scrollTopValue = ((_a = windowScrollerRef === null || windowScrollerRef === void 0 ? void 0 : windowScrollerRef.current) === null || _a === void 0 ? void 0 : _a._positionFromTop) - offset;
@@ -133,24 +146,38 @@ export default function CaseDiscussion(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [discussionIdFromUrl, allDiscussions, activeElementId.current]);
     useEffect(() => {
-        if (!isExportingPDF) {
-            setDiscussions(dispatchDiscussion, props.caseComments, [], // TODO: Re-enable chats after GraphQL migration
-            [], // TODO: Re-enable attachments after GraphQL migration
-            [], // TODO: Re-enable feedbacks after GraphQL migration
-            [], // TODO: Re-enable external trackers after GraphQL migration
-            [], false, false, false);
+        if (!caseAttachmentHydra.isFetching && caseAttachmentHydra.isError) {
+            ToastNotification.addDangerMessage(t(`There was an error loading attachments.`));
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.caseComments]);
-    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) => {
+        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* () {
+        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);
@@ -164,11 +191,11 @@ export default function CaseDiscussion(props) {
         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;
@@ -182,10 +209,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)) {
@@ -199,6 +226,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);
                 },
             });
@@ -210,52 +240,34 @@ 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 = '';
         }
     };
-    // TODO: Re-enable after GraphQL migration of attachments
-    // const onAttachmentRemove = (uuid_removed) => {
-    //     updateAttacmentsAfterRemoval(dispatchDiscussion, uuid_removed, allDiscussions, discussionFiltersListState);
-    // };
-    // TODO: Re-enable after GraphQL migration of attachments
-    // const onAttachmentAdded = async () => {
-    //     ToastNotification.addSuccessMessage(t('Attachment(s) uploaded successfully'));
-    //     await updateDiscussionStateAttachments(
-    //         dispatchDiscussion,
-    //         caseNumber,
-    //         allDiscussions,
-    //         sort,
-    //         loggedInUsersAccount.data.secureSupport,
-    //         discussionFiltersListState,
-    //         dispatchCaseDetailsHydraAttachments
-    //     );
-    // };
-    // TODO: Re-enable after GraphQL migration of attachments
-    // const onMetadataUpdate = (attachmentId: string, updatedAttachment) => {
-    //     updateAttachment(dispatchDiscussion, attachmentId, updatedAttachment, allDiscussions);
-    // };
-    // TODO: Re-enable after GraphQL migration of attachments
-    // const downloadAttachment = async ({ caseNumber, uuid, name }) => {
-    //     const tempToastId = ToastNotification.addInfoMessage(t('Starting file download'));
-    //     try {
-    //         await caseAttachments.downloadAttachmentS3(
-    //             caseNumber,
-    //             uuid,
-    //             name,
-    //             false,
-    //             loggedInUsersAccount.data.secureSupport
-    //         );
-    //     } catch (e) {
-    //         ToastNotification.addDangerMessage(
-    //             t(`Could not download {{filename}}: {{error}}`, {
-    //                 filename: name,
-    //                 error: e?.message,
-    //             })
-    //         );
-    //     } finally {
-    //         tempToastId && ToastNotification.clearToast(tempToastId);
-    //     }
-    // };
+    const onMetadataUpdate = (attachmentId, updatedAttachment) => {
+        updateAttachment(dispatchDiscussion, attachmentId, updatedAttachment, allDiscussions);
+    };
+    const downloadAttachment = (_a) => __awaiter(this, [_a], void 0, function* ({ caseNumber, uuid, name }) {
+        const tempToastId = ToastNotification.addInfoMessage(t('Starting file download'));
+        try {
+            yield caseAttachments.downloadAttachmentS3(caseNumber, uuid, name, false, loggedInUsersAccount.data.secureSupport);
+        }
+        catch (e) {
+            ToastNotification.addDangerMessage(t(`Could not download {{filename}}: {{error}}`, {
+                filename: name,
+                error: e === null || e === void 0 ? void 0 : e.message,
+            }));
+        }
+        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();
@@ -270,6 +282,7 @@ export default function CaseDiscussion(props) {
         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 },
@@ -282,18 +295,17 @@ export default function CaseDiscussion(props) {
     const renderCaseCommentElement = (discussion) => {
         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: () => { } }))));
+        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 }))));
     };
-    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) {
@@ -306,25 +318,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();
@@ -332,6 +342,7 @@ export default function CaseDiscussion(props) {
             }
         }
     };
+    const list = discussionFiltersListState.filter((filter) => filter.canSee);
     useEffect(() => {
         if (isPostingRemoteRequestCommentCompleted) {
             onCommentAdded();
@@ -339,32 +350,59 @@ export default function CaseDiscussion(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isPostingRemoteRequestCommentCompleted]);
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
     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 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 prevSelectedFiltersValue = prevSelectedFilters.map((option) => option.value);
+        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 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,
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading post comment section') } },
-            React.createElement(PostComment, { caseNumber: caseNumber, allDiscussions: allDiscussions, onCommentAdded: onCommentAdded, commentText: replyCommentText, onCommentClear: resetReplyComment, commentCreator: replyCommentCreator, defaultIsPublic: replyingToPrivateComment === null ? replyingToPrivateComment : !replyingToPrivateComment })),
-        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(Trans, null, "No comments")),
-        allDiscussions.length !== 0 && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading comments. Try refreshing.') } },
+            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("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: allDiscussions || [], onCommentSearch: onCaseCommentSearch, isCommentSearchCleared: isCommentSearchCleared }))),
+                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: 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, { value: option.name, isSelected: isEqual(sort.name, option.name) }, option.name))))))),
+                        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) => {

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/PostComment.d.ts

@@ -5,13 +5,9 @@ interface IProps {
     commentText?: string;
     commentCreator?: string;
     onCommentAdded?: () => Promise<void>;
+    onAttachmentAdded?: () => void;
+    onAttachmentRemove?: (uuid: string) => void;
     onCommentClear?: () => void;
-    /**
-     * Controls the initial visibility toggle state.
-     * - `true` / `false` — sets comment visibility to public/private.
-     * - `null` — resets to the default (public).
-     * - `undefined` — same as omitting the prop.
-     */
     defaultIsPublic?: boolean;
     allDiscussions: IDiscussion[];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PostComment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/PostComment.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAMpF,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAqB5E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAIrC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,WAAW,EAAE,CAAC;CACjC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,qBA4VxC"}
+{"version":3,"file":"PostComment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/PostComment.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,OAAO,EAAkB,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAsB5F,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,WAAW,EAAE,CAAC;CACjC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,qBA+iBxC"}