@applica-software-guru/react-admin 1.3.125 → 1.3.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.125",
+  "version": "1.3.127",
   "private": false,
   "repository": {
     "type": "git",

package/src/ApplicaAdmin.tsx

@@ -1,6 +1,6 @@
 import { AdminProps, AuthProvider, DataProvider } from 'react-admin';
 import { AppConfigProvider, MenuConfigProvider, MenuPropTypes, ThemeConfig, ThemeConfigProvider } from './contexts';
-import { CatchResult, useCliErrorCatcher } from './dev';
+import { CatchResult, useErrorEventCatcher } from './dev';
 import { GenericErrorPage, Layout, LoginPage, MainIcon, Notification, SmallIcon } from './components';
 import React, { useMemo } from 'react';
 import { useI18nProvider } from './i18n';
@@ -9,7 +9,7 @@ import { MenuProps } from './types';
 import PropTypes from 'prop-types';
 import { QueryClient } from 'react-query';
 import { ThemeCustomization } from './themes';
-
+import { IErrorEventHandler } from './dev/ErrorEventHandler';
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -80,6 +80,16 @@ export type ApplicaAdminProps = AdminProps & {
    * Il provider di dati da utilizzare nell'applicazione.
    */
   authProvider: AuthProvider;
+  /**
+   * Indica l'eventuale handler da utilizzare per la gestione degli errori.
+   * Di default è eseguita una chiamata PUT /api/ui/error con il messaggio di errore "error".
+   * Puoi implementare un tuo handler per gestire gli errori in modo diverso.
+   */
+  errorHandler?: IErrorEventHandler | undefined;
+  /**
+   * Indica il componente da visualizzare in caso di errore.
+   */
+  error: React.Component;
   /**
    * Indica il nome della risorsa REST da utilizzare per la gestione delle notifiche.
    * @default "entities/notification"
@@ -123,34 +133,7 @@ export type ApplicaAdminProps = AdminProps & {
 };
 
 /**
- * Definisce un'applicazione super figa basata su React Admi, Mantis Theme ed il nostro stile.
- * Ogni applicazione che crei dovrebbe partire con un 'C'era una volta un ApplicaAdmin'.
- *
- * @example
- * // Esempio di utilizzo
- * import { ApplicaAdmin } from '@applica-software-guru/react-admin';
- * import { createAuthProvider } from '@applica-software-guru/iam-client';
- * import { createDataProvider } from '@applica-software-guru/crud-client';
- * import * as entities from './entities';
- *
- * const apiUrl = "https://bimbobruno.applica.guru/api";
- * const authProvider = createAuthProvider({ apiUrl });
- * const getToken = async () => await authProvider.getToken();
- * const getHeaders = async () => await authProvider.getHeaders();
- *
- * const dataProvider = createDataProvider({ apiUrl, getToken, getHeaders });
- *
- * const App = () => (
- *  <ApplicaAdmin
- *   apiUrl="https://api.applica.software-guru.it"
- *   dataProvider={dataProvider}
- *   authProvider={authProvider}
- *   menu={menu}
- *   name="Applica Admin"
- *   version="1.0.0">
- *   <Resource name="entities/user" {...entities.user} />
- * </ApplicaAdmin>
- *
+ * Definisce un'applicazione super figa basata su React Admin, Mantis Theme ed il nostro stile.
  * @param {ApplicaAdminProps}
  * @returns {React.ReactElement}
  */
@@ -169,15 +152,17 @@ const ApplicaAdmin = ({
   version,
   dataProvider,
   authProvider,
+  errorHandler,
+  error,
   notification,
   enableNotification,
   enableRegistration,
   enablePasswordRecover,
   ...props
 }: ApplicaAdminProps) => {
-  useCliErrorCatcher({
+  useErrorEventCatcher({
     apiUrl,
-    endpoint: '/cli/error',
+    errorHandler,
     catcherFn: (error: any): CatchResult => {
       const errorMessage = error?.toString();
       const knownErrors = [
@@ -224,10 +209,11 @@ const ApplicaAdmin = ({
           logoIcon={_logoIcon}
           notification={notification}
           enableNotification={enableNotification}
+          error={error}
         />
       );
     },
-    [logoMain, logoIcon, name, version, notification, enableNotification]
+    [logoMain, logoIcon, name, version, error, notification, enableNotification]
   );
   const i18nProvider = useI18nProvider({
     apiUrl: apiUrl,

package/src/components/Layout/Content.tsx

@@ -1,29 +1,50 @@
 import { Box, Container, Toolbar } from '@mui/material';
 import { useLayoutDrawerState, useLayoutMediaState } from './Provider';
 import { useThemeConfig } from '../../hooks';
+import { Loading } from 'ra-ui-materialui';
+import { ErrorInfo, Suspense, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import Error, { ErrorProps } from './Error';
 
-type ILayoutContentProps = React.PropsWithChildren;
+type ILayoutContentProps = React.PropsWithChildren & {
+  error?: React.ComponentType<ErrorProps>;
+};
 
 function LayoutContent(props: ILayoutContentProps) {
   const { width } = useLayoutDrawerState(),
     { horizontal } = useLayoutMediaState(),
     { container } = useThemeConfig();
+  // @ts-ignore
+  const [errorInfo, setErrorInfo] = useState<ErrorInfo>(null);
+  const handleError = (error: Error, info: ErrorInfo) => {
+    setErrorInfo(info);
+  };
+
   return (
-    <Box component="main" sx={{ width: `calc(100% - ${width}px)`, flexGrow: 1, p: { xs: 0, sm: 2, lg: 1 }, pt: { lg: 2 } }}>
-      <Toolbar sx={{ mt: horizontal ? 8 : 'inherit' }} /> {/*Hugh...*/}
-      <Container
-        maxWidth={container ? 'xl' : false}
-        sx={{
-          ...(container && { px: { xs: 0, sm: 2 } }),
-          position: 'relative',
-          minHeight: 'calc(100vh - 110px)',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        {props.children}
-      </Container>
-    </Box>
+    <ErrorBoundary
+      onError={handleError}
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <Error error={error} errorComponent={props.error} errorInfo={errorInfo} resetErrorBoundary={resetErrorBoundary} />
+      )}
+    >
+      <Suspense fallback={<Loading />}>
+        <Box component="main" sx={{ width: `calc(100% - ${width}px)`, flexGrow: 1, p: { xs: 0, sm: 2, lg: 1 }, pt: { lg: 2 } }}>
+          <Toolbar sx={{ mt: horizontal ? 8 : 'inherit' }} /> {/*Hugh...*/}
+          <Container
+            maxWidth={container ? 'xl' : false}
+            sx={{
+              ...(container && { px: { xs: 0, sm: 2 } }),
+              position: 'relative',
+              minHeight: 'calc(100vh - 110px)',
+              display: 'flex',
+              flexDirection: 'column'
+            }}
+          >
+            {props.children}
+          </Container>
+        </Box>
+      </Suspense>
+    </ErrorBoundary>
   );
 }
 

package/src/components/Layout/Error.tsx

@@ -0,0 +1,81 @@
+import { Container, Stack, Typography, Button, useTheme } from '@mui/material';
+import PropTypes from 'prop-types';
+// @ts-ignore
+import imgSrc from '../../assets/generic-error.png';
+import { Title, TitlePropType, useResetErrorBoundaryOnLocationChange } from 'ra-ui-materialui';
+import { ComponentType, ErrorInfo, HtmlHTMLAttributes, useCallback } from 'react';
+import { TitleComponent, useTranslate } from 'ra-core';
+import { FallbackProps } from 'react-error-boundary';
+import History from '@mui/icons-material/History';
+
+export type ErrorBoundaryProps = InternalErrorProps & {
+  errorComponent?: ComponentType<ErrorProps>;
+  title?: TitleComponent;
+  resetErrorBoundary?: null | (() => void);
+};
+
+function goBack() {
+  window.history.go(-1);
+}
+function Error(props: ErrorBoundaryProps) {
+  const { error, errorComponent: ErrorComponent, errorInfo, resetErrorBoundary, title } = props;
+  const translate = useTranslate();
+  const theme = useTheme();
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  useResetErrorBoundaryOnLocationChange(resetErrorBoundary);
+
+  const handleBack = useCallback(() => {
+    goBack();
+  }, []);
+
+  if (ErrorComponent) {
+    return <ErrorComponent error={error} errorInfo={errorInfo} title={title} />;
+  }
+
+  return (
+    <Container>
+      <Stack alignItems="center" px={2} py={{ xs: 4, sm: 8 }} spacing={2} textAlign="center">
+        {title && <Title title={title} />}
+        <img src={imgSrc} style={{ width: '100%', maxWidth: 450, marginTop: theme.spacing(4) }} />
+        <Typography variant="h2">{translate(isProduction ? 'ra.page.error' : error.message, { _: error.message })}</Typography>
+        {!isProduction && <Typography variant="caption">{translate('ra.message.error_more_info')}</Typography>}
+        {errorInfo && (
+          <Typography
+            variant="body1"
+            component="pre"
+            textAlign={isProduction ? 'center' : 'start'}
+            fontFamily={isProduction ? 'inherit' : 'monospace'}
+            sx={{
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word'
+            }}
+          >
+            {isProduction ? translate('ra.message.error') : errorInfo?.componentStack?.substring(0, 250) + '...'}
+          </Typography>
+        )}
+
+        <Button variant="contained" startIcon={<History />} onClick={handleBack}>
+          {translate('ra.action.back')}
+        </Button>
+      </Stack>
+    </Container>
+  );
+}
+Error.propTypes = {
+  className: PropTypes.string,
+  error: PropTypes.object.isRequired,
+  errorInfo: PropTypes.object,
+  title: TitlePropType
+};
+
+interface InternalErrorProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'>, FallbackProps, ErrorProps {
+  className?: string;
+}
+
+export interface ErrorProps extends Pick<FallbackProps, 'error'> {
+  errorInfo?: ErrorInfo;
+  title?: TitleComponent;
+}
+
+export default Error;

package/src/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import { Breadcrumbs } from '../@extended';
 import { Footer } from './Footer';
 import { LayoutContent } from './Content';
 import { LayoutWrapper } from './Wrapper';
-import { LoadingIndicator } from 'ra-ui-materialui';
+import { ErrorProps, LoadingIndicator } from 'ra-ui-materialui';
 import { NavMenu } from './NavMenu';
 import { Navigation } from './Navigation';
 import { Outlet } from 'react-router-dom';
@@ -15,6 +15,7 @@ type ILayoutProps = React.PropsWithChildren<{
   name: string;
   version: string;
   copy?: string;
+  error?: React.ComponentType<ErrorProps>;
 }>;
 
 const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
@@ -34,7 +35,7 @@ const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
       <NavMenu>
         <Navigation />
       </NavMenu>
-      <LayoutContent>
+      <LayoutContent error={props.error}>
         {!isLoading && (
           //@ts-ignore
           <Breadcrumbs

package/src/components/Layout/index.ts

@@ -8,3 +8,4 @@ export * from './Navigation';
 export * from './NavMenu';
 export * from './Provider';
 export * from './Wrapper';
+export * from './Error'

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -15,14 +15,14 @@ import {
   TableRow,
   Typography
 } from '@mui/material';
-import { RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
+import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
 import { styled, useTheme } from '@mui/material/styles';
 
 import { PlusCircleOutlined } from '@ant-design/icons';
 import PropTypes from 'prop-types';
 import { TableFormIteratorContext } from './TableFormIteratorContext';
 import { TableFormIteratorItem } from './TableFormIteratorItem';
-import { UseFieldArrayReturn } from 'react-hook-form';
+import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
 import get from 'lodash/get';
 
 /**
@@ -44,13 +44,27 @@ import get from 'lodash/get';
  * @returns
  */
 const TableFormIterator = (props: TableFormIteratorProps) => {
-  const { children, resource, source, label, disableActions = false, disableAdd = false, disableRemove = false, className, empty, template = {} } = props;
+  const {
+    children,
+    resource,
+    source,
+    label,
+    disableActions = false,
+    disableAdd = false,
+    disableRemove = false,
+    className,
+    empty,
+    template = {}
+  } = props;
   const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
-  const { fields, remove, replace } = useArrayInput(props);
+  const { fields, remove, replace, append } = useArrayInput(props);
+  const { resetField } = useFormContext();
+
   const theme = useTheme();
   const translate = useTranslate();
   const record = useRecordContext(props);
-  const initialDefaultValue = useRef({});
+  const initialDefaultValue = useRef(template || {});
+
   const translateLabel = useTranslateLabel();
   const removeField = useCallback(
     (index: number) => {
@@ -66,6 +80,50 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
     for (const k in initialDefaultValue.current) initialDefaultValue.current[k] = null;
   }
 
+  const addField = useCallback(
+    (item: any = undefined) => {
+      let defaultValue = item;
+      if (item == null) {
+        defaultValue = initialDefaultValue.current;
+        if (
+          Children.count(children) === 1 &&
+          React.isValidElement(Children.only(children)) &&
+          // @ts-ignore
+          !Children.only(children).props.source &&
+          // Make sure it's not a FormDataConsumer
+          // @ts-ignore
+          Children.map(children, (input) => React.isValidElement(input) && input.type !== FormDataConsumer).some(Boolean)
+        ) {
+          // ArrayInput used for an array of scalar values
+          // (e.g. tags: ['foo', 'bar'])
+          defaultValue = '';
+        } else {
+          // ArrayInput used for an array of objects
+          // (e.g. authors: [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Doe' }])
+          defaultValue = defaultValue || ({} as Record<string, unknown>);
+          Children.forEach(children, (input) => {
+            if (React.isValidElement(input) && input.type !== FormDataConsumer && input.props.source) {
+              defaultValue[input.props.source] = input.props.defaultValue ?? null;
+            }
+          });
+        }
+      }
+      const newField = { ...defaultValue, ...template };
+      append(newField);
+      // Make sure the newly added inputs are not considered dirty by react-hook-form
+      resetField(`${source}.${fields.length}`, { defaultValue });
+    },
+    [append, children, resetField, source, fields.length, template]
+  );
+
+  // add field and call the onClick event of the button passed as addButton prop
+  const handleAddButtonClick = (originalOnClickHandler: any) => (event: MouseEvent) => {
+    addField();
+    if (originalOnClickHandler) {
+      originalOnClickHandler(event);
+    }
+  };
+
   const handleArrayClear = useCallback(() => {
     replace([]);
     setConfirmIsOpen(false);
@@ -95,7 +153,7 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
           source,
           disableAdd,
           template,
-          addButton: props?.addButton,
+          onClick: handleAddButtonClick((props?.addButton as any)?.props?.onClick)
         })}
 
         <TableContainer component={Paper} sx={{ mt: 2, border: `1px solid ${tableBorderColor}` }}>
@@ -177,34 +235,25 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
 };
 
 const AddTableRow = (props: any) => {
-  const { label, disableAdd, template = {} } = props;
-  const { append } = useArrayInput(props);
+  const { label, disableAdd, onClick } = props;
   const theme = useTheme();
   // @ts-ignore
   const tableBorderColor = theme.palette.mode === 'dark' ? theme.palette.grey.A400 : theme.palette.grey.A800;
   const iconColor = theme.palette.mode === 'light' ? '#000000' : '#FFFFFF';
 
-  const handleAddButtonClick = useCallback((
-    originalOnClickHandler: React.MouseEventHandler<Element>
-  ) => (event: React.MouseEvent<Element, MouseEvent>) => {
-    append(template);
-    originalOnClickHandler && originalOnClickHandler(event);
-  }, [append, template]);
-
   return (
     <Stack justifyContent={'space-between'} alignItems={'center'} flexDirection={'row'}>
-      <Typography>{label}</Typography>
-      {!disableAdd && (
-        React.isValidElement(props?.addButton) ?
+      {label !== false && <Typography>{label}</Typography>}
+      {!disableAdd &&
+        (React.isValidElement(props?.addButton) ? (
           React.cloneElement(props?.addButton, {
-            onClick: handleAddButtonClick(
-              props?.addButton?.props.onClick
-            ),
-          }) :
-          <IconButton size="small" color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={() => append(template)}>
+            onClick: onClick
+          })
+        ) : (
+          <IconButton size="small" color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={onClick}>
             <PlusCircleOutlined style={{ color: iconColor }} />
           </IconButton>
-      )}
+        ))}
     </Stack>
   );
 };
@@ -222,7 +271,7 @@ const StyledTableFormIterator = styled(TableFormIterator, {
 }));
 
 AddTableRow.propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   source: PropTypes.string,
   defaultValue: PropTypes.any
 };
@@ -237,7 +286,7 @@ TableFormIterator.propTypes = {
   formState: PropTypes.object,
   record: PropTypes.object,
   source: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   resource: PropTypes.string,
   translate: PropTypes.func,
   disableAdd: PropTypes.bool,
@@ -261,7 +310,7 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
     submitFailed?: boolean;
   };
   record?: RaRecord;
-  label?: string;
+  label?: string | boolean;
   resource?: string;
   source?: string;
   sx?: SxProps;

package/src/components/ra-forms/TableForm/TableFormIteratorItem.tsx

@@ -47,14 +47,14 @@ export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorI
               resource,
               disabled,
               ...inputProps,
-              label: false
+              label: ''
             })}
           </TableCell>
         );
       })}
 
       {!disableActions && (
-        <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: 0, pt: 2 }}>
+        <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: 0, pt: 2.5 }}>
           <ActionsMenu horizontal>
             <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
               {translate('ra.action.delete')}

