@rh-support/troubleshoot 2.2.188 → 2.2.189

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseInternalStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseInternalStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInternalStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAQpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,sBAwFzC"}
+{"version":3,"file":"CaseInternalStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInternalStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAQpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,sBAyFzC"}

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

@@ -30,7 +30,8 @@ export default function CaseInternalStatus() {
     const globalMetadataDispatchContext = useContext(GlobalMetadataDispatchContext);
     const [isOpen, setIsOpen] = useState(false);
     const [selected, setSelected] = useState(internalStatus);
-    const onToggleClick = () => {
+    const onToggleClick = (e) => {
+        e.stopPropagation();
         setIsOpen(!isOpen);
     };
     const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: isIStatusUpdating, isFullWidth: true, className: "case-internal-status-selector-text" },

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

@@ -1 +1 @@
-{"version":3,"file":"CaseDiscussion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,YAAY,EAA0B,MAAM,yCAAyC,CAAC;AAa1G,OAAO,KAAoE,MAAM,OAAO,CAAC;AAsCzF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;CAC5B;AAOD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,qBA4mBnD"}
+{"version":3,"file":"CaseDiscussion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CaseDiscussion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,YAAY,EAA0B,MAAM,yCAAyC,CAAC;AAa1G,OAAO,KAAoE,MAAM,OAAO,CAAC;AAsCzF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;CAC5B;AAOD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,qBA8mBnD"}

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

@@ -326,10 +326,12 @@ export default function CaseDiscussion(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isPostingRemoteRequestCommentCompleted]);
-    const onToggleClick = () => {
+    const onToggleClick = (e) => {
+        e.stopPropagation();
         setIsOpen(!isOpen);
     };
-    const onSortToggleClick = () => {
+    const onSortToggleClick = (e) => {
+        e.stopPropagation();
         setIsSortOpen(!isSortOpen);
     };
     const onFilterSelect = (_event, prevOption) => {

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

@@ -12,6 +12,15 @@
 .timeline-empty::after {
     display: none;
 }
+.timeline::before {
+    bottom: var(--timeline-bottom, 0px);
+}
+
+.right-node {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 
 .timeline::after {
     content: '';
@@ -25,7 +34,7 @@
 
     /* This value is calculated in timeline.tsx */
     bottom: calc(var(--timeline-bottom) + var(--timeline-bottom-offset, 18.35%));
-    left: calc(15% + 15px);
+    left: calc(15% + 14.5px);
     transform: translateX(-50%);
 }
 

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;AA0BxB,OAAO,KAAuD,MAAM,OAAO,CAAC;AA4P5E,QAAA,MAAM,QAAQ;;uBAwRb,CAAC;AACF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AA0BxB,OAAO,KAAsC,MAAM,OAAO,CAAC;AA8P3D,QAAA,MAAM,QAAQ;;uBAgUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -16,7 +16,7 @@ import globalDangerColor100 from '@patternfly/react-tokens/dist/js/global_danger
 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') {
@@ -31,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))));
@@ -39,7 +39,7 @@ const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
 const TimelineNode = React.forwardRef(({ leftEvent, rightEvent, user, useAvatar }, ref) => {
     return (React.createElement("div", { className: "timeline-node", role: "region", "aria-label": "Timeline node" },
         leftEvent && React.createElement(TimelineEvent, Object.assign({}, leftEvent, { side: "left", useAvatar: useAvatar })),
-        React.createElement("div", { ref: ref, "aria-label": `${useAvatar ? 'User profile picture' : 'Timeline marker'}`, tabIndex: 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
@@ -60,6 +60,7 @@ const applyReplacements = (item) => {
         Customer_Escalation__c: 'Customer Escalation',
         SlaStartDate: 'SLA Start Date',
         Case_Language__c: 'Case Language',
+        Alternate_Id__c: 'Personal reference number',
     };
     const languageCodeMapping = {
         de: 'German',
@@ -86,6 +87,7 @@ const applyReplacements = (item) => {
             'Case Group': 'caseGroup',
             'SLA Start Date': 'slaStartDate',
             'Case Language': 'caseLanguage',
+            Alternate_Id__c: 'Personal reference number',
         };
         const baseKey = keyMap[fieldName] || fieldName.replace(/\s/g, '');
         const key = `${baseKey}${prefix}Name`;
@@ -198,9 +200,10 @@ function stripHTML(htmlString) {
 const Timeline = ({ caseNumber }) => {
     const { t } = useTranslation();
     const [timelineEvents, setTimelineEvents] = useState([]);
+    const [originalTimelineEvents, setOriginalTimelineEvents] = useState([]);
     const [isFetchingData, setIsFetchingData] = 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);
@@ -221,19 +224,21 @@ const Timeline = ({ caseNumber }) => {
             { title: '15', value: 15 },
             { title: '20', value: 20 },
         ], isCompact: true, variant: "top" }));
-    const handleSelectToggle = () => {
+    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;
@@ -258,6 +263,7 @@ 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);
@@ -270,25 +276,48 @@ const Timeline = ({ caseNumber }) => {
         }
         fetchHistory();
     }, [caseNumber]);
-    //Using useLayoutEffect because we are measuring styles based on DOM, useLayoutEffect runs after DOM Mutations https://react.dev/reference/react/useLayoutEffect
-    useLayoutEffect(() => {
-        const updateLineStyle = debounce(() => {
-            var _a;
+    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 = () => {
+        var _a;
+        const timelineElement = document.querySelector('.timeline');
+        if (timelineElement) {
             if (lastNodeRef.current) {
                 const timelineBottom = lastNodeRef.current.getBoundingClientRect().bottom + window.scrollY;
-                const timelineElement = document.querySelector('.timeline');
+                const timelineTop = timelineElement.getBoundingClientRect().top + window.scrollY;
                 const avatarHeight = ((_a = lastNodeRef.current.querySelector('.timeline-avatar')) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
-                if (timelineElement) {
-                    const timelineTop = timelineElement.getBoundingClientRect().top + window.scrollY;
-                    const calculatedBottomValue = `${timelineTop + timelineElement.offsetHeight - timelineBottom + avatarHeight}px`;
-                    timelineElement.style.setProperty('--timeline-bottom', calculatedBottomValue);
-                }
+                const calculatedBottomValue = `${timelineTop + timelineElement.offsetHeight - timelineBottom + avatarHeight}px`;
+                timelineElement.style.setProperty('--timeline-bottom', calculatedBottomValue);
             }
-        }, 100);
-        updateLineStyle();
-        window.addEventListener('resize', updateLineStyle);
-        return () => window.removeEventListener('resize', updateLineStyle);
-    }, [timelineEvents, perPage, dateValue]);
+            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');
+            }
+        }
+        return () => window.removeEventListener('resize', debouncedUpdateLineStyle);
+    }, [isFetchingData, filteredEvents, page, perPage]);
     const handleSearchChange = (value) => {
         setSearchValue(value.target.value);
     };
@@ -305,9 +334,10 @@ const Timeline = ({ caseNumber }) => {
             filteredBySearch = filteredBySearch.filter(({ left, right }) => {
                 const dateString = left.date.toLowerCase();
                 const timeString = left.text.toLowerCase();
+                const rightDateString = right.date.toLowerCase();
                 return (dateString.includes(lowercasedFilter) ||
                     timeString.includes(lowercasedFilter) ||
-                    right.date.toLowerCase().includes(lowercasedFilter));
+                    rightDateString.includes(lowercasedFilter));
             });
         }
         let finalFilteredEvents = filteredBySearch;
@@ -319,6 +349,7 @@ const Timeline = ({ caseNumber }) => {
             });
         }
         setFilteredEvents(finalFilteredEvents);
