@rh-support/troubleshoot 2.4.10-beta.8 → 2.5.0

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

@@ -0,0 +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;AAgT3D,QAAA,MAAM,QAAQ;;uBAkUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,442 @@
+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 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 { 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';
+const TimelineEvent = ({ date, text, side, user, useAvatar }) => {
+    if (side === 'left') {
+        if (useAvatar) {
+            // we only want to render the main date if the user changes, otherwise stay with just the time
+            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("p", { className: `content-time-${side}-history` }, text))));
+        }
+        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("p", { className: `content-time-${side}-history` }, text))));
+    }
+    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))));
+};
+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: -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" }))));
+});
+/**
+ *
+ * @param {Object} item - The item object to process.
+ * @returns {string} The formatted text string.
+ */
+const applyReplacements = (item) => {
+    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');
+    return newText;
+};
+// function to change the apiResponse
+const transformApiResponseToTimelineData = (apiResponse) => {
+    let previousUser = null;
+    const timelineEvents = apiResponse.historyItems
+        // Filter out 'Case Group' changes because we don't have decode of value
+        .filter((item) => item.fieldName !== 'FolderId__c')
+        .map((item, index) => {
+        const currentUser = item.createdByUserName;
+        const useAvatar = index === 0 || (!!previousUser && currentUser !== previousUser);
+        previousUser = currentUser;
+        let eventDate;
+        if (typeof item.createdDate === 'string' && item.createdDate.includes('T')) {
+            eventDate = parse(item.createdDate, "yyyy-MM-dd'T'HH:mm:ss'Z'", new Date());
+        }
+        else {
+            eventDate = fromUnixTime(item.createdDate / 1000);
+        }
+        const user = item.createdByCustomer !== undefined
+            ? item.createdByCustomer
+                ? 'customer'
+                : 'internal'
+            : currentUser === 'Case Diagnostics' || currentUser === 'GSS Tools'
+                ? 'internal'
+                : 'customer';
+        const leftEvent = {
+            date: format(eventDate, 'MMMM d, yyyy'),
+            text: format(eventDate, 'h:mm a zzz'),
+        };
+        let outputText = item.outputText;
+        if (item.type === 'Change') {
+            outputText = applyReplacements(item);
+        }
+        else {
+            outputText = stripHTML(outputText);
+        }
+        const rightEvent = {
+            date: `${item.createdByUserName} ${outputText}`,
+            text: '',
+            user: user,
+            useAvatar: useAvatar,
+        };
+        return {
+            left: leftEvent,
+            right: rightEvent,
+        };
+    });
+    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 { t } = useTranslation();
+    const [timelineEvents, setTimelineEvents] = useState([]);
+    const [originalTimelineEvents, setOriginalTimelineEvents] = useState([]);
+    const [isFetchingData, setIsFetchingData] = useState();
+    const lastNodeRef = useRef(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) => {
+        setPage(newPage);
+    };
+    const onPerPageSelect = (_, newPerPage) => {
+        setPerPage(newPerPage);
+        setPage(1);
+    };
+    const renderPagination = () => (React.createElement(Pagination, { itemCount: filteredEvents.length, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, perPageOptions: [
+            { title: '5', value: 5 },
+            { title: '10', value: 10 },
+            { title: '15', value: 15 },
+            { title: '20', value: 20 },
+        ], isCompact: true, variant: "top" }));
+    const handleSelectToggle = (e) => {
+        e.preventDefault();
+        setIsSelectOpen(!isSelectOpen);
+    };
+    const handleSelect = (e, value) => {
+        e.preventDefault();
+        if (value !== selectedOrder) {
+            setSelectedOrder(value);
+            reorderTimelineEvents(value);
+        }
+        setIsSelectOpen(false);
+    };
+    const reorderTimelineEvents = (order) => {
+        const events = order === 'Newest to Oldest' ? [...originalTimelineEvents] : [...originalTimelineEvents].reverse();
+        setTimelineEvents(applyAvatarLogic(events));
+    };
+    const applyAvatarLogic = (events) => {
+        let previousUser = null;
+        return events.map((event, index) => {
+            const currentUser = event.right.date.split(' ')[0];
+            const useAvatar = index === 0 || (!!previousUser && currentUser !== previousUser);
+            previousUser = currentUser;
+            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);
+                }
+            });
+        }
+        fetchHistory();
+    }, [caseNumber]);
+    const futureDateValidator = (date) => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0); // Normalize to midnight
+        if (date > today) {
+            return 'Date cannot be in the future.';
+        }
+        return '';
+    };
+    const updateLineStyle = () => {
+        const timelineElement = document.querySelector('.timeline');
+        if (timelineElement) {
+            if (lastNodeRef.current) {
+                const timelineRect = timelineElement.getBoundingClientRect();
+                const lastNodeRect = lastNodeRef.current.getBoundingClientRect();
+                const timelineBottomPosition = timelineRect.bottom + window.scrollY;
+                const lastNodeBottomPosition = lastNodeRect.bottom + window.scrollY;
+                // Calculate the difference between the bottom of the timeline and the bottom of the last node
+                const bottomOffset = timelineBottomPosition - lastNodeBottomPosition;
+                // Set the --timeline-bottom CSS variable to adjust the line height
+                timelineElement.style.setProperty('--timeline-bottom', `${bottomOffset}px`);
+            }
+            else {
+                timelineElement.style.setProperty('--timeline-bottom', '0px');
+            }
+        }
+    };
+    //Using useLayoutEffect because we are measuring styles based on DOM, useLayoutEffect runs after DOM Mutations https://react.dev/reference/react/useLayoutEffect
+    useEffect(() => {
+        const debouncedUpdateLineStyle = debounce(updateLineStyle, 100);
+        window.addEventListener('resize', debouncedUpdateLineStyle);
+        if (!isFetchingData && filteredEvents.length > 0) {
+            requestAnimationFrame(() => {
+                updateLineStyle();
+            });
+        }
+        else {
+            // No events or still fetching, set --timeline-bottom to 0px
+            const timelineElement = document.querySelector('.timeline');
+            if (timelineElement) {
+                timelineElement.style.setProperty('--timeline-bottom', '0px');
+            }
+        }
+        return () => window.removeEventListener('resize', debouncedUpdateLineStyle);
+    }, [isFetchingData, filteredEvents, page, perPage]);
+    const handleSearchChange = (value) => {
+        setSearchValue(value.target.value);
+    };
+    const handleClear = () => {
+        setSearchValue('');
+    };
+    const handleDateChange = (value) => {
+        setDateValue(value);
+    };
+    useEffect(() => {
+        let filteredBySearch = [...timelineEvents];
+        if (searchValue.trim()) {
+            const lowercasedFilter = searchValue.toLowerCase();
+            filteredBySearch = filteredBySearch.filter(({ left, right }) => {
+                const dateString = left.date.toLowerCase();
+                const timeString = left.text.toLowerCase();
+                const rightDateString = right.date.toLowerCase();
+                return (dateString.includes(lowercasedFilter) ||
+                    timeString.includes(lowercasedFilter) ||
+                    rightDateString.includes(lowercasedFilter));
+            });
+        }
+        let finalFilteredEvents = filteredBySearch;
+        if (dateValue) {
+            finalFilteredEvents = filteredBySearch.filter(({ left }) => {
+                const eventDate = parse(left.date, 'MMMM d, yyyy', new Date());
+                const selectedDate = parse(dateValue, 'yyyy-MM-dd', new Date());
+                return isSameDay(eventDate, selectedDate);
+            });
+        }
+        setFilteredEvents(finalFilteredEvents);
+        setPage(1);
+    }, [searchValue, dateValue, timelineEvents]);
+    const handleReload = (e) => {
+        e.preventDefault();
+        window.location.href = window.location.href;
+        window.location.reload();
+    };
+    const renderTimelineContent = () => {
+        if (fetchError) {
+            return (React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+                React.createElement(EmptyStateHeader, { titleText: "Unable to connect", icon: React.createElement(EmptyStateIcon, { icon: ExclamationCircleIcon, color: globalDangerColor100.value }), headingLevel: "h2" }),
+                React.createElement(EmptyStateBody, null,
+                    React.createElement(Trans, null,
+                        "Try ",
+                        React.createElement("a", { href: "#", onClick: handleReload }, "reloading the page"),
+                        ' ',
+                        "or check back later"))));
+        }
+        if (filteredEvents.length < 1) {
+            return (React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+                React.createElement(EmptyStateHeader, { titleText: React.createElement(Trans, null, "No results found"), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" }),
+                React.createElement(EmptyStateBody, null,
+                    React.createElement(Trans, null, "Try modifying your search query or changing the date range and try again."))));
+        }
+        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), 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), 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" },
+            React.createElement(Spinner, { size: "xl" }))) : (React.createElement("div", { className: `timeline ${filteredEvents.length === 0 ? 'timeline-empty' : ''}` }, renderTimelineContent())),
+        React.createElement("div", { className: "timeline-controls" },
+            React.createElement("div", { className: "timeline-pagination" }, renderPagination()))));
+};
+export default Timeline;

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

