@rh-support/troubleshoot 2.7.1 → 2.7.10

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

@@ -7,11 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
-import { ToastNotification } from '@rh-support/components';
+import { useApolloClient } from '@apollo/client/react';
+import { Button, ButtonVariant, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, } from '@patternfly/react-core';
+import { SingleSelectDropdown, ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
-import { ability, resourceActions, resources } from '@rh-support/user-permissions';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useReducer, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -23,9 +22,6 @@ export function VerifyCaseStatusModal(props) {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
     const [caseOverviewState, caseOverviewDispatch] = useReducer(caseOverviewReducer, initialCaseViewState);
-    const canManageCase = ability.can(resourceActions.UPDATE, resources.CASE_DETAILS);
-    const [showDropdown, setShowDropdown] = useState(false);
-    const onDropdownToggle = (toggle) => setShowDropdown(toggle);
     const caseState = useCaseSelector((state) => ({
         caseDetails: {
             product: state.caseDetails.product,
@@ -36,7 +32,6 @@ export function VerifyCaseStatusModal(props) {
             createdById: state.caseDetails.createdById,
             ownerId: state.caseDetails.ownerId,
             caseNumber: state.caseDetails.caseNumber,
-            entitlementSla: state.caseDetails.entitlementSla,
             cep: state.caseDetails.cep,
             accountNumber: state.caseDetails.accountNumberRef,
             firstCaseInactivityWarningSentAt: state.caseDetails.firstCaseInactivityWarningSentAt,
@@ -49,10 +44,12 @@ export function VerifyCaseStatusModal(props) {
         selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
     const { status } = caseState.caseDetails;
-    const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const apolloClient = useApolloClient();
+    const canManageCase = loggedInUserRights.data.canManageCases();
     useEffect(() => {
-        fetchAllStatuses(caseOverviewDispatch, loggedInUsersAccount.data.secureSupport);
-    }, [caseOverviewDispatch, loggedInUsersAccount.data.secureSupport]);
+        fetchAllStatuses(caseOverviewDispatch, apolloClient);
+    }, [caseOverviewDispatch, apolloClient]);
     const { isCaseUpdating } = caseState;
     const canEditCase = useCanEditCase();
     const caseDispatch = useCaseDispatch();
@@ -74,30 +71,41 @@ export function VerifyCaseStatusModal(props) {
             }
             catch (e) {
                 setStatusUpdating(caseOverviewDispatch, false);
-                caseUpdateError.showError(e, t('Status failed to update'));
+                caseUpdateError.showFieldError(e, t('Status'), () => updateStatusState(statusVal, onStatusUpdate));
             }
         }
         else {
             return;
         }
     });
-    const onStatusChange = (event, newStatus) => __awaiter(this, void 0, void 0, function* () {
+    const onStatusChange = (selectedOption) => __awaiter(this, void 0, void 0, function* () {
         if (canEditCase.alert())
             return;
-        setStatusChange(newStatus);
-        onDropdownToggle(false);
+        setStatusChange(selectedOption.value);
     });
-    return (React.createElement(Modal, { id: "case-close-modal", title: t(`Please verify this case's status`), description: t(`Consider whether or not you're ready to nudge the customer`), "aria-describedby": "case-close-modal", isOpen: true, onClose: props.onClose, showClose: true, actions: [
+    // Create selected option for SingleSelectDropdown
+    const getSelectedOption = () => ({
+        label: t(statusChange || status),
+        value: statusChange || status,
+    });
+    // Create options array for SingleSelectDropdown
+    const getDropdownOptions = () => caseOverviewState.allCaseStatuses.data.map((statusOption) => ({
+        label: t(statusOption),
+        value: statusOption,
+        disabled: statusOption === status,
+    }));
+    return (React.createElement(Modal, { id: "case-close-modal", title: t(`Please verify this case's status`), "aria-describedby": "case-close-modal", isOpen: true, onClose: props.onClose, variant: ModalVariant.medium },
+        React.createElement(ModalHeader, null,
+            React.createElement("h3", { className: "subheading subheading-sm" },
+                React.createElement(Trans, null, "Status"),
+                React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))),
+        React.createElement(ModalBody, null,
+            React.createElement(SingleSelectDropdown, { ariaLabel: t(status), id: "verify-case-status", selected: getSelectedOption(), options: getDropdownOptions(), onSelect: onStatusChange, isDisabled: !canManageCase ||
+                    caseOverviewState.allCaseStatuses.isFetching ||
+                    (caseOverviewState.caseStatusUpdating && isCaseUpdating), isInvalid: !status, placeholder: t(status) })),
+        React.createElement(ModalFooter, null,
             React.createElement(Button, { key: "submit-description", variant: ButtonVariant.primary, onClick: onSubmit, isLoading: isVerifyCaseStatusLoading, isDisabled: props.isUpdating, "data-tracking-id": "close-case-description-modal-submit" },
                 React.createElement(Trans, null, "Continue")),
             React.createElement(Button, { key: "close-modal", variant: ButtonVariant.link, onClick: props.onClose, isDisabled: props.isUpdating, "data-tracking-id": "close-case-description-modal-cancel" },
-                React.createElement(Trans, null, "Cancel")),
-        ], variant: ModalVariant.medium },
-        React.createElement("h3", { className: "subheading subheading-sm" },
-            React.createElement(Trans, null, "Status"),
-            React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-        React.createElement(Select, { "aria-label": t(status), id: "verify-case-status", selections: statusChange, onSelect: onStatusChange, isOpen: showDropdown, isDisabled: !canManageCase ||
-                caseOverviewState.allCaseStatuses.isFetching ||
-                (caseOverviewState.caseStatusUpdating && isCaseUpdating), menuAppendTo: document.body, validated: !status ? 'error' : 'default', placeholderText: t(status), onToggle: (_event, toggle) => onDropdownToggle(toggle) }, caseOverviewState.allCaseStatuses.data.map((option, index) => (React.createElement(SelectOption, { key: index, value: option, isDisabled: option === status },
-            React.createElement(Trans, null, option)))))));
+                React.createElement(Trans, null, "Cancel")))));
 }

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

@@ -1,4 +1,3 @@
-import './CaseHistory.css';
 import React from 'react';
 interface IProps {
     caseNumber: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,UAAW,MAAM,sBAMjC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,MAAM,sBAYjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,8 +1,12 @@
-import './CaseHistory.css';
-import React from 'react';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import React, { useContext } from 'react';
+import { useCaseSelector } from '../../../../context/CaseContext';
 import Timeline from './Timeline';
 const CaseHistory = (props) => {
-    return (React.createElement("div", null,
-        React.createElement(Timeline, { caseNumber: props.caseNumber })));
+    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 })));
 };
 export default CaseHistory;

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

