@applica-software-guru/react-admin 1.3.126 → 1.3.128

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.126",
+  "version": "1.3.128",
   "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/LongForm/hooks.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router';
 
 function useIsActive(id: string): boolean {
   const activeItem = useActiveItem();
-  return isChild(id, activeItem ?? '');
+  return id === activeItem || isChild(id, activeItem ?? '');
 }
 
 function useChildren(id?: string): Array<IItem> {

package/src/components/ra-forms/LongForm/utils.ts

@@ -7,7 +7,9 @@ function getId(data: Optional<Pick<IItem, 'id' | 'label'>, 'id'>): string {
 }
 
 function isChild(parentId: string, childId: string): boolean {
-  return childId.match(new RegExp(`^${parentId}`)) !== null;
+  const regExpString = `^${parentId}.`.replaceAll('.', '\\.'),
+    regExp = new RegExp(regExpString, 'g');
+  return childId.match(regExp) !== null;
 }
 
 function getItemsIds(items: Array<IItem>): Array<string> {

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',