package/src/components/ra-lists/List.tsx

@@ -1,7 +1,122 @@
-import { ListProps, List as RaList } from 'react-admin';
-
+import { TitlePropType, ListProps } from 'react-admin';
 import MainCard from '../MainCard';
 import { styled } from '@mui/system';
+import { ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { ListBase, RaRecord } from 'ra-core';
+import { ListView } from './ListView';
+
+/**
+ * List page component
+ *
+ * The <List> component renders the list layout (title, buttons, filters, pagination),
+ * and fetches the list of records from the REST API.
+ *
+ * It then delegates the rendering of the list of records to its child component.
+ * Usually, it's a <Datagrid>, responsible for displaying a table with one row for each post.
+ *
+ * The <List> component accepts the following props:
+ *
+ * - actions
+ * - aside: Side Component
+ * - children: List Layout
+ * - component
+ * - disableAuthentication
+ * - disableSyncWithLocation
+ * - empty: Empty Page Component
+ * - emptyWhileLoading
+ * - exporter
+ * - filters: Filter Inputs
+ * - filter: Permanent Filter
+ * - filterDefaultValues
+ * - pagination: Pagination Component
+ * - perPage: Pagination Size
+ * - queryOptions
+ * - sort: Default Sort Field & Order
+ * - title
+ * - sx: CSS API
+ *
+ * @example
+ * const postFilters = [
+ *     <TextInput label="Search" source="q" alwaysOn />,
+ *     <TextInput label="Title" source="title" />
+ * ];
+ * export const PostList = () => (
+ *     <List
+ *         title="List of posts"
+ *         sort={{ field: 'published_at' }}
+ *         filter={{ is_published: true }}
+ *         filters={postFilters}
+ *     >
+ *         <Datagrid>
+ *             <TextField source="id" />
+ *             <TextField source="title" />
+ *             <EditButton />
+ *         </Datagrid>
+ *     </List>
+ * );
+ */
+const RaList = <RecordType extends RaRecord = any>({
+  debounce,
+  disableAuthentication,
+  disableSyncWithLocation,
+  exporter,
+  filter = defaultFilter,
+  filterDefaultValues,
+  perPage = 10,
+  queryOptions,
+  resource,
+  sort,
+  storeKey,
+  ...rest
+}: ListProps<RecordType>): ReactElement => (
+  <ListBase<RecordType>
+    debounce={debounce}
+    disableAuthentication={disableAuthentication}
+    disableSyncWithLocation={disableSyncWithLocation}
+    exporter={exporter}
+    filter={filter}
+    filterDefaultValues={filterDefaultValues}
+    perPage={perPage}
+    queryOptions={queryOptions}
+    resource={resource}
+    sort={sort}
+    storeKey={storeKey}
+  >
+    <ListView<RecordType> {...rest} />
+  </ListBase>
+);
+
+// export interface ListProps<RecordType extends RaRecord = any> extends ListControllerProps<RecordType>, ListViewProps {}
+
+RaList.propTypes = {
+  // the props you can change
+  // @ts-ignore-line
+  actions: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+  aside: PropTypes.element,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  emptyWhileLoading: PropTypes.bool,
+  filter: PropTypes.object,
+  filterDefaultValues: PropTypes.object,
+  filters: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  // @ts-ignore-line
+  pagination: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+  perPage: PropTypes.number,
+  //@ts-ignore-line
+  sort: PropTypes.shape({
+    field: PropTypes.string,
+    order: PropTypes.oneOf(['ASC', 'DESC'] as const)
+  }),
+  sx: PropTypes.any,
+  title: TitlePropType,
+  // the props managed by react-admin
+  disableSyncWithLocation: PropTypes.bool,
+  hasCreate: PropTypes.bool,
+  resource: PropTypes.string
+};
+
+const defaultFilter = {};
 
 const ApplicaStyledList = styled(RaList, {
   name: 'RaApplicaList',