@rh-support/troubleshoot 2.6.361 → 2.6.364

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

@@ -1,12 +1,7 @@
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import React, { useContext } from 'react';
-import { useCaseSelector } from '../../../../context/CaseContext';
+import React from 'react';
 import Timeline from './Timeline';
 const CaseHistory = (props) => {
-    const sfdcCaseId = useCaseSelector((state) => { var _a; return (_a = state.caseDetails) === null || _a === void 0 ? void 0 : _a.id; });
-    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
-    const isViewerInternal = loggedInUserRights.data.isInternal();
     return (React.createElement("div", { className: "pf-v6-u-p-sm" },
-        React.createElement(Timeline, { caseNumber: props.caseNumber, sfdcCaseId: sfdcCaseId !== null && sfdcCaseId !== void 0 ? sfdcCaseId : '', isViewerInternal: isViewerInternal })));
+        React.createElement(Timeline, { caseNumber: props.caseNumber })));
 };
 export default CaseHistory;

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

@@ -121,8 +121,8 @@
 
 .timeline-avatar {
     position: absolute;
-    left: calc(20% + 2.5px);
-    transform: translateX(-50%);
+    left: calc(20% + 15px);
+    transform: translateX(-91%);
     top: 12px;
     z-index: 5;
 }
@@ -134,8 +134,8 @@
     width: 10px;
     height: 10px;
     z-index: 2;
-    left: calc(20% + 2.5px);
-    transform: translateX(-50%);
+    left: calc(20% + 18px);
+    transform: translateX(-195%);
     top: 25px;
 }
 

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

@@ -1,40 +1,7 @@
 import './Timeline.css';
 import React from 'react';
-import type { ICaseHistoryItem } from '../../../../models/caseHistory';
-import { type IHistoryChangeItem } from '../../../../utils/TimelineUtils';
-export interface ITimelineEvent {
-    date: string;
-    text: string;
-    user?: string;
-    useAvatar?: boolean;
-}
-export interface ITimelineNodeData {
-    left: ITimelineEvent;
-    right: ITimelineEvent;
-    photoUrl?: string | null;
-    userName?: string;
-}
-/**
- * Builds the display text for a "Change" history item by resolving values and
- * delegating to field-specific formatters.
- */
-export declare const applyReplacements: (item: IHistoryChangeItem | null | undefined) => string;
-/**
- * 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 declare const transformApiResponseToTimelineData: (apiResponse: {
-    historyItems: ICaseHistoryItem[];
-}) => ITimelineNodeData[];
-interface ITimelineProps {
-    caseNumber: string;
-    sfdcCaseId: string | undefined;
-    isViewerInternal: boolean;
-}
-declare const Timeline: ({ caseNumber, sfdcCaseId, isViewerInternal }: ITimelineProps) => React.JSX.Element;
+declare const Timeline: ({ caseNumber }: {
+    caseNumber: any;
+}) => React.JSX.Element;
 export default Timeline;
 //# sourceMappingURL=Timeline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAsBxB,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAwB,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAE7F,OAAO,EAAE,KAAK,kBAAkB,EAA0C,MAAM,iCAAiC,CAAC;AAElH,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AACD,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAmID;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,kBAAkB,GAAG,IAAI,GAAG,SAAS,KAAG,MAU/E,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kCAAkC,GAAI,aAAa;IAC5D,YAAY,EAAE,gBAAgB,EAAE,CAAC;CACpC,KAAG,iBAAiB,EAoDpB,CAAC;AAEF,UAAU,cAAc;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,GAAI,8CAA8C,cAAc,sBAgU7E,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAwBxB,OAAO,KAAsC,MAAM,OAAO,CAAC;AA8W3D,QAAA,MAAM,QAAQ,GAAI;;CAAc,sBAmV/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,16 +1,23 @@
+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, 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 { haltEvent } from '@rh-support/utils';
-import { format, isSameDay, parse, parseISO } from 'date-fns';
+import { format, fromUnixTime, isSameDay, parse } 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';
-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) {
@@ -18,7 +25,7 @@ const CustomHighlighter = ({ search, children, highlightDate, }) => {
     }
     if (search) {
         const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const regex = new RegExp(`(${escapedSearch})`, 'i');
+        const regex = new RegExp(`(${escapedSearch})`, 'gi');
         const parts = children.split(regex);
         return React.createElement(React.Fragment, null, parts.map((part, index) => (regex.test(part) ? createHighlight(part) : part)));
     }
@@ -45,58 +52,193 @@ const TimelineEvent = ({ date, text, side, user, useAvatar, searchValue, highlig
             text && (React.createElement("p", { className: `content-time-${side}-history` },
                 React.createElement(CustomHighlighter, { search: searchValue || '' }, text))))));
 };
-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);
+const TimelineNode = React.forwardRef(({ leftEvent, rightEvent, user, useAvatar, searchValue, highlightDate }, 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, 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}` }))),
+        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", searchValue: searchValue }))));
 });
 /**
- * Builds the display text for a "Change" history item by resolving values and
- * delegating to field-specific formatters.
+ *
+ * @param {Object} item - The item object to process.
+ * @returns {string} The formatted text string.
  */
