@localstack/appinspector-ui 1.0.190 → 1.0.192

package/dist/index.cjs

@@ -13104,7 +13104,7 @@ var ResponsiveTimestampCell = (0, import_react31.memo)(({ date }) => {
 
 // src/dev-settings.tsx
 var React5 = __toESM(require("react"), 1);
-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);
 
@@ -15515,13 +15515,11 @@ var buildTooltipContent = (span) => {
   ] });
 };
 var StatusIconWithTooltip = ({ span }) => {
-  const { warningIcon } = useDevSettings();
   const { error, warning: warning2 } = getSpanIssues(span);
   if (!error && !warning2) return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
-  const iamLevel = getIamSummary(span).level;
   return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { title: buildTooltipContent(span), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: "error.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Cancel, { sx: { color: "error.main" } }) }),
-    warning2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.GppBad, { sx: { color: "warning.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Error, { sx: { color: "warning.main" } }) })
+    error && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Cancel, { sx: { color: "error.main" } }) }),
+    warning2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material2.Error, { sx: { color: "warning.main" } }) })
   ] }) });
 };
 
@@ -16869,9 +16867,7 @@ var StatusIcon = ({ errorLevel }) => {
     case EventLevel.LevelInfo: {
       return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material8.Info, { sx: { color: "gray" } });
     }
-    case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material8.RemoveCircle, { sx: { color: "blue" } });
-    }
+    case EventLevel.LevelPermission:
     case EventLevel.LevelWarning: {
       return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material8.Error, { sx: { color: "orange" } });
     }
@@ -31498,7 +31494,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           variant: "scrollable",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tab, { "data-testid": DETAIL_TAB_DETAILS_TEST_ID, label: "Details", value: "details" }),
-            /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tab, { "data-testid": DETAIL_TAB_REQUEST_TEST_ID, label: "Request", value: "request" }),
+            /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tab, { "data-testid": DETAIL_TAB_REQUEST_TEST_ID, label: "Payload", value: "request" }),
             /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tab, { "data-testid": DETAIL_TAB_RESPONSE_TEST_ID, label: "Response", value: "response" }),
             showError && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tab, { "data-testid": DETAIL_TAB_ERROR_TEST_ID, icon: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Cancel, { color: "error", fontSize: "small" }), iconPosition: "end", label: "Error", value: "error" }),
             showPermissions && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tab, { "data-testid": DETAIL_TAB_PERMISSIONS_TEST_ID, icon: permissionsIcon, iconPosition: "end", label: "Permissions", value: "permissions" }),
@@ -31611,9 +31607,8 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var NodeContent = ({ event, expanded, iamLevel, issues }) => {
+var NodeContent = ({ event, expanded, issues }) => {
   const theme = (0, import_material20.useTheme)();
-  const { warningIcon } = useDevSettings();
   return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react52.Handle, { position: import_react52.Position.Left, style: handleStyle, type: "target" }),
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react52.Handle, { position: import_react52.Position.Right, style: handleStyle, type: "source" }),
@@ -31668,8 +31663,8 @@ var NodeContent = ({ event, expanded, iamLevel, issues }) => {
                 width: "38px"
               },
               children: [
-                issues.error && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: iamLevel === "error" ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) : /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
-                issues.warning && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: iamLevel === "warning" && warningIcon === "iam shield" ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.GppBad, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) : /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Error, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
+                issues.error && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.errorType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Error", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) }) }),
+                issues.warning && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Tooltip, { arrow: true, title: issues.warningType, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { "aria-label": "Warning", role: "img", sx: { display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material12.Error, { sx: { color: theme.palette.warning.main, fontSize: "16px" } }) }) })
               ]
             }
           ),
@@ -31693,17 +31688,20 @@ var ServiceNode = (0, import_react53.memo)(({ data, selected }) => {
   const [isHovered, setIsHovered] = (0, import_react53.useState)(false);
   const nodeRef = (0, import_react53.useRef)(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");