@rh-support/troubleshoot 2.7.0 → 2.7.10

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

@@ -1,31 +1,37 @@
-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, Pagination, SearchInput, Select, SelectOption, Spinner, } from '@patternfly/react-core';
+import { Avatar, Button, DatePicker, EmptyState, EmptyStateBody, 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 globalDangerColor100 from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { haltEvent } from '@rh-support/utils';
-import { format, fromUnixTime, isSameDay, parse } from 'date-fns';
+import { format, isSameDay, parse, parseISO } from 'date-fns';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
+import { useCaseHistory } from '../../../../hooks/useCaseHistory';
+import { getFieldDisplayName } from '../../../../utils/caseHistoryUtils';
+import { applyPostProcessing, handleFieldChange } from '../../../../utils/TimelineUtils';
+const CustomHighlighter = ({ search, children, highlightDate, }) => {
+    const createHighlight = (text) => React.createElement("mark", { className: "timeline-highlight" }, text);
+    if (highlightDate) {
+        return createHighlight(children);
+    }
+    if (search) {
+        const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(`(${escapedSearch})`, 'i');
+        const parts = children.split(regex);
+        return React.createElement(React.Fragment, null, parts.map((part, index) => (regex.test(part) ? createHighlight(part) : part)));
+    }
+    return React.createElement(React.Fragment, null, children);
+};
+const TimelineEvent = ({ date, text, side, user, useAvatar, searchValue, highlightDate, }) => {
     if (side === 'left') {
         if (useAvatar) {
             // we render the main date if the user changes or if the date changes
             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("h2", { className: `content-date-${side}-history` },
+                        React.createElement(CustomHighlighter, { highlightDate: highlightDate }, 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` },
@@ -34,192 +40,63 @@ const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
     }
     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))));
+            React.createElement("h2", { className: `content-date-${side}-history` },
+                React.createElement(CustomHighlighter, { search: searchValue || '' }, date)),
+            text && (React.createElement("p", { className: `content-time-${side}-history` },
+                React.createElement(CustomHighlighter, { search: searchValue || '' }, text))))));
 };
-const TimelineNode = React.forwardRef(({ leftEvent, rightEvent, user, useAvatar }, ref) => {
+const DEFAULT_AVATAR_SRC = 'https://www.patternfly.org/images/668560cd.svg';
+const TimelineNode = React.forwardRef(({ leftEvent, rightEvent, user, useAvatar, photoUrl, searchValue, highlightDate }, ref) => {
+    const [imgSrc, setImgSrc] = useState(photoUrl || DEFAULT_AVATAR_SRC);
     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}` }))),
-        rightEvent && React.createElement(TimelineEvent, Object.assign({}, rightEvent, { side: "right" }))));
+        leftEvent && (React.createElement(TimelineEvent, Object.assign({}, leftEvent, { side: "left", useAvatar: useAvatar, searchValue: searchValue, highlightDate: highlightDate }))),
+        React.createElement("div", { ref: ref, "aria-label": `${useAvatar ? 'User profile picture' : 'Timeline marker'}`, tabIndex: -1 }, useAvatar ? (React.createElement(Avatar, { src: imgSrc, className: `timeline-avatar timeline-avatar-${user}`, alt: `${user}'s avatar`, onError: () => setImgSrc(DEFAULT_AVATAR_SRC) })) : (React.createElement("div", { className: `timeline-marker timeline-${user}` }))),
+        rightEvent && React.createElement(TimelineEvent, Object.assign({}, rightEvent, { side: "right", searchValue: searchValue }))));
 });
 /**
- *
- * @param {Object} item - The item object to process.
- * @returns {string} The formatted text string.
+ * Builds the display text for a "Change" history item by resolving values and
+ * delegating to field-specific formatters.
  */
