@equinor/cpl-error-snackbar-react 0.0.1 → 0.0.3

package/dist/index.d.mts

@@ -65,9 +65,31 @@ interface AccessRequirement {
      */
     wasEvaluated: boolean;
 }
+interface ErrorSnackbarObject {
+    id: string;
+    error: Error;
+    metadata?: object;
+}
 
 interface ErrorSnackbarProps {
+    /**
+     * The error to display.
+     */
     error: Error;
+    /**
+     * Optional metadata to be included when copying the error.
+     *
+     * @example
+     * const errorMetadata = {
+     *   url: 'https://.../api/users'
+     *   method: 'PATCH',
+     *   payload: {
+     *     id: 1,
+     *     username: 'user1'
+     *   }
+     * }
+     */
+    errorMetadata?: object;
     onClose: () => void;
     /**
      * Provide custom icon if needed. Fallback to default 'error_filled' from EDS if not provided.
@@ -80,15 +102,14 @@ interface ErrorSnackbarProps {
      */
     hideCopyToClipboardButton?: boolean;
 }
-declare function ErrorSnackbar({ error, icon, onClose, hideCopyToClipboardButton, }: ErrorSnackbarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Component displaying various errors in as a snackbar. This is a base component and a part of `ErrorSnackbarFixedList`.
+ */
+declare function ErrorSnackbar({ error, errorMetadata: metadata, icon, onClose, hideCopyToClipboardButton, }: ErrorSnackbarProps): react_jsx_runtime.JSX.Element;
 
-interface ErrorSnackbarObject {
-    id: string;
-    error: Error;
-}
 type ErrorSnackbarState = {
     errorSnackbarObjects: ErrorSnackbarObject[];
-    addError: (error: Error) => string;
+    addError: (error: Error, metadata?: object) => string;
     removeErrorSnackbarObjectById: (id: string) => void;
     removeAllErrorSnackbarObjects: () => void;
 };

package/dist/index.d.ts

@@ -65,9 +65,31 @@ interface AccessRequirement {
      */
     wasEvaluated: boolean;
 }
+interface ErrorSnackbarObject {
+    id: string;
+    error: Error;
+    metadata?: object;
+}
 
 interface ErrorSnackbarProps {
+    /**
+     * The error to display.
+     */
     error: Error;
+    /**
+     * Optional metadata to be included when copying the error.
+     *
+     * @example
+     * const errorMetadata = {
+     *   url: 'https://.../api/users'
+     *   method: 'PATCH',
+     *   payload: {
+     *     id: 1,
+     *     username: 'user1'
+     *   }
+     * }
+     */
+    errorMetadata?: object;
     onClose: () => void;
     /**
      * Provide custom icon if needed. Fallback to default 'error_filled' from EDS if not provided.
@@ -80,15 +102,14 @@ interface ErrorSnackbarProps {
      */
     hideCopyToClipboardButton?: boolean;
 }
-declare function ErrorSnackbar({ error, icon, onClose, hideCopyToClipboardButton, }: ErrorSnackbarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Component displaying various errors in as a snackbar. This is a base component and a part of `ErrorSnackbarFixedList`.
+ */
+declare function ErrorSnackbar({ error, errorMetadata: metadata, icon, onClose, hideCopyToClipboardButton, }: ErrorSnackbarProps): react_jsx_runtime.JSX.Element;
 
-interface ErrorSnackbarObject {
-    id: string;
-    error: Error;
-}
 type ErrorSnackbarState = {
     errorSnackbarObjects: ErrorSnackbarObject[];
-    addError: (error: Error) => string;
+    addError: (error: Error, metadata?: object) => string;
     removeErrorSnackbarObjectById: (id: string) => void;
     removeAllErrorSnackbarObjects: () => void;
 };

package/dist/index.js

@@ -107,6 +107,7 @@ var import_styled_components2 = __toESM(require("styled-components"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function ErrorSnackbar({
   error,
+  errorMetadata: metadata,
   icon,
   onClose,
   hideCopyToClipboardButton = false
@@ -160,7 +161,7 @@ function ErrorSnackbar({
           error.traceId
         ] })
       ] }),
-      !hideCopyToClipboardButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyToClipboardButton, { value: JSON.stringify(error, null, 2) }) })
+      !hideCopyToClipboardButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyToClipboardButton, { value: JSON.stringify({ error, metadata }, null, 2) }) })
     ] })
   ] });
 }