+        setPage(1);
     }, [searchValue, dateValue, timelineEvents]);
     const handleReload = (e) => {
         e.preventDefault();
@@ -332,7 +363,6 @@ const Timeline = ({ caseNumber }) => {
                 React.createElement(EmptyStateBody, null,
                     React.createElement(Trans, null,
                         "Try ",
-                        ' ',
                         React.createElement("a", { href: "#", onClick: handleReload }, "reloading the page"),
                         ' ',
                         "or check back later"))));
@@ -343,18 +373,19 @@ const Timeline = ({ caseNumber }) => {
                 React.createElement(EmptyStateBody, null,
                     React.createElement(Trans, null, "Try modifying your search query or changing the date range and try again."))));
         }
-        return (React.createElement(React.Fragment, null, filteredEvents.slice((page - 1) * perPage, page * perPage).map((node, index) => (React.createElement(TimelineNode, { key: index, leftEvent: node.left, rightEvent: node.right, user: node.right.user, useAvatar: node.right.useAvatar, ref: index === perPage - 1 ? lastNodeRef : null })))));
+        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: 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-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), toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: handleSelectToggle, isExpanded: isSelectOpen, style: { width: '200px' } }, selectedOrder)), shouldFocusToggleOnSelect: true },
+                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")))),
         isFetchingData ? (React.createElement("div", { className: "timeline-loading-spinner" },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "2.2.188",
+    "version": "2.2.189",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -60,11 +60,11 @@
         "@progress/kendo-licensing": "1.3.5",
         "@progress/kendo-react-pdf": "^5.16.0",
         "@redux-devtools/extension": "^3.3.0",
-        "@rh-support/components": "2.1.90",
-        "@rh-support/react-context": "2.1.99",
+        "@rh-support/components": "2.1.91",
+        "@rh-support/react-context": "2.1.100",
         "@rh-support/types": "2.0.5",
-        "@rh-support/user-permissions": "2.1.55",
-        "@rh-support/utils": "2.1.44",
+        "@rh-support/user-permissions": "2.1.56",
+        "@rh-support/utils": "2.1.45",
         "date-fns": "^4.1.0",
         "dompurify": "^2.2.6",
         "dot": "^1.1.3",
@@ -134,5 +134,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "6f241c61742b1a72ccc831ab45b267c163ea1284"
+    "gitHead": "672881ff1c4cabf0dee016387c49f6abbdc952a7"
 }