@applica-software-guru/react-admin 1.4.0-beta.7 → 1.4.0-beta.8

package/dist/themes/overrides/Dialog.d.ts

@@ -1,10 +1,19 @@
-export default function Dialog(): {
+export default function Dialog(theme: any): {
     MuiDialog: {
         styleOverrides: {
             root: {
                 '& .MuiBackdrop-root': {
                     backgroundColor: string;
                 };
+                '& .MuiCardContent-root': {
+                    [x: number]: {
+                        paddingBottom: string;
+                    };
+                };
+                '& .MuiPaper-root:has(.tabbed-form)': {
+                    overflowY: string;
+                    width: string;
+                };
             };
         };
     };

package/dist/themes/overrides/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/Dialog.jsx"],"names":[],"mappings":"AAKA;;;;;;;;;;EAYC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/Dialog.jsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;EAqBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.4.0-beta.7",
+  "version": "1.4.0-beta.8",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/ActionsMenu.tsx

@@ -17,7 +17,6 @@ const StyledMenuPopover = styled(MenuPopover, {
   '& .MuiMenuItem-root': {
     padding: 0,
     margin: 0,
-    // backgroundColor: theme.palette.background.paper,
     '& .MuiButton-startIcon': {
       marginRight: theme.spacing(0)
     }
@@ -65,8 +64,6 @@ export function ActionsMenu({ horizontal = false, children }: ActionsMenuProps):
   }
 
   const handleOnClick = useCallback((e: any) => {
-    e.stopPropagation();
-    e.preventDefault();
     setOpen(null);
 
     if (typeof e.currentTarget?.onClick === 'function') {

package/src/components/Layout/Navigation/NavGroup.tsx

@@ -1,12 +1,11 @@
 import { Box, ClickAwayListener, List, ListItemButton, ListItemIcon, ListItemText, Paper, Popper, Typography, Theme } from '@mui/material';
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
-import { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import { useMenuConfig } from '../../../hooks';
 
 import NavCollapse from './NavCollapse';
 import NavItem from './NavItem';
-import PropTypes from 'prop-types';
 import { Transitions } from '../../@extended';
 import { useTranslate } from 'react-admin';
 import { useLayoutMediaState } from '../Provider';
@@ -336,15 +335,4 @@ const NavGroup = ({
   );
 };
 
-NavGroup.propTypes = {
-  item: PropTypes.object,
-  lastItem: PropTypes.number,
-  remItems: PropTypes.array,
-  lastItemId: PropTypes.string,
-  setSelectedItems: PropTypes.func,
-  selectedItems: PropTypes.string,
-  setSelectedLevel: PropTypes.func,
-  selectedLevel: PropTypes.number
-};
-
 export { NavGroup };

package/src/components/Layout/Provider.tsx

@@ -132,8 +132,6 @@ const DefaultState: ILayoutState = {
 
 function LayoutProvider(props: ILayoutProviderProps) {
   const authProvider = useAuthProvider<IApplicaAuthProvider>();
-  // eslint-disable-next-line no-console
-  console.log('authProvider: ', authProvider);
   const identity = useGetIdentity() as UseGetIdentityResult,
     theme = useTheme(),
     downMd = useMediaQuery(theme.breakpoints.down('md')),

package/src/components/MenuPopover/styles.jsx

@@ -5,8 +5,7 @@ export const StyledArrow = styled('span')(({ arrow, theme }) => {
 
   const POSITION = -(SIZE / 2);
 
-  const borderStyle =
-    theme.palette.mode === 'dark' ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${alpha(theme.palette.grey[500], 0.12)}`;
+  const borderStyle = theme.palette.mode === 'dark' ? `none` : `solid 1px ${alpha(theme.palette.grey[500], 0.12)}`;
 
   const topStyle = {
     borderRadius: '0 0 3px 0',
@@ -31,7 +30,7 @@ export const StyledArrow = styled('span')(({ arrow, theme }) => {
 
   const rightStyle = {
     borderRadius: '0 0 0 3px',
-    right: POSITION - 1,
+    right: POSITION,
     borderBottom: borderStyle,
     borderLeft: borderStyle
   };

package/src/components/ra-buttons/CreateInDialogButton.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   CreateButtonClasses,
   CreateContextProvider,
+  CreateControllerProps,
   CreateControllerResult,
   RedirectionSideEffect,
   SaveButton,
@@ -9,16 +10,17 @@ import {
   useNotify,
   useRedirect,
   useResourceContext,
-  useTranslate
+  useTranslate,
+  UseCreateMutateParams
 } from 'react-admin';
-import { Dialog, Fab, useMediaQuery, useTheme } from '@mui/material';
+import { Dialog, Fab, useMediaQuery } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { SxProps, Theme, styled } from '@mui/material/styles';
-import { PlusCircleOutlined } from '@ant-design/icons';
 import { Toolbar } from '../ra-forms';
 import clsx from 'clsx';
 import { useAppConfig } from '../../hooks';
 import { useQueryClient } from 'react-query';
+import ContentAdd from '@mui/icons-material/Add';
 
 const updateColl = (old: any, data: any) => {
   const id = data.id;
@@ -38,13 +40,23 @@ const setManyQueryData = (coll: any, data: any) => (coll && coll.length > 0 ? up
 const setListQueryData = (res: any, data: any) =>
   res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
 
-export type CreateInDialogContentProps = {
+export type CreateInDialogContentProps = CreateControllerProps & {
   onClose: () => void;
   record?: any;
   redirect: RedirectionSideEffect | boolean | undefined;
   children: React.ReactElement;
+  /**
+   * You can use it to handle the form submission yourself.
+   * Good luck with that.
+   */
   onSubmit?: (record: any, close: () => void) => void;
-  onSuccess?: (data: any) => void;
+  /**
+   * @deprecated Use mutationOptions.onSuccess instead
+   */
+  onSuccess?: (data: any, close: () => void) => void;
+  /**
+   * @deprecated Use mutationOptions.onError instead
+   */
   onError?: (error: any) => void;
 };
 
@@ -55,14 +67,15 @@ const CreateInDialogContent = ({
   redirect: _redirect = false,
   onSubmit,
   onSuccess,
-  onError
+  onError,
+  ...props
 }: CreateInDialogContentProps) => {
   const queryClient = useQueryClient();
   const resource = useResourceContext();
   const redirect = useRedirect();
   const notify = useNotify();
   const handleSuccess = useCallback(
-    (data: any) => {
+    (data: any, variables: UseCreateMutateParams<any>, context: unknown) => {
       const now = Date.now();
       const updatedAt = now;
 
@@ -81,13 +94,18 @@ const CreateInDialogContent = ({
         redirect(_redirect as RedirectionSideEffect, resource, data.id, data);
       }
       if (onSuccess) {
-        onSuccess(data);
+        onSuccess(data, onClose);
+      }
+      if (props?.mutationOptions?.onSuccess) {
+        props.mutationOptions.onSuccess(data, variables, { ...(context as any), onClose });
       }
     },
     [onClose, onSuccess, queryClient, resource, notify, redirect, _redirect]
   );
   const { save, ...createProps } = useCreateController({
+    ...props,
     mutationOptions: {
+      ...props?.mutationOptions,
       onSuccess: handleSuccess,
       onError: onError
     }
@@ -115,6 +133,7 @@ const CreateInDialogContent = ({
     >
       {React.cloneElement(children, {
         ...children.props,
+        modal: true,
         toolbar: (
           <Toolbar>
             <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} disabled={createProps?.saving} />
@@ -144,7 +163,7 @@ const StyledFab = styled(Fab, { overridesResolver: (_props, styles) => styles.ro
   }
 }));
 
-export type CreateInDialogButtonProps = {
+export type CreateInDialogButtonProps = CreateControllerProps & {
   fullWidth?: boolean;
   maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
   label?: string;
@@ -159,8 +178,18 @@ export type CreateInDialogButtonProps = {
    * If set to false, the button will always render as a regular button, regardless of the screen size.
    */
   fab: boolean;
+  /**
+   * @deprecated Use mutationOptions.onSubmit instead
+   */
   onSubmit?: (record: any, close: () => void) => void;
+  /**
+   * @deprecated Use mutationOptions.onSuccess instead
+   */
   onSuccess?: (data: any) => void;
+  /**
+   *
+   * @deprecated Use mutationOptions.onError instead
+   */
   onError?: (error: any) => void;
 };
 
@@ -181,14 +210,12 @@ export function CreateInDialogButton({
   onSubmit,
   onSuccess,
   onError,
-  ...props
+  ...controllerProps
 }: CreateInDialogButtonProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const translate = useTranslate();
   const resource = useResourceContext();
   const { openDialog, closeDialog } = useAppConfig();
-  const theme = useTheme();
-
   const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
   const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
   const isSmall = fab && useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
@@ -196,7 +223,6 @@ export function CreateInDialogButton({
     <>
       {isSmall ? (
         <StyledFab
-          {...props}
           // @ts-ignore
           state={scrollStates[String(scrollToTop)]}
           color="primary"
@@ -204,29 +230,16 @@ export function CreateInDialogButton({
           aria-label={label && translate(label)}
           onClick={handleOpen}
         >
-          <PlusCircleOutlined />
+          <ContentAdd />
         </StyledFab>
       ) : (
-        <Button {...props} sx={sx} label={label} onClick={handleOpen} style={style}>
-          <PlusCircleOutlined />
+        <Button sx={sx} label={label} onClick={handleOpen} style={style}>
+          <ContentAdd />
         </Button>
       )}
-      <Dialog
-        open={open}
-        scroll="body"
-        sx={{
-          '& .MuiToolbar-root': {
-            borderTop: `1px solid ${theme.palette.divider}`,
-            position: 'initial',
-            padding: 2.5
-          }
-        }}
-        onClose={handleClose}
-        fullWidth={fullWidth}
-        maxWidth={maxWidth}
-      >
+      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
         <CreateInDialogContent
-          {...props}
+          {...controllerProps}
           redirect={redirect}
           record={record}
           onClose={handleClose}

package/src/components/ra-buttons/EditInDialogButton.tsx

@@ -2,6 +2,7 @@
 import {
   Button,
   EditContextProvider,
+  EditControllerProps,
   SaveButton,
   useEditController,
   useGetOne,
@@ -11,36 +12,44 @@ import {
 } from 'react-admin';
 import React, { useCallback, useState } from 'react';
 
-import { Breakpoint, Dialog, useTheme } from '@mui/material';
+import { Breakpoint, Dialog } from '@mui/material';
 import { Edit } from '@mui/icons-material';
 import { Toolbar } from '../ra-forms';
 import { useAppConfig } from '../../hooks';
 
-type EditInDialogContentProps = {
+type EditInDialogContentProps = EditControllerProps & {
   onClose: () => void;
   children: React.ReactElement;
 };
-const EditInDialogContent = ({ onClose, children }: EditInDialogContentProps) => {
+const EditInDialogContent = ({ onClose, children, mutationMode = 'pessimistic', ...props }: EditInDialogContentProps) => {
   const notify = useNotify();
   const record = useRecordContext();
   const resource = useResourceContext();
   const { id } = record;
   const { isLoading, data } = useGetOne(resource, { id });
 
-  const handleSuccess = useCallback(() => {
-    notify('ra.notification.updated', {
-      type: 'info',
-      messageArgs: {
-        smart_count: 1
+  const handleSuccess = useCallback(
+    (...args: any) => {
+      notify('ra.notification.updated', {
+        type: 'info',
+        messageArgs: {
+          smart_count: 1
+        }
+      });
+      onClose();
+      if (props.onSuccess) {
+        props.onSuccess(...args);
       }
-    });
-    onClose();
-  }, [onClose, notify]);
+    },
+    [onClose, notify]
+  );
   const { save, saving } = useEditController({
+    ...props,
     resource,
     id,
-    mutationMode: 'pessimistic',
+    mutationMode,
     mutationOptions: {
+      ...props?.mutationOptions,
       onSuccess: handleSuccess
     }
   });
@@ -56,6 +65,8 @@ const EditInDialogContent = ({ onClose, children }: EditInDialogContentProps) =>
       }}
     >
       {React.cloneElement(children, {
+        ...children.props,
+        modal: true,
         toolbar: (
           <Toolbar>
             <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
@@ -67,7 +78,7 @@ const EditInDialogContent = ({ onClose, children }: EditInDialogContentProps) =>
   );
 };
 
-export type EditInDialogButtonProps = {
+export type EditInDialogButtonProps = EditControllerProps & {
   fullWidth?: boolean;
   maxWidth?: false | Breakpoint | undefined;
   label?: string;
@@ -80,6 +91,7 @@ export function EditInDialogButton({
   maxWidth = 'md',
   label = 'ra.action.edit',
   style,
+  children,
   ...props
 }: EditInDialogButtonProps): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -87,28 +99,15 @@ export function EditInDialogButton({
   const resource = useResourceContext();
   const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
   const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
-  const theme = useTheme();
-
   return (
     <>
       <Button label={label} onClick={handleOpen} style={style}>
         <Edit />
       </Button>
-      <Dialog
-        open={open}
-        scroll="body"
-        sx={{
-          '& .MuiToolbar-root': {
-            borderTop: `1px solid ${theme.palette.divider}`,
-            position: 'initial',
-            padding: 2.5
-          }
-        }}
-        onClose={handleClose}
-        fullWidth={fullWidth}
-        maxWidth={maxWidth}
-      >
-        <EditInDialogContent onClose={handleClose}>{props?.children}</EditInDialogContent>
+      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
+        <EditInDialogContent {...props} onClose={handleClose}>
+          {children}
+        </EditInDialogContent>
       </Dialog>
     </>
   );

package/src/components/ra-fields/ReferenceManyField.tsx

@@ -37,8 +37,7 @@ const StyledRoot = styled(StyledDiv, { slot: 'root' })(({ theme, bulkActionButto
         },
         [theme.breakpoints.down('md')]: {
           marginTop: 0,
-          display: 'none',
-          visibility: 'hidden'
+          display: 'contents'
         }
       }
     },

package/src/components/ra-forms/CardForm.tsx

@@ -71,10 +71,10 @@ const StyledForm = styled(Form, { slot: 'root' })(({ theme, spacing }: StyledFor
     minHeight: 'unset'
   },
   '& .RaToolbar-mobileToolbar': {
-    paddingTop: '20px !important',
+    paddingTop: `${theme.spacing(2.5)} !important`,
     paddingRight: '0 !important',
     paddingLeft: '0 !important',
-    paddingBottom: 0,
+    paddingBottom: '0 !important',
   }
 }));
 

package/src/components/ra-forms/Create.tsx

@@ -83,8 +83,8 @@ export const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }) =
   },
   '& .RaToolbar-mobileToolbar': {
     position: 'initial !important',
-    paddingLeft: '20px !important',
-    paddingRight: '20px !important',
+    paddingLeft: `${theme.spacing(2.5)} !important`,
+    paddingRight: `${theme.spacing(2.5)} !important`,
     paddingTop: '0 !important',
   },
   // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.

package/src/components/ra-forms/Edit.tsx

@@ -16,8 +16,8 @@ const StyledEdit = styled(RaEdit, { slot: 'root' })(({ theme }) => ({
 
   '& .RaToolbar-mobileToolbar': {
     position: 'initial !important',
-    paddingLeft: '20px !important',
-    paddingRight: '20px !important',
+    paddingLeft: `${theme.spacing(2.5)} !important`,
+    paddingRight: `${theme.spacing(2.5)} !important`,
     paddingTop: '0 !important'
   },
   '& .RaEdit-main': {

package/src/components/ra-forms/LongForm/BaseForm.tsx

@@ -31,7 +31,7 @@ const StyledGrid = styled(Grid, {
   },
   '& .RaToolbar-mobileToolbar': {
     position: 'initial !important',
-    paddingTop: '20px !important',
+    paddingTop: `${theme.spacing(2.5)} !important`,
     paddingLeft: '0 !important',
     paddingRight: '0 !important',
     paddingBottom: '0 !important',

package/src/components/ra-forms/SimpleForm.tsx

@@ -5,19 +5,16 @@ import {
   SaveButton,
   useRecordContext
 } from 'react-admin';
-import { styled } from '@mui/system';
+import { styled, useTheme } from '@mui/system';
 import { useResourceTitle } from '../../hooks';
 import ActionsMenu from '../ActionsMenu';
 import MainCard from '../MainCard';
 import Toolbar from './Toolbar';
 
-const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme, modal }: { theme: any; modal: boolean }) => ({
-  '& .MuiGrid-root.MuiGrid-container': {
-    paddingBottom: theme.spacing(modal ? 0 : 2.5)
-  } as any,
-  // [theme.breakpoints.down('sm')]: {
-  paddingBottom: '0 !important',
-  // }
+const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
+  [theme.breakpoints.down('sm')]: {
+    paddingBottom: `${theme.spacing(2.5)}`
+  }
 }));
 
 export type SimpleFormProps = RaSimpleFormProps & {
@@ -49,6 +46,7 @@ export function SimpleForm({
 }: SimpleFormProps): JSX.Element {
   const cardTitle = useResourceTitle(title);
   const record = useRecordContext();
+  const theme = useTheme();
   return (
     // @ts-ignore
     <MainCard
@@ -59,9 +57,12 @@ export function SimpleForm({
       sx={{
         ...sx,
         '& .MuiToolbar-root': {
-          paddingLeft: 2.5,
-          paddingRight: 2.5,
-          paddingBottom: 2.5
+          position: 'initial',
+          paddingLeft: theme.spacing(2.5),
+          paddingRight: theme.spacing(2.5),
+          paddingBottom: theme.spacing(2.5),
+          paddingTop: modal ? theme.spacing(2.5) : 0,
+          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined,
         }
       }}
       border={!modal}

package/src/components/ra-forms/TabbedForm.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import {
   TabbedForm as RaTabbedForm,
@@ -25,9 +25,9 @@ export type TabbedFormProps = RaTabbedFormProps & {
   noPadding?: boolean;
 };
 
-const StyledTabbedForm = styled(RaTabbedForm, { slot: 'Root' })(({ theme, modal }: { theme: any; modal: boolean }) => ({
+const StyledTabbedForm = styled(RaTabbedForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
   '& .MuiGrid-root.MuiGrid-container': {
-    paddingBottom: theme.spacing(modal ? 0 : 1)
+    paddingBottom: 0
   } as any,
   [theme.breakpoints.down('sm')]: {
     paddingBottom: 0,
@@ -62,6 +62,7 @@ export function TabbedForm(props: TabbedFormProps): JSX.Element {
     ...rest
   } = props;
   const title = useResourceTitle(_title);
+  const theme = useTheme();
 
   return (
     <MainCard
@@ -76,16 +77,17 @@ export function TabbedForm(props: TabbedFormProps): JSX.Element {
           m: 2.5,
           mb: 0
         },
-        '& .tabbed-form .MuiDivider-root': {
+        '& .tabbed-form > .MuiDivider-root': {
           ml: 2.5,
           mr: 2.5
         },
         '& .MuiToolbar-root.RaToolbar-desktopToolbar': {
           position: 'initial',
-          paddingTop: 0
+          paddingTop: modal ? theme.spacing(2.5) : 0
         },
         '& .MuiToolbar-root': {
-          padding: 2.5
+          padding: theme.spacing(2.5),
+          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined
         }
       }}
       border={!modal}

package/src/components/ra-pages/RecoverPage.tsx

@@ -29,7 +29,7 @@ const RecoverPage = ({ name, copy, logo, version, background }: BaseAuthProps) =
         redirect('/login');
       })
       .catch((error: any) => {
-        notify(error, { type: 'error' });
+        notify(error?.message || error?.toString(), { type: 'error' });
       })
       .finally(() => setLoading(false));
   };

package/src/contexts/MenuConfigContext.tsx

@@ -1,6 +1,5 @@
 import { MenuProps } from '../types';
-import { createContext, useEffect } from 'react';
-import { useLocalStorage } from '../hooks';
+import { createContext, useEffect, useState } from 'react';
 
 export type MenuConfigContextProps = {
   openItem: string[];
@@ -40,7 +39,7 @@ export type MenuConfigProviderProps = {
 };
 
 const MenuConfigProvider = ({ menu, children }: MenuConfigProviderProps) => {
-  const [menuConfig, setMenuConfig] = useLocalStorage('menu-config', { ...initialState, menu }) as any;
+  const [menuConfig, setMenuConfig] = useState({ ...initialState, menu }) as any;
   const setMenu = (menu: MenuProps) => setMenuConfig((menuConfig: MenuConfigContextProps) => ({ ...menuConfig, menu }));
   const activeItem = (openItem: string) => setMenuConfig((menuConfig: MenuConfigContextProps) => ({ ...menuConfig, openItem }));
   const activeID = (selectedID: string) => setMenuConfig((menuConfig: MenuConfigContextProps) => ({ ...menuConfig, selectedID }));

package/src/dev/ErrorEventHandler.ts

@@ -39,9 +39,9 @@ class ErrorEventHandler implements IErrorEventHandler {
         column: error.colno,
         stack: error.error?.stack,
       })
-    }).catch(() => {
+    }).catch((error) => {
       // eslint-disable-next-line no-console
-      console.log('Unable to send error to server');
+      console.warn('Unable to send error to server', error);
       this.#handledErrors.delete(hash);
     });
     return;

package/src/index.jsx

@@ -57,9 +57,11 @@ export {
   useAuthProvider,
   useChoices,
   useChoicesContext,
+  useCreateContext,
   useCreateController,
   useDataProvider,
   useEditContext,
+  useEditController,
   useGetIdentity,
   useGetList,
   useGetMany,
@@ -67,6 +69,7 @@ export {
   useGetOne,
   useInput,
   useListContext,
+  useListController,
   useLocaleState,
   useNotify,
   usePermissions,

package/src/playground/components/ra-forms/UserForm.jsx

@@ -4,6 +4,7 @@ import {
   ImageInput,
   SelectArrayInput,
   SimpleForm,
+  TabbedForm,
   TableFormIterator,
   TextInput,
   useThemeConfig
@@ -11,6 +12,7 @@ import {
 
 import { Grid } from '@mui/material';
 import PropTypes from 'prop-types';
+import { CreateInDialogButton, EditInDialogButton } from '../../../components';
 
 const UserForm = ({ configuredRoles }) => {
   const { spacing } = useThemeConfig();
@@ -42,7 +44,18 @@ const UserForm = ({ configuredRoles }) => {
           </ArrayInput>
         </Grid>
       </Grid>
-
+      <EditInDialogButton>
+        <TabbedForm>
+          <TabbedForm.Tab label="ciaooo">
+            <TextInput source="ciao" />
+          </TabbedForm.Tab>
+        </TabbedForm>
+      </EditInDialogButton>
+      <CreateInDialogButton>
+        <SimpleForm>
+          <TextInput source="ciao" />
+        </SimpleForm>
+      </CreateInDialogButton>
       <BooleanInput source="active" />
     </SimpleForm>
   );