Merge pull request #329 from TheauW/twartel-error-component

Create the  error component

Author: aldbr

.gitignore

@@ -44,3 +44,6 @@ next-env.d.ts
 
 # storybook
 **/.cache
+
+# vscode
+**/.vscode

docs/developer/contribute.md

@@ -18,7 +18,9 @@
   - Updating or creating Storybook documentation if you are contributing to the `diracx-web-components` library.
 - **Writing/Updating Tests:** When you change or add new code, make sure to write or update tests accordingly. This helps maintain the reliability and stability of the codebase.
 
-**Note:** Don't forget to update the `extensions` code if you integrate breaking changes in the `diracx-web-components` library. See [Managing the extension](manage_extension.md) for further details.
+**Good to know:** If you create an export function or component in `diracx-web-components`, you must add it to the `index.ts` file and run `npm run build` inside `packages/diracx-web-components` to ensure the pre-commit hook passes.
+
+**Note:** Don't forget to update the `packages/extensions` code if you integrate breaking changes in the `diracx-web-components` library. See [Managing the extension](manage_extension.md) for further details. 
 
 ### 3. Commit
 

packages/diracx-web-components/src/components/shared/DataTable.tsx

@@ -640,62 +640,59 @@ export function DataTable<T extends Record<string, unknown>>({
               ))}
             </>
           )}
-          itemContent={(index, row: Row<T>) => (
-            <>
-              <TableCell
-                padding="checkbox"
-                style={{
-                  position: "sticky",
-                  left: 0,
-                  zIndex: 1,
-                  width: checkboxWidth,
-                  backgroundColor:
-                    theme.palette.tableRow !== undefined
-                      ? index % 2 === 0
-                        ? theme.palette.tableRow.odd
-                        : theme.palette.tableRow.even
-                      : theme.palette.background.default,
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                <Checkbox
-                  name={`select-row-${row.id}`}
-                  checked={row.getIsSelected()}
-                  disabled={!row.getCanSelect()}
-                  onChange={row.getToggleSelectedHandler()}
-                />
-              </TableCell>
-              {row.getVisibleCells().map((cell) => (
+          itemContent={(index, row: Row<T>) => {
+            const rowColor =
+              theme.palette.tableRow !== undefined
+                ? index % 2 === 0
+                  ? theme.palette.tableRow.even
+                  : theme.palette.tableRow.odd
+                : theme.palette.background.default;
+            return (
+              <>
                 <TableCell
-                  key={cell.id}
+                  padding="checkbox"
                   style={{
-                    position: cell.column.getIsPinned() ? "sticky" : "static",
-                    left:
-                      cell.column.getIsPinned() === "left"
-                        ? checkboxWidth
-                        : undefined,
-                    right:
-                      cell.column.getIsPinned() === "right" ? 0 : undefined,
-                    zIndex: cell.column.getIsPinned() ? 1 : 0,
-                    width: cell.column.getSize(),
-                    backgroundColor: cell.column.getIsPinned()
-                      ? theme.palette.tableRow !== undefined
-                        ? index % 2 === 0
-                          ? theme.palette.tableRow.odd
-                          : theme.palette.tableRow.even
-                        : theme.palette.background.default
-                      : undefined,
-                    overflow: "hidden",
+                    position: "sticky",
+                    left: 0,
+                    zIndex: 1,
+                    width: checkboxWidth,
+                    backgroundColor: rowColor,
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap",
                   }}
                 >
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  <Checkbox
+                    name={`select-row-${row.id}`}
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
                 </TableCell>
-              ))}
-            </>
-          )}
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell
+                    key={cell.id}
+                    style={{
+                      position: cell.column.getIsPinned() ? "sticky" : "static",
+                      left:
+                        cell.column.getIsPinned() === "left"
+                          ? checkboxWidth
+                          : undefined,
+                      right:
+                        cell.column.getIsPinned() === "right" ? 0 : undefined,
+                      zIndex: cell.column.getIsPinned() ? 1 : 0,
+                      width: cell.column.getSize(),
+                      backgroundColor: rowColor,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </>
+            );
+          }}
         />
         <TablePagination
           component="div"

packages/diracx-web-components/src/components/shared/ErrorBox.tsx

@@ -0,0 +1,37 @@
+import { Box, Alert, AlertTitle, Button } from "@mui/material";
+import ReplayIcon from "@mui/icons-material/Replay";
+
+/**
+ * This component is used to display an error message
+ *
+ * @param s The error message (optional)
+ * @param reset The function to call to reset the error (optional)
+ * @returns Error component
+ */
+export function ErrorBox({ msg, reset }: { msg?: string; reset?: () => void }) {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        height: 1,
+        width: 1,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Alert
+        severity="error"
+        action={
+          reset && (
+            <Button sx={{ color: "black" }} onClick={reset}>
+              <ReplayIcon />
+            </Button>
+          )
+        }
+      >
+        <AlertTitle>Error</AlertTitle>
+        {msg ? msg : "Something went wrong"}
+      </Alert>
+    </Box>
+  );
+}

packages/diracx-web-components/src/components/shared/index.ts

@@ -1,3 +1,4 @@
 export { DataTable } from "./DataTable";
 export { FilterForm } from "./FilterForm";
 export { FilterToolbar } from "./FilterToolbar";
+export { ErrorBox } from "./ErrorBox";

packages/diracx-web-components/stories/ErrorBox.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ErrorBox } from "../src/components/shared/ErrorBox";
+
+const meta = {
+  title: "Shared/ErrorBox",
+  component: ErrorBox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      return <Story />;
+    },
+  ],
+} satisfies Meta<typeof ErrorBox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/diracx-web/src/app/(dashboard)/error.tsx

