@rh-support/troubleshoot 2.4.10-beta.7 → 2.5.0

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/Summary.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 interface IProps {
     inlineEditable?: boolean;
     hideLabel?: boolean;
     hideSaveCancel?: boolean;
 }
-declare function Summary(props: IProps): JSX.Element;
+declare function Summary(props: IProps): React.JSX.Element;
 declare namespace Summary {
     var defaultProps: Partial<IProps>;
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/Summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/Summary.tsx"],"names":[],"mappings":"AAwBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAQD,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,eA2L7B;kBA3LQ,OAAO;;;AA8LhB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/Summary.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAS/D,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAQD,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,qBA0L7B;kBA1LQ,OAAO;;;AA6LhB,eAAe,OAAO,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/Summary.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { InputGroupText, InputGroupTextVariant, Spinner, TextInput, TextInputGroup, ValidatedOptions, } from '@patternfly/react-core';
+import { InputGroupText, Spinner, TextInput, TextInputGroup, ValidatedOptions } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { NewInlineEdit, ToastNotification, ValueChangedIcon } from '@rh-support/components';
@@ -57,11 +57,11 @@ function Summary(props) {
         try {
             yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
             setIsSummaryUpdating(false);
-            ToastNotification.addSuccessMessage(t(`Summary has been successfully updated`));
+            ToastNotification.addSuccessMessage(t(`Title has been successfully updated`));
         }
         catch (e) {
             setIsSummaryUpdating(false);
-            caseUpdateError.showError(e, t(`Summary failed to updated`));
+            caseUpdateError.showError(e, t(`Title failed to updated`));
             throw e;
         }
     });
@@ -124,19 +124,19 @@ function Summary(props) {
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(NewInlineEdit, { labelProps: { htmlFor: 'case-details-summary' }, labelContent: React.createElement(React.Fragment, null,
-                React.createElement(Trans, null, "Issue summary"),
+                React.createElement(Trans, null, "Title"),
                 React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localSummaryChange, value: summary, getTooltipContent: getSummaryChangedTT }),
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")), allowInlineEdit: props.inlineEditable, content: summary ? summary : t('No summary to display.'), saveDisabled: saveDisabled, hideLabel: props.hideLabel, hideSaveCancel: props.hideSaveCancel, charCount: (summaryState === null || summaryState === void 0 ? void 0 : summaryState.length) || 0, charTotal: SUMMARY_LENGTH_LIMIT, cancelToggleState: isCancelClicked, saveToggleState: isSaveClicked, isExportingPDF: isExportingPDF },
             React.createElement(TextInputGroup, null,
-                React.createElement(TextInput, { type: "text", id: "case-details-summary", className: 'form-control', "aria-required": true, required: true, name: "case-details-summary", value: summaryState, onChange: onSummaryChange, isDisabled: isSummaryUpdating, "data-tracking-id": "case-details-summary", onKeyDown: handleKeyDown, validated: (summaryState === null || summaryState === void 0 ? void 0 : summaryState.length) > SUMMARY_LENGTH_LIMIT || isSummaryEmpty
+                React.createElement(TextInput, { type: "text", id: "case-details-summary", "aria-required": true, required: true, name: "case-details-summary", value: summaryState, onChange: (_event, value) => onSummaryChange(value), isDisabled: isSummaryUpdating, "data-tracking-id": "case-details-summary", onKeyDown: handleKeyDown, validated: (summaryState === null || summaryState === void 0 ? void 0 : summaryState.length) > SUMMARY_LENGTH_LIMIT || isSummaryEmpty
                         ? ValidatedOptions.error
                         : ValidatedOptions.default }),
-                !isSummaryUpdating ? (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
-                    React.createElement("button", { className: "btn btn-app btn-link pf-u-ml-sm", type: "button", disabled: saveDisabled, onClick: onSave },
+                !isSummaryUpdating ? (React.createElement(InputGroupText, null,
+                    React.createElement("button", { className: "btn btn-app btn-link pf-v5-u-ml-sm", type: "button", disabled: saveDisabled, onClick: onSave },
                         React.createElement(CheckIcon, null)),
                     React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onCancel },
-                        React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
-                    React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl" }))))),
+                        React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement(InputGroupText, null,
+                    React.createElement(Spinner, { size: "lg", className: "pf-v5-u-ml-2xl pf-v5-u-mr-xl" }))))),
         isSummaryEmpty && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, fieldEmptyErrorMessage)))));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/useCustomEmails.js

@@ -42,7 +42,7 @@ export function useCustomEmails(props) {
         isAdded && fetchAccountCustomEmails(globalMetadataDispatch, props.accountNumber);
         return !!isAdded;
     });
