@rh-support/troubleshoot 2.2.119 → 2.2.121

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;AAwBlE,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,qBAqN5C"}
+{"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

@@ -11,6 +11,7 @@ import { useCaseSelector } from '../../context/CaseContext';
 import { useCaseDetailsPageStateContext } from '../../context/CaseDetailsPageContext';
 import { PDFContext } from './PDFContainer';
 import CaseDetailsManagement from './Tabs/CaseDetails/CaseDetailsManagement';
+import CaseHistory from './Tabs/CaseHistory/CaseHistory';
 const RelatedTasks = React.lazy(() => import(/* webpackChunkName: 'CaseBugzilla' */ './Tabs/RelatedTasks/RelatedTasks'));
 const CaseActionPlan = React.lazy(() => import(/* webpackChunkName: 'CaseActionPlan' */ './Tabs/CaseActionPlan/CaseActionPlan'));
 const CasePrivateNotes = React.lazy(() => import(/* webpackChunkName: 'CasePrivateNotes' */ './Tabs/CasePrivateNotes/CasePrivateNotes'));
@@ -45,6 +46,7 @@ export function CaseDetailsTabs(props) {
     const actionPlanTabRef = useRef(null);
     const escalationTabRef = useRef(null);
     const relatedTasksRef = useRef(null);
+    const caseHistoryTabRef = useRef(null);
     const tabsToRender = [];
     const handleTabClick = (event, tabIndex) => {
         setActiveTabKey(tabIndex);
@@ -102,6 +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() })),
         });
+    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,sBAiTrC"}
+{"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"}

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

