@rh-support/troubleshoot 2.2.1851-beta.0 → 2.4.5-beta.1

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

@@ -9,12 +9,14 @@ 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, SearchInput, Select, SelectList, SelectOption, Spinner, } from '@patternfly/react-core';
+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 SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
-import { PaginatedList } from '@rh-support/components';
+import globalDangerColor100 from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { format, fromUnixTime, isSameDay, parse } from 'date-fns';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
     if (side === 'left') {
@@ -29,7 +31,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))));
@@ -37,14 +39,18 @@ 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 ? '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}` }))),
+        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}` }))),
         rightEvent && React.createElement(TimelineEvent, Object.assign({}, rightEvent, { side: "right" }))));
 });
-//Handling changes in case fields to be displayed to the user
+/**
+ *
+ * @param {Object} item - The item object to process.
+ * @returns {string} The formatted text string.
+ */
 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',
@@ -55,94 +61,171 @@ 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',
     };
-    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`] || '';
+    // 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',
+    };
+    // 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 = '';
-    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}`;
+    // 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;
         }
-        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}`;
-    }
-    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}`;
+        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;
     }
-    // Replace 'Problem Statement' with 'Title'
-    if (typeof newText === 'string') {
+    if (typeof item.newValue === 'boolean')
+        newText = formatBooleanChange(fieldName, item.newValue);
+    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 modifiedApiResponse = specialTimelineData(apiResponse);
-    const timelineEvents = modifiedApiResponse.historyItems.map((item, index) => {
+    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 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',
-        });
+        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 user = item.createdByCustomer !== undefined
-            ? item.createdByCustomer //using new case history field to determine this
+            ? item.createdByCustomer
                 ? 'customer'
                 : 'internal'
-            : currentUser === 'Case Diagnostics' || currentUser === 'GSS Tools' //for now since it is not on prod yet we have this same fallback
+            : currentUser === 'Case Diagnostics' || currentUser === 'GSS Tools'
                 ? 'internal'
                 : 'customer';
         const leftEvent = {
-            date: date,
-            text: time,
+            date: format(eventDate, 'MMMM d, yyyy'),
+            text: format(eventDate, 'h:mm a zzz'),
         };
+        let outputText = item.outputText;
+        if (item.type === 'Change') {
+            outputText = applyReplacements(item);
+        }
+        else {
+            outputText = stripHTML(outputText);
+        }
         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
+            date: `${item.createdByUserName} ${outputText}`,
+            text: '',
             user: user,
             useAvatar: useAvatar,
         };
@@ -161,27 +244,45 @@ 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] = React.useState('');
+    const [dateValue, setDateValue] = useState('');
     const [searchValue, setSearchValue] = useState('');
     const [filteredEvents, setFilteredEvents] = useState([]);
     const [isSelectOpen, setIsSelectOpen] = useState(false);
     const [selectedOrder, setSelectedOrder] = useState('Newest to Oldest');
-    const handleSelectToggle = () => {
+    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();
         setIsSelectOpen(!isSelectOpen);
     };
-    const handleSelect = (_event, value) => {
-        setSelectedOrder(value);
+    const handleSelect = (e, value) => {
+        e.preventDefault();
+        if (value !== selectedOrder) {
+            setSelectedOrder(value);
+            reorderTimelineEvents(value);
+        }
         setIsSelectOpen(false);
-        reorderTimelineEvents(value);
     };
     const reorderTimelineEvents = (order) => {
-        setTimelineEvents((prevEvents) => {
-            const reversedEvents = [...prevEvents].reverse();
-            return applyAvatarLogic(reversedEvents);
-        });
+        const events = order === 'Newest to Oldest' ? [...originalTimelineEvents] : [...originalTimelineEvents].reverse();
+        setTimelineEvents(applyAvatarLogic(events));
     };
     const applyAvatarLogic = (events) => {
         let previousUser = null;
@@ -196,6 +297,7 @@ const Timeline = ({ caseNumber }) => {
         function fetchHistory() {
             return __awaiter(this, void 0, void 0, function* () {
                 setIsFetchingData(true);
+                setFetchError(null);
                 const options = {
                     sortField: 'createdDate',
                     sortOrder: 'DESC',
@@ -205,9 +307,11 @@ 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);
@@ -215,27 +319,51 @@ const Timeline = ({ caseNumber }) => {
             });
         }
         fetchHistory();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [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;
+    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 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);
-                }
+                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');
             }
-        }, 100);
-        updateLineStyle();
-    }, [timelineEvents, paginatedListLength, dateValue]);
+        }
+        return () => window.removeEventListener('resize', debouncedUpdateLineStyle);
+    }, [isFetchingData, filteredEvents, page, perPage]);
     const handleSearchChange = (value) => {
         setSearchValue(value.target.value);
     };
@@ -251,60 +379,64 @@ 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) ||
-                    left.text.toLocaleLowerCase().includes(lowercasedFilter) ||
-                    right.date.toLowerCase().includes(lowercasedFilter));
+                    timeString.includes(lowercasedFilter) ||
+                    rightDateString.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;
+                const eventDate = parse(left.date, 'MMMM d, yyyy', new Date());
+                const selectedDate = parse(dateValue, 'yyyy-MM-dd', new Date());
+                return isSameDay(eventDate, selectedDate);
             });
         }
         setFilteredEvents(finalFilteredEvents);
+        setPage(1);
     }, [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 },
+    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 },
                 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.")))));
-    }
+                    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 })))));
+    };
     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(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(DatePicker, { value: dateValue, onChange: (_event, value) => handleDateChange(value), validators: [futureDateValidator] }),
                 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("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(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 })))));
+        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()))));
 };
 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,qBA4OzB;kBA5OQ,GAAG;;;AA+OZ,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,qBA6OzB;kBA7OQ,GAAG;;;AAgPZ,eAAe,GAAG,CAAC"}

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

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

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

@@ -66,8 +66,9 @@ export function Cep(props) {
                 // edit mode - set cep to false
                 yield confirm({
                     catchOnCancel: true,
-                    title: t(`Updating Consultant Engagement in Progress`),
-                    description: t('Are you sure?'),
+                    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'),
                 });
                 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":"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"}
+{"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"}