@localstack/appinspector-ui 1.0.190 → 1.0.192

package/dist/index.js

@@ -13117,7 +13117,7 @@ var ResponsiveTimestampCell = memo3(({ date }) => {
 
 // src/dev-settings.tsx
 import * as React5 from "react";
-var DEFAULT_DEV_SETTINGS = { requestTerms: "on", warningIcon: "iam shield", waterfallIssueBackgrounds: "on", waterfallLayout: "tree", waterfallStatusIcons: "first column" };
+var DEFAULT_DEV_SETTINGS = { requestTerms: "on", waterfallIssueBackgrounds: "on", waterfallLayout: "tree", waterfallStatusIcons: "first column" };
 var DevSettingsContext = React5.createContext(DEFAULT_DEV_SETTINGS);
 var useDevSettings = () => React5.useContext(DevSettingsContext);
 
@@ -15366,7 +15366,7 @@ var ServiceCell = memo7(({
 ServiceCell.displayName = "ServiceCell";
 
 // src/components/cells/status-cell.tsx
-import { Cancel as Cancel2, Error as Error2, GppBad } from "@mui/icons-material";
+import { Cancel as Cancel2, Error as Error2 } from "@mui/icons-material";
 import { Box as Box3, Divider, Tooltip as Tooltip3, Typography as Typography3 } from "@mui/material";
 
 // src/utils/iam-utils.ts
@@ -15528,13 +15528,11 @@ var buildTooltipContent = (span) => {
   ] });
 };
 var StatusIconWithTooltip = ({ span }) => {
-  const { warningIcon } = useDevSettings();
   const { error, warning: warning2 } = getSpanIssues(span);
   if (!error && !warning2) return /* @__PURE__ */ jsx125(Fragment2, {});
-  const iamLevel = getIamSummary(span).level;
   return /* @__PURE__ */ jsx125(Tooltip3, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: [
-    error && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ jsx125(GppBad, { sx: { color: "error.main" } }) : /* @__PURE__ */ jsx125(Cancel2, { sx: { color: "error.main" } }) }),
-    warning2 && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ jsx125(GppBad, { sx: { color: "warning.main" } }) : /* @__PURE__ */ jsx125(Error2, { sx: { color: "warning.main" } }) })
+    error && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ jsx125(Cancel2, { sx: { color: "error.main" } }) }),
+    warning2 && /* @__PURE__ */ jsx125(Box3, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ jsx125(Error2, { sx: { color: "warning.main" } }) })
   ] }) });
 };
 
@@ -16884,7 +16882,7 @@ import { Box as Box14, IconButton as IconButton5, Typography as Typography10 } f
 import { useEffect as useEffect12, useMemo as useMemo7, useRef as useRef8, useState as useState10 } from "react";
 
 // src/components/status-icon.tsx