@@ -111,7 +111,8 @@ export function CaseContactPhoneNumber() {
         contactSSOName === loggedInUser.data.ssoUsername &&
         suppliedPhoneNumberVerified === 'Deferred' &&
         !isCaseOwnerUpdating &&
-        !isCasePhoneUpdating;
+        !isCasePhoneUpdating &&
+        !isEmpty(localFullPhoneState);
     const isPhoneNumberValid = (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT
         ? ValidatedOptions.error
         : isPhoneNeedsReview

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

@@ -17,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

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

@@ -1,6 +1,8 @@
+import './CaseHistory.css';
 import React from 'react';
 interface IProps {
+    caseNumber: string;
 }
-export default function CaseHistory(props: IProps): React.JSX.Element;
-export {};
+declare const CaseHistory: (props: IProps) => React.JSX.Element;
+export default CaseHistory;
 //# sourceMappingURL=CaseHistory.d.ts.map

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,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAM;CAAG;AAEnB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,qBAEhD"}
+{"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"}

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

@@ -1,4 +1,8 @@
+import './CaseHistory.css';
 import React from 'react';
-export default function CaseHistory(props) {
-    return React.createElement(React.Fragment, null, "CaseHistory");
-}
+import Timeline from './Timeline';
+const CaseHistory = (props) => {
+    return (React.createElement("div", null,
+        React.createElement(Timeline, { caseNumber: props.caseNumber })));
+};
+export default CaseHistory;

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/Timeline.css

@@ -0,0 +1,257 @@
+* {
+    box-sizing: border-box;
+}
+
+.timeline {
+    position: relative;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 1px;
+    background-color: #6a6e73;
+    top: 30px;
+
+    /* This offset is needed to keep it responsive */
+    --timeline-bottom-offset: -30px;
+
+    /* This value is calculated in timeline.tsx */
+    bottom: calc(var(--timeline-bottom) + var(--timeline-bottom-offset, 18.35%));
+    left: calc(13% + 13px);
+    transform: translateX(-50%);
+}
+
+.timeline-loading-spinner {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.timeline-container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: white;
+    border: 4px solid #ff9f55;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.timeline-node {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+    margin-bottom: 20px;
+    min-height: 80px;
+}
+
+.timeline-avatar {
+    position: absolute;
+    left: calc(13% + 13px);
+    transform: translateX(-91%);
+    top: 12px;
+    z-index: 5;
+}
+
+.timeline-marker {
+    position: absolute;
+    background-color: #ff9f55;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    z-index: 2;
+    left: calc(13% + 13px);
+    transform: translateX(-195%);
+    top: 25px;
+}
+
+.left-node {
+    flex: 0 0 13%;
+    max-width: 13%;
+    padding-right: 24px;
+}
+
+.content-date-left-history {
+    font-family: 'Red Hat Display';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    text-align: right;
+}
+
+.content-time-left-history {
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: 'Red Hat Text';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    text-align: right;
+    line-height: 30px;
+}
+
+.content-date-right-history {
+    color: #151515;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: 'Red Hat Display';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.content-time-right-history {
+    color: var(--Text-and-links-pf-global--Color--100, #151515);
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: 'Red Hat Text';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+}
+
+.right-node {
+    flex-grow: 1;
+    padding-left: 2.8%;
+}
+
+.right-node::before {
+    content: ' ';
+    height: 0;
+    position: relative;
+    display: list-item;
+    top: 22.5px;
+    width: 0;
+    z-index: 1;
+    left: -0.5%;
+    border: medium solid white;
+    border-width: 7px 0 7px 7px;
+    border-color: transparent transparent transparent white;
+    transform: rotate(180deg);
+}
+
+.internal.right-node::before {
+    border-color: transparent transparent transparent #ee0000;
+}
+
+.customer.right-node::before {
+    border-color: transparent transparent transparent #316dc1;
+}
+
+.timeline-internal {
+    background-color: #ee0000;
+}
+
+.timeline-customer {
+    background-color: #316dc1;
+}
+
+.timeline-avatar-internal {
+    border-color: #ee0000;
+    border-width: 2px;
+    border-style: solid;
+}
+
+.timeline-avatar-customer {
+    border-color: #316dc1;
+    border-width: 2px;
+    border-style: solid;
+}
+
+.contentTimeline {
+    padding: 16px;
+    position: absolute;
+    border-radius: 3px;
+    margin-bottom: 32px;
+}
+
+.content-right-history {
+    background-color: white;
+    border-left-width: 3px !important;
+    border-left-style: solid !important;
+    border-radius: 3px;
+    border: 1px solid #d2d2d2;
+    width: 80%;
+    top: 0rem;
+}
+
+.content-right-customer {
+    border-left-color: #316dc1 !important;
+}
+
+.content-right-internal {
+    border-left-color: #ee0000 !important;
+}
+
+ul#case-history-paginated-timeline {
+    list-style-type: none !important;
+    /* this is to deal with firefox they add in a ::marker and it is visible */
+}
+
+.case-history-timeline-search {
+    margin-bottom: 1%;
+    width: 30%;
+}
+
+.timelineMenu {
+    display: flex;
+}
+
+.case-history-timeline-datepicker {
+    display: flex;
+    margin-bottom: 1%;
+    /* position: absolute; */
+    justify-content: flex-end;
+    width: 64.2%;
+}
+
+.empty-state-date-picker {
+    margin-left: 82%;
+}
+
+.timeline-sort-order-select {
+    display: flex;
+    justify-content: flex-end;
+    margin: 1rem;
+    width: 93.2%;
+}
+
+@media screen and (max-width: 768px) {
+    .timeline::after {
+        left: 20px;
+    }
+
+    .timeline-node {
+        flex-direction: column;
+    }
+
+    .left-node,
+    .right-node {
+        max-width: 100%;
+        padding: 0;
+    }
+
+    .timeline-avatar,
+    .timeline-marker {
+        left: 0%;
+        transform: translateX(-50%);
+    }
+
+    .right-node::before {
+        left: 20px;
+        border-width: 10px 10px 10px 0;
+        border-color: transparent white transparent transparent;
+    }
+
+    .contentTimeline {
+        margin-left: 40px;
+    }
+}

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

@@ -0,0 +1,7 @@
+import './Timeline.css';
+import React from 'react';
+declare const Timeline: ({ caseNumber }: {
+    caseNumber: any;
+}) => React.JSX.Element;
+export default Timeline;
+//# sourceMappingURL=Timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAwBxB,OAAO,KAAuD,MAAM,OAAO,CAAC;AA6I5E,QAAA,MAAM,QAAQ;;uBA8Qb,CAAC;AACF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,236 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import './Timeline.css';
+import { caseHistory } from '@cee-eng/hydrajs';
+import { Avatar, Button, DatePicker, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, MenuToggle, SearchInput, Select, SelectList, SelectOption, Spinner, } from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { PaginatedList } from '@rh-support/components';
+import debounce from 'lodash/debounce';
+import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
+    if (side === 'left') {
+        if (useAvatar) {
+            // we only want to render the main date if the user changes, otherwise stay with just the time
+            return (React.createElement("div", { className: `${side}-node ${user}`, role: "complementary", "aria-label": `${user}'s timeline Event Time` },
+                React.createElement("div", { className: `contentTimeline content-${side}-history content-${side}-${user}` },
+                    React.createElement("h2", { className: `content-date-${side}-history` }, date),
+                    React.createElement("p", { className: `content-time-${side}-history` }, text))));
+        }
+        return (React.createElement("div", { className: `${side}-node ${user}`, role: "complementary", "aria-label": `${user}'s timeline Event Time` },
+            React.createElement("div", { className: `contentTimeline content-${side}-history content-${side}-${user}` },
+                React.createElement("p", { className: `content-time-${side}-history` }, text))));
+    }
+    return (React.createElement("div", { className: `${side}-node ${user}`, role: "complementary", "aria-label": `${user}'s timeline event content ` },
+        React.createElement("div", { className: `contentTimeline content-${side}-history content-${side}-${user}` },
+            React.createElement("h2", { className: `content-date-${side}-history` }, date),
+            text && React.createElement("p", { className: `content-time-${side}-history` }, text))));
+};
+const TimelineNode = React.forwardRef(({ leftEvent, rightEvent, user, useAvatar }, ref) => {
+    return (React.createElement("div", { className: "timeline-node", role: "region", "aria-label": "Timeline node" },
+        leftEvent && React.createElement(TimelineEvent, Object.assign({}, leftEvent, { side: "left", useAvatar: useAvatar })),
+        React.createElement("div", { ref: ref, "aria-label": `${useAvatar ? 'Open user profile' : 'Marker'}`, tabIndex: 0 }, useAvatar ? (React.createElement(Avatar, { src: 'https://www.patternfly.org/images/668560cd.svg', className: `timeline-avatar timeline-avatar-${user}`, alt: `${user}'s avatar` })) : (React.createElement("div", { className: `timeline-marker timeline-${user}` }))),
+        rightEvent && React.createElement(TimelineEvent, Object.assign({}, rightEvent, { side: "right" }))));
+});
+const transformApiResponseToTimelineData = (apiResponse) => {
+    let previousUser = null;
+    const timelineEvents = apiResponse.historyItems.map((item, index) => {
+        const currentUser = item.createdByUserName;
+        // If the current user is the same as the previous one, and it's not the first item, don't use an avatar. use !! cause previousUser start null.
+        const useAvatar = index === 0 || (!!previousUser && currentUser !== previousUser);
+        // Update the previousUser for the next iteration
+        previousUser = currentUser;
+        const eventDate = new Date(item.createdDate);
+        const date = eventDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+        const time = eventDate.toLocaleTimeString('en-US', {
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true,
+            timeZoneName: 'short',
+        });
+        const user = item.createdByCustomer !== undefined
+            ? item.createdByCustomer //using new case history field to determine this
+                ? 'customer'
+                : 'internal'
+            : currentUser === 'Case Diagnostics' || currentUser === 'GSS Tools' //for now since it is not on prod yet we have this same fallback
+                ? 'internal'
+                : 'customer';
+        const leftEvent = {
+            date: date,
+            text: time,
+        };
+        const rightEvent = {
+            date: `${item.createdByUserName} ${stripHTML(item.outputText)}`, //will change name later from date, for now date is title and text stays text due to initial set up mimicking same ITimelineEvent
+            text: '', //future iterations of API make this the 'show more' field
+            user: user,
+            useAvatar: useAvatar,
+        };
+        return {
+            left: leftEvent,
+            right: rightEvent,
+        };
+    });
+    return timelineEvents;
+};
+function stripHTML(htmlString) {
+    const anchorTagRegex = /<a[^>]*>(.*?)<\/a>/g;
+    // We are trying to return the text without having the info in the anchor.
+    return htmlString.replace(anchorTagRegex, '');
+}
+const Timeline = ({ caseNumber }) => {
+    const { t } = useTranslation();
+    const [timelineEvents, setTimelineEvents] = useState([]);
+    const [isFetchingData, setIsFetchingData] = useState();
+    const [paginatedListLength, setPaginatedListLength] = useState();
+    const lastNodeRef = useRef(null);
+    const [dateValue, setDateValue] = React.useState('');
+    const [searchValue, setSearchValue] = useState('');
+    const [filteredEvents, setFilteredEvents] = useState([]);
+    const [isSelectOpen, setIsSelectOpen] = useState(false);
+    const [selectedOrder, setSelectedOrder] = useState('Newest to Oldest');
+    const handleSelectToggle = () => {
+        setIsSelectOpen(!isSelectOpen);
+    };
+    const handleSelect = (_event, value) => {
+        setSelectedOrder(value);
+        setIsSelectOpen(false);
+        reorderTimelineEvents(value);
+    };
+    const reorderTimelineEvents = (order) => {
+        setTimelineEvents((prevEvents) => {
+            const reversedEvents = [...prevEvents].reverse();
+            return applyAvatarLogic(reversedEvents);
+        });
+    };
+    const applyAvatarLogic = (events) => {
+        let previousUser = null;
+        return events.map((event, index) => {
+            const currentUser = event.right.date.split(' ')[0];
+            const useAvatar = index === 0 || (!!previousUser && currentUser !== previousUser);
+            previousUser = currentUser;
+            return Object.assign(Object.assign({}, event), { right: Object.assign(Object.assign({}, event.right), { useAvatar: useAvatar }) });
+        });
+    };
+    useEffect(() => {
+        function fetchHistory() {
+            return __awaiter(this, void 0, void 0, function* () {
+                setIsFetchingData(true);
+                const options = {
+                    sortField: 'createdDate',
+                    sortOrder: 'DESC',
+                    showVerbose: true,
+                };
+                try {
+                    const response = yield caseHistory.getHistoryv1(caseNumber, options);
+                    const transformedData = transformApiResponseToTimelineData(response);
+                    setTimelineEvents(transformedData);
+                }
+                catch (error) {
+                    console.error('Failed to fetch history:', error);
+                }
+                finally {
+                    setIsFetchingData(false);
+                }
+            });
+        }
+        fetchHistory();
+    }, [caseNumber]);
+    //Using useLayoutEffect because we are measuring styles based on DOM, useLayoutEffect runs after DOM Mutations https://react.dev/reference/react/useLayoutEffect
+    useLayoutEffect(() => {
+        const updateLineStyle = debounce(() => {
+            var _a;
+            if (lastNodeRef.current) {
+                const timelineBottom = lastNodeRef.current.getBoundingClientRect().bottom + window.scrollY;
+                const timelineElement = document.querySelector('.timeline');
+                const avatarHeight = ((_a = lastNodeRef.current.querySelector('.timeline-avatar')) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+                if (timelineElement) {
+                    // Get the timeline element's position relative to the document
+                    const timelineTop = timelineElement.getBoundingClientRect().top + window.scrollY;
+                    // Calculate value relative to the timeline's top must be adjusted for page scroll or we get random bottom value based on where user scrolled before execution
+                    const calculatedBottomValue = `${timelineTop + timelineElement.offsetHeight - timelineBottom + avatarHeight}px`;
+                    timelineElement.style.setProperty('--timeline-bottom', calculatedBottomValue);
+                }
+            }
+        }, 100);
+        updateLineStyle();
+    }, [timelineEvents, paginatedListLength, dateValue]);
+    const handleSearchChange = (value) => {
+        setSearchValue(value.target.value);
+    };
+    const handleClear = () => {
+        setSearchValue('');
+    };
+    const handleDateChange = (value) => {
+        setDateValue(value);
+    };
+    useEffect(() => {
+        let filteredBySearch = [...timelineEvents];
+        if (searchValue.trim()) {
+            const lowercasedFilter = searchValue.toLowerCase();
+            filteredBySearch = filteredBySearch.filter(({ left, right }) => {
+                const dateString = left.date.toLowerCase();
+                return (dateString.includes(lowercasedFilter) ||
+                    left.text.toLocaleLowerCase().includes(lowercasedFilter) ||
+                    right.date.toLowerCase().includes(lowercasedFilter));
+            });
+        }
+        let finalFilteredEvents = filteredBySearch;
+        if (dateValue) {
+            finalFilteredEvents = filteredBySearch.filter(({ left }) => {
+                // Format the event date to match the DatePicker format (YYYY-MM-DD) We need to do it this way so we dont have discrepancy (off by one month when selecting) due to the way that JS handles timezones
+                const eventDateFormatted = new Date(left.date).toISOString().split('T')[0];
+                // Compare the formatted event date with the selected date from DatePicker
+                return eventDateFormatted === dateValue;
+            });
+        }
+        setFilteredEvents(finalFilteredEvents);
+    }, [searchValue, dateValue, timelineEvents]);
+    if (filteredEvents.length < 1 && !isFetchingData) {
+        return (React.createElement("div", { key: "no-results" },
+            React.createElement("div", { className: "timelineMenu" },
+                React.createElement(SearchInput, { placeholder: t('Search for a user, action, or keyword'), value: searchValue, onChange: handleSearchChange, onClear: handleClear, className: "case-history-timeline-search" }),
+                React.createElement("div", { className: "case-history-timeline-datepicker" },
+                    React.createElement(DatePicker, { value: dateValue, onChange: (_event, value) => handleDateChange(value) }),
+                    React.createElement(Button, { onClick: () => setDateValue(''), isDisabled: isEmpty(dateValue) }, "Reset"))),
+            React.createElement("div", { className: "timeline-sort-order-select" },
+                React.createElement(Select, { id: "order-select", isOpen: isSelectOpen, selected: selectedOrder, onSelect: handleSelect, onOpenChange: (isOpen) => setIsSelectOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: handleSelectToggle, isExpanded: isSelectOpen, style: { width: '200px' } }, selectedOrder)), shouldFocusToggleOnSelect: true },
+                    React.createElement(SelectList, null,
+                        React.createElement(SelectOption, { value: "Newest to Oldest" }, "Newest to Oldest"),
+                        React.createElement(SelectOption, { value: "Oldest to Newest" }, "Oldest to Newest")))),
+            React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+                React.createElement(EmptyStateHeader, { titleText: React.createElement(Trans, null, "No results found"), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" }),
+                React.createElement(EmptyStateBody, null,
+                    React.createElement(Trans, null, "Try modifying your search query or changing the date range and try again.")))));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "timelineMenu" },
+            React.createElement(SearchInput, { placeholder: "Search for a user, action, or keyword", value: searchValue, onChange: handleSearchChange, onClear: handleClear, className: "case-history-timeline-search" }),
+            React.createElement("div", { className: "case-history-timeline-datepicker" },
+                React.createElement(DatePicker, { value: dateValue, onChange: (_event, value) => handleDateChange(value) }),
+                React.createElement(Button, { onClick: () => setDateValue(''), isDisabled: isEmpty(dateValue) }, "Reset"))),
+        React.createElement("div", { className: "timeline-sort-order-select" },
+            React.createElement(Select, { id: "order-select", isOpen: isSelectOpen, selected: selectedOrder, onSelect: handleSelect, onOpenChange: (isOpen) => setIsSelectOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: handleSelectToggle, isExpanded: isSelectOpen, style: { width: '200px' } }, selectedOrder)), shouldFocusToggleOnSelect: true },
+                React.createElement(SelectList, null,
+                    React.createElement(SelectOption, { value: "Newest to Oldest" }, "Newest to Oldest"),
+                    React.createElement(SelectOption, { value: "Oldest to Newest" }, "Oldest to Newest")))),
+        React.createElement("div", { className: "timeline" },
+            isFetchingData && (React.createElement("div", { className: "timeline-loading-spinner" },
+                React.createElement(Spinner, { size: "xl" }))),
+            !isFetchingData && (React.createElement(PaginatedList, { id: "case-history-paginated-timeline", listItems: filteredEvents &&
+                    filteredEvents.map((node, index) => (React.createElement(TimelineNode, { key: index, leftEvent: node.left, rightEvent: node.right, user: node.right.user, useAvatar: node.right.useAvatar, ref: index === (paginatedListLength && paginatedListLength - 1) ? lastNodeRef : null //this ref is needed to perform calculations on the final node height
+                     }))), perPage: 20, perPageOptions: [
+                    { title: '5', value: 5 },
+                    { title: '10', value: 10 },
+                    { title: '15', value: 15 },
+                    { title: '20', value: 20 },
+                ], setPaginatedListLength: setPaginatedListLength })))));
+};
+export default Timeline;

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.js

