@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
106 lines (105 loc) • 3.13 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { createStyles } from "@mantine/core";
import { ExclamationTriangleIconMini } from "@airplane/views/icons/index.js";
import { Label } from "../text/Text.js";
import { sendViewMessage } from "../../message/sendViewMessage.js";
const useComponentErrorStateStyles = createStyles((theme) => {
return {
componentError: {
cursor: "pointer",
backgroundColor: theme.colors.red[0],
borderRadius: theme.radius.md,
padding: "4px 10px",
color: theme.colors.red[6],
display: "inline-flex",
flexDirection: "row",
alignItems: "start",
animation: "border-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
"@keyframes border-pulse": {
"0%": {
border: `1px solid ${theme.colors.red[5]}`
},
"50%": {
border: `1px solid ${theme.colors.red[3]}`
},
"100%": {
border: `1px solid ${theme.colors.red[5]}`
}
},
transition: "background-color 0.2s",
"&:hover": {
backgroundColor: theme.colors.red[1]
}
},
warningIcon: {
// margin top with align items start makes the icon align with the text better than align items center
marginTop: 3,
marginRight: 6,
animation: "warning-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
"@keyframes warning-pulse": {
"0%": {
color: theme.colors.red[6]
},
"50%": {
color: theme.colors.red[4]
},
"100%": {
color: theme.colors.red[6]
}
}
},
runErrorMessage: {
fontWeight: 500
}
};
});
const ComponentErrorState = ({
componentName,
onClick
}) => {
const {
classes
} = useComponentErrorStateStyles();
return /* @__PURE__ */ jsxs("div", { className: classes.componentError, onClick, children: [
/* @__PURE__ */ jsx(ExclamationTriangleIconMini, { className: classes.warningIcon }),
/* @__PURE__ */ jsxs(Label, { color: "red", children: [
"Error in ",
componentName ?? "component"
] })
] });
};
const RunErrorComponentErrorState = ({
componentName,
taskSlug,
runID
}) => {
const {
classes
} = useComponentErrorStateStyles();
return /* @__PURE__ */ jsxs("div", { className: classes.componentError, onClick: () => {
sendViewMessage({
type: "debug_panel",
open: true,
activeTab: "activity",
runID
});
}, children: [
/* @__PURE__ */ jsx(ExclamationTriangleIconMini, { className: classes.warningIcon }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(Label, { color: "red", className: classes.runErrorMessage, children: getRunErrorMessage(taskSlug) }),
/* @__PURE__ */ jsxs(Label, { color: "red", children: [
"Unable to load ",
componentName ?? "component"
] })
] })
] });
};
const getRunErrorMessage = (taskSlug) => {
return `Error: Run failed for ${taskSlug ?? "task"}`;
};
export {
ComponentErrorState,
RunErrorComponentErrorState,
getRunErrorMessage
};
//# sourceMappingURL=ComponentErrorState.js.map