-const applyReplacements = (item) => {
+export const applyReplacements = (item) => {
+    var _a, _b;
     if (!item || typeof item !== 'object')
         return '';
-    //  API field names to easy to read display names
-    const fieldNameMapping = {
-        ContactId: 'Contact',
-        RH_Product__c: 'Product',
-        RH_Version__c: 'Version',
-        EntitlementId: 'Entitlement',
-        AccountId: 'Account',
-        OwnerId: 'Owner',
-        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',
-    };
-    // 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;
-        }
-        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;
-    }
-    if (typeof item.newValue === 'boolean')
-        newText = formatBooleanChange(fieldName, item.newValue);
-    if (typeof newText === 'string')
-        newText = newText.replace(/Problem Statement/g, 'Title');
-    if (typeof newText === 'string')
-        newText = newText.replace(/Case Type/g, 'Support Type');
-    return newText;
+    const fieldName = item.displayName || getFieldDisplayName(item.fieldName) || item.fieldName;
+    const newValue = String((_a = item.newValue) !== null && _a !== void 0 ? _a : '');
+    const oldValue = String((_b = item.oldValue) !== null && _b !== void 0 ? _b : '');
+    const text = handleFieldChange(item, fieldName, oldValue, newValue);
+    return applyPostProcessing(text, item);
 };
