@rh-support/troubleshoot 2.2.190 → 2.2.191

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

@@ -17,9 +17,24 @@
 }
 
 .right-node {
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    width: 100%;
+}
+.content-date-right-history {
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.timelineMenu button.pf-v5-c-button.pf-m-primary {
+    margin-bottom: 31px;
+}
+
+/* fixes a bug with datepicker month input being bigger than the day */
+.timelineMenu div.pf-v5-c-calendar-month__header-year span.pf-v5-c-form-control input {
+    margin-bottom: -3px;
 }
 
 .timeline::after {

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,KAAsC,MAAM,OAAO,CAAC;AA8P3D,QAAA,MAAM,QAAQ;;uBAgUb,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;AA0BxB,OAAO,KAAsC,MAAM,OAAO,CAAC;AA4Q3D,QAAA,MAAM,QAAQ;;uBAkUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -42,11 +42,14 @@ const TimelineNode = React.forwardRef(({ leftEvent, rightEvent, user, 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" }))));
 });
-//Handling changes in case fields to be displayed to the user
+/**
+ *
+ * @param {Object} item - The item object to process.
+ * @returns {string} The formatted text string.
+ */
 const applyReplacements = (item) => {
-    if (!item || typeof item !== 'object') {
+    if (!item || typeof item !== 'object')
         return '';
-    }
     const fieldNameMapping = {
         ContactId: 'Contact',
         RH_Product__c: 'Product',
@@ -73,75 +76,79 @@ const applyReplacements = (item) => {
         jp: 'Japanese',
         zh: 'Chinese',
     };
-    let fieldName = fieldNameMapping[item.fieldName] || item.fieldLabel || item.fieldName || '';
-    const getNameValue = (prefix) => {
-        const keyMap = {
-            Product: 'product',
-            Version: 'version',
-            Account: 'account',
-            Contact: 'contact',
-            Entitlement: 'entitlement',
-            'Business Hours': 'businessHours',
-            Owner: 'queueNameOwner',
-            'Customer Escalation': 'customerEscalation',
-            '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`;
-        return item[key] || item[`${prefix}Value`] || '';
+    const keyMap = {
+        Product: 'product',
+        Version: 'version',
+        Account: 'account',
+        Contact: 'contact',
+        Entitlement: 'entitlement',
+        'Business Hours': 'businessHours',
+        Owner: 'queueNameOwner',
+        'Customer Escalation': 'customerEscalation',
+        'Case Group': 'caseGroup',
+        'SLA Start Date': 'slaStartDate',
+        'Case Language': 'caseLanguage',
+        'Personal reference number': 'alternateId',
     };
-    let newValue = getNameValue('New');
-    let oldValue = getNameValue('Old');
+    const getMappedFieldName = (fieldName) => fieldNameMapping[fieldName] || item.fieldLabel || fieldName || '';
+    const getNameValue = (prefix) => item[`${keyMap[getMappedFieldName(item.fieldName)]}${prefix}Name`] ||
+        item[`${prefix}Value`] ||
+        item[`${prefix.toLowerCase()}Value`] ||
+        '';
+    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}`;
+    const fieldName = getMappedFieldName(item.fieldName);
+    const newValue = getNameValue('new');
+    const oldValue = getNameValue('old');
     let newText = '';
-    if (item.fieldName === 'Case_Language__c') {
-        // Map language codes to language names
-        const newLanguage = languageCodeMapping[item.newValue] || item.newValue;
-        const oldLanguage = languageCodeMapping[item.oldValue] || item.oldValue;
-        if (item.oldValue && item.newValue) {
-            newText = `changed ${fieldName} from ${oldLanguage} to ${newLanguage}`;
-        }
-        else if (item.newValue) {
-            newText = `set ${fieldName} to ${newLanguage}`;
+    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;
+        default:
+            if (oldValue && newValue) {
+                newText = `changed ${fieldName} from ${oldValue} to ${newValue}`;
+            }
+            else if (newValue) {
+                newText = formatSimpleChange(fieldName, newValue);
+            }
+            else if (oldValue && (newValue === undefined || newValue === '')) {
+                newText = `removed ${fieldName}, was ${oldValue}`;
+            }
+            else if (item.newValue !== undefined) {
+                newText = formatSimpleChange(fieldName, item.newValue);
+            }
+            break;
     }
-    else if (item.fieldName === 'OwnerId' && item.createdByUserName) {
-        newText = `set ${fieldName} to ${item.createdByUserName}`;
-    }
-    else if (item.fieldName === 'Status') {
-        if (item.oldValue && item.newValue) {
-            newText = `changed ${fieldName} from ${item.oldValue} to ${item.newValue}`;
-        }
-        else if (item.newValue) {
-            newText = `set ${fieldName} to ${item.newValue}`;
-        }
-    }
-    else if (item.fieldName === 'Customer_Escalation__c' && item.createdByUserName) {
-        newText = `started Escalation for this ticket`;
-    }
-    else if (oldValue && newValue) {
-        newText = `changed ${fieldName} from ${oldValue} to ${newValue}`;
-    }
-    else if (newValue) {
-        newText = `set ${fieldName} to ${newValue}`;
-    }
-    else if (item.newValue !== undefined) {
-        newText = `set ${fieldName} to ${item.newValue}`;
-    }
-    // Handle boolean values
-    if (typeof item.newValue === 'boolean') {
-        newText = `set ${fieldName} to ${item.newValue}`;
-    }
-    // Handle date values
-    if (item.fieldName === 'SlaStartDate' && item.newValue) {
-        newText = `set ${fieldName} to ${item.newValue}`;
-    }
-    // Replace 'Problem Statement' with 'Title'
-    if (typeof newText === 'string') {
+    if (typeof item.newValue === 'boolean')
+        newText = formatBooleanChange(fieldName, item.newValue);
+    if (typeof newText === 'string')
         newText = newText.replace(/Problem Statement/g, 'Title');
-    }
     return newText;
 };
 // function to change the apiResponse
@@ -285,15 +292,17 @@ const Timeline = ({ caseNumber }) => {
         return '';
     };
     const updateLineStyle = () => {
-        var _a;
         const timelineElement = document.querySelector('.timeline');
         if (timelineElement) {
             if (lastNodeRef.current) {
-                const timelineBottom = lastNodeRef.current.getBoundingClientRect().bottom + window.scrollY;
-                const timelineTop = timelineElement.getBoundingClientRect().top + window.scrollY;
-                const avatarHeight = ((_a = lastNodeRef.current.querySelector('.timeline-avatar')) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
-                const calculatedBottomValue = `${timelineTop + timelineElement.offsetHeight - timelineBottom + avatarHeight}px`;
-                timelineElement.style.setProperty('--timeline-bottom', calculatedBottomValue);
+                const timelineRect = timelineElement.getBoundingClientRect();
+                const lastNodeRect = lastNodeRef.current.getBoundingClientRect();
+                const timelineBottomPosition = timelineRect.bottom + window.scrollY;
+                const lastNodeBottomPosition = lastNodeRect.bottom + window.scrollY;
+                // Calculate the difference between the bottom of the timeline and the bottom of the last node
+                const bottomOffset = timelineBottomPosition - lastNodeBottomPosition;
+                // Set the --timeline-bottom CSS variable to adjust the line height
+                timelineElement.style.setProperty('--timeline-bottom', `${bottomOffset}px`);
             }
             else {
                 timelineElement.style.setProperty('--timeline-bottom', '0px');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "2.2.190",
+    "version": "2.2.191",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -134,5 +134,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "d867a78014ee4a08aa8d7bf9e0dc9bd08ce6ac5a"
+    "gitHead": "9d68649cf6e2fbd399b34388704429012356113e"
 }