@rh-support/troubleshoot 2.2.129 → 2.2.131-beta.1

package/lib/esm/components/AccountInfo/OwnerSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkB/D,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBAqYnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkB/D,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBAsTnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/esm/components/AccountInfo/OwnerSelector.js

@@ -28,14 +28,13 @@ import { getChangedValueTooltip } from '../shared/utils';
 function OwnerSelector(props) {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { accountNumber, caseNumber, selectedNotificationContacts, selectedOwner, selectedCaseGroupUsers, isCaseOwnerUpdating, caseDetailes, hasLoggedInUserConfirmedPhoneNumber, } = useCaseSelector((state) => ({
+    const { accountNumber, caseNumber, selectedNotificationContacts, selectedOwner, selectedCaseGroupUsers, isCaseOwnerUpdating, hasLoggedInUserConfirmedPhoneNumber, } = useCaseSelector((state) => ({
         accountNumber: state.caseDetails.accountNumberRef,
         caseNumber: state.caseDetails.caseNumber,
         selectedNotificationContacts: state.selectedNotificationContacts,
         selectedOwner: state.selectedOwner,
         selectedCaseGroupUsers: state.selectedCaseGroupUsers,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
-        caseDetailes: state.caseDetails,
         hasLoggedInUserConfirmedPhoneNumber: state.hasLoggedInUserConfirmedPhoneNumber,
     }), isEqual);
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
@@ -52,60 +51,6 @@ function OwnerSelector(props) {
         !isEmpty(pvalue.ssoUsername) &&
         value.ssoUsername !== pvalue.ssoUsername;
     const canEditCase = useCanEditCase();
-    // set owner on creating a case
-    const setContactPhoneNumber = (sso) => __awaiter(this, void 0, void 0, function* () {
-        // logged in user and case owner are the same
-        if (sso === loggedInUser.data.ssoUsername) {
-            if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
-                setCaseDetails(caseDispatch, {
-                    phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
-                    phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
-                    suppliedPhoneNumberVerified: isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') || //hasLoggedInUserConfirmedPhoneNumber: global verification phone state for contactSSOName === loggedInUser.data.ssoUsername
-                        isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
-                        ? hasLoggedInUserConfirmedPhoneNumber
-                        : 'False',
-                });
-            }
-            else {
-                const phoneLine = getPhoneObj(loggedInUser.data.phone).phoneLine || '';
-                const countryCode = getPhoneObj(loggedInUser.data.phone).countryCode;
-                setCaseDetails(caseDispatch, {
-                    phoneAreaCodePrefixLineNumber: phoneLine,
-                    phoneCountryCode: countryCode,
-                    suppliedPhoneNumberVerified: isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
-                        isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
-                        ? hasLoggedInUserConfirmedPhoneNumber
-                        : 'False',
-                });
-            }
-        }
-        else {
-            try {
-                const selectedContact = yield contacts.getSFDCContactBySso(sso);
-                if (selectedContact.supportPhoneAreaCodePrefixLineNumber) {
-                    setCaseDetails(caseDispatch, {
-                        phoneAreaCodePrefixLineNumber: selectedContact.supportPhoneAreaCodePrefixLineNumber,
-                        phoneCountryCode: selectedContact.supportPhoneCountryCode,
-                        suppliedPhoneNumberVerified: 'Deferred',
-                    });
-                }
-                else {
-                    setCaseDetails(caseDispatch, {
-                        phoneAreaCodePrefixLineNumber: getPhoneObj(selectedContact.phone).phoneLine || '',
-                        phoneCountryCode: getPhoneObj(selectedContact.phone).countryCode || '',
-                        suppliedPhoneNumberVerified: 'Deferred',
-                    });
-                }
-            }
-            catch (e) {
-                setCaseDetails(caseDispatch, {
-                    phoneAreaCodePrefixLineNumber: '',
-                    phoneCountryCode: '',
-                    suppliedPhoneNumberVerified: 'False',
-                });
-            }
-        }
-    });
     const updatePhone = (phoneSetting) => __awaiter(this, void 0, void 0, function* () {
         yield updateCaseDetails(caseDispatch, caseNumber, phoneSetting);
         setCaseDetails(caseDispatch, Object.assign({}, phoneSetting));
@@ -190,7 +135,6 @@ function OwnerSelector(props) {
         setLocalOwnerChange(true);
         !isEmpty(selectedContact) &&
             setNotifiedUser(dispatch, filter(notificationContacts, (c) => c.ssoUsername !== selectedContact.ssoUsername));
-        setContactPhoneNumber(selectedContact.ssoUsername);
     });
     /** Reset owner when selected account number changes */
     useEffect(() => {
@@ -286,26 +230,6 @@ function OwnerSelector(props) {
             users.length > 0 && setUsersWithGroupAccess(sortHydraContacts(users));
         }
     }, [selectedCaseGroupUsers, caseNumber]);
-    // to populate the phone number with the logged in user data
-    useEffect(() => {
-        if (caseDetailes.contactSSOName === loggedInUser.data.ssoUsername) {
-            if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
-                setCaseDetails(caseDispatch, {
-                    phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
-                    phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
-                });
-            }
-            else {
-                const phoneLine = getPhoneObj(loggedInUser.data.phone).phoneLine || '';
-                const countryCode = getPhoneObj(loggedInUser.data.phone).countryCode;
-                setCaseDetails(caseDispatch, {
-                    phoneAreaCodePrefixLineNumber: phoneLine,
-                    phoneCountryCode: countryCode,
-                });
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const showUsersWithSelectedGroupAccess = caseNumber &&
         (selectedCaseGroupUsers.isFetching ||
             (!selectedCaseGroupUsers.isFetching && (selectedCaseGroupUsers.data || []).length > 0));

package/lib/esm/components/CaseEditView/CaseDetailsTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAyBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiO5C"}
+{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAyBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAgO5C"}

package/lib/esm/components/CaseEditView/CaseDetailsTabs.js

@@ -104,15 +104,14 @@ export function CaseDetailsTabs(props) {
             routePath: 'escalation',
             component: (React.createElement(RMEEscalationList, { escalations: caseEscalations.data, caseNumber: caseNumber, caseStatus: status, accountNumber: loggedInUserRights.data.getAccountNumber(), isInternal: loggedInUserRights.data.isInternal() })),
         });
-    false && //Don't add this component to 'tabsToRender' for now, pending QA release
-        tabsToRender.push({
-            'data-tracking-id': 'case-history-tab',
-            title: CaseDetailsTabsEnum.HISTORY,
-            key: 'history',
-            routePath: 'history',
-            ref: caseHistoryTabRef,
-            component: React.createElement(CaseHistory, { caseNumber: caseNumber }),
-        });
+    tabsToRender.push({
+        'data-tracking-id': 'case-history-tab',
+        title: CaseDetailsTabsEnum.HISTORY,
+        key: 'history',
+        routePath: 'history',
+        ref: caseHistoryTabRef,
+        component: React.createElement(CaseHistory, { caseNumber: caseNumber }),
+    });
     const getActiveTabKey = () => {
         if (!activeTab)
             return activeTabKey;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.tsx"],"names":[],"mappings":"AASA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAgB/D,wBAAgB,sBAAsB,sBAkTrC"}
+{"version":3,"file":"CaseContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.tsx"],"names":[],"mappings":"AASA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAgB/D,wBAAgB,sBAAsB,sBA4TrC"}

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

@@ -27,7 +27,7 @@ import { ContactPhoneNumberPopOver } from '../../../CaseInformation/ContactPhone
 import { trimAndReplacePlus } from '../../../shared/utils';
 import { PDFContext } from '../../PDFContainer';
 export function CaseContactPhoneNumber() {
-    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating, phone, } = useCaseSelector((state) => ({
+    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating, phone, hasLoggedInUserConfirmedPhoneNumber, } = useCaseSelector((state) => ({
         phoneCountryCode: state.caseDetails.phoneCountryCode || '',
         phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber || '',
         caseNumber: state.caseDetails.caseNumber,
@@ -35,6 +35,7 @@ export function CaseContactPhoneNumber() {
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
         phone: state.caseDetails.phone,
+        hasLoggedInUserConfirmedPhoneNumber: state.hasLoggedInUserConfirmedPhoneNumber,
     }), isEqual);
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const canEditCase = useCanEditCase();
@@ -101,8 +102,7 @@ export function CaseContactPhoneNumber() {
         }
     });
     const onClear = () => __awaiter(this, void 0, void 0, function* () {
-        setLocalFullPhoneState('');
-        setLocalCountryCodeState('');
+        setIsEditting(false);
     });
     const maxLengthErrorMessage = t('Phone number cannot be more than {{limit}} digits.', {
         limit: PHONE_LIMIT,
@@ -180,6 +180,16 @@ export function CaseContactPhoneNumber() {
                 hasLoggedInUserConfirmedPhoneNumber: suppliedPhoneNumberVerified,
             });
         }
+        else {
+            // when loggedInUser !== contactSSOName while opening a case, we need to save the verification deferred state globally
+            // so that when the owner is again changed back to loggedInUser, we show the phone review banner again
+            // if he has not previously responded to the banner
+            setCaseState(caseDispatch, {
+                hasLoggedInUserConfirmedPhoneNumber: !isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True')
+                    ? 'Deferred'
+                    : 'True',
+            });
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [suppliedPhoneNumberVerified]);
     return (React.createElement("div", { className: "form-group pf-v5-u-pb-md", style: { minWidth: '200px' } },

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,4EAgUhB,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,4EA4UhB,CAAC;AAEH,eAAe,YAAY,CAAC"}

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

@@ -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);
@@ -186,6 +187,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' : ''}` },
@@ -200,7 +211,7 @@ 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),

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;AAoB1G,OAAO,KAAoE,MAAM,OAAO,CAAC;AAwCzF,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,qBA4iBnD"}
+{"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;AAa1G,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,qBAwmBnD"}

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

@@ -8,10 +8,11 @@ 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 { getDropdownBtnPlaceholder, getUrlParsedParams, scrollIntoView } from '@rh-support/utils';
 import cloneDeep from 'lodash/cloneDeep';
 import filter from 'lodash/filter';
 import findIndex from 'lodash/findIndex';
@@ -76,6 +77,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,
@@ -156,14 +161,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);
     };
@@ -326,6 +323,30 @@ export default function CaseDiscussion(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isPostingRemoteRequestCommentCompleted]);
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const onSortToggleClick = () => {
+        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,
@@ -346,12 +367,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/CaseHistory/CaseHistory.d.ts

@@ -1,4 +1,3 @@
-import './CaseHistory.css';
 import React from 'react';
 interface IProps {
     caseNumber: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,UAAW,MAAM,sBAMjC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,UAAW,MAAM,sBAMjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,4 +1,3 @@
-import './CaseHistory.css';
 import React from 'react';
 import Timeline from './Timeline';
 const CaseHistory = (props) => {

package/lib/esm/components/CaseInformation/ContactPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkB/D,wBAAgB,kBAAkB,sBAoLjC"}
+{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkB/D,wBAAgB,kBAAkB,sBA2UjC"}