-// function to change the apiResponse
-const transformApiResponseToTimelineData = (apiResponse) => {
+/**
+ * Converts normalized history items into timeline node data for rendering.
+ *
+ * Applies a secondary filter (excludes `FolderId__c` and `OwnerId` whose resolved
+ * display names are unavailable), then maps each item to a left (date/time) and
+ * right (user action text) event pair. Avatar/date-header boundaries are computed
+ * sequentially: a new boundary is set on the first item, user change, or date change.
+ */
+export const transformApiResponseToTimelineData = (apiResponse) => {
     let previousUser = null;
     let previousDate = null;
     const timelineEvents = apiResponse.historyItems
-        // Filter out 'Case Group' and 'OwnerId' changes because we don't have decode of value
+        // Second-layer field-name filter on top of filterSfdcIdEntries (which is pattern-based).
+        // FolderId__c (Case Group) and OwnerId are excluded because their resolved display
+        // names (queue name, owner name) are not available in the history payload.
         .filter((item) => item.fieldName !== 'FolderId__c' && item.fieldName !== 'OwnerId')
         .map((item, index) => {
         const currentUser = item.createdByUserName;
-        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 = parseISO(item.createdDate);
         const currentDate = format(eventDate, 'MMMM d, yyyy');
+        // Show avatar + date header when: (1) first item, (2) user changed from
+        // previous event, or (3) calendar date changed. After any list mutation
+        // (filter, sort, paginate) applyAvatarLogic must be re-run so boundaries
+        // remain correct.
         const useAvatar = index === 0 ||
-            (!!previousUser && currentUser !== previousUser) ||
-            (!!previousDate && currentDate !== previousDate);
+            (previousUser !== null && currentUser !== previousUser) ||
+            (previousDate !== null && currentDate !== previousDate);
         previousUser = currentUser;
         previousDate = currentDate;
-        const user = item.createdByCustomer !== undefined
-            ? item.createdByCustomer
-                ? 'customer'
-                : 'internal'
-            : currentUser === 'Case Diagnostics' || currentUser === 'GSS Tools'
-                ? 'internal'
-                : 'customer';
+        const user = item.createdByCustomer ? 'customer' : 'internal';
         const leftEvent = {
             date: currentDate,
             text: format(eventDate, 'h:mm a zzz'),
@@ -228,11 +105,8 @@ const transformApiResponseToTimelineData = (apiResponse) => {
         if (item.type === 'Change') {
             outputText = applyReplacements(item);
         }
-        else {
-            outputText = stripHTML(outputText);
-        }
         const rightEvent = {
-            date: `${item.createdByUserName} ${outputText}`,
+            date: item.createdByUserName ? `${item.createdByUserName} ${outputText}` : outputText,
             text: '',
             user: user,
             useAvatar: useAvatar,
@@ -240,27 +114,24 @@ const transformApiResponseToTimelineData = (apiResponse) => {
         return {
             left: leftEvent,
             right: rightEvent,
+            photoUrl: item.photoUrl,
+            userName: currentUser,
         };
     });
     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 Timeline = ({ caseNumber, sfdcCaseId, isViewerInternal }) => {
     const { t } = useTranslation();
     const [timelineEvents, setTimelineEvents] = useState([]);
-    const [originalTimelineEvents, setOriginalTimelineEvents] = useState([]);
-    const [isFetchingData, setIsFetchingData] = useState();
     const lastNodeRef = useRef(null);
+    const [sortOrder, setSortOrder] = useState('DESC');
+    const { historyItems, loading: isFetchingData, error } = useCaseHistory(sfdcCaseId, isViewerInternal, sortOrder);
+    const fetchError = error ? t('Unable to connect') : null;
     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 [fetchError, setFetchError] = useState(null);
     const [page, setPage] = useState(1);
     const [perPage, setPerPage] = useState(20);
     const onSetPage = (_, newPage) => {
@@ -284,55 +155,31 @@ const Timeline = ({ caseNumber }) => {
         e.preventDefault();
         if (value !== selectedOrder) {
             setSelectedOrder(value);
-            reorderTimelineEvents(value);
+            setSortOrder(value === 'Newest to Oldest' ? 'DESC' : 'ASC');
         }
         setIsSelectOpen(false);
     };
-    const reorderTimelineEvents = (order) => {
-        const events = order === 'Newest to Oldest' ? [...originalTimelineEvents] : [...originalTimelineEvents].reverse();
-        setTimelineEvents(applyAvatarLogic(events));
-    };
+    // Re-derives avatar/date-header boundaries after list mutations (filter, sort, paginate).
     const applyAvatarLogic = (events) => {
         let previousUser = null;
         let previousDate = null;
         return events.map((event, index) => {
-            const currentUser = event.right.date.split(' ')[0];
+            const currentUser = event.userName || '';
             const currentDate = event.left.date;
             const useAvatar = index === 0 ||
-                (!!previousUser && currentUser !== previousUser) ||
-                (!!previousDate && currentDate !== previousDate);
+                (previousUser !== null && currentUser !== previousUser) ||
+                (previousDate !== null && currentDate !== previousDate);
             previousUser = currentUser;
             previousDate = currentDate;
             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);
-                setFetchError(null);
-                const options = {
-                    sortField: 'createdDate',
-                    sortOrder: 'DESC',
-                    showVerbose: true,
-                };
-                try {
-                    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);
-                }
-            });
+        if (historyItems.length > 0) {
+            const transformedData = transformApiResponseToTimelineData({ historyItems });
+            setTimelineEvents(transformedData);
         }
-        fetchHistory();
-    }, [caseNumber]);
+    }, [historyItems]);
     const futureDateValidator = (date) => {
         const today = new Date();
         today.setHours(0, 0, 0, 0); // Normalize to midnight
@@ -341,6 +188,9 @@ const Timeline = ({ caseNumber }) => {
         }
         return '';
     };
+    // Measures the DOM to shorten the vertical timeline connector line so it does not
+    // extend past the last node. Sets the --timeline-bottom CSS variable, recomputed
+    // on resize and list changes via requestAnimationFrame.
     const updateLineStyle = () => {
         const timelineElement = document.querySelector('.timeline');
         if (timelineElement) {
@@ -375,10 +225,13 @@ const Timeline = ({ caseNumber }) => {
                 timelineElement.style.setProperty('--timeline-bottom', '0px');
             }
         }
-        return () => window.removeEventListener('resize', debouncedUpdateLineStyle);
+        return () => {
+            debouncedUpdateLineStyle.cancel();
+            window.removeEventListener('resize', debouncedUpdateLineStyle);
+        };
     }, [isFetchingData, filteredEvents, page, perPage]);
-    const handleSearchChange = (value) => {
-        setSearchValue(value.target.value);
+    const handleSearchChange = (_, value) => {
+        setSearchValue(value.trim());
     };
     const handleClear = () => {
         setSearchValue('');
@@ -414,41 +267,40 @@ const Timeline = ({ caseNumber }) => {
     }, [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" }),
+            return (React.createElement(EmptyState, { headingLevel: "h2", icon: ExclamationCircleIcon, titleText: "Unable to connect", variant: EmptyStateVariant.full },
                 React.createElement(EmptyStateBody, null,
-                    React.createElement(Trans, null,
-                        "Try ",
-                        React.createElement("a", { href: "#", onClick: handleReload }, "reloading the page"),
-                        ' ',
-                        "or check back later"))));
+                    React.createElement(Trans, { i18nKey: "Try <reloadLink>reloading the page</reloadLink> or check back later", components: {
+                            // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid
+                            reloadLink: React.createElement("a", { href: "#", onClick: handleReload }),
+                        } }))));
         }
         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" }),
+            return (React.createElement(EmptyState, { headingLevel: "h2", icon: SearchIcon, titleText: React.createElement(Trans, null, "No results found"), variant: EmptyStateVariant.full },
                 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 })))));