-export const applyReplacements = (item) => {
-    var _a, _b;
+const applyReplacements = (item) => {
     if (!item || typeof item !== 'object')
         return '';
-    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);
+    //  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',
+        ja: 'Japanese',
+        zh: 'Chinese',
+        zh_CN: 'Chinese',
+        zh_HK: 'Chinese (Hong Kong)',
+        zh_TW: 'Chinese (Taiwan)',
+        ru: 'Russian',
+    };
+    // 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;
 };
-/**
- * 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) => {
+// function to change the apiResponse
+const transformApiResponseToTimelineData = (apiResponse) => {
     let previousUser = null;
     let previousDate = null;
     const timelineEvents = apiResponse.historyItems
-        // 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 out 'Case Group' and 'OwnerId' changes because we don't have decode of value
         .filter((item) => item.fieldName !== 'FolderId__c' && item.fieldName !== 'OwnerId')
         .map((item, index) => {
         const currentUser = item.createdByUserName;
-        const eventDate = parseISO(item.createdDate);
+        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 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 !== null && currentUser !== previousUser) ||
-            (previousDate !== null && currentDate !== previousDate);
+            (!!previousUser && currentUser !== previousUser) ||
+            (!!previousDate && currentDate !== previousDate);
         previousUser = currentUser;
         previousDate = currentDate;
-        const user = item.createdByCustomer ? 'customer' : 'internal';
+        const user = item.createdByCustomer !== undefined
+            ? item.createdByCustomer
+                ? 'customer'
+                : 'internal'
+            : currentUser === 'Case Diagnostics' || currentUser === 'GSS Tools'
+                ? 'internal'
+                : 'customer';
         const leftEvent = {
             date: currentDate,
             text: format(eventDate, 'h:mm a zzz'),
@@ -105,8 +247,11 @@ export const transformApiResponseToTimelineData = (apiResponse) => {
         if (item.type === 'Change') {
             outputText = applyReplacements(item);
         }
+        else {
+            outputText = stripHTML(outputText);
+        }
         const rightEvent = {
-            date: item.createdByUserName ? `${item.createdByUserName} ${outputText}` : outputText,
+            date: `${item.createdByUserName} ${outputText}`,
             text: '',
             user: user,
             useAvatar: useAvatar,
@@ -114,24 +259,27 @@ export const transformApiResponseToTimelineData = (apiResponse) => {
         return {
             left: leftEvent,
             right: rightEvent,
-            photoUrl: item.photoUrl,
-            userName: currentUser,
         };
     });
     return timelineEvents;
 };
-const Timeline = ({ caseNumber, sfdcCaseId, isViewerInternal }) => {
+function stripHTML(htmlString) {
+    const anchorTagRegex = /<a[^>]*>(.*?)<\/a>/g;
+    // We are trying to return the text without having the info in the anchor.
+    return htmlString.replace(anchorTagRegex, '');
+}
+const Timeline = ({ caseNumber }) => {
     const { t } = useTranslation();
     const [timelineEvents, setTimelineEvents] = useState([]);
+    const [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) => {
@@ -155,31 +303,56 @@ const Timeline = ({ caseNumber, sfdcCaseId, isViewerInternal }) => {
         e.preventDefault();
         if (value !== selectedOrder) {
             setSelectedOrder(value);
-            setSortOrder(value === 'Newest to Oldest' ? 'DESC' : 'ASC');
+            reorderTimelineEvents(value);
         }
         setIsSelectOpen(false);
     };
-    // Re-derives avatar/date-header boundaries after list mutations (filter, sort, paginate).
+    const reorderTimelineEvents = (order) => {
+        const events = order === 'Newest to Oldest' ? [...originalTimelineEvents] : [...originalTimelineEvents].reverse();
+        setTimelineEvents(applyAvatarLogic(events));
+    };
     const applyAvatarLogic = (events) => {
         let previousUser = null;
         let previousDate = null;
         return events.map((event, index) => {
-            const currentUser = event.userName || '';
+            const currentUser = event.right.date.split(' ')[0];
             const currentDate = event.left.date;
             const useAvatar = index === 0 ||
-                (previousUser !== null && currentUser !== previousUser) ||
-                (previousDate !== null && currentDate !== previousDate);
+                (!!previousUser && currentUser !== previousUser) ||
+                (!!previousDate && currentDate !== previousDate);
             previousUser = currentUser;
             previousDate = currentDate;
             return Object.assign(Object.assign({}, event), { right: Object.assign(Object.assign({}, event.right), { useAvatar: useAvatar }) });
         });
     };
     useEffect(() => {
-        if (historyItems.length > 0) {
-            const transformedData = transformApiResponseToTimelineData({ historyItems });
-            setTimelineEvents(transformedData);
+        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(t('Unable to connect'));
+                }
+                finally {
+                    setIsFetchingData(false);
+                }
+            });
         }
-    }, [historyItems]);
+        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
@@ -188,9 +361,6 @@ const Timeline = ({ caseNumber, sfdcCaseId, isViewerInternal }) => {
         }
         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) {
@@ -225,10 +395,7 @@ const Timeline = ({ caseNumber, sfdcCaseId, isViewerInternal }) => {
                 timelineElement.style.setProperty('--timeline-bottom', '0px');
             }
         }
-        return () => {
-            debouncedUpdateLineStyle.cancel();
-            window.removeEventListener('resize', debouncedUpdateLineStyle);
-        };
+        return () => window.removeEventListener('resize', debouncedUpdateLineStyle);
     }, [isFetchingData, filteredEvents, page, perPage]);
     const handleSearchChange = (_, value) => {
         setSearchValue(value.trim());
@@ -267,6 +434,7 @@ const Timeline = ({ caseNumber, sfdcCaseId, isViewerInternal }) => {
     }, [searchValue, dateValue, timelineEvents]);
     const handleReload = (e) => {
         e.preventDefault();
+        window.location.href = window.location.href;
         window.location.reload();
     };
     const renderTimelineContent = () => {
@@ -284,7 +452,7 @@ const Timeline = ({ caseNumber, sfdcCaseId, isViewerInternal }) => {
                     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, photoUrl: node.photoUrl, searchValue: searchValue, highlightDate: !!dateValue, 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, searchValue: searchValue, highlightDate: !!dateValue, ref: index === paginatedEvents.length - 1 ? lastNodeRef : null })))));
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "timelineMenu" },

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

@@ -1,13 +1,14 @@
 import React from 'react';
-interface IProps {
-    caseNumber?: string;
-    privateNotes?: string;
+declare const defaultProps: {
+    caseNumber: any;
+};
+type DefaultProps = typeof defaultProps;
+interface IProps extends DefaultProps {
 }
 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":"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"}
+{"version":3,"file":"CasePrivateNotes.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CasePrivateNotes/CasePrivateNotes.tsx"],"names":[],"mappings":"AAOA,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"}

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

@@ -7,7 +7,6 @@ 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';
@@ -18,24 +17,17 @@ 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 { updateCaseDetailsGraphQL } from '../../../../reducers/CaseReducer';
+import { updateCaseDetails } 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 { caseSalesforceId, existingCaseDetails } = useCaseSelector((state) => ({
-        caseSalesforceId: state.caseDetails.id,
-        existingCaseDetails: state.caseDetails,
-    }), isEqual);
-    const notes = (_a = props.privateNotes) !== null && _a !== void 0 ? _a : '';
+    const notes = useCaseSelector((state) => state.caseDetails.notes, isEqual);
     const caseDispatch = useCaseDispatch();
     const [notesState, setNotes] = useState(notes);
     const [formIsDirty, setFormIsDirty] = useState(false);
@@ -45,33 +37,24 @@ function CasePrivateNotes(props) {
     useEffect(() => {
         if (notes !== notesState) {
             setNotes(notes);
-            setFormIsDirty(false);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [notes]);
-    const persistNotes = () => __awaiter(this, void 0, void 0, function* () {
-        if (!props.caseNumber) {
-            return;
-        }
+    const updateCase = (event) => __awaiter(this, void 0, void 0, function* () {
+        event.preventDefault();
         setIsUpdating(true);
         try {
-            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, props.caseNumber, { notes: notesState }, false, {
-                salesforceCaseId: caseSalesforceId,
-                existingCaseDetails,
-            });
+            const caseDetails = { notes: notesState };
+            yield updateCaseDetails(caseDispatch, props.caseNumber, caseDetails);
             setFormIsDirty(false);
             ToastNotification.addSuccessMessage(t(`Notes has been successfully updated`));
             setIsUpdating(false);
         }
         catch (e) {
-            caseUpdateError.showFieldError(e, t('Private notes'), persistNotes);
+            caseUpdateError.showError(e, t(`Failed to update notes`));
             setIsUpdating(false);
         }
     });
-    const updateCase = (event) => __awaiter(this, void 0, void 0, function* () {
-        event.preventDefault();
-        yield persistNotes();
-    });
     const discardNotes = (event) => {
         event.preventDefault();
         setNotes(notes);
@@ -88,6 +71,7 @@ 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,

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;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"}
+{"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;AAO/D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,sBA0LxC,CAAC"}

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

@@ -22,7 +22,6 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { CaseSummaryStates } from '../../../../constants/caseDetailsConstants';
 import { useCaseSelector } from '../../../../context/CaseContext';
-import { useCaseComments } from '../../../../hooks/useCaseComments';
 import { CaseSummaryErrorMessage } from './CaseSummaryErrorMessage';
 export const CaseSummary = (props) => {
     var _a, _b, _c, _d, _e, _f;
@@ -30,15 +29,10 @@ export const CaseSummary = (props) => {
     const [caseSummaryData, setCaseSummaryData] = useState(getApiResourceObject(null, true));
     const [caseSummaryState, setCaseSummaryState] = useState();
     const [errorMessage, setErrorMessage] = useState('');
-    const { caseLanguage, caseSalesforceId } = useCaseSelector((state) => ({
+    const { caseComments, caseLanguage } = useCaseSelector((state) => ({
+        caseComments: state.caseDetails.comments,
         caseLanguage: state.caseDetails.caseLanguage,
-        caseSalesforceId: state.caseDetails.id,
     }), isEqual);
-    const { comments: caseComments } = useCaseComments({
-        caseId: caseSalesforceId,
-        skip: !caseSalesforceId,
-        first: 2000,
-    });
     const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const isInternal = (_b = (_a = loggedInUserRights === null || loggedInUserRights === void 0 ? void 0 : loggedInUserRights.data) === null || _a === void 0 ? void 0 : _a.isInternal) === null || _b === void 0 ? void 0 : _b.call(_a);
     const onCloseFeedbackModal = () => {

package/lib/esm/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RMEEscalationList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAS5E,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,UAAU,MAAM;IACZ,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBAqLtD"}
+{"version":3,"file":"RMEEscalationList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAqB,MAAM,2CAA2C,CAAC;AAe/F,OAAO,KAAsC,MAAM,OAAO,CAAC;AAiB3D,UAAU,MAAM;IACZ,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBA8MtD"}