@zendesk/retrace
Version:
define and capture Product Operation Traces along with computed metrics with an optional friendly React beacon API
147 lines • 7.54 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TicketView = exports.MessageSpan = exports.StyledSpan = void 0;
const react_1 = require("react");
const React = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_accordions_1 = require("@zendeskgarden/react-accordions");
const react_avatars_1 = require("@zendeskgarden/react-avatars");
const react_loaders_1 = require("@zendeskgarden/react-loaders");
const react_notifications_1 = require("@zendeskgarden/react-notifications");
const react_theming_1 = require("@zendeskgarden/react-theming");
const react_typography_1 = require("@zendeskgarden/react-typography");
const user_solo_stroke_svg_1 = require("@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg");
const CustomerSidebar_1 = require("./CustomerSidebar");
const customerSidebarTracer_1 = require("./customerSidebarTracer");
const element_1 = require("./element");
const mockTickets_1 = require("./mockTickets");
const simulateLongTasks_1 = require("./simulateLongTasks");
const traceManager_1 = require("./traceManager");
const TicketViewContainer = styled_components_1.default.div `
display: flex;
gap: ${react_theming_1.DEFAULT_THEME.space.base * 4}px;
width: 100%;
`;
const TicketContent = styled_components_1.default.div `
flex: 1;
min-width: 0; /* Prevents flex child from overflowing */
`;
exports.StyledSpan = (0, styled_components_1.default)(react_typography_1.Span).attrs({ isBold: true, hue: 'blue' }) `
margin-left: ${react_theming_1.DEFAULT_THEME.space.base * 2}px;
`;
exports.MessageSpan = (0, styled_components_1.default)(react_typography_1.Span).attrs({}) `
display: block;
`;
const TimelineContentWide = (0, styled_components_1.default)(react_accordions_1.Timeline.Content) `
flex: 5;
`;
const TicketView = ({ ticketId, cached = false, onLoaded, }) => {
const [stateX, setStateX] = (0, react_1.useState)(0);
(0, traceManager_1.useBeacon)({
name: 'TicketView',
relatedTo: { ticketId },
renderedOutput: cached ? 'content' : 'loading',
attributes: { exampleBeaconAttribute: true },
isIdle: cached,
error: cached && ticketId === 3 ? new Error('Error loading ticket') : undefined,
});
// Start the customer sidebar trace when the ticket view loads
(0, react_1.useEffect)(() => {
customerSidebarTracer_1.customerSidebarTracer.start({
relatedTo: { ticketId },
attributes: {
parentTrace: 'ticket-activation',
sidebarType: 'customer_context',
},
variant: 'sidebar_open',
});
}, [ticketId]);
(0, react_1.useEffect)(() => (0, simulateLongTasks_1.triggerLongTasks)({
minTime: 50,
maxTime: 100,
totalClusterDuration: 300,
}), [ticketId, cached]);
const ticket = mockTickets_1.mockTickets.find((ticket) => ticket.id === ticketId);
(0, react_1.useEffect)(() => {
const timer = setTimeout(() => {
onLoaded?.();
}, 500);
return () => void clearTimeout(timer);
}, [ticketId]);
(0, react_1.useEffect)(() => {
if (!cached || stateX > 10)
return undefined;
const timer = setTimeout(() => {
// force trigger a re-render
setStateX((prev) => prev + 1);
}, 50);
return () => void clearTimeout(timer);
}, [stateX]);
if (!ticket) {
return (React.createElement(TicketViewContainer, null,
React.createElement(TicketContent, null,
React.createElement(react_notifications_1.Well, null,
React.createElement(react_typography_1.Paragraph, null, "No ticket found"))),
React.createElement(CustomerSidebar_1.CustomerSidebar, { ticketId: ticketId })));
}
return (React.createElement(TicketViewContainer, null,
React.createElement(TicketContent, null,
React.createElement(react_notifications_1.Well, null,
React.createElement(react_typography_1.XXL, null,
"Ticket: ",
ticket.subject),
!cached ? (React.createElement(React.Fragment, null,
React.createElement(react_loaders_1.Skeleton, null),
React.createElement(react_loaders_1.Skeleton, null),
React.createElement(react_loaders_1.Skeleton, null),
React.createElement(react_loaders_1.Skeleton, null),
React.createElement(react_loaders_1.Skeleton, null))) : (React.createElement(React.Fragment, null,
React.createElement(react_accordions_1.Timeline, null,
React.createElement(element_1.TimingComponent, { name: `TicketView/${ticketId}` }),
ticket.messages.map((msg, index) => (React.createElement(react_accordions_1.Timeline.Item, { key: index },
React.createElement(react_accordions_1.Timeline.OppositeContent, null,
React.createElement(react_typography_1.Span, { hue: "grey" }, msg.humanReadableTimestamp)),
React.createElement(TimelineContentWide, null,
React.createElement(react_avatars_1.Avatar, { size: "extrasmall", backgroundColor: react_theming_1.PALETTE.grey[600] }, msg.authorType === 'customer' ? (React.createElement("img", { alt: "image avatar", src: "https://garden.zendesk.com/components/avatar/user.png" })) : (React.createElement(user_solo_stroke_svg_1.ReactComponent, { role: "img", "aria-label": "extra small user avatar" }))),
React.createElement(exports.StyledSpan, null, msg.author),
React.createElement(exports.MessageSpan, null, msg.message)))))))))),
React.createElement(CustomerSidebar_1.CustomerSidebar, { ticketId: ticketId })));
};
exports.TicketView = TicketView;
//# sourceMappingURL=TicketView.js.map