@@ -17,13 +17,15 @@
 }
 
 .right-node {
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;
 }
+
 .content-date-right-history {
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -45,7 +47,7 @@
 
     /* This value is calculated in timeline.tsx */
     bottom: calc(var(--timeline-bottom) + var(--timeline-bottom-offset, 18.35%));
-    left: calc(15% + 14.5px);
+    left: calc(20% + 14.5px);
     transform: translateX(-50%);
 }
 
@@ -73,8 +75,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5rem 1rem;
-    margin: 0 -0.8rem;
+    margin-top: 32px;
+    margin-bottom: 24px;
 }
 
 .timeline-pagination {
@@ -82,15 +84,23 @@
     display: flex;
     align-items: center;
 }
+
 #options-menu-top-pagination {
     display: flex !important;
     flex-wrap: nowrap !important;
+    justify-content: flex-start;
+    margin-left: 1rem;
 }
+
 .timeline-sort-order-select {
     width: auto;
     margin-left: 1rem;
 }
 
+.timeline-sort-order-select .pf-v6-c-menu-toggle {
+    min-width: 17rem;
+}
+
 .timeline-controls:last-of-type {
     justify-content: flex-start;
 }
@@ -105,14 +115,14 @@
     align-items: flex-start;
     position: relative;
     margin-bottom: 32px;