-import { Cancel as Cancel4, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
+import { Cancel as Cancel4, CheckCircle, Error as Error3, Info } from "@mui/icons-material";
 import { Box as Box9 } from "@mui/material";
 import { jsx as jsx132 } from "react/jsx-runtime";
 var StatusIcon = ({ errorLevel }) => {
@@ -16895,9 +16893,7 @@ var StatusIcon = ({ errorLevel }) => {
     case EventLevel.LevelInfo: {
       return /* @__PURE__ */ jsx132(Info, { sx: { color: "gray" } });
     }
-    case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx132(RemoveCircle, { sx: { color: "blue" } });
-    }
+    case EventLevel.LevelPermission:
     case EventLevel.LevelWarning: {
       return /* @__PURE__ */ jsx132(Error3, { sx: { color: "orange" } });
     }
@@ -31524,7 +31520,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           variant: "scrollable",
           children: [
             /* @__PURE__ */ jsx142(Tab, { "data-testid": DETAIL_TAB_DETAILS_TEST_ID, label: "Details", value: "details" }),
-            /* @__PURE__ */ jsx142(Tab, { "data-testid": DETAIL_TAB_REQUEST_TEST_ID, label: "Request", value: "request" }),
+            /* @__PURE__ */ jsx142(Tab, { "data-testid": DETAIL_TAB_REQUEST_TEST_ID, label: "Payload", value: "request" }),
             /* @__PURE__ */ jsx142(Tab, { "data-testid": DETAIL_TAB_RESPONSE_TEST_ID, label: "Response", value: "response" }),
             showError && /* @__PURE__ */ jsx142(Tab, { "data-testid": DETAIL_TAB_ERROR_TEST_ID, icon: /* @__PURE__ */ jsx142(Cancel5, { color: "error", fontSize: "small" }), iconPosition: "end", label: "Error", value: "error" }),
             showPermissions && /* @__PURE__ */ jsx142(Tab, { "data-testid": DETAIL_TAB_PERMISSIONS_TEST_ID, icon: permissionsIcon, iconPosition: "end", label: "Permissions", value: "permissions" }),
@@ -31625,7 +31621,7 @@ import { Background, MarkerType, MiniMap, Position as Position2, ReactFlow, useE
 import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef13, useState as useState15 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Cancel as Cancel6, Error as ErrorIcon4, GppBad as GppBad2 } from "@mui/icons-material";
+import { Cancel as Cancel6, Error as ErrorIcon4 } from "@mui/icons-material";
 import { Box as Box17, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography13, useTheme as useTheme4 } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
@@ -31637,9 +31633,8 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var NodeContent = ({ event, expanded, iamLevel, issues }) => {
+var NodeContent = ({ event, expanded, issues }) => {
   const theme = useTheme4();
-  const { warningIcon } = useDevSettings();
   return /* @__PURE__ */ jsxs132(Fragment11, { children: [
     /* @__PURE__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
     /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
@@ -31694,8 +31689,8 @@ var NodeContent = ({ event, expanded, iamLevel, issues }) => {
                 width: "38px"
               },
               children: [
-                issues.error && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ jsx143(GppBad2, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) : /* @__PURE__ */ jsx143(Cancel6, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
-                issues.warning && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ jsx143(GppBad2, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) : /* @__PURE__ */ jsx143(ErrorIcon4, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
+                issues.error && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ jsx143(Cancel6, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
+                issues.warning && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ jsx143(Box17, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ jsx143(ErrorIcon4, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
               ]
             }
           ),
@@ -31719,17 +31714,20 @@ var ServiceNode = memo11(({ data, selected }) => {
   const [isHovered, setIsHovered] = useState14(false);
   const nodeRef = useRef12(null);
   const issues = getSpanIssues(data.event);
-  const iamLevel = getIamSummary(data.event).level;
   const outlineColor = issues.error ? theme.palette.error.main : issues.warning ? theme.palette.warning.main : void 0;
+  const paper = theme.palette.background.paper;
+  const edgeSx = issues.error && issues.warning ? {
+    background: `linear-gradient(135deg, ${theme.palette.error.main} calc(50% - 1px), ${paper} calc(50% - 1px) calc(50% + 1px), ${theme.palette.warning.main} calc(50% + 1px)) left / 3px 100% no-repeat border-box, linear-gradient(${paper}, ${paper}) padding-box`,
+    borderLeft: "3px solid transparent"
+  } : { backgroundColor: paper, borderLeft: `3px solid ${outlineColor ?? "transparent"}` };
   const sharedBoxSx = {
-    backgroundColor: theme.palette.background.paper,
-    borderLeft: `3px solid ${outlineColor ?? "transparent"}`,
+    ...edgeSx,
     borderRadius: 1,
     cursor: "pointer",
     minWidth: 140,
     outline: selected ? `2px solid ${outlineColor ?? theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
   };
-  const contentProps = { event: data.event, iamLevel, issues };
+  const contentProps = { event: data.event, issues };
   const handleMouseEnter = () => {
     setIsHovered(true);
     const xyNode = nodeRef.current?.closest(".react-flow__node");