@@ -1,16 +1,13 @@
 "use client";
 
-export default function Error({
-  _error,
+import { ErrorBox } from "@dirac-grid/diracx-web-components/components";
+
+export default function GlobalError({
+  error,
   reset,
 }: {
-  _error: Error;
+  error: Error;
   reset: () => void;
 }) {
-  return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <button onClick={() => reset()}>Try again</button>
-    </div>
-  );
+  return <ErrorBox msg={error.message} reset={reset} />;
 }

packages/diracx-web/src/app/global-error.tsx

@@ -1,18 +1,13 @@
 "use client";
 
+import { ErrorBox } from "@dirac-grid/diracx-web-components/components";
+
 export default function GlobalError({
-  _error,
+  error,
   reset,
 }: {
-  _error: Error;
+  error: Error;
   reset: () => void;
 }) {
-  return (
-    <html>
-      <body>
-        <h2>Something went wrong!</h2>
-        <button onClick={() => reset()}>Try again</button>
-      </body>
-    </html>
-  );
+  return <ErrorBox msg={error.message} reset={reset} />;
 }

packages/extensions/src/app/(dashboard)/error.tsx

@@ -1,17 +1,13 @@
 "use client";
 
-//Error fallback component
-export default function Error({
+import { ErrorBox } from "@dirac-grid/diracx-web-components/components";
+
+export default function GlobalError({
   error,
   reset,
 }: {
   error: Error;
   reset: () => void;
 }) {
-  return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <button onClick={() => reset()}>Try again</button>
-    </div>
-  );
+  return <ErrorBox msg={error.message} reset={reset} />;
 }

packages/extensions/src/app/global-error.tsx

@@ -1,19 +1,13 @@
 "use client";
 
-// Error fallback
+import { ErrorBox } from "@dirac-grid/diracx-web-components/components";
+
 export default function GlobalError({
   error,
   reset,
 }: {
   error: Error;
   reset: () => void;
 }) {
-  return (
-    <html>
-      <body>
-        <h2>Something went wrong!</h2>
-        <button onClick={() => reset()}>Try again</button>
-      </body>
-    </html>
-  );
+  return <ErrorBox msg={error.message} reset={reset} />;
 }