-    const addCustomEmail = (emailVal, onAdd, skipAccountCheck = false) => __awaiter(this, void 0, void 0, function* () {
+    const addCustomEmail = (emailVal_1, onAdd_1, ...args_1) => __awaiter(this, [emailVal_1, onAdd_1, ...args_1], void 0, function* (emailVal, onAdd, skipAccountCheck = false) {
         try {
             if (isEmpty(emailVal) || !isEmailValid(emailVal)) {
                 return;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseAttachment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseAttachment.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAcxE,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,UAAU,MAAM;IACZ,UAAU,EAAE,WAAW,CAAC;IACxB,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,WAAW,KAAK,IAAI,CAAC;IACzE,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAChH;AAED,QAAA,MAAM,cAAc,4EAqPlB,CAAC;AAEH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CaseAttachment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseAttachment.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAexE,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,UAAU,MAAM;IACZ,UAAU,EAAE,WAAW,CAAC;IACxB,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,WAAW,KAAK,IAAI,CAAC;IACzE,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAChH;AAED,QAAA,MAAM,cAAc,4EAqPlB,CAAC;AAEH,eAAe,cAAc,CAAC"}

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

@@ -8,7 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { caseAttachments, kase } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, Tooltip, TooltipPosition } from '@patternfly/react-core';
+import PaperclipIcon from '@patternfly/react-icons/dist/js/icons/paperclip-icon';
 import { InlineEdit, LoadingIndicator, ToastNotification, useConfirmation, useCopyToClipboard, useFetch, } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
 import { ability, CaseDiscussionFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -22,7 +23,7 @@ import { PDFContext } from '../../PDFContainer';
 import { DiscussionItemLink } from './DiscussionItemLink';
 import { JumpAndCopyLink } from './JumpAndCopyLink';
 const CaseAttachment = React.forwardRef((props, ref) => {
-    var _a, _b;
+    var _a;
     const { t } = useTranslation();
     const clipboardRef = useRef(null);
     const { clipboardText, copyToClipboard } = useCopyToClipboard(clipboardRef);
@@ -116,13 +117,14 @@ const CaseAttachment = React.forwardRef((props, ref) => {
         limit: ATTACHMENT_DESCRIPTION_LENGTH_LIMIT,
     });
     // To check if attachment description length is less than the limit
-    const isCaseAttachmentDescriptionLengthy = ((_b = attachmentDescription) === null || _b === void 0 ? void 0 : _b.length) > ATTACHMENT_DESCRIPTION_LENGTH_LIMIT;
+    const isCaseAttachmentDescriptionLengthy = (attachmentDescription === null || attachmentDescription === void 0 ? void 0 : attachmentDescription.length) > ATTACHMENT_DESCRIPTION_LENGTH_LIMIT;
     // To check if attachment description is empty
     const isCaseAttachmentDescription = isEmpty(attachmentDescription === null || attachmentDescription === void 0 ? void 0 : attachmentDescription.trim());
     return (React.createElement("section", { ref: ref, id: props.attachment.id, className: `prevent-split support-comment comment-attachment ${!isCardIsDeleted ? 'showcard' : ''} ${ref ? 'selected-case-comment' : ''} ${props.attachment.isPrivate ? 'private' : ''}` },
         React.createElement("header", null,
             React.createElement("h4", null,
-                React.createElement("i", { className: "fa fa-paperclip", "aria-hidden": "true", style: { marginRight: '6px', color: '#1B4546' } }),
+                React.createElement(Icon, { className: "pf-v5-u-mr-xs" },
+                    React.createElement(PaperclipIcon, null)),
                 props.attachment.modifiedBy),
             React.createElement("time", { className: "text-right" }, formatDateTime(props.attachment.lastModifiedDate))),
         React.createElement("div", { className: "comment-body" },
@@ -138,8 +140,8 @@ const CaseAttachment = React.forwardRef((props, ref) => {
                         React.createElement("div", { className: "clip-content-wrapper code-block" },
                             React.createElement("code", { ref: clipboardRef }, props.attachment.checksum)),
                         React.createElement(Tooltip, { position: TooltipPosition.top, content: clipboardText, trigger: "click" },
-                            React.createElement("button", { className: "nimbus-icon-clipboard clip-code-raw-btn xs-icon", "aria-hidden": "true", onClick: copyToClipboard }))))),
-                React.createElement(InlineEdit, { labelProps: { htmlFor: `case-details-file-description-${props.attachment.id}` }, allowInlineEdit: true, labelContent: t('Description'), content: React.createElement("div", { className: "clip-content-wrapper code-block" }, props.attachment.description), hideSaveCancel: false, onSave: onDescriptionSave, onCancel: onDescriptionCancel, dataTrackingId: "case-details-file-description", initialIsEditing: props.attachment.description ? false : true, saveDisabled: isCaseAttachmentDescriptionLengthy ||
+                            React.createElement("button", { "aria-label": "Copy to clipboard", className: "nimbus-icon-clipboard clip-code-raw-btn xs-icon", onClick: copyToClipboard, type: "button" }))))),
+                React.createElement(InlineEdit, { labelProps: { htmlFor: `case-details-file-description-${props.attachment.id}` }, allowInlineEdit: true, labelContent: React.createElement(Trans, null, "Description"), content: React.createElement("div", { className: "clip-content-wrapper code-block" }, props.attachment.description), hideSaveCancel: false, onSave: onDescriptionSave, onCancel: onDescriptionCancel, dataTrackingId: "case-details-file-description", initialIsEditing: props.attachment.description ? false : true, saveDisabled: isCaseAttachmentDescriptionLengthy ||
                         isCaseAttachmentDescription ||
                         attachmentDescription === props.attachment.description ||
                         isUpdating, loadingIndicator: isUpdating ? React.createElement(LoadingIndicator, { isInline: true }) : undefined, isExportingPDF: isExportingPDF },
@@ -148,10 +150,10 @@ const CaseAttachment = React.forwardRef((props, ref) => {
             React.createElement(Trans, null, maxCaseAttachmentDescription))),
         React.createElement("footer", null,
             React.createElement("span", { className: "comment-note" }, props.attachment.isPrivate && React.createElement(Trans, null, "Private attachment")),
-            React.createElement("span", { className: "pull-right pf-l-flex pf-m-align-items-center" },
+            React.createElement("span", { className: "pull-right pf-v5-l-flex pf-m-align-items-center" },
                 props.showJumpToComment && (React.createElement(DiscussionItemLink, { onClick: onJumpToComment(props.attachment.id), discussionType: DiscussionType.ATTACHMENT, itemId: props.attachment.id, caseNumber: props.attachment.caseNumber, isCopyLink: false },
                     React.createElement(Trans, null, "Jump to attachment"))),
-                React.createElement("button", { className: `btn btn-app btn-link text-danger ${isExportingPDF ? 'hide-in-pdf' : ''}`, title: "Delete attachment", onClick: deleteAttachment(props.attachment), "data-tracking-id": "delete-attachmentid-button" },
+                React.createElement("button", { className: `btn btn-app btn-link text-danger ${isExportingPDF ? 'hide-in-pdf' : ''}`, title: "Delete attachment", onClick: deleteAttachment(props.attachment), "data-tracking-id": "delete-attachmentid-button", type: "button" },
                     React.createElement(Trans, null, "Delete")),
                 React.createElement(JumpAndCopyLink, { caseNumber: props.attachment.caseNumber, cardId: props.attachment.id, discussionType: DiscussionType.ATTACHMENT })))));
 });

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

@@ -24,7 +24,7 @@ const CaseChat = React.forwardRef((props, ref) => {
                 { visitorName: props.chat.visitorName }),
             React.createElement("p", { className: "push-top-narrow", dangerouslySetInnerHTML: sanetize(props.chat.body) })),
         React.createElement("footer", null,
-            React.createElement("span", { className: "pf-u-ml-auto pf-l-flex pf-m-align-items-center" },
+            React.createElement("span", { className: "pf-v5-u-ml-auto pf-v5-l-flex pf-m-align-items-center" },
                 props.showJumpToComment && (React.createElement(DiscussionItemLink, { onClick: onJumpToComment(props.chat.id), discussionType: DiscussionType.CHAT, itemId: props.chat.id, caseNumber: caseNumber, isCopyLink: false },
                     React.createElement(Trans, null, "Jump to comment"))),
                 React.createElement(JumpAndCopyLink, { caseNumber: caseNumber, cardId: props.chat.id, discussionType: DiscussionType.CHAT })))));

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

@@ -1 +1 @@
-{"version":3,"file":"CaseComments.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseComments.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AA8BvE,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAChH;AAED,QAAA,MAAM,YAAY,4EAqThB,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CaseComments.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseComments.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AA8BvE,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAChH;AAED,QAAA,MAAM,YAAY,4EAkVhB,CAAC;AAEH,eAAe,YAAY,CAAC"}

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

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { publicApi } from '@cee-eng/hydrajs';
 import { encodeAngularBrackets, EventTypes, htmlEntitiesEncode, linkifyBZIDs, linkifyWithCaseIDs, parseCommentMarkdown, processRME, } from '@cee-eng/ui-toolkit';
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { Icon, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import FrownIcon from '@patternfly/react-icons/dist/js/icons/frown-icon';
 import MehIcon from '@patternfly/react-icons/dist/js/icons/meh-icon';
 import OutlinedFrownIcon from '@patternfly/react-icons/dist/js/icons/outlined-frown-icon';
@@ -22,7 +22,7 @@ import { AbilityContext, CaseDetailsFields, CaseDiscussionFields, resourceAction
 import { formatDateTime, linkifyLinks } from '@rh-support/utils';
 import DOMPurify from 'dompurify';
 import isEmpty from 'lodash/isEmpty';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { DiscussionType } from '../../../../reducers/CaseDiscussionTabReducer';
 import { PDFContext } from '../../PDFContainer';
@@ -31,6 +31,7 @@ import { JumpAndCopyLink } from './JumpAndCopyLink';
 const CaseComments = React.forwardRef((props, ref) => {
     var _a;
     const { caseNumber } = props;
+    const markdownRef = useRef(null);
     const { t } = useTranslation();
     const ability = useContext(AbilityContext);
     const canSeePrivateComments = ability.can(resourceActions.PATCH, resources.CASE_COMMENTS, CaseDiscussionFields.VIEW_PRIVATE_COMMENT);
@@ -45,6 +46,9 @@ const CaseComments = React.forwardRef((props, ref) => {
     const onJumpToComment = (commentId) => () => props.showJumpToComment && props.onJumpToComment && props.onJumpToComment(commentId);
     const applyCommentFeedback = (comment, feedback) => (e) => __awaiter(void 0, void 0, void 0, function* () {
         e.preventDefault();
+        if (props.feedback === feedback) {
+            return;
+        }
         const commJson = {
             feedback,
             accountNumber: props.accountNumber,
@@ -72,11 +76,11 @@ const CaseComments = React.forwardRef((props, ref) => {
     const commentFeedbackButtons = (comment, feedback) => (React.createElement("span", { className: "comment-feedback-buttons" },
         React.createElement(LoadingIndicator, { isInline: true, show: isFeedbackUpdating }),
         React.createElement(Tooltip, { position: TooltipPosition.top, content: t('Positive feedback') },
-            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, 1), "data-tracking-id": "case-comment-feedback-up" }, feedback === 1 ? (React.createElement(SmileIcon, { title: t('Remove positive feedback') })) : (React.createElement(OutlinedSmileIcon, { title: t('Leave positive feedback') })))),
+            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, 1), "data-tracking-id": "case-comment-feedback-up", type: "button" }, feedback === 1 ? (React.createElement(SmileIcon, { title: t('Remove positive feedback') })) : (React.createElement(OutlinedSmileIcon, { title: t('Leave positive feedback') })))),
         React.createElement(Tooltip, { position: TooltipPosition.top, content: t('Neutral feedback') },
-            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, 0), "data-tracking-id": "case-comment-feedback-neutral" }, feedback === 0 ? (React.createElement(MehIcon, { title: t('Remove neutral feedback') })) : (React.createElement(OutlinedMehIcon, { title: t('Leave neutral feedback') })))),
+            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, 0), "data-tracking-id": "case-comment-feedback-neutral", type: "button" }, feedback === 0 ? (React.createElement(MehIcon, { title: t('Remove neutral feedback') })) : (React.createElement(OutlinedMehIcon, { title: t('Leave neutral feedback') })))),
         React.createElement(Tooltip, { position: TooltipPosition.top, content: t('Negative feedback') },
-            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, -1), "data-tracking-id": "case-comment-feedback-down" }, feedback === -1 ? (React.createElement(FrownIcon, { "aria-label": t('Remove negative feedback') })) : (React.createElement(OutlinedFrownIcon, { "aria-label": t('Leave negative feedback') }))))));
+            React.createElement("button", { className: "btn btn-app btn-link", onClick: applyCommentFeedback(comment, -1), "data-tracking-id": "case-comment-feedback-down", type: "button" }, feedback === -1 ? (React.createElement(FrownIcon, { title: t('Remove negative feedback'), "aria-label": t('Remove negative feedback') })) : (React.createElement(OutlinedFrownIcon, { title: t('Leave negative feedback'), "aria-label": t('Leave negative feedback') }))))));
     const computeDiscussionCardCalss = (comment) => {
         if (comment.createdByType === 'Associate' && comment.createdBy === 'Automated Support Assistant') {
             return 'comment-automated';
@@ -110,10 +114,12 @@ const CaseComments = React.forwardRef((props, ref) => {
             return (React.createElement("img", { src: "https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--hat-only.svg", height: "18", width: "18", "aria-hidden": "true", alt: "Red Hat associate comment", title: "Red Hat associate", style: { verticalAlign: '-0.125em', marginRight: '6px' } }));
         }
         else if (comment.createdByType === 'Customer') {
-            return (React.createElement(UserCircleIcon, { style: { verticalAlign: '-0.125em', marginRight: '6px', color: '#1D4174' }, size: "sm" }));
+            return (React.createElement(Icon, { size: "md" },
+                React.createElement(UserCircleIcon, { style: { verticalAlign: '-0.125em', marginRight: '6px', color: '#1D4174' } })));
         }
         else {
-            return (React.createElement(UserCircleIcon, { style: { verticalAlign: '-0.125em', marginRight: '6px', color: '#1D4174' }, size: "sm" }));
+            return (React.createElement(Icon, { size: "md" },
+                React.createElement(UserCircleIcon, { style: { verticalAlign: '-0.125em', marginRight: '6px', color: '#1D4174' } })));
         }
     };
     const computeCommentFooter = (comment) => {
@@ -131,7 +137,9 @@ const CaseComments = React.forwardRef((props, ref) => {
         return { __html: DOMPurify.sanitize(text) };
     };
     const commentMarkdown = (markdown) => {
-        const htmlString = parseCommentMarkdown(markdown, { showButtonForAttachmentLink: true }, { openLinksInNewTab: true, gfm: true, breaks: true });
+        const htmlString = parseCommentMarkdown(markdown, { showButtonForAttachmentLink: true, disableImagePreview: isExportingPDF }, 
+        // @ts-ignore
+        { openLinksInNewTab: true, gfm: true, breaks: true });
         return { __html: DOMPurify.sanitize(htmlString) };
     };
     const onCommentAreaClick = (e) => {
@@ -184,6 +192,16 @@ const CaseComments = React.forwardRef((props, ref) => {
             return (React.createElement("pre", { className: "push-top-narrow comment-plaintext reset-pre-text", dangerouslySetInnerHTML: commentText(parseComment), style: { fontFamily: isExportingPDF ? 'DejaVu Sans' : '' } }));
         }
     };
+    useEffect(() => {
+        if ((markdownRef === null || markdownRef === void 0 ? void 0 : markdownRef.current) && isExportingPDF) {
+            const preTags = markdownRef.current.querySelectorAll('pre');
+            preTags.forEach((pre) => {
+                pre.style.wordWrap = 'break-word';
+                pre.style.overflowWrap = 'break-word';
+                pre.style.fontFamily = 'DejaVu Sans';
+            });
+        }
+    }, [props.comment, isExportingPDF]);
     if (!((_a = props.comment) === null || _a === void 0 ? void 0 : _a.isPublic) && !canSeePrivateComments)
         return React.createElement(React.Fragment, null);
     return (React.createElement("section", { ref: ref, id: props.comment.id, className: `prevent-split ${computePrivateComment(props.comment)} support-comment ${computeDiscussionCardCalss(props.comment)} ${ref ? 'selected-case-comment' : ''}` },
@@ -198,14 +216,14 @@ const CaseComments = React.forwardRef((props, ref) => {
                     React.createElement(Trans, null, "Partner"),
                     ")"))),
             React.createElement("time", null, formatDateTime(props.comment.lastModifiedDate))),
-        React.createElement("div", { className: "comment-body", onClick: onCommentAreaClick }, computeCommentText(props.comment)),
+        React.createElement("div", { className: "comment-body", onClick: onCommentAreaClick, ref: markdownRef }, computeCommentText(props.comment)),
         React.createElement("footer", null,
             React.createElement("span", { className: "comment-note" }, computeCommentFooter(props.comment)),
             canSeeFeedbackButtons && commentFeedbackButtons(props.comment, props.feedback),
-            React.createElement("span", { className: "pull-right pf-l-flex pf-m-align-items-center" },
+            React.createElement("span", { className: "pull-right pf-v5-l-flex pf-m-align-items-center" },
                 props.showJumpToComment && (React.createElement(DiscussionItemLink, { onClick: onJumpToComment(props.comment.id), discussionType: DiscussionType.COMMENT, itemId: props.comment.id, caseNumber: caseNumber, isCopyLink: false },
                     React.createElement(Trans, null, "Jump to comment"))),
-                React.createElement("button", { onClick: commentReply(props.comment), className: `btn btn-app btn-link ${isExportingPDF ? 'hide-in-pdf' : ''}`, "data-tracking-id": "case-comment-reply" },
+                React.createElement("button", { onClick: commentReply(props.comment), className: `btn btn-app btn-link case-reply-button ${isExportingPDF ? 'hide-in-pdf' : ''}`, "data-tracking-id": "case-comment-reply", type: "button" },
                     React.createElement(Trans, null, "Reply")),
                 React.createElement(JumpAndCopyLink, { caseNumber: caseNumber, cardId: props.comment.id, discussionType: DiscussionType.COMMENT })))));
 });

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

@@ -8,6 +8,6 @@ interface IProps {
     tabRef: React.MutableRefObject<HTMLDivElement>;
     isDiscussionTab: boolean;
 }
-export default function CaseDiscussion(props: IProps): JSX.Element;
+export default function CaseDiscussion(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseDiscussion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseDiscussion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,YAAY,EAA0B,MAAM,yCAAyC,CAAC;AAmB1G,OAAO,KAAoE,MAAM,OAAO,CAAC;AAsCzF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;CAC5B;AAOD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,eAygBnD"}
+{"version":3,"file":"CaseDiscussion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,YAAY,EAA0B,MAAM,yCAAyC,CAAC;AAkB1G,OAAO,KAAoE,MAAM,OAAO,CAAC;AAsCzF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;CAC5B;AAOD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,qBA8mBnD"}

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

@@ -8,22 +8,26 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { caseAttachments } from '@cee-eng/hydrajs';
-import { AlertMessage, AlertType, Dropdown, ErrorBoundary, LoadingIndicator, MultiSelectDropDownList, ToastNotification, } from '@rh-support/components';
+import { 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 { getDropdownBtnPlaceholder, getUrlParsedParams, scrollIntoView, toOption, toOptions } 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 Mark from 'mark.js';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List, WindowScroller } from 'react-virtualized';
+import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { 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 { setCaseState } from '../../../../reducers/CaseReducer';
 import { AttachmentContextProvider } from '../../../shared/fileUpload/reducer/AttachmentReducerContext';
 import { PDFContext } from '../../PDFContainer';
 import CaseAttachment from './CaseAttachment';
@@ -39,6 +43,12 @@ let cellMeasureCache = new CellMeasurerCache({
 });
 export default function CaseDiscussion(props) {
     const { t } = useTranslation();
+    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) ||
         (urlSearchParams === null || urlSearchParams === void 0 ? void 0 : urlSearchParams.externalTrackerId) ||
@@ -48,6 +58,7 @@ export default function CaseDiscussion(props) {
     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 { caseNumber } = props;
     const activeElementId = useRef(null);
@@ -68,6 +79,10 @@ export default function CaseDiscussion(props) {
     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) {
         cellMeasureCache = new CellMeasurerCache({
             fixedWidth: true,
@@ -88,15 +103,12 @@ export default function CaseDiscussion(props) {
         : 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) => {
-        if (cId) {
-            const commentIndex = findIndex([...comuteSearchedComments], (discussion) => discussion.item.id === cId);
-            setCommentIndex(commentIndex < 0 ? 0 : commentIndex);
-            setJumpToCommentClicked(true);
-        }
+        setCommentIndex(cId < 0 ? 0 : cId);
+        setJumpToCommentClicked(true);
         isCommentSearchCleared && setIsCommentSearchCleared(false);
     };
     useEffect(() => {
-        var _a;
+        var _a, _b;
         isCommentSearchCleared && setIsCommentSearchCleared(false);
         if (!discussionIdFromUrl ||
             (activeElementId && activeElementId.current === discussionIdFromUrl) ||
@@ -105,8 +117,20 @@ export default function CaseDiscussion(props) {
         }
         activeElementId.current = discussionIdFromUrl;
         if (allDiscussions.length > VC_MINIMUM_COMMENT) {
-            setVRCommentIndex(discussionIdFromUrl);
-            (_a = windowScrollerRef === null || windowScrollerRef === void 0 ? void 0 : windowScrollerRef.current) === null || _a === void 0 ? void 0 : _a.updatePosition();
+            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;
+                window.scrollTo({
+                    top: scrollTopValue,
+                    left: scrollLeftValue,
+                    behavior: 'smooth',
+                });
+            }
         }
         else if (!isEmpty(allDiscussions) && allDiscussions.length < VC_MINIMUM_COMMENT) {
             activeDiscussionElementRef &&
@@ -139,14 +163,6 @@ export default function CaseDiscussion(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.caseComments, caseAttachmentHydra, props.caseChats, caseFeedbacksHydra, caseExternalTrackersUpdate]);
-    const onSortChange = (selectedSort) => {
-        setSort(dispatchDiscussion, selectedSort.value, allDiscussions);
-    };
-    const onFilterChange = (selectedFilter) => {
-        selectedFilter = selectedFilter.map((item) => item.value.value);
-        setFilter(dispatchDiscussion, selectedFilter, discussionFiltersListState);
-        shouldRenderRVComponent && setCanUpdateScrollTop(false);
-    };
     const onAttachmentRemove = (uuid_removed) => {
         updateAttacmentsAfterRemoval(dispatchDiscussion, uuid_removed, allDiscussions, discussionFiltersListState);
     };
@@ -154,7 +170,8 @@ export default function CaseDiscussion(props) {
         updateCommentStateFeedback(dispatchDiscussion, comment_id, feedback, allDiscussions);
     };
     const onCommentAdded = () => __awaiter(this, void 0, void 0, function* () {
-        yield updateDiscussionStateComments(dispatchDiscussion, caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
+        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);
@@ -208,7 +225,7 @@ export default function CaseDiscussion(props) {
     const onMetadataUpdate = (attachmentId, updatedAttachment) => {
         updateAttachment(dispatchDiscussion, attachmentId, updatedAttachment, allDiscussions);
     };
-    const downloadAttachment = ({ caseNumber, uuid, name }) => __awaiter(this, void 0, void 0, function* () {
+    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);
@@ -230,7 +247,12 @@ export default function CaseDiscussion(props) {
     useEffect(() => {
         if (discussionSectionWidth && shouldRenderRVComponent) {
             cellMeasureCache && cellMeasureCache.clearAll();
+            if (!isEmpty(discussionIdFromUrl)) {
+                const commentIndex = findIndex([...comuteSearchedComments], (discussion) => discussion.item.id === discussionIdFromUrl);
+                setVRCommentIndex(commentIndex);
+            }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [discussionSectionWidth, shouldRenderRVComponent]);
     const renderVRCommentElement = () => {
         return (React.createElement(WindowScroller, { ref: windowScrollerRef, onScroll: handleScroll }, ({ height, registerChild, onChildScroll, isScrolling, scrollTop }) => {
@@ -240,7 +262,7 @@ export default function CaseDiscussion(props) {
                     discussionSectionWidth !== width &&
                         setTimeout(() => setDiscussionSectionWidth(width), 0);
                     return (React.createElement("div", { ref: registerChild },
-                        React.createElement(List, { ref: listRef, autoHeight: true, isScrolling: isScrolling, height: height, overscanRowCount: 10, rowRenderer: rowRenderer, rowCount: comuteSearchedComments.length, rowHeight: cellMeasureCache.rowHeight, deferredMeasurementCache: cellMeasureCache, width: width, scrollToIndex: commentIndex, scrollToAlignment: "start", onScroll: discussionIdFromUrl && canUpdateScrollTop
+                        React.createElement(List, { ref: listRef, autoHeight: true, isScrolling: isScrolling, height: height, overscanRowCount: 10, rowRenderer: rowRenderer, rowCount: comuteSearchedComments.length, rowHeight: cellMeasureCache.rowHeight, deferredMeasurementCache: cellMeasureCache, width: width, scrollToIndex: commentIndex, scrollToAlignment: "center", onScroll: discussionIdFromUrl && canUpdateScrollTop
                                 ? onChildScroll
                                 : customChildScroll })));
                 })));
@@ -271,7 +293,7 @@ export default function CaseDiscussion(props) {
         }
     };
     const handleScroll = ({ scrollTop }) => {
-        var _a, _b, _c, _d, _e;
+        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.
@@ -286,27 +308,62 @@ export default function CaseDiscussion(props) {
             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)) {
+            else if (commentTop < 0 && !isEmpty(discussionIdFromUrl) && !isJumpToCommentClicked) {
                 (_d = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _d === void 0 ? void 0 : _d.scrollToPosition(scrollTop);
             }
             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();
                 setJumpToCommentClicked(false);
-                commentIndex !== -1 && setCommentIndex(-1);
             }
         }
     };
     const list = discussionFiltersListState.filter((filter) => filter.canSee);
+    useEffect(() => {
+        if (isPostingRemoteRequestCommentCompleted) {
+            onCommentAdded();
+            !isEmpty(allDiscussions) && setCaseState(caseDispatch, { isPostingRemoteRequestCommentCompleted: false });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isPostingRemoteRequestCommentCompleted]);
+    const onToggleClick = (e) => {
+        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 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(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 }),
+                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 &&
@@ -315,12 +372,13 @@ export default function CaseDiscussion(props) {
             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(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Select a filter'), list.filter((i) => i.isSelected).map((i) => i.filterLabel), ' ', list.length, t('All comments')), "data-tracking-id": "discussions-filter-comments-dropdown", id: "case-list-comments-dropdown", label: t('Filter by'), title: t('Filter by'), onChange: onFilterChange, selectedItems: toOptions(list.filter((item) => item.isSelected), {
-                            labelKey: 'filterLabel',
-                            disabledKey: 'isDisabled',
-                        }), list: toOptions(list, { labelKey: 'filterLabel', disabledKey: 'isDisabled' }) })),
+                    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("span", { className: "push-top-narrow" },
-                    React.createElement(Dropdown, { id: "se-discussion-sort", label: t('Sort by'), name: "se-discussion-sort", placeholder: t('Sort comments'), "data-tracking-id": "discussions-sort-dropdown", title: t('Sort comments'), list: toOptions(discussionSortOrderConst, { labelKey: 'name' }), selectedItem: toOption(sort, { labelKey: 'name' }), onChange: onSortChange }))),
+                    React.createElement("label", { htmlFor: "se-discussion-sort", className: "pf-v5-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) => {

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

@@ -1 +1 @@
-{"version":3,"file":"CaseExternalTrackerUpdate.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseExternalTrackerUpdate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAOjF,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AAID,QAAA,MAAM,yBAAyB,4EAuF7B,CAAC;AAEH,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"CaseExternalTrackerUpdate.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseExternalTrackerUpdate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAQjF,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AAID,QAAA,MAAM,yBAAyB,4EA0F7B,CAAC;AAEH,eAAe,yBAAyB,CAAC"}

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

@@ -1,4 +1,5 @@
 import { markdownToHTML } from '@cee-eng/ui-toolkit';
+import { Icon } from '@patternfly/react-core';
 import TopologyIcon from '@patternfly/react-icons/dist/js/icons/topology-icon';
 import { AbilityContext, CaseDiscussionFields, resourceActions, resources } from '@rh-support/user-permissions';
 import { formatDateTime } from '@rh-support/utils';
@@ -16,7 +17,7 @@ const CaseExternalTrackerUpdate = React.forwardRef((props, ref) => {
     const canSeePrivateComments = ability.can(resourceActions.PATCH, resources.CASE_COMMENTS, CaseDiscussionFields.VIEW_PRIVATE_COMMENT);
     const sanitize = (markdown) => {
         const htmlString = markdownToHTML(markdown, { openLinksInNewTab: true });
-        return { __html: DOMPurify.sanitize(htmlString) };
+        return { __html: DOMPurify.sanitize(htmlString, { FORBID_TAGS: ['style'] }) };
     };
     const onJumpToComment = (externalTrackerId) => () => props.showJumpToComment && props.onJumpToComment && props.onJumpToComment(externalTrackerId);
     // To check and set if a comment is private or not
@@ -26,8 +27,9 @@ const CaseExternalTrackerUpdate = React.forwardRef((props, ref) => {
     return (React.createElement("section", { ref: ref, id: props.trackerUpdate.id, className: `prevent-split support-comment ${isPrivateUpdate() ? 'private ' : ''}comment-external-tracker ${ref ? 'selected-case-comment' : ''}` },
         React.createElement("header", null,
             React.createElement("h4", null,
-                React.createElement(TopologyIcon, { title: "Comment from external tracker", size: "sm" }),
-                " ",
+                React.createElement(Icon, { size: "sm" },
+                    React.createElement(TopologyIcon, { title: "Comment from external tracker" }),
+                    ' '),
                 props.trackerUpdate.updateBy),
             React.createElement("time", null, formatDateTime(props.trackerUpdate.createdDate))),
         React.createElement("div", { className: "comment-body" },
@@ -44,7 +46,7 @@ const CaseExternalTrackerUpdate = React.forwardRef((props, ref) => {
                             React.createElement(Trans, null, " External tracker"))))))),
             !isPrivateUpdate() && props.trackerUpdate.customerVisible && (React.createElement("div", { className: "comment-note external-tracker-label" },
                 React.createElement(Trans, null, "External tracker"))),
-            React.createElement("span", { className: "pull-right pf-l-flex pf-m-align-items-center" },
+            React.createElement("span", { className: "pull-right pf-v5-l-flex pf-m-align-items-center" },
                 props.showJumpToComment && (React.createElement(DiscussionItemLink, { onClick: onJumpToComment(props.trackerUpdate.id), discussionType: DiscussionType.EXTERNAL_TRACKER, itemId: props.trackerUpdate.id, caseNumber: caseNumber, isCopyLink: false },
                     React.createElement(Trans, null, "Jump to comment"))),
                 React.createElement(JumpAndCopyLink, { caseNumber: caseNumber, cardId: props.trackerUpdate.id, discussionType: DiscussionType.EXTERNAL_TRACKER })))));