@@ -77,5 +77,5 @@ export const NewProductDropdownSelector = (props) => {
         !isSelectedProductSupportedForCustomer && (React.createElement("div", { className: "pf-v5-u-ml-xs pf-v5-u-mt-sm form-instructions" },
             React.createElement(Trans, null, "Red Hat must confirm your subscription status before providing support."),
             React.createElement("br", null),
-            React.createElement(Trans, null, "We'll contact you if we have question.")))));
+            React.createElement(Trans, null, "We'll contact you if we have any questions.")))));
 };

package/lib/esm/components/SessionRestore/SessionRestore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionRestore.d.ts","sourceRoot":"","sources":["../../../../src/components/SessionRestore/SessionRestore.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQvD,OAAO,EAGH,eAAe,EAElB,MAAM,iCAAiC,CAAC;AAiBzC,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBA8U3C"}
+{"version":3,"file":"SessionRestore.d.ts","sourceRoot":"","sources":["../../../../src/components/SessionRestore/SessionRestore.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQvD,OAAO,EAGH,eAAe,EAElB,MAAM,iCAAiC,CAAC;AAiBzC,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBAwT3C"}

package/lib/esm/components/SessionRestore/SessionRestore.js

@@ -234,29 +234,6 @@ export function SessionRestore(props) {
         const userAgent = getUserAgentForCaseMode(isCaseCreate);
         markAllSessionsUnresolved(sessionRestoreDispatch, sessionRestore.previousSessions.data, userAgent);
     };
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
-        if (sessionRestore.activeSessionId === previousActiveSessionId) {
-            return;
-        }
-        const sessionItem = sessionRestore.previousSessions.data[sessionRestore.activeSessionId];
-        const newParams = {
-            product: (_c = (_b = (_a = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.sessionDetails) === null || _a === void 0 ? void 0 : _a.product) !== null && _b !== void 0 ? _b : caseDetails.product) !== null && _c !== void 0 ? _c : queryParamsFromUrl.product,
-            version: (_f = (_e = (_d = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.sessionDetails) === null || _d === void 0 ? void 0 : _d.version) !== null && _e !== void 0 ? _e : caseDetails.version) !== null && _f !== void 0 ? _f : queryParamsFromUrl.version,
-            seSessionId: sessionRestore.activeSessionId,
-        };
-        RouteUtils.updateQueryParams(props.routeProps, newParams);
-    }, [
-        caseDetails.product,
-        caseDetails.version,
-        currentUrlSeSessionId,
-        previousActiveSessionId,
-        props.routeProps,
-        queryParamsFromUrl.product,
-        queryParamsFromUrl.version,
-        sessionRestore.activeSessionId,
-        sessionRestore.previousSessions.data,
-    ]);
     useDebounce(() => {
         let previousSessions = [];
         for (let s in sessionRestore.previousSessions.data) {

package/lib/esm/constants/caseDetailsConstants.d.ts

@@ -5,7 +5,8 @@ export declare enum CaseDetailsTabsEnum {
     ACTION_PLAN = "Action plan",
     PRIVATE_NOTES = "Private Notes",
     ESCALATION = "Escalations",
-    RELATED_TASKS = "Related tasks"
+    RELATED_TASKS = "Related tasks",
+    HISTORY = "History"
 }
 export declare enum CaseStatusEnum {
     CLOSED = "Closed",

package/lib/esm/constants/caseDetailsConstants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"caseDetailsConstants.d.ts","sourceRoot":"","sources":["../../../src/constants/caseDetailsConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oCAAoC,yBAAyB,CAAC;AAE3E,oBAAY,mBAAmB;IAC3B,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,UAAU,gBAAgB;IAC1B,aAAa,kBAAkB;CAClC;AAED,oBAAY,cAAc;IACtB,MAAM,WAAW;IACjB,mBAAmB,wBAAwB;IAC3C,iBAAiB,uBAAuB;CAC3C;AAED,oBAAY,0BAA0B;IAClC,OAAO,MAAM;IACb,WAAW,OAAO;IAClB,OAAO,MAAM;CAChB;AAED,eAAO,MAAM,0BAA0B,6DAA6D,CAAC;AAErG,eAAO,MAAM,mBAAmB,uCAAuC,CAAC;AAExE,eAAO,MAAM,kBAAkB,6BAA6B,CAAC;AAE7D,eAAO,MAAM,iBAAiB,8EAA8E,CAAC"}
+{"version":3,"file":"caseDetailsConstants.d.ts","sourceRoot":"","sources":["../../../src/constants/caseDetailsConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oCAAoC,yBAAyB,CAAC;AAE3E,oBAAY,mBAAmB;IAC3B,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,UAAU,gBAAgB;IAC1B,aAAa,kBAAkB;IAC/B,OAAO,YAAY;CACtB;AAED,oBAAY,cAAc;IACtB,MAAM,WAAW;IACjB,mBAAmB,wBAAwB;IAC3C,iBAAiB,uBAAuB;CAC3C;AAED,oBAAY,0BAA0B;IAClC,OAAO,MAAM;IACb,WAAW,OAAO;IAClB,OAAO,MAAM;CAChB;AAED,eAAO,MAAM,0BAA0B,6DAA6D,CAAC;AAErG,eAAO,MAAM,mBAAmB,uCAAuC,CAAC;AAExE,eAAO,MAAM,kBAAkB,6BAA6B,CAAC;AAE7D,eAAO,MAAM,iBAAiB,8EAA8E,CAAC"}

package/lib/esm/constants/caseDetailsConstants.js

@@ -7,6 +7,7 @@ export var CaseDetailsTabsEnum;
     CaseDetailsTabsEnum["PRIVATE_NOTES"] = "Private Notes";
     CaseDetailsTabsEnum["ESCALATION"] = "Escalations";
     CaseDetailsTabsEnum["RELATED_TASKS"] = "Related tasks";
+    CaseDetailsTabsEnum["HISTORY"] = "History";
 })(CaseDetailsTabsEnum || (CaseDetailsTabsEnum = {}));
 export var CaseStatusEnum;
 (function (CaseStatusEnum) {

package/lib/esm/scss/_pf-overrides.scss

@@ -702,3 +702,7 @@ label.react-typeahead-label-wrapper {
         color: #ffffff;
     }
 }
+#case-history-paginated-timeline-pagination-bottom-pagination {
+    justify-content: flex-start;
+    background-color: var(--pf-v5-global--palette--black-200);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "2.2.119",
+    "version": "2.2.121",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -60,10 +60,10 @@
         "@progress/kendo-licensing": "1.3.5",
         "@progress/kendo-react-pdf": "^5.16.0",
         "@redux-devtools/extension": "^3.3.0",
-        "@rh-support/components": "2.1.59",
-        "@rh-support/react-context": "2.1.66",
+        "@rh-support/components": "2.1.61",
+        "@rh-support/react-context": "2.1.68",
         "@rh-support/types": "2.0.3",
-        "@rh-support/user-permissions": "2.1.43",
+        "@rh-support/user-permissions": "2.1.44",
         "@rh-support/utils": "2.1.33",
         "@types/react-redux": "^7.1.33",
         "@types/redux": "^3.6.0",
@@ -131,5 +131,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "184dcedae43592a133b6122d642a38b64ed4006c"
+    "gitHead": "0fa0968e831c199572669184c466e9fecd781d12"
 }