@@ -1,10 +1,11 @@
+import React from 'react';
 declare const defaultProps: {
     caseNumber: any;
 };
-declare type DefaultProps = typeof defaultProps;
+type DefaultProps = typeof defaultProps;
 interface IProps extends DefaultProps {
 }
-declare function CasePrivateNotes(props: IProps): JSX.Element;
+declare function CasePrivateNotes(props: IProps): React.JSX.Element;
 declare namespace CasePrivateNotes {
     var defaultProps: {
         caseNumber: any;

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":"AAcA,QAAA,MAAM,YAAY;;CAEjB,CAAC;AAEF,aAAK,YAAY,GAAG,OAAO,YAAY,CAAC;AAExC,UAAU,MAAO,SAAQ,YAAY;CAAG;AAExC,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAuGtC;kBAvGQ,gBAAgB;;;;;AA0GzB,eAAe,gBAAgB,CAAC"}
+{"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"}

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

@@ -77,15 +77,15 @@ function CasePrivateNotes(props) {
             React.createElement("label", { htmlFor: "rha-case-notes", className: "sr-only" },
                 React.createElement(Trans, null, "Notes"))),
         canUpdatePrivateNotes && (React.createElement("form", null,
-            React.createElement(TextAreaResizable, { className: "form-control", style: { minHeight: '200px' }, id: "rha-case-notes", disabled: isUpdating, maxLength: 255, name: "notes", value: notesState, onChange: onChange }),
-            React.createElement("div", { className: "pf-u-mt-md" },
-                React.createElement("button", { className: `btn btn-app btn-primary ${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: updateCase, disabled: isPrivateNotesEmpty || isUpdating || !formIsDirty },
+            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(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 },
+                React.createElement("button", { className: `btn btn-app btn-link ${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: discardNotes, disabled: isUpdating || !formIsDirty, type: "button" },
                     React.createElement(Trans, null, "Discard Changes"))))),
-        React.createElement("p", { className: "pf-u-mt-xl" },
+        React.createElement("p", { className: "pf-v5-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/RMEEscalations/RMEEscalationList.d.ts

@@ -1,4 +1,5 @@
 import { ICaseEscalation } from '@cee-eng/hydrajs/@types/models/escalation';
+import React from 'react';
 interface IProps {
     escalations: ICaseEscalation[];
     caseNumber: string;
@@ -6,6 +7,6 @@ interface IProps {
     isInternal: boolean;
     caseStatus: string;
 }
-export default function RMEEscalationList(props: IProps): JSX.Element;
+export default function RMEEscalationList(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=RMEEscalationList.d.ts.map

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":"AACA,OAAO,EAAE,eAAe,EAAqB,MAAM,2CAA2C,CAAC;AAwB/F,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,eAsMtD"}
+{"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;AAc/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,qBAuMtD"}

package/lib/esm/components/CaseEditView/Tabs/RMEEscalations/RMEEscalationList.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { escalations, publicApi } from '@cee-eng/hydrajs';
 import { Button, ButtonVariant, Flex, FlexItem } from '@patternfly/react-core';
-import { LoadingIndicator, PFTable, Table, ToastNotification, useFetch } from '@rh-support/components';
+import { LoadingIndicator, PFTable, TableComponent, ToastNotification, useFetch, } from '@rh-support/components';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
 import { formatDate, sendToSentry } from '@rh-support/utils';
 import find from 'lodash/find';
@@ -64,7 +64,7 @@ export default function RMEEscalationList(props) {
                 commentBody: comment,
                 contentType: 'plaintext',
             });
-            updateDiscussionStateComments(dispatchDiscussion, props.caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
+            updateDiscussionStateComments(dispatchDiscussion, caseDispatch, props.caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
             yield updateCaseRequest(props.caseNumber, { customerEscalation: true });
             checkForCaseStatusToggleOnAttachOrComment(caseDispatch, props.isInternal, props.caseStatus);
             escalationNum && ToastNotification.addSuccessMessage(message);
@@ -121,7 +121,7 @@ export default function RMEEscalationList(props) {
                     React.createElement(Button, { variant: ButtonVariant.secondary, onClick: () => requestUpdateRMEEscalation(escalation.name), "data-tracking-id": "case-details-rme-req-update", className: "" },
                         React.createElement(Trans, null, "Request Update"))),
                 React.createElement(FlexItem, null,
-                    React.createElement(Button, { variant: ButtonVariant.secondary, className: "pf-u-mt-sm", onClick: () => requestClosureRMEEscalation(escalation.name), "data-tracking-id": "case-details-rme-req-closure" },
+                    React.createElement(Button, { variant: ButtonVariant.secondary, className: "pf-v5-u-mt-sm", onClick: () => requestClosureRMEEscalation(escalation.name), "data-tracking-id": "case-details-rme-req-closure" },
                         React.createElement(Trans, null, "Request Closure")))));
         }
     };
@@ -168,6 +168,6 @@ export default function RMEEscalationList(props) {
     if ((props.escalations || []).length < 1)
         return (React.createElement("p", { className: "card card-light card-sm push-top-narrow" },
             React.createElement(Trans, null, "No escalations")));
-    return (React.createElement(Table, { columns: columns, data: escalationList },
+    return (React.createElement(TableComponent, { columns: columns, data: escalationList },
         React.createElement(PFTable, { "aria-label": "request-managament-escalation-list", className: "rme-list-table", pagination: false })));
 }

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

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const RelatedTasks: () => React.JSX.Element;
+export default RelatedTasks;
+//# sourceMappingURL=RelatedTasks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedTasks.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/RelatedTasks/RelatedTasks.tsx"],"names":[],"mappings":"AAcA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAqBnD,QAAA,MAAM,YAAY,yBA+KjB,CAAC;AAEF,eAAe,YAAY,CAAC"}