@@ -239,9 +240,9 @@ function ErrorSnackbarContextProvider({
     initialErrorSnackbarObjects
   );
   const addError = (0, import_react2.useCallback)(
-    (error) => {
+    (error, metadata) => {
       const id = crypto.randomUUID();
-      setErrorSnackbarObjects([{ id, error }, ...errorSnackbarObjects]);
+      setErrorSnackbarObjects([{ id, error, metadata }, ...errorSnackbarObjects]);
       return id;
     },
     [errorSnackbarObjects]
@@ -269,26 +270,20 @@ function ErrorSnackbarContextProvider({
 // src/ErrorSnackbarFixedList.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ERROR_SNACKBARS_FIXED_WRAPPER_TESTID = "error-snackbars-fixed-wrapper";
+var ERROR_SNACKBARS_FIXED_LIST_TESTID = "error-snackbars-fixed-wrapper";
 function ErrorSnackbarFixedList({
   disablePositionFixed = false,
   errorSnackbarObjects,
   removeErrorSnackbarObjectById
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    FixedWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FixedWrapper, { $disablePositionFixed: disablePositionFixed, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SnackbarList, { "data-testid": ERROR_SNACKBARS_FIXED_LIST_TESTID, children: errorSnackbarObjects.map((errorSnackbarObject) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ErrorSnackbar,
     {
-      $disablePositionFixed: disablePositionFixed,
-      "data-testid": ERROR_SNACKBARS_FIXED_WRAPPER_TESTID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SnackbarList, { children: errorSnackbarObjects.map((errorSnackbarObject) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        ErrorSnackbar,
-        {
-          error: errorSnackbarObject.error,
-          onClose: () => removeErrorSnackbarObjectById(errorSnackbarObject.id)
-        }
-      ) }, errorSnackbarObject.id)) })
+      error: errorSnackbarObject.error,
+      errorMetadata: errorSnackbarObject.metadata,
+      onClose: () => removeErrorSnackbarObjectById(errorSnackbarObject.id)
     }
-  );
+  ) }, errorSnackbarObject.id)) }) });
 }
 var SnackbarList = import_styled_components3.default.ul`
   list-style: none;
@@ -298,6 +293,8 @@ var SnackbarList = import_styled_components3.default.ul`
   width: 50rem;
   max-width: calc(100dvw - 4rem);
 
