@localstack/appinspector-ui 1.0.82 → 1.0.83

package/dist/index.js

@@ -10209,6 +10209,36 @@ var ResponsiveTimestampCell = memo2(({ date, locale }) => {
   return /* @__PURE__ */ jsx2("div", { style: { width: "100%" }, children: formattedTime });
 });
 
+// src/constants/test-ids.ts
+var EVENT_DETAILS_TEST_ID = "event-details";
+var CLEAR_SPANS_TEST_ID = "clear-spans";
+var SPANS_DATA_GRID_TEST_ID = "spans-data-grid";
+var TRACE_GRAPH_TEST_ID = "trace-graph";
+var SPANS_LIST_PAGE_TEST_ID = "spans-list-page";
+var TRACE_GRAPH_PAGE_TEST_ID = "trace-graph-page";
+var VIEW_SPAN_DETAILS_TEST_ID = "view-span-details";
+var SPANS_DATA_GRID_ROW_TEST_ID = "spans-data-grid-row";
+var EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID = "event-details-section-basic-information";
+var EVENT_DETAILS_SERVICE_NAME_TEST_ID = "event-details-service-name";
+var EVENT_DETAILS_OPERATION_NAME_TEST_ID = "event-details-operation-name";
+var EVENT_DETAILS_CLOSE_BUTTON_TEST_ID = "event-details-close-button";
+var EVENT_DETAILS_STATUS_TEST_ID = "event-details-status";
+var EVENT_DETAILS_RESOURCE_NAME_TEST_ID = "event-details-resource-name";
+var EVENT_DETAILS_RESOURCE_ARN_TEST_ID = "event-details-resource-arn";
+var EVENT_DETAILS_ACCOUNT_TEST_ID = "event-details-account";
+var EVENT_DETAILS_REGION_TEST_ID = "event-details-region";
+var EVENT_DETAILS_START_TIME_TEST_ID = "event-details-start-time";
+var EVENT_DETAILS_DURATION_TEST_ID = "event-details-duration";
+var EVENT_DETAILS_SPAN_ID_TEST_ID = "event-details-span-id";
+var EVENT_DETAILS_TRACE_ID_TEST_ID = "event-details-trace-id";
+var EVENT_DETAILS_REQUEST_ID_TEST_ID = "event-details-request-id";
+var EVENT_DETAILS_REQUEST_PAYLOAD = "event-details-request-payload";
+var EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID = "event-details-response-payload";
+var EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID = "event-details-exception-payload";
+var SERVICE_NODE_TEST_ID = "service-node";
+var SERVICE_NODE_SERVICE_NAME_TEST_ID = "service-node-service-name";
+var SERVICE_NODE_OPERATION_NAME_TEST_ID = "service-node-operation-name";
+
 // src/components/cells/service-cell.tsx
 import { Box as Box2, Divider, Typography, useTheme } from "@mui/material";
 import { memo as memo7 } from "react";