-    min-height: 80px;
+    min-height: 67px;
     max-height: 1em;
 }
 
 .timeline-avatar {
     position: absolute;
-    left: calc(15% + 15px);
-    transform: translateX(-91%);
+    left: calc(20% + 2.5px);
+    transform: translateX(-50%);
     top: 12px;
     z-index: 5;
 }
@@ -124,14 +134,14 @@
     width: 10px;
     height: 10px;
     z-index: 2;
-    left: calc(15% + 15px);
-    transform: translateX(-195%);
+    left: calc(20% + 2.5px);
+    transform: translateX(-50%);
     top: 25px;
 }
 
 .left-node {
-    flex: 0 0 15%;
-    max-width: 20%;
+    flex: 0 0 20%;
+    max-width: 25%;
     padding-right: 24px;
     margin-left: -2em;
     margin-right: 24px;
@@ -153,9 +163,7 @@
     font-weight: 400;
     text-align: right;
     line-height: 30px;
-    padding-left: 1em;
     white-space: nowrap;
-    overflow: hidden;
 }
 
 .content-date-right-history {
@@ -254,14 +262,13 @@ ul#case-history-paginated-timeline {
 }
 
 .case-history-timeline-search {
-    width: 30%;
+    width: 40%;
 }
 
 .timelineMenu {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 2rem;
 }
 
 .case-history-timeline-datepicker {
@@ -271,6 +278,19 @@ ul#case-history-paginated-timeline {
     width: 64.2%;
 }
 
+.case-history-timeline-datepicker input[aria-label='Date picker'] {
+    padding-right: 0 !important;
+}
+
+.case-history-timeline-datepicker button {
+    height: 100% !important;
+}
+
+.case-history-timeline-datepicker .pf-v6-c-calendar-month__header-year input {
+    font-size: var(--pf-t--global--font--size--body--default);
+    line-height: var(--pf-t--global--font--line-height--body);
+}
+
 .empty-state-date-picker {
     margin-left: 82%;
 }
@@ -281,11 +301,18 @@ ul#case-history-paginated-timeline {
     height: 36px;
 }
 
+/* Error state is shown in helper text below; hide the inline status icon from the input */
+.case-history-timeline-datepicker .pf-v6-c-form-control__icon.pf-m-status {
+    display: none;
+}
+
 .timeline-sort-order-select {
     display: flex;
-    justify-content: flex-end;
-    margin: 1rem;
-    width: 93.2%;
+    justify-content: center;
+}
+
+.order-select .pf-v6-c-menu-toggle {
+    min-width: 15rem;
 }
 
 @-moz-document url-prefix() {
@@ -298,34 +325,20 @@ ul#case-history-paginated-timeline {
     }
 }
 
-@media screen and (max-width: 768px) {
-    .timeline::after {
-        left: 20px;
-    }
-
-    .timeline-node {
-        flex-direction: column;
-    }
-
-    .left-node,
-    .right-node {
-        max-width: 100%;
-        padding: 0;
+@media screen and (max-width: 850px) {
+    .contentTimeline {
+        padding: 16px 8px;
     }
 
-    .timeline-avatar,
-    .timeline-marker {
-        left: 0%;
-        transform: translateX(-50%);
+    .content-date-left-history {
+        font-size: 15px;
     }
 
-    .right-node::before {
-        left: 20px;
-        border-width: 10px 10px 10px 0;
-        border-color: transparent white transparent transparent;
+    .content-time-left-history {
+        font-size: 13px;
     }
 
-    .contentTimeline {
-        margin-left: 40px;
+    .content-date-right-history {
+        font-size: 14px;
     }
 }

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

@@ -1,7 +1,40 @@
 import './Timeline.css';
 import React from 'react';
-declare const Timeline: ({ caseNumber }: {
-    caseNumber: any;
-}) => React.JSX.Element;
+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;
 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;AA2BxB,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwT3D,QAAA,MAAM,QAAQ;;uBA4Ub,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;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"}