@localstack/appinspector-ui 1.0.17 → 1.0.19

package/dist/index.cjs

@@ -2535,11 +2535,9 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
 // src/components/cells/pill-cell.tsx
 var import_material3 = require("@mui/material");
 var import_jsx_runtime123 = require("react/jsx-runtime");
-var defaultBackgroundColor = "background.paper";
-var defaultBorderColor = "palette.divider";
 var PillCell = ({
-  backgroundColor = defaultBackgroundColor,
-  borderColor = defaultBorderColor,
+  backgroundColor,
+  borderColor,
   borderWidth = "1px",
   children,
   height = "24px",
@@ -2551,8 +2549,8 @@ var PillCell = ({
     {
       sx: {
         alignItems: "center",
-        backgroundColor,
-        borderColor,
+        backgroundColor: backgroundColor ?? ((theme) => theme.palette.background.paper),
+        borderColor: borderColor ?? ((theme) => theme.palette.divider),
         borderRadius: "16px",
         borderStyle: "solid",
         borderWidth,
@@ -2572,7 +2570,7 @@ var PillCell = ({
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var truncateName = (inputString, truncateLength = 15) => inputString.length > truncateLength ? `${inputString.slice(0, truncateLength - 3)}...` : inputString;
 var ServiceCell = ({
-  borderColor = defaultBorderColor,
+  borderColor,
   borderWidth,
   height = "24px",
   resource,
@@ -2582,31 +2580,28 @@ var ServiceCell = ({
   width = "32px"
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(PillCell, { borderColor, borderWidth, height, children: [
-    showIcon ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      import_material4.Box,
-      {
-        sx: {
-          alignItems: "center",
-          borderRightColor: borderColor,
-          borderRightStyle: "solid",
-          borderRightWidth: `1px`,
-          display: "flex",
-          height,
-          justifyContent: "center",
-          overflow: "hidden",
-          padding: 0,
-          width
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
-      }
-    ) : void 0,
+    showIcon ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.Box,
+        {
+          sx: {
+            alignItems: "center",
+            display: "flex",
+            height,
+            justifyContent: "center",
+            overflow: "hidden",
+            padding: 0,
+            width
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" })
+    ] }) : void 0,
     /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
       import_material4.Typography,
       {
         sx: {
-          borderRightColor: resource ? borderColor : "none",
-          borderRightStyle: resource ? "solid" : "none",
-          borderRightWidth: resource ? "1px" : "none",
           fontWeight: "bold",
           overflow: "hidden",
           padding: "1px 8px",
@@ -2625,21 +2620,24 @@ var ServiceCell = ({
         children: service
       }
     ),
-    resource ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      import_material4.Typography,
-      {
-        sx: {
-          borderBottomRightRadius: "15px",
-          borderTopRightRadius: "15px",
-          overflow: "hidden",
-          padding: "1px 8px",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        variant: "body2",
-        children: truncateName(resource, truncateLength)
-      }
-    ) : void 0
+    resource ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.Typography,
+        {
+          sx: {
+            borderBottomRightRadius: "15px",
+            borderTopRightRadius: "15px",
+            overflow: "hidden",
+            padding: "1px 8px",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          variant: "body2",
+          children: truncateName(resource, truncateLength)
+        }
+      )
+    ] }) : void 0
   ] }) });
 };
 ServiceCell.displayName = "ServiceCell";
@@ -4736,13 +4734,12 @@ function shallow$1(objA, objB) {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_jsx_runtime140 = require("react/jsx-runtime");
 var selector = (s) => ({
-  ariaLabelConfig: s.ariaLabelConfig,
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
 var Controls = (0, import_react17.memo)(() => {
-  const { ariaLabelConfig, maxZoomReached, minZoomReached } = (0, import_react16.useStore)(selector, shallow$1);
+  const { maxZoomReached, minZoomReached } = (0, import_react16.useStore)(selector, shallow$1);
   const { fitView, zoomIn, zoomOut } = (0, import_react16.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
@@ -4756,7 +4753,6 @@ var Controls = (0, import_react17.memo)(() => {
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
     import_material19.Box,
     {
-      "aria-label": ariaLabelConfig["controls.ariaLabel"],
       sx: {
         bottom: 0,
         display: "flex",
@@ -4771,35 +4767,29 @@ var Controls = (0, import_react17.memo)(() => {
         /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
           import_material19.IconButton,
           {
-            "aria-label": ariaLabelConfig["controls.zoomIn.ariaLabel"],
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            title: ariaLabelConfig["controls.zoomIn.ariaLabel"],
             children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material10.Add, {})
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
           import_material19.IconButton,
           {
-            "aria-label": ariaLabelConfig["controls.zoomOut.ariaLabel"],
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            title: ariaLabelConfig["controls.zoomOut.ariaLabel"],
             children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material10.Remove, {})
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
           import_material19.IconButton,
           {
-            "aria-label": ariaLabelConfig["controls.fitView.ariaLabel"],
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            title: ariaLabelConfig["controls.fitView.ariaLabel"],
             children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material10.FitScreen, {})
           }
         )
@@ -4970,6 +4960,7 @@ var StyledDrawer = (0, import_styles.styled)(import_material21.Drawer)(() => ({
 var TraceGraphView = ({
   fetchError,
   fetchSpans,
+  handleClose,
   handleEventSelect,
   handleRetry,
   loading,
@@ -5046,7 +5037,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(EventDetails, { selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -5124,6 +5115,9 @@ var TraceGraphPage = () => {
     {
       fetchError,
       fetchSpans: () => void fetchSpans(),
+      handleClose: () => {
+        setOpen(false);
+      },
       handleEventSelect,
       handleRetry,
       loading,