@@ -12659,6 +12689,7 @@ var ServiceCell = memo7(({
       /* @__PURE__ */ jsx124(
         Typography,
         {
+          "data-testid": SERVICE_NODE_SERVICE_NAME_TEST_ID,
           sx: {
             borderBottomRightRadius: "15px",
             borderTopRightRadius: "15px",
@@ -12835,6 +12866,7 @@ var SpansDataGridRow = memo8(
           backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.to : newSpanBackgroundColor.dark.to
         },
         component: motion.tr,
+        "data-testid": SPANS_DATA_GRID_ROW_TEST_ID,
         initial: {
           backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.from : newSpanBackgroundColor.dark.from
         },
@@ -12967,6 +12999,7 @@ var SpansDataGrid = ({
         return /* @__PURE__ */ jsx126(Box4, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx126(
           Button2,
           {
+            "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
             onClick: () => {
               onSpanClick(props.row.original);
             },
@@ -13015,9 +13048,10 @@ var SpansDataGrid = ({
           control: /* @__PURE__ */ jsx126(
             Button2,
             {
+              "data-testid": CLEAR_SPANS_TEST_ID,
               onClick: onClearSpans,
               startIcon: /* @__PURE__ */ jsx126(DeleteForeverOutlined, {}),
-              children: "Clear Spans"
+              children: "Clear Events"
             }
           ),
           disabled: clearingSpans,
@@ -13102,7 +13136,7 @@ var SpansDataGrid = ({
 // src/components/spans-list/spans-list.tsx
 import { jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
 var SpansList = (props) => {
-  return /* @__PURE__ */ jsxs122(Box5, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs122(Box5, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
     props.fetchError && /* @__PURE__ */ jsxs122(
       Alert,
       {
@@ -26515,7 +26549,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0;
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
-  return /* @__PURE__ */ jsxs130(Box14, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs130(Box14, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
     /* @__PURE__ */ jsxs130(
       Box14,
       {
@@ -26530,48 +26564,48 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         },
         children: [
           /* @__PURE__ */ jsx137(Box14, { children: /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx137(IconButton4, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx137(Close2, {}) })
+          onClose && /* @__PURE__ */ jsx137(IconButton4, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx137(Close2, {}) })
         ]
       }
     ),
     /* @__PURE__ */ jsx137(Box14, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 2, children: [
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
+      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack2, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
         /* @__PURE__ */ jsxs130(Box14, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
           /* @__PURE__ */ jsxs130(Box14, { children: [
             /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.service_name })
+            /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: selectedEvent.service_name })
           ] }),
           /* @__PURE__ */ jsxs130(Box14, { children: [
             /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.operation_name })
+            /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name })
           ] })
         ] }),
         /* @__PURE__ */ jsxs130(Box14, { children: [
           /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.resource_name })
+          /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, variant: "body2", children: selectedEvent.resource_name })
         ] }),
         Boolean(resourceArn) && /* @__PURE__ */ jsxs130(Box14, { children: [
           /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: resourceArn })
+          /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, variant: "body2", children: resourceArn })
         ] }),
         /* @__PURE__ */ jsxs130(Box14, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
           /* @__PURE__ */ jsxs130(Box14, { children: [
             /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.account_id })
+            /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id })
           ] }),
           /* @__PURE__ */ jsxs130(Box14, { children: [
             /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.region })
+            /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region })
           ] })
         ] }),
         /* @__PURE__ */ jsxs130(Box14, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
           /* @__PURE__ */ jsxs130(Box14, { children: [
             /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+            /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
           ] }),
           duration !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
             /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ jsxs130(Typography10, { variant: "body2", children: [
+            /* @__PURE__ */ jsxs130(Typography10, { "data-testid": EVENT_DETAILS_DURATION_TEST_ID, variant: "body2", children: [
               duration,
               "ms"
             ] })
@@ -26583,6 +26617,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
             Chip3,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
+              "data-testid": EVENT_DETAILS_STATUS_TEST_ID,
               label: selectedEvent.status_code === 2 ? "Error" : selectedEvent.status_code === 1 ? "OK" : "Unset",
               size: "small"
             }
@@ -26615,15 +26650,15 @@ var EventDetails = ({ onClose, selectedEvent }) => {
             children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 2, children: [
               requestPayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
                 /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ jsx137(PayloadViewer, { value: requestPayload })
+                /* @__PURE__ */ jsx137(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
               responsePayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
                 /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
-                /* @__PURE__ */ jsx137(PayloadViewer, { value: responsePayload })
+                /* @__PURE__ */ jsx137(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
               exceptionPayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
                 /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ jsx137(PayloadViewer, { value: exceptionPayload })
+                /* @__PURE__ */ jsx137(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
@@ -26646,24 +26681,24 @@ var EventDetails = ({ onClose, selectedEvent }) => {
       /* @__PURE__ */ jsx137(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
         /* @__PURE__ */ jsxs130(Box14, { children: [
           /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.span_id })
+          /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
         ] }),
         /* @__PURE__ */ jsxs130(Box14, { children: [
           /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.trace_id })
+          /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id })
         ] }),
         requestId !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
           /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: requestId })
+          /* @__PURE__ */ jsx137(Typography10, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId })
         ] }),
         eventGroups.info && /* @__PURE__ */ jsx137(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
 };
-var PayloadViewer = memo10(({ value }) => {
+var PayloadViewer = memo10(({ testId, value }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx137(Box14, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx137(Box14, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ jsx137(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -26748,7 +26783,7 @@ var handleStyle = {
 };
 var ServiceNode = memo11(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ jsxs131(Box16, { sx: { maxWidth: 200 }, children: [
+  return /* @__PURE__ */ jsxs131(Box16, { "data-testid": SERVICE_NODE_TEST_ID, sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ jsxs131(
       Box16,
       {
@@ -26811,6 +26846,7 @@ var ServiceNode = memo11(({ data, selected }) => {
           /* @__PURE__ */ jsx139(
             Typography11,
             {
+              "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
               sx: {
                 fontSize: "0.9rem",
                 maxWidth: "100%",
@@ -27012,7 +27048,7 @@ var TraceGraph = ({
     /* @__PURE__ */ jsxs133(
       ReactFlow,
       {
-        "data-testid": "trace-graph",
+        "data-testid": TRACE_GRAPH_TEST_ID,
         edges,
         fitView: true,
         fitViewOptions: initialFocusEventId ? { maxZoom: 1, nodes: [{ id: initialFocusEventId }], padding: 0.2 } : void 0,
@@ -27094,7 +27130,7 @@ var TraceGraphView = ({
   return /* @__PURE__ */ jsxs134(
     Box18,
     {
-      "data-testid": "trace-graph-page",
+      "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
         alignItems: "center",
         display: "flex",
@@ -27311,7 +27347,7 @@ var SpansListPage = () => {
     /* @__PURE__ */ jsx143(
       Box19,
       {
-        "data-testid": "spans-list-page",
+        "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
           alignItems: "center",
           display: "flex",