+        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, photoUrl: node.photoUrl, searchValue: searchValue, highlightDate: !!dateValue, ref: index === paginatedEvents.length - 1 ? lastNodeRef : null })))));
     };
     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("div", { className: "case-history-timeline-datepicker" },
-                React.createElement(DatePicker, { value: dateValue, onChange: (_event, value) => handleDateChange(value), validators: [futureDateValidator] }),
-                React.createElement(Button, { onClick: () => setDateValue(''), isDisabled: isEmpty(dateValue) }, "Reset"))),
+                React.createElement(DatePicker, { value: dateValue, invalidFormatText: t('Invalid date format.'), onChange: (_event, value) => handleDateChange(value), validators: [futureDateValidator] }),
+                React.createElement(Button, { className: "pf-v6-u-ml-xs", onClick: () => setDateValue(''), isDisabled: isEmpty(dateValue) },
+                    React.createElement(Trans, null, "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(SelectOption, { value: "Newest to Oldest" }, "Newest to Oldest"),
-                    React.createElement(SelectOption, { value: "Oldest to Newest" }, "Oldest to Newest")))),
+                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 }, selectedOrder === 'Newest to Oldest' ? (React.createElement(Trans, null, "Newest to Oldest")) : (React.createElement(Trans, null, "Oldest to Newest")))) },
+                    React.createElement(SelectOption, { value: "Newest to Oldest" },
+                        React.createElement(Trans, null, "Newest to Oldest")),
+                    React.createElement(SelectOption, { value: "Oldest to Newest" },
+                        React.createElement(Trans, null, "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" },

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

@@ -1,14 +1,13 @@
 import React from 'react';
-declare const defaultProps: {
-    caseNumber: any;
-};
-type DefaultProps = typeof defaultProps;
-interface IProps extends DefaultProps {
+interface IProps {
+    caseNumber?: string;
+    privateNotes?: string;
 }
 declare function CasePrivateNotes(props: IProps): React.JSX.Element;
 declare namespace CasePrivateNotes {
     var defaultProps: {
         caseNumber: any;
+        privateNotes: string | undefined;
     };
 }
 export default CasePrivateNotes;

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

@@ -1 +1 @@
-{"version":3,"file":"CasePrivateNotes.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CasePrivateNotes/CasePrivateNotes.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,QAAA,MAAM,YAAY;;CAEjB,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,YAAY,CAAC;AAExC,UAAU,MAAO,SAAQ,YAAY;CAAG;AAExC,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAwGtC;kBAxGQ,gBAAgB;;;;;AA2GzB,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CasePrivateNotes.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CasePrivateNotes/CasePrivateNotes.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAa/D,UAAU,MAAM;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAyHtC;kBAzHQ,gBAAgB;;;sBARM,MAAM,GAAG,SAAS;;;AAoIjD,eAAe,gBAAgB,CAAC"}

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

@@ -7,6 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useApolloClient } from '@apollo/client/react';
+import { Button } from '@patternfly/react-core';
 import { LoadingIndicator, TextAreaResizable, ToastNotification } from '@rh-support/components';
 import { useCanEditCase } from '@rh-support/react-context';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -16,17 +18,24 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
-import { updateCaseDetails } from '../../../../reducers/CaseReducer';
+import { updateCaseDetailsGraphQL } from '../../../../reducers/CaseReducer';
 import { PDFContext } from '../../PDFContainer';
 const defaultProps = {
     caseNumber: undefined,
+    privateNotes: undefined,
 };
 function CasePrivateNotes(props) {
+    var _a;
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
     const ability = useContext(AbilityContext);
+    const apolloClient = useApolloClient();
     const canUpdatePrivateNotes = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_PRIVATE_NOTES_EDIT);
-    const notes = useCaseSelector((state) => state.caseDetails.notes, isEqual);
+    const { caseSalesforceId, existingCaseDetails } = useCaseSelector((state) => ({
+        caseSalesforceId: state.caseDetails.id,
+        existingCaseDetails: state.caseDetails,
+    }), isEqual);
+    const notes = (_a = props.privateNotes) !== null && _a !== void 0 ? _a : '';
     const caseDispatch = useCaseDispatch();
     const [notesState, setNotes] = useState(notes);
     const [formIsDirty, setFormIsDirty] = useState(false);
@@ -36,24 +45,33 @@ function CasePrivateNotes(props) {
     useEffect(() => {
         if (notes !== notesState) {
             setNotes(notes);
+            setFormIsDirty(false);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [notes]);
-    const updateCase = (event) => __awaiter(this, void 0, void 0, function* () {
-        event.preventDefault();
+    const persistNotes = () => __awaiter(this, void 0, void 0, function* () {
+        if (!props.caseNumber) {
+            return;
+        }
         setIsUpdating(true);
         try {
-            const caseDetails = { notes: notesState };
-            yield updateCaseDetails(caseDispatch, props.caseNumber, caseDetails);
+            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, props.caseNumber, { notes: notesState }, false, {
+                salesforceCaseId: caseSalesforceId,
+                existingCaseDetails,
+            });
             setFormIsDirty(false);
             ToastNotification.addSuccessMessage(t(`Notes has been successfully updated`));
             setIsUpdating(false);
         }
         catch (e) {
-            caseUpdateError.showError(e, t(`Failed to update notes`));
+            caseUpdateError.showFieldError(e, t('Private notes'), persistNotes);
             setIsUpdating(false);
         }
     });
+    const updateCase = (event) => __awaiter(this, void 0, void 0, function* () {
+        event.preventDefault();
+        yield persistNotes();
+    });
     const discardNotes = (event) => {
         event.preventDefault();
         setNotes(notes);
@@ -70,7 +88,6 @@ function CasePrivateNotes(props) {
         }
         setNotes(notesState);
     };
-    // To check if private notes is empty
     const isPrivateNotesEmpty = isEmpty(notesState === null || notesState === void 0 ? void 0 : notesState.trim());
     return (React.createElement(React.Fragment, null,
         React.createElement("div", null,
@@ -78,14 +95,14 @@ function CasePrivateNotes(props) {
                 React.createElement(Trans, null, "Notes"))),
         canUpdatePrivateNotes && (React.createElement("form", null,
             React.createElement(TextAreaResizable, { style: { minHeight: '200px' }, id: "rha-case-notes", disabled: isUpdating, maxLength: 255, name: "notes", value: notesState, onChange: onChange }),
-            React.createElement("div", { className: "pf-v5-u-mt-md" },
-                React.createElement("button", { className: `btn btn-app btn-primary ${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: updateCase, disabled: isPrivateNotesEmpty || isUpdating || !formIsDirty, type: "button" },
+            React.createElement("div", { className: "pf-v6-u-mt-md" },
+                React.createElement(Button, { className: `${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: updateCase, isDisabled: isPrivateNotesEmpty || isUpdating || !formIsDirty, variant: "primary" },
                     React.createElement(Trans, null, "Update"),
                     " ",
                     React.createElement(LoadingIndicator, { show: isUpdating, isInline: true })),
-                React.createElement("button", { className: `btn btn-app btn-link ${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: discardNotes, disabled: isUpdating || !formIsDirty, type: "button" },
+                React.createElement(Button, { className: `pf-v6-u-ml-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: discardNotes, disabled: isUpdating || !formIsDirty, variant: "secondary" },
                     React.createElement(Trans, null, "Discard Changes"))))),
-        React.createElement("p", { className: "pf-v5-u-mt-xl" },
+        React.createElement("p", { className: "pf-v6-u-mt-xl" },
             React.createElement(Trans, null, "Please note, contents of this field are not visible to Red Hat Support professionals."))));
 }
 CasePrivateNotes.defaultProps = defaultProps;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAwB3B,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,UAAW,MAAM,sBA6KxC,CAAC"}
+{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAuB3B,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,sBA+LxC,CAAC"}