@rh-support/troubleshoot 2.4.5-beta.1 → 2.4.5-beta.2

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

@@ -9,14 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import './Timeline.css';
 import { caseHistory } from '@cee-eng/hydrajs';
-import { Avatar, Button, DatePicker, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, MenuToggle, Pagination, SearchInput, Select, SelectOption, Spinner, } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+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 globalDangerColor100 from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { format, fromUnixTime, isSameDay, parse } from 'date-fns';
+import { PaginatedList } from '@rh-support/components';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
     if (side === 'left') {
@@ -31,7 +29,7 @@ const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
             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` },
+    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))));
@@ -39,18 +37,14 @@ const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
 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 ? 'User profile picture' : 'Timeline marker'}`, tabIndex: -1 }, 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}` }))),
+        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" }))));
 });
-/**
- *
- * @param {Object} item - The item object to process.
- * @returns {string} The formatted text string.
- */
+//Handling changes in case fields to be displayed to the user
 const applyReplacements = (item) => {
-    if (!item || typeof item !== 'object')
+    if (!item || typeof item !== 'object') {
         return '';
-    //  API field names to easy to read display names
+    }
     const fieldNameMapping = {
         ContactId: 'Contact',
         RH_Product__c: 'Product',
@@ -61,171 +55,94 @@ const applyReplacements = (item) => {
         BusinessHoursId: 'Business Hours',
         FolderId__c: 'Case Group',
         Status: 'Status',
-        Customer_Escalation__c: 'Customer Escalation',
-        SlaStartDate: 'SLA Start Date',
-        Case_Language__c: 'Case Language',
-        Alternate_Id__c: 'Personal reference number',
-        SBR_Group__c: 'SBR Group',
-    };
-    // https://help.salesforce.com/s/articleView?id=000384484&type=1
-    // adding in option for multiselect fields provided by salesforce.
-    // in future for more multiselect fields just add to below array.
-    const multiSelectFields = ['SBR_Group__c'];
-    // language codes to language names
-    const languageCodeMapping = {
-        de: 'German',
-        en: 'English',
-        es: 'Spanish',
-        fr: 'French',
-        it: 'Italian',
-        pt: 'Portuguese',
-        ko: 'Korean',
-        jp: 'Japanese',
-        zh: 'Chinese',
     };
-    // field display names to prefix keys used in item properties
-    const keyMap = {
-        Product: 'product',
-        Version: 'version',
-        Account: 'account',
-        Contact: 'contact',
-        Entitlement: 'entitlement',
-        'Business Hours': 'businessHours',
-        Owner: 'queueNameOwner',
-        'Customer Escalation': 'customerEscalation',
-        'Case Group': 'caseGroup',
-        'SLA Start Date': 'slaStartDate',
-        'Case Language': 'caseLanguage',
-        'Personal reference number': 'alternateId',
+    let fieldName = fieldNameMapping[item.fieldName] || item.fieldLabel || item.fieldName || '';
+    const getNameValue = (prefix) => {
+        const keyMap = {
+            Product: 'product',
+            Version: 'version',
+            Account: 'account',
+            Contact: 'contact',
+            Entitlement: 'entitlement',
+            'Business Hours': 'businessHours',
+            Owner: 'queueNameOwner',
+        };
+        const baseKey = keyMap[fieldName] || fieldName.replace(/\s/g, '');
+        const key = `${baseKey}${prefix}Name`;
+        return item[key] || item[`${prefix}Value`] || '';
     };
-    // get the mapped display name for a field
-    const getMappedFieldName = (fieldName) => fieldNameMapping[fieldName] || item.fieldLabel || fieldName || '';
-    // get the new or old value using the  prefix
-    const getNameValue = (prefix) => item[`${keyMap[getMappedFieldName(item.fieldName)]}${prefix}Name`] ||
-        item[`${prefix}Value`] ||
-        item[`${prefix.toLowerCase()}Value`] ||
-        '';
-    // formatting functions
-    const formatLanguageChange = (fieldName, oldLanguage, newLanguage) => `changed ${fieldName} from ${oldLanguage} to ${newLanguage}`;
-    const formatSimpleChange = (fieldName, value) => `set ${fieldName} to ${value}`;
-    const formatBooleanChange = (fieldName, value) => `set ${fieldName} to ${value}`;
-    // get  field name and values
-    const fieldName = getMappedFieldName(item.fieldName);
     const newValue = getNameValue('New');
     const oldValue = getNameValue('Old');
     let newText = '';
-    // special field handling below, useful for future exposed case history fields etc / api changes
-    switch (item.fieldName) {
-        case 'Case_Language__c': {
-            const newLanguage = languageCodeMapping[item.newValue] || item.newValue;
-            const oldLanguage = languageCodeMapping[item.oldValue] || item.oldValue;
-            newText =
-                item.oldValue && item.newValue
-                    ? formatLanguageChange(fieldName, oldLanguage, newLanguage)
-                    : formatSimpleChange(fieldName, newLanguage || 'empty');
-            break;
+    if (item.fieldName === 'OwnerId' && item.createdByUserName) {
+        newText = `set ${fieldName} to ${item.createdByUserName}`;
+    }
+    else if (item.fieldName === 'Status') {
+        if (item.oldValue && item.newValue) {
+            newText = `changed ${fieldName} from ${item.oldValue} to ${item.newValue}`;
         }
-        case 'OwnerId':
-            if (item.createdByUserName)
-                newText = formatSimpleChange(fieldName, item.createdByUserName);
-            break;
-        case 'Status':
-            newText =
-                item.oldValue && item.newValue
-                    ? `changed ${fieldName} from ${item.oldValue} to ${item.newValue}`
-                    : formatSimpleChange(fieldName, item.newValue || 'empty');
-            break;
-        case 'Customer_Escalation__c':
-            if (item.createdByUserName)
-                newText = 'started Escalation for this ticket';
-            break;
-        case 'SlaStartDate':
-            if (item.newValue)
-                newText = formatSimpleChange(fieldName, item.newValue);
-            break;
-        case 'RemoteSessionTermsAckedBy__c':
-            newText = 'Acked Remote Rider terms';
-            break;
-        default:
-            if (oldValue && newValue) {
-                if (multiSelectFields.includes(item.fieldName)) {
-                    // in salesforce multi-select picklist values are stored as a single string, with each value separated by a semicolon
-                    const oldValues = oldValue.split(';').map((s) => s.trim());
-                    const newValues = newValue.split(';').map((s) => s.trim());
-                    const added = newValues.filter((nv) => !oldValues.includes(nv));
-                    const removed = oldValues.filter((ov) => !newValues.includes(ov));
-                    if (added.length > 0 && removed.length === 0) {
-                        newText = `added ${added.join(', ')} to ${fieldName}`;
-                    }
-                    else if (removed.length > 0 && added.length === 0) {
-                        newText = `removed ${removed.join(', ')} from ${fieldName}`;
-                    }
-                    else if (added.length > 0 && removed.length > 0) {
-                        newText = `changed ${fieldName}, added ${added.join(', ')} and removed ${removed.join(', ')}`;
-                    }
-                    else {
-                        newText = `changed ${fieldName} from ${oldValue} to ${newValue}`;
-                    }
-                }
-                else {
-                    newText = `changed ${fieldName} from ${oldValue} to ${newValue}`;
-                }
-            }
-            else if (newValue) {
-                newText = formatSimpleChange(fieldName, newValue);
-            }
-            else if (oldValue && (newValue === undefined || newValue === '')) {
-                newText = `removed ${fieldName}, was ${oldValue}`;
-            }
-            else if (item.newValue !== undefined) {
-                newText = formatSimpleChange(fieldName, item.newValue);
-            }
-            break;
+        else if (item.newValue) {
+            newText = `set ${fieldName} to ${item.newValue}`;
+        }
+    }
+    else if (oldValue && newValue) {
+        newText = `changed ${fieldName} from ${oldValue} to ${newValue}`;
+    }
+    else if (newValue) {
+        newText = `set ${fieldName} to ${newValue}`;
     }
-    if (typeof item.newValue === 'boolean')
-        newText = formatBooleanChange(fieldName, item.newValue);
-    if (typeof newText === 'string')
+    else if (item.newValue !== undefined) {
+        newText = `set ${fieldName} to ${item.newValue}`;
+    }
+    // Handle boolean values
+    if (typeof item.newValue === 'boolean') {
+        newText = `set ${fieldName} to ${item.newValue}`;
+    }
+    // Handle date values
+    if (item.fieldName === 'SlaStartDate' && item.newValue) {
+        newText = `set ${fieldName} to ${item.newValue}`;
+    }
+    // Replace 'Problem Statement' with 'Title'
+    if (typeof newText === 'string') {
         newText = newText.replace(/Problem Statement/g, 'Title');
+    }
     return newText;
 };
 // function to change the apiResponse
+const specialTimelineData = (apiResponse) => {
+    return Object.assign(Object.assign({}, apiResponse), { historyItems: apiResponse.historyItems.map((item) => (Object.assign(Object.assign({}, item), { outputText: item.type === 'Change' ? applyReplacements(item) : item.outputText }))) });
+};
 const transformApiResponseToTimelineData = (apiResponse) => {
     let previousUser = null;
-    const timelineEvents = apiResponse.historyItems
-        // Filter out 'Case Group' changes because we don't have decode of value
-        .filter((item) => item.fieldName !== 'FolderId__c')
-        .map((item, index) => {
+    const modifiedApiResponse = specialTimelineData(apiResponse);
+    const timelineEvents = modifiedApiResponse.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;
-        let eventDate;
-        if (typeof item.createdDate === 'string' && item.createdDate.includes('T')) {
-            eventDate = parse(item.createdDate, "yyyy-MM-dd'T'HH:mm:ss'Z'", new Date());
-        }
-        else {
-            eventDate = fromUnixTime(item.createdDate / 1000);
-        }
+        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
+            ? item.createdByCustomer //using new case history field to determine this
                 ? 'customer'
                 : 'internal'
-            : currentUser === 'Case Diagnostics' || currentUser === 'GSS Tools'
+            : 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: format(eventDate, 'MMMM d, yyyy'),
-            text: format(eventDate, 'h:mm a zzz'),
+            date: date,
+            text: time,
         };
-        let outputText = item.outputText;
-        if (item.type === 'Change') {
-            outputText = applyReplacements(item);
-        }
-        else {
-            outputText = stripHTML(outputText);
-        }
         const rightEvent = {
-            date: `${item.createdByUserName} ${outputText}`,
-            text: '',
+            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,
         };
@@ -244,45 +161,27 @@ function stripHTML(htmlString) {
 const Timeline = ({ caseNumber }) => {
     const { t } = useTranslation();
     const [timelineEvents, setTimelineEvents] = useState([]);
-    const [originalTimelineEvents, setOriginalTimelineEvents] = useState([]);
     const [isFetchingData, setIsFetchingData] = useState();
+    const [paginatedListLength, setPaginatedListLength] = useState();
     const lastNodeRef = useRef(null);
-    const [dateValue, setDateValue] = useState('');
+    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 [fetchError, setFetchError] = useState(null);
-    const [page, setPage] = useState(1);
-    const [perPage, setPerPage] = useState(20);
-    const onSetPage = (_, newPage) => {
-        setPage(newPage);
-    };
-    const onPerPageSelect = (_, newPerPage) => {
-        setPerPage(newPerPage);
-        setPage(1);
-    };
-    const renderPagination = () => (React.createElement(Pagination, { itemCount: filteredEvents.length, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, perPageOptions: [
-            { title: '5', value: 5 },
-            { title: '10', value: 10 },
-            { title: '15', value: 15 },
-            { title: '20', value: 20 },
-        ], isCompact: true, variant: "top" }));
-    const handleSelectToggle = (e) => {
-        e.preventDefault();
+    const handleSelectToggle = () => {
         setIsSelectOpen(!isSelectOpen);
     };
-    const handleSelect = (e, value) => {
-        e.preventDefault();
-        if (value !== selectedOrder) {
-            setSelectedOrder(value);
-            reorderTimelineEvents(value);
-        }
+    const handleSelect = (_event, value) => {
+        setSelectedOrder(value);
         setIsSelectOpen(false);
+        reorderTimelineEvents(value);
     };
     const reorderTimelineEvents = (order) => {
-        const events = order === 'Newest to Oldest' ? [...originalTimelineEvents] : [...originalTimelineEvents].reverse();
-        setTimelineEvents(applyAvatarLogic(events));
+        setTimelineEvents((prevEvents) => {
+            const reversedEvents = [...prevEvents].reverse();
+            return applyAvatarLogic(reversedEvents);
+        });
     };
     const applyAvatarLogic = (events) => {
         let previousUser = null;
@@ -297,7 +196,6 @@ const Timeline = ({ caseNumber }) => {
         function fetchHistory() {
             return __awaiter(this, void 0, void 0, function* () {
                 setIsFetchingData(true);
-                setFetchError(null);
                 const options = {
                     sortField: 'createdDate',
                     sortOrder: 'DESC',
@@ -307,11 +205,9 @@ const Timeline = ({ caseNumber }) => {
                     const response = yield caseHistory.getHistoryv1(caseNumber, options);
                     const transformedData = transformApiResponseToTimelineData(response);
                     setTimelineEvents(transformedData);
-                    setOriginalTimelineEvents(transformedData);
                 }
                 catch (error) {
                     console.error('Failed to fetch history:', error);
-                    setFetchError('Unable to connect');
                 }
                 finally {
                     setIsFetchingData(false);
@@ -319,51 +215,27 @@ const Timeline = ({ caseNumber }) => {
             });
         }
         fetchHistory();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [caseNumber]);
-    const futureDateValidator = (date) => {
-        const today = new Date();
-        today.setHours(0, 0, 0, 0); // Normalize to midnight
-        if (date > today) {
-            return 'Date cannot be in the future.';
-        }
-        return '';
-    };
-    const updateLineStyle = () => {
-        const timelineElement = document.querySelector('.timeline');
-        if (timelineElement) {
-            if (lastNodeRef.current) {
-                const timelineRect = timelineElement.getBoundingClientRect();
-                const lastNodeRect = lastNodeRef.current.getBoundingClientRect();
-                const timelineBottomPosition = timelineRect.bottom + window.scrollY;
-                const lastNodeBottomPosition = lastNodeRect.bottom + window.scrollY;
-                // Calculate the difference between the bottom of the timeline and the bottom of the last node
-                const bottomOffset = timelineBottomPosition - lastNodeBottomPosition;
-                // Set the --timeline-bottom CSS variable to adjust the line height
-                timelineElement.style.setProperty('--timeline-bottom', `${bottomOffset}px`);
-            }
-            else {
-                timelineElement.style.setProperty('--timeline-bottom', '0px');
-            }
-        }
-    };
     //Using useLayoutEffect because we are measuring styles based on DOM, useLayoutEffect runs after DOM Mutations https://react.dev/reference/react/useLayoutEffect
-    useEffect(() => {
-        const debouncedUpdateLineStyle = debounce(updateLineStyle, 100);
-        window.addEventListener('resize', debouncedUpdateLineStyle);
-        if (!isFetchingData && filteredEvents.length > 0) {
-            requestAnimationFrame(() => {
-                updateLineStyle();
-            });
-        }
-        else {
-            // No events or still fetching, set --timeline-bottom to 0px
-            const timelineElement = document.querySelector('.timeline');
-            if (timelineElement) {
-                timelineElement.style.setProperty('--timeline-bottom', '0px');
+    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);
+                }
             }
-        }
-        return () => window.removeEventListener('resize', debouncedUpdateLineStyle);
-    }, [isFetchingData, filteredEvents, page, perPage]);
+        }, 100);
+        updateLineStyle();
+    }, [timelineEvents, paginatedListLength, dateValue]);
     const handleSearchChange = (value) => {
         setSearchValue(value.target.value);
     };
@@ -379,64 +251,60 @@ const Timeline = ({ caseNumber }) => {
             const lowercasedFilter = searchValue.toLowerCase();
             filteredBySearch = filteredBySearch.filter(({ left, right }) => {
                 const dateString = left.date.toLowerCase();
-                const timeString = left.text.toLowerCase();
-                const rightDateString = right.date.toLowerCase();
                 return (dateString.includes(lowercasedFilter) ||
-                    timeString.includes(lowercasedFilter) ||
-                    rightDateString.includes(lowercasedFilter));
+                    left.text.toLocaleLowerCase().includes(lowercasedFilter) ||
+                    right.date.toLowerCase().includes(lowercasedFilter));
             });
         }
         let finalFilteredEvents = filteredBySearch;
         if (dateValue) {
             finalFilteredEvents = filteredBySearch.filter(({ left }) => {
-                const eventDate = parse(left.date, 'MMMM d, yyyy', new Date());
-                const selectedDate = parse(dateValue, 'yyyy-MM-dd', new Date());
-                return isSameDay(eventDate, selectedDate);
+                // 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);
-        setPage(1);
     }, [searchValue, dateValue, timelineEvents]);
-    const handleReload = (e) => {
-        e.preventDefault();
-        window.location.href = window.location.href;
-        window.location.reload();
-    };
-    const renderTimelineContent = () => {
-        if (fetchError) {
-            return (React.createElement(EmptyState, { variant: EmptyStateVariant.full },
-                React.createElement(EmptyStateHeader, { titleText: "Unable to connect", icon: React.createElement(EmptyStateIcon, { icon: ExclamationCircleIcon, color: globalDangerColor100.value }), headingLevel: "h2" }),
-                React.createElement(EmptyStateBody, null,
-                    React.createElement(Trans, null,
-                        "Try ",
-                        React.createElement("a", { href: "#", onClick: handleReload }, "reloading the page"),
-                        ' ',
-                        "or check back later"))));
-        }
-        if (filteredEvents.length < 1) {
-            return (React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+    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."))));
-        }
-        const paginatedEvents = filteredEvents.slice((page - 1) * perPage, page * perPage);
-        return (React.createElement(React.Fragment, null, paginatedEvents.map((node, index) => (React.createElement(TimelineNode, { key: index, leftEvent: node.left, rightEvent: node.right, user: node.right.user, useAvatar: node.right.useAvatar, ref: index === paginatedEvents.length - 1 ? lastNodeRef : 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: t('Search for a user, action, or keyword'), value: searchValue, onChange: handleSearchChange, onClear: handleClear, className: "case-history-timeline-search" }),
+            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), validators: [futureDateValidator] }),
+                React.createElement(DatePicker, { value: dateValue, onChange: (_event, value) => handleDateChange(value) }),
                 React.createElement(Button, { onClick: () => setDateValue(''), isDisabled: isEmpty(dateValue) }, "Reset"))),
-        React.createElement("div", { className: "timeline-controls" },
-            React.createElement("div", { className: "timeline-pagination" }, renderPagination()),
-            React.createElement("div", { className: "timeline-sort-order-select" },
-                React.createElement(Select, { id: "order-select", isOpen: isSelectOpen, selected: selectedOrder, onSelect: handleSelect, onOpenChange: (isOpen) => setIsSelectOpen(isOpen), shouldFocusToggleOnSelect: false, toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: handleSelectToggle, isExpanded: isSelectOpen, style: { width: '200px' } }, selectedOrder)) },
+        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")))),
-        isFetchingData ? (React.createElement("div", { className: "timeline-loading-spinner" },
-            React.createElement(Spinner, { size: "xl" }))) : (React.createElement("div", { className: `timeline ${filteredEvents.length === 0 ? 'timeline-empty' : ''}` }, renderTimelineContent())),
-        React.createElement("div", { className: "timeline-controls" },
-            React.createElement("div", { className: "timeline-pagination" }, renderPagination()))));
+        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/CaseInformation/Fts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fts.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Fts.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAS/D,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAQD,iBAAS,GAAG,CAAC,KAAK,EAAE,MAAM,qBA6OzB;kBA7OQ,GAAG;;;AAgPZ,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Fts.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Fts.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAS/D,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAQD,iBAAS,GAAG,CAAC,KAAK,EAAE,MAAM,qBA4OzB;kBA5OQ,GAAG;;;AA+OZ,eAAe,GAAG,CAAC"}

package/lib/esm/components/CaseInformation/Fts.js

@@ -100,12 +100,10 @@ function Fts(props) {
         setCaseState(caseDispatch, { ftsContactSameAsOwner: e.target.checked });
         if (!e.target.checked) {
             setFtsContact('');
-            setContactInfoIntoGlobalState('');
-        }
-        else {
-            setFtsContact(`${phoneCountryCode}-${phoneAreaCodePrefixLineNumber}`);
-            setContactInfoIntoGlobalState(`${phoneCountryCode}-${phoneAreaCodePrefixLineNumber}`);
+            return;
         }
+        setFtsContact(`${phoneCountryCode}-${phoneAreaCodePrefixLineNumber}`);
+        setContactInfoIntoGlobalState(`${phoneCountryCode}-${phoneAreaCodePrefixLineNumber}`);
     };
     const onSave = (e) => __awaiter(this, void 0, void 0, function* () {
         setContactInfoIntoGlobalState(contactInfo24X7State);
@@ -150,7 +148,8 @@ function Fts(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [phoneAreaCodePrefixLineNumber, phoneCountryCode]);
-    const disableFtsNContact = !isEmpty(caseNumber) && (!isFtsEditableOnEditPage(entitlementSla, severity) || isFtsUpdating);
+    const disableFtsNContact = !isEmpty(caseNumber) &&
+        (!isFtsEditableOnEditPage(entitlementSla, severity) || isFtsContactUpdating || isFtsUpdating);
     const maxLengthErrorMessage = t('Contact information cannot be more than {{limit}} characters.', {
         limit: CONTACT_INFO_24X7_LIMIT,
     });

package/lib/esm/components/CaseManagement/Cep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,qBAuThC"}
+{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,qBAsThC"}

package/lib/esm/components/CaseManagement/Cep.js

@@ -66,9 +66,8 @@ export function Cep(props) {
                 // edit mode - set cep to false
                 yield confirm({
                     catchOnCancel: true,
-                    title: t(`No consultant engaged?`),
-                    description: t("You're confirming that you don't have a consultant engaged on this ticket."),
-                    confirmText: t('Yes, confirm'),
+                    title: t(`Updating Consultant Engagement in Progress`),
+                    description: t('Are you sure?'),
                 });
                 cepUpdate({ cep: false });
                 clearCepFormInputs();

package/lib/esm/components/CaseManagement/RHAssociatesSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RHAssociatesSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/RHAssociatesSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBA+M1C;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"RHAssociatesSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/RHAssociatesSelector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBAqM1C;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}