@applica-software-guru/react-admin 1.4.226 → 1.5.228

package/src/components/Layout/Header/Profile/buttons/ChangePasswordButton.tsx

@@ -1,17 +1,16 @@
-import { Dialog, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { Fragment, useCallback, useState } from 'react';
-
-import { ChangePasswordForm } from '../../../../ra-forms';
+import { ChangePasswordForm } from '@/components/ra-forms';
 import { Key } from '@mui/icons-material';
+import { Dialog, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { useTranslate } from 'ra-core';
+import { useCallback, useState } from 'react';
 
-const ChangePasswordButton = () => {
+function ChangePasswordButton(): JSX.Element {
   const [open, setOpen] = useState(false);
   const handleSuccess = useCallback(() => setOpen(false), [setOpen]);
   const handleOpen = useCallback(() => setOpen(true), [setOpen]);
   const translate = useTranslate();
   return (
-    <Fragment>
+    <>
       <ListItemButton onClick={handleOpen}>
         <ListItemIcon>
           <Key />
@@ -21,8 +20,8 @@ const ChangePasswordButton = () => {
       <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs" fullWidth>
         <ChangePasswordForm onSuccess={handleSuccess} />
       </Dialog>
-    </Fragment>
+    </>
   );
-};
+}
 
-export default ChangePasswordButton;
+export { ChangePasswordButton };

package/src/components/Layout/Header/Profile/buttons/LogoutButton.tsx

@@ -1,23 +1,21 @@
+import { LogoutOutlined } from '@mui/icons-material';
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { useLogout, useTranslate } from 'ra-core';
 
-import { Fragment } from 'react';
-import { LogoutOutlined } from '@mui/icons-material';
-
-const LogoutButton = () => {
+function LogoutButton(): JSX.Element {
   const logout = useLogout();
   const translate = useTranslate();
 
   return (
-    <Fragment>
+    <>
       <ListItemButton onClick={logout}>
         <ListItemIcon>
           <LogoutOutlined />
         </ListItemIcon>
         <ListItemText primary={translate('ra.auth.logout')} />
       </ListItemButton>
-    </Fragment>
+    </>
   );
-};
+}
 
-export default LogoutButton;
+export { LogoutButton };

package/src/components/Layout/Header/Profile/buttons/StopImpersonateButton.tsx

@@ -1,15 +1,14 @@
-import { Fragment, useCallback, useEffect, useState } from 'react';
+import { LogoutOutlined } from '@mui/icons-material';
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { useAuthProvider, useTranslate } from 'ra-core';
+import { useCallback, useEffect, useState } from 'react';
 
-import { LogoutOutlined } from '@mui/icons-material';
-
-const StopImpersonateButton = () => {
+function StopImpersonateButton(): JSX.Element | null {
   const translate = useTranslate();
   const authProvider = useAuthProvider();
   const stopImpersonating = useCallback(
     () => authProvider.stopImpersonate().then(() => (document.location.href = '/')),
-    [authProvider?.stopImpersonating]
+    [authProvider]
   );
   const [isImpersonating, setIsImpersonating] = useState(false);
 
@@ -27,15 +26,15 @@ const StopImpersonateButton = () => {
   }
 
   return (
-    <Fragment>
+    <>
       <ListItemButton onClick={stopImpersonating}>
         <ListItemIcon>
           <LogoutOutlined />
         </ListItemIcon>
         <ListItemText primary={translate('ra.auth.stop_impersonate')} />
       </ListItemButton>
-    </Fragment>
+    </>
   );
-};
+}
 
-export default StopImpersonateButton;
+export { StopImpersonateButton };

package/src/components/Layout/Header/Profile/buttons/index.ts

@@ -0,0 +1,3 @@
+export * from './ChangePasswordButton';
+export * from './LogoutButton';
+export * from './StopImpersonateButton';

package/src/components/Layout/Header/Profile/index.ts

@@ -1 +1 @@
-export { default as HeaderProfile } from './Profile';
+export * from './HeaderProfile';

package/src/components/Layout/Header/ResponsiveSection.tsx

@@ -1,17 +1,17 @@
-import { AppBar, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
-import { Transitions } from '../../@extended';
+import { HeaderToggleButton } from './Buttons';
+import { Transitions } from '@/components/@extended';
+import { useLayoutMediaState } from '@/components/Layout/Provider';
+import { usePopoverState } from '@/hooks';
 import { MoreOutlined } from '@ant-design/icons';
+import { AppBar, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { useLayoutMediaState } from '../Provider';
-import { HeaderToggleButton } from './Buttons';
-import { usePopoverState } from '../../../hooks';
 
 type IResponsiveSectionProps = React.PropsWithChildren;
 
-const ResponsiveSection = (props: IResponsiveSectionProps) => {
-  const theme = useTheme(),
-    { downMd } = useLayoutMediaState(),
-    { open, anchorEl, handleToggle, handleClose } = usePopoverState();
+function ResponsiveSection(props: IResponsiveSectionProps) {
+  const theme = useTheme();
+  const { downMd } = useLayoutMediaState();
+  const { open, anchorEl, handleToggle, handleClose } = usePopoverState();
 
   return !downMd ? (
     <>{props.children}</>
@@ -63,6 +63,6 @@ const ResponsiveSection = (props: IResponsiveSectionProps) => {
       </Popper>
     </>
   );
-};
+}
 
 export { ResponsiveSection };

package/src/components/Layout/HorizontalBar.tsx

@@ -1,15 +1,15 @@
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
 import { AppBar, Box, Container, useScrollTrigger, useTheme } from '@mui/material';
-import { useThemeConfig } from '../../hooks';
 
 type IHorizontalBarProps = React.PropsWithChildren;
 
 function HorizontalBar(props: IHorizontalBarProps) {
-  const theme = useTheme(),
-    trigger = useScrollTrigger({
-      disableHysteresis: true,
-      threshold: 0
-    }),
-    { container } = useThemeConfig();
+  const theme = useTheme();
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0
+  });
+  const { container } = useThemeConfig();
 
   //@ts-ignore
   theme.shadows[4] = theme.customShadows.z1;

package/src/components/Layout/Layout.tsx

@@ -1,16 +1,15 @@
-import { Header, HeaderNotification, HeaderProfile, HeaderSpacer, LocaleButton, ResponsiveSection } from './Header';
-
-import { Breadcrumbs } from '../@extended';
-import { Footer } from './Footer';
 import { LayoutContent } from './Content';
-import { LayoutWrapper } from './Wrapper';
-import { ErrorProps, LoadingIndicator } from 'ra-ui-materialui';
+import { Footer } from './Footer';
+import { Header, HeaderNotification, HeaderProfile, HeaderSpacer, LocaleButton, ResponsiveSection } from './Header';
 import { NavMenu } from './NavMenu';
 import { Navigation } from './Navigation';
-import { Outlet } from 'react-router-dom';
-import { useBreadcrumbs } from '../../hooks';
 import { withLayoutProvider } from './Provider';
 import { ThemeToggler } from './ThemeToggler';
+import { LayoutWrapper } from './Wrapper';
+import { Breadcrumbs } from '@/components/@extended';
+import { useBreadcrumbs } from '@/components/Layout/MenuProvider';
+import { ErrorProps, LoadingIndicator } from 'ra-ui-materialui';
+import { Outlet } from 'react-router-dom';
 
 type ILayoutProps = React.PropsWithChildren<{
   name: string;
@@ -21,15 +20,15 @@ type ILayoutProps = React.PropsWithChildren<{
 }>;
 
 const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
-  const { name, version, enableThemeToggler } = props,
-    { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
+  const { name, version, enableThemeToggler } = props;
+  const { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
 
   return (
     <LayoutWrapper>
       <Header>
         <HeaderSpacer />
         <LocaleButton />
-        {enableThemeToggler && <ThemeToggler />}
+        {enableThemeToggler ? <ThemeToggler /> : null}
         <LoadingIndicator />
         <HeaderNotification />
         <ResponsiveSection>
@@ -41,7 +40,6 @@ const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
       </NavMenu>
       <LayoutContent error={props.error}>
         {!isLoading && (
-          //@ts-ignore
           <Breadcrumbs
             titleBottom
             mode="breadcrumbs"
@@ -62,5 +60,4 @@ const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
 });
 
 export type { ILayoutProps };
-
 export { Layout };

package/src/components/Layout/MenuProvider.tsx

@@ -0,0 +1,416 @@
+import { AntDesignOutlined } from '@ant-design/icons';
+import _ from 'lodash';
+import {
+  ResourceDefinitions,
+  ResourceProps,
+  Translate,
+  useGetIdentity,
+  usePermissions,
+  useResourceDefinitions,
+  useTranslate
+} from 'ra-core';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router';
+
+type MenuItem = {
+  id: string;
+  title: string;
+  icon?: React.ReactNode;
+  type: 'item' | 'group' | 'collapse';
+  url: string;
+  resource?: boolean;
+  roles?: string[];
+  children?: MenuItem[];
+  breadcrumbs?: boolean;
+};
+
+type MenuGroup = MenuItem & {
+  parent?: MenuGroup;
+  children?: MenuGroup[];
+};
+type MenuBreadcrumb = MenuItem & {
+  parent?: MenuBreadcrumb;
+  last?: boolean;
+};
+
+type MenuPermissions = string[] | undefined;
+
+const RESOURCE_PREFIXES: string[] = ['e-', 'entities/'];
+
+function getResourceName(name: string): string {
+  let resourceName = name;
+  RESOURCE_PREFIXES.forEach((prefix) => {
+    resourceName = resourceName?.startsWith(prefix) ? resourceName?.substring(prefix.length) : resourceName;
+  });
+  return resourceName;
+}
+
+function isInGroup(group: MenuGroup, resource: ResourceProps): boolean {
+  return resource.options?.group === group.id || (!resource.options?.group && group.id === 'admin');
+}
+
+function hasPermission(resource: ResourceProps, permissions: MenuPermissions): boolean {
+  const name = getResourceName(resource.name);
+  const hasPermission = permissions?.includes(`${name}:list`) || permissions?.includes(`${name}:find`);
+  return hasPermission as boolean;
+}
+
+function getItem(menu: MenuItem[], id: string): MenuItem | undefined {
+  let item = menu.find((item) => item.id === id);
+  if (!item) {
+    for (let i = 0; i < menu.length; i++) {
+      const element = menu[i];
+      if (element.children) {
+        item = getItem(element.children, id);
+        if (item) {
+          return item;
+        }
+      }
+    }
+  }
+  return item;
+}
+
+function getGroup(groups: MenuGroup[], resource: ResourceProps, permissions: MenuPermissions): MenuGroup | undefined {
+  let group = groups.find(
+    (g) =>
+      ['group', 'collapse'].indexOf(g.type) !== -1 &&
+      isInGroup(g, resource) /* && hasPermission(resource, permissions)*/
+  );
+  if (!group) {
+    for (let i = 0; i < groups.length; i++) {
+      const element = groups[i];
+      if (element.children) {
+        group = getGroup(element.children, resource, permissions);
+        if (group) {
+          return group;
+        }
+      }
+    }
+  }
+  return group;
+}
+
+function getGroupById(groups: MenuGroup[], id: string): MenuGroup | undefined {
+  let group = groups.find((g) => g.id === id);
+  if (!group) {
+    for (let i = 0; i < groups.length; i++) {
+      const element = groups[i];
+      if (element.children) {
+        group = getGroupById(element.children, id);
+        if (group) {
+          return group;
+        }
+      }
+    }
+  }
+  return group;
+}
+function filterNotEmpty(group: MenuGroup): boolean {
+  if (!group) {
+    return false;
+  }
+  if (group.type === 'item') {
+    return true;
+  }
+  if (group.children) {
+    group.children = group.children.filter(filterNotEmpty);
+  }
+  const match = group.children && group.children.length > 0;
+  return match as boolean;
+}
+
+function mapParent(group: MenuGroup): MenuGroup {
+  if (group.children) {
+    group.children.forEach((child: MenuGroup) => {
+      child.parent = group;
+      mapParent(child);
+    });
+  }
+  return group;
+}
+
+function build(
+  userMenu: MenuItem[],
+  resources: ResourceDefinitions<any>,
+  permissions: MenuPermissions,
+  translate: Translate,
+  roles: string[]
+): MenuGroup[] {
+  function translateRecursive(group: MenuGroup) {
+    group.title = translate(group.title, { _: group.title });
+
+    if (group.children) {
+      group.children.forEach((child) => translateRecursive(child));
+    }
+    return group;
+  }
+  const resourceNames = Object.keys(resources);
+
+  function removeNotFoundResources(group: MenuGroup, resources: string[]): MenuGroup {
+    if (group.children) {
+      group.children = group.children.filter((child) => {
+        if (child.resource === false) {
+          const childRoles = child.roles || [];
+          if (childRoles.length === 0 || childRoles.some((role) => roles.includes(role))) {
+            return true;
+          }
+          return false;
+        }
+        if (child.type === 'item') {
+          return resources.includes(child.id);
+        }
+        removeNotFoundResources(child, resources);
+        return child.children && child.children.length > 0;
+      });
+    }
+    return group;
+  }
+
+  const groupsA = _.cloneDeep(userMenu)
+    .map((group) => ({
+      children: [],
+      ...group,
+      type: group.type || 'group'
+    }))
+    .map(translateRecursive)
+    .map((group) => removeNotFoundResources(group, resourceNames));
+
+  const groupsB = Object.values(resources)
+    // Detect group of each configured ra resource.
+    .map((resource) => resource.options?.group || 'admin')
+    // Generate unique list of groups (because a resource can be configured with the same group of another resource)
+    .filter((group, index, self) => self.indexOf(group) === index)
+    // Remove from the list groups already defined by the user (Applica developer)
+    .filter((group) => group !== undefined && getGroupById(userMenu, group) === null)
+    .map((group) => ({
+      id: group,
+      title: translate(`ra.menu.group.${group}`),
+      type: 'group',
+      icon: AntDesignOutlined,
+      children: []
+    }));
+
+  const groups = [...groupsA, ...groupsB] as MenuGroup[];
+
+  Object.values(resources).forEach((resource: ResourceProps) => {
+    const resourceGroup = getGroup(groups, resource, permissions);
+    const resourceMenu = resourceGroup?.children?.find((c) => c.id === resource.name);
+    const resourceExists = resourceGroup?.children?.some((c) => c.id === resource.name);
+    const resourceRoles = resourceMenu?.roles || resource.options?.roles || [];
+    const hasRoles =
+      !resourceRoles || resourceRoles.length === 0 || resourceRoles.some((role: string) => roles.includes(role));
+    const hasPerms = hasPermission(resource, permissions);
+    if (!hasPerms || !!resource.list || !hasRoles) {
+      if (resourceExists && !!resourceGroup && !!resourceGroup.children && resourceGroup?.children?.length > 0) {
+        resourceGroup.children = resourceGroup.children.filter((c) => c.id !== resource.name);
+      }
+      return;
+    }
+    if (resourceGroup) {
+      if (!resourceGroup.children) {
+        resourceGroup.children = [];
+      }
+      if (resourceExists) {
+        return;
+      }
+    }
+  });
+
+  return groups.filter(filterNotEmpty).map(mapParent);
+}
+
+type MenuProviderContextProps = {
+  openItem: string[];
+  openComponent: string;
+  selectedID: string | null;
+  drawerOpen: boolean;
+  error: any;
+  menu: MenuItem[];
+  activeItem: (openItem: string[]) => void;
+  openDrawer: (drawerOpen: boolean) => void;
+  activeID: (selectedID: string | null) => void;
+  hasError: (error: any) => void;
+  setMenu: (menu: MenuItem[]) => void;
+};
+
+function notImplemented() {
+  throw new Error('Not implemented');
+}
+
+const initialState: MenuProviderContextProps = {
+  openItem: [],
+  openComponent: 'buttons',
+  selectedID: null,
+  drawerOpen: false,
+  error: null,
+  menu: [],
+  activeItem: notImplemented,
+  openDrawer: notImplemented,
+  activeID: notImplemented,
+  hasError: notImplemented,
+  setMenu: notImplemented
+};
+
+type MenuProviderProps = {
+  menu: MenuItem[];
+  children: React.ReactNode | React.ReactNode[];
+};
+const MenuContext = createContext<MenuProviderContextProps>(initialState);
+
+function MenuConfigProvider({ menu, children }: MenuProviderProps): JSX.Element {
+  const [menuConfig, setMenuConfig] = useState<MenuProviderContextProps>({ ...initialState, menu }) as any;
+  function setMenu(menu: MenuItem[]) {
+    setMenuConfig((menuConfig: MenuProviderContextProps) => ({ ...menuConfig, menu }));
+  }
+  function activeItem(openItem: string) {
+    setMenuConfig((menuConfig: MenuProviderContextProps) => ({ ...menuConfig, openItem }));
+  }
+  function activeID(selectedID: string) {
+    setMenuConfig((menuConfig: MenuProviderContextProps) => ({ ...menuConfig, selectedID }));
+  }
+  function openDrawer(drawerOpen: boolean) {
+    setMenuConfig((menuConfig: MenuProviderContextProps) => ({ ...menuConfig, drawerOpen }));
+  }
+  function hasError(error: any) {
+    setMenuConfig((menuConfig: MenuProviderContextProps) => ({ ...menuConfig, error }));
+  }
+
+  useEffect(() => {
+    setMenu(menu);
+  }, [menu]);
+
+  return (
+    <MenuContext.Provider
+      value={{
+        ...menuConfig,
+        setMenu,
+        activeItem,
+        openDrawer,
+        activeID,
+        hasError
+      }}
+    >
+      {children}
+    </MenuContext.Provider>
+  );
+}
+function useMenuContext(): MenuProviderContextProps {
+  return useContext(MenuContext);
+}
+
+type UseMenuProps = {
+  menu: MenuGroup[] | null;
+  isLoading: boolean;
+  getItem: (id: string) => MenuItem | undefined;
+  findInMenu: (menu: MenuGroup[], id: string) => MenuItem | undefined;
+};
+function useMenu(): UseMenuProps {
+  const resources = useResourceDefinitions();
+  const { isLoading: loadingIdentity, data: identity } = useGetIdentity();
+  const isAuthenticated = !!identity && !!identity.id;
+
+  const { permissions } = usePermissions(isAuthenticated);
+  const { menu: userMenu } = useMenuContext();
+  const translate = useTranslate();
+  const menu = useMemo(() => {
+    if (loadingIdentity || !identity) {
+      return null;
+    }
+    const roles = ((identity?.roles || []) as { id: string }[]).map((role) => role.id);
+    const groups = build(userMenu, resources, permissions, translate, roles);
+    return groups;
+  }, [loadingIdentity, identity, resources, permissions, translate, userMenu]);
+
+  const isLoading = useMemo(() => loadingIdentity, [loadingIdentity]);
+
+  function getMenuGroup(id: string): MenuGroup | undefined {
+    if (!menu) {
+      return undefined;
+    }
+    return getItem(menu, id);
+  }
+
+  return {
+    menu,
+    isLoading,
+    getItem: getMenuGroup,
+    findInMenu: isLoading ? () => undefined : getItem
+  };
+}
+
+function useBreadcrumbs() {
+  const translate = useTranslate();
+  const { isLoading, menu: _menu, findInMenu } = useMenu();
+  const { pathname } = useLocation();
+
+  return useMemo(() => {
+    const pathArgs = pathname.split('/').filter((x) => x);
+    const menu = _.cloneDeep(_menu);
+    let id = pathname;
+    let menuItem = findInMenu(menu!, pathname);
+    if (!menuItem) {
+      menuItem = findInMenu(menu!, pathArgs[pathArgs.length - 1]);
+      id = menuItem ? menuItem.id : id;
+    }
+    if (!menuItem) {
+      for (let i = pathArgs.length; i >= 0; i--) {
+        const path = pathArgs.slice(0, i).join('/');
+        menuItem = findInMenu(menu!, path);
+        if (menuItem) {
+          id = menuItem.id;
+          break;
+        }
+      }
+    }
+
+    const urlParts = menuItem?.url?.split('/');
+    const urlPartsLength = urlParts?.length || 0;
+    if (pathArgs.length >= urlPartsLength) {
+      const data = pathArgs[pathArgs.length - 1];
+      if (menuItem) {
+        const context = data === 'create' || pathname === menuItem.url ? 'create' : 'edit';
+        const title = `resources.${id}.breadcrumbs.${context}`;
+        const child: MenuBreadcrumb = {
+          id: `${id}-${context}`,
+          type: 'item',
+          title: translate(title, { _: translate(title, { _: title }) }),
+          url: pathname,
+          breadcrumbs: true,
+          parent: menuItem
+        };
+        menuItem.type = 'collapse';
+        menuItem.breadcrumbs = true;
+        menuItem.children = menuItem.children || [];
+        menuItem.children.push(child);
+        menuItem = child;
+      }
+    }
+
+    let breadcrumbs: MenuBreadcrumb[] = [];
+    if (menuItem) {
+      let current: MenuBreadcrumb = { ...menuItem, last: true };
+      while (current) {
+        breadcrumbs.push(current);
+        current = current.parent as MenuBreadcrumb;
+      }
+      breadcrumbs = breadcrumbs.reverse();
+    }
+
+    return { isLoading, navigation: { items: menu }, breadcrumbs };
+  }, [isLoading, pathname, _menu, findInMenu, translate]);
+}
+
+function useMenuConfig(): MenuProviderContextProps {
+  return useMenuContext();
+}
+export type {
+  MenuBreadcrumb,
+  MenuGroup,
+  MenuItem,
+  MenuPermissions,
+  MenuProviderContextProps,
+  MenuProviderProps,
+  UseMenuProps
+};
+export { MenuConfigProvider, useBreadcrumbs, useMenu, useMenuConfig, useMenuContext };