+  overflow: auto;
+
   // Add gap between list items
   li + li {
     margin-top: 0.5rem;
@@ -308,6 +305,7 @@ var FixedWrapper = import_styled_components3.default.div`
   gap: 0.5rem;
   flex: 1;
   flex-direction: column;
+  align-items: center;
 
   ${({ $disablePositionFixed }) => {
   if ($disablePositionFixed) {
@@ -315,11 +313,11 @@ var FixedWrapper = import_styled_components3.default.div`
   }
   return `
       position: fixed;
+      z-index: 1000;
       bottom: 0;
       left: 0;
       width: 100%;
       max-height: 90%;
-      overflow: auto;
     `;
 }};
 `;
@@ -356,26 +354,7 @@ function parseUnknownError(unknownError) {
     title: getTypedPropertyIfExists(unknownError, "title", "string") || "Unkown Error",
     status: getTypedPropertyIfExists(unknownError, "status", "number") || -1,
     detail: getTypedPropertyIfExists(unknownError, "detail", "string"),
-    error: innerError != null ? innerError : {
-      code: "Forbidden",
-      message: "You do not meet any of the requirements to access the underlying data.",
-      accessRequirements: [
-        {
-          code: "TrustedApplication",
-          description: "Application user (Azure AD Application registration) with established trust.",
-          outcome: "User is not application user.",
-          wasEvaluated: true
-        },
-        {
-          code: "AccountClassification",
-          description: "User must be of type Employee.",
-          outcome: "Your account classification is Consultant.",
-          wasEvaluated: true
-        }
-      ]
-    },
-    traceId: "00-32714e8408ffd5ef675807bfe44f3190-c21117102fa5ac81-00",
-    timestamp: "2024-06-27T11:13:22.0185894+00:00"
+    error: innerError
   };
 }
 function parseInnerError(rawInnerError) {

package/dist/index.mjs

@@ -66,6 +66,7 @@ import styled2 from "styled-components";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ErrorSnackbar({
   error,
+  errorMetadata: metadata,
   icon,
   onClose,
   hideCopyToClipboardButton = false
@@ -119,7 +120,7 @@ function ErrorSnackbar({
           error.traceId
         ] })
       ] }),
-      !hideCopyToClipboardButton && /* @__PURE__ */ jsx2(CopyWrapper, { children: /* @__PURE__ */ jsx2(CopyToClipboardButton, { value: JSON.stringify(error, null, 2) }) })
+      !hideCopyToClipboardButton && /* @__PURE__ */ jsx2(CopyWrapper, { children: /* @__PURE__ */ jsx2(CopyToClipboardButton, { value: JSON.stringify({ error, metadata }, null, 2) }) })
     ] })
   ] });
 }
@@ -198,9 +199,9 @@ function ErrorSnackbarContextProvider({
     initialErrorSnackbarObjects
   );
   const addError = useCallback(
-    (error) => {
+    (error, metadata) => {
       const id = crypto.randomUUID();
-      setErrorSnackbarObjects([{ id, error }, ...errorSnackbarObjects]);
+      setErrorSnackbarObjects([{ id, error, metadata }, ...errorSnackbarObjects]);
       return id;
     },
     [errorSnackbarObjects]
@@ -228,26 +229,20 @@ function ErrorSnackbarContextProvider({
 // src/ErrorSnackbarFixedList.tsx
 import styled3 from "styled-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var ERROR_SNACKBARS_FIXED_WRAPPER_TESTID = "error-snackbars-fixed-wrapper";
+var ERROR_SNACKBARS_FIXED_LIST_TESTID = "error-snackbars-fixed-wrapper";
 function ErrorSnackbarFixedList({
   disablePositionFixed = false,
   errorSnackbarObjects,
   removeErrorSnackbarObjectById
 }) {
-  return /* @__PURE__ */ jsx4(
-    FixedWrapper,
+  return /* @__PURE__ */ jsx4(FixedWrapper, { $disablePositionFixed: disablePositionFixed, children: /* @__PURE__ */ jsx4(SnackbarList, { "data-testid": ERROR_SNACKBARS_FIXED_LIST_TESTID, children: errorSnackbarObjects.map((errorSnackbarObject) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+    ErrorSnackbar,
     {
-      $disablePositionFixed: disablePositionFixed,
-      "data-testid": ERROR_SNACKBARS_FIXED_WRAPPER_TESTID,
-      children: /* @__PURE__ */ jsx4(SnackbarList, { children: errorSnackbarObjects.map((errorSnackbarObject) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
-        ErrorSnackbar,
-        {
-          error: errorSnackbarObject.error,
-          onClose: () => removeErrorSnackbarObjectById(errorSnackbarObject.id)
-        }
-      ) }, errorSnackbarObject.id)) })
+      error: errorSnackbarObject.error,
+      errorMetadata: errorSnackbarObject.metadata,
+      onClose: () => removeErrorSnackbarObjectById(errorSnackbarObject.id)
     }
-  );
+  ) }, errorSnackbarObject.id)) }) });
 }
 var SnackbarList = styled3.ul`
   list-style: none;
@@ -257,6 +252,8 @@ var SnackbarList = styled3.ul`
   width: 50rem;
   max-width: calc(100dvw - 4rem);
 
+  overflow: auto;
+
   // Add gap between list items
   li + li {
     margin-top: 0.5rem;
@@ -267,6 +264,7 @@ var FixedWrapper = styled3.div`
   gap: 0.5rem;
   flex: 1;
   flex-direction: column;
+  align-items: center;
 
   ${({ $disablePositionFixed }) => {
   if ($disablePositionFixed) {
@@ -274,11 +272,11 @@ var FixedWrapper = styled3.div`
   }
   return `
       position: fixed;
+      z-index: 1000;
       bottom: 0;
       left: 0;
       width: 100%;
       max-height: 90%;
-      overflow: auto;
     `;
 }};
 `;
@@ -315,26 +313,7 @@ function parseUnknownError(unknownError) {
     title: getTypedPropertyIfExists(unknownError, "title", "string") || "Unkown Error",
     status: getTypedPropertyIfExists(unknownError, "status", "number") || -1,
     detail: getTypedPropertyIfExists(unknownError, "detail", "string"),
-    error: innerError != null ? innerError : {
-      code: "Forbidden",
-      message: "You do not meet any of the requirements to access the underlying data.",
-      accessRequirements: [
-        {
-          code: "TrustedApplication",
-          description: "Application user (Azure AD Application registration) with established trust.",
-          outcome: "User is not application user.",
-          wasEvaluated: true
-        },
-        {
-          code: "AccountClassification",
-          description: "User must be of type Employee.",
-          outcome: "Your account classification is Consultant.",
-          wasEvaluated: true
-        }
-      ]
-    },
-    traceId: "00-32714e8408ffd5ef675807bfe44f3190-c21117102fa5ac81-00",
-    timestamp: "2024-06-27T11:13:22.0185894+00:00"
+    error: innerError
   };
 }
 function parseInnerError(rawInnerError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/cpl-error-snackbar-react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",