@zendesk/retrace
Version:
define and capture Product Operation Traces along with computed metrics with an optional friendly React beacon API
121 lines • 7.21 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;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.App = void 0;
const react_1 = require("react");
const React = __importStar(require("react"));
const react_buttons_1 = require("@zendeskgarden/react-buttons");
const react_chrome_1 = require("@zendeskgarden/react-chrome");
const react_theming_1 = require("@zendeskgarden/react-theming");
const grid_2x2_stroke_svg_1 = require("@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg");
const user_solo_stroke_svg_1 = require("@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg");
const arrow_right_left_svg_1 = require("@zendeskgarden/svg-icons/src/26/arrow-right-left.svg");
const garden_svg_1 = require("@zendeskgarden/svg-icons/src/26/garden.svg");
const home_fill_svg_1 = require("@zendeskgarden/svg-icons/src/26/home-fill.svg");
const zendesk_svg_1 = require("@zendeskgarden/svg-icons/src/26/zendesk.svg");
// CYN: NEED UPDATE
const mockTickets_1 = require("./mockTickets");
const TicketList_1 = require("./TicketList");
const ticketOperationTracer_1 = require("./ticketOperationTracer");
const TicketView_1 = require("./TicketView");
// simulate an event every 2 seconds
const simulateEventPeriodically = (ticketId) => {
const interval = setInterval(() => {
performance.mark(`ticket-${ticketId}-event`);
}, 4_000);
return () => void clearInterval(interval);
};
const App = () => {
const [selectedTicketId, setSelectedTicketId] = (0, react_1.useState)(null);
const [selectedTicketIds, setSelectedTicketIds] = (0, react_1.useState)([]);
(0, react_1.useEffect)(() => simulateEventPeriodically(selectedTicketId), [selectedTicketId]);
const handleTicketClick = (id) => {
ticketOperationTracer_1.ticketOperationTracer.start({
relatedTo: { ticketId: id },
attributes: { exampleTraceAttribute: true },
variant: 'click',
});
setSelectedTicketId(id);
};
const handleBack = () => {
setSelectedTicketId(null);
};
return (React.createElement(react_theming_1.ThemeProvider, null,
React.createElement(react_chrome_1.Chrome, { isFluid: true },
React.createElement(react_chrome_1.Nav, { "aria-label": "chrome default example" },
React.createElement(react_chrome_1.Nav.Item, { hasLogo: true },
React.createElement(react_chrome_1.Nav.ItemIcon, null,
React.createElement(garden_svg_1.ReactComponent, { style: { color: react_theming_1.PALETTE.green[400] } })),
React.createElement(react_chrome_1.Nav.ItemText, null, "Zendesk Garden")),
React.createElement(react_chrome_1.Nav.Item, { isCurrent: !selectedTicketId, onClick: () => void handleBack(), title: "Ticket List" },
React.createElement(react_chrome_1.Nav.ItemIcon, null,
React.createElement(home_fill_svg_1.ReactComponent, null)),
React.createElement(react_chrome_1.Nav.ItemText, null, "Ticket List")),
React.createElement(react_chrome_1.Nav.Item, { onClick: () => {
setSelectedTicketIds([]);
setSelectedTicketId(null);
}, title: "Reset Cache" },
React.createElement(react_chrome_1.Nav.ItemIcon, null,
React.createElement(arrow_right_left_svg_1.ReactComponent, null)),
React.createElement(react_chrome_1.Nav.ItemText, null, "Reset")),
React.createElement(react_chrome_1.Nav.Item, { hasBrandmark: true, title: "Zendesk" },
React.createElement(react_chrome_1.Nav.ItemIcon, null,
React.createElement(zendesk_svg_1.ReactComponent, null)),
React.createElement(react_chrome_1.Nav.ItemText, null, "Zendesk"))),
React.createElement(react_chrome_1.Body, null,
React.createElement(react_chrome_1.Header, null,
React.createElement(react_chrome_1.Header.Item, null,
React.createElement(react_chrome_1.Header.ItemIcon, null,
React.createElement(grid_2x2_stroke_svg_1.ReactComponent, null)),
React.createElement(react_chrome_1.Header.ItemText, { isClipped: true }, "Products")),
React.createElement(react_chrome_1.Header.Item, { isRound: true },
React.createElement(react_chrome_1.Header.ItemIcon, null,
React.createElement(user_solo_stroke_svg_1.ReactComponent, null)),
React.createElement(react_chrome_1.Header.ItemText, { isClipped: true }, "User"))),
React.createElement(react_chrome_1.Content, null,
React.createElement(react_chrome_1.Main, { style: { padding: 28 } }, selectedTicketId === null ? (React.createElement(TicketList_1.TicketList, { tickets: mockTickets_1.mockTickets, onTicketClick: handleTicketClick })) : (React.createElement(TicketView_1.TicketView, { ticketId: selectedTicketId, cached: selectedTicketIds.includes(selectedTicketId), onLoaded: () => {
setSelectedTicketIds([
...selectedTicketIds,
selectedTicketId,
]);
} })))),
React.createElement(react_chrome_1.Footer, null,
React.createElement(react_chrome_1.Footer.Item, null,
React.createElement(react_buttons_1.Button, { isBasic: true }, "Cancel")),
React.createElement(react_chrome_1.Footer.Item, null,
React.createElement(react_buttons_1.Button, { isPrimary: true }, "Save")))))));
};
exports.App = App;
//# sourceMappingURL=App.js.map