Merge pull request #203 from assemblee-virtuelle/200-AdaptFirstLayout…

…ToNewArchitecture

[Minor] 200 - Move existing layout to create new "leftMenu" layout

frontend/src/App.jsx

@@ -6,13 +6,15 @@ import { BrowserRouter } from 'react-router-dom';
 import { QueryClient } from 'react-query';
 
 import HomePage from './HomePage';
+import config from './config/config';
 import i18nProvider from './config/i18nProvider';
 import authProvider from './config/authProvider';
 import dataProvider from './config/dataProvider';
 import theme from './config/theme';
 import resources from './resources';
 
 import { Layout } from './common/layout';
+import { LayoutProvider } from './layouts/LayoutContext';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -26,23 +28,25 @@ const App = () => (
   <StyledEngineProvider injectFirst>
     <BrowserRouter>
       <ThemeProvider theme={theme}>
-        <Admin
-          disableTelemetry
-          title="Archipel"
-          authProvider={authProvider}
-          dataProvider={dataProvider}
-          i18nProvider={i18nProvider}
-          layout={Layout}
-          theme={theme}
-          loginPage={LoginPage}
-          dashboard={HomePage}
-          store={memoryStore()}
-          queryClient={queryClient}
-        >
-          {Object.entries(resources).map(([key, resource]) => (
-            <Resource key={key} name={key} {...resource.config} />
-          ))}
-        </Admin>
+        <LayoutProvider layoutOptions={config.layout}>
+          <Admin
+            disableTelemetry
+            title="Archipel"
+            authProvider={authProvider}
+            dataProvider={dataProvider}
+            i18nProvider={i18nProvider}
+            layout={Layout}
+            theme={theme}
+            loginPage={LoginPage}
+            dashboard={HomePage}
+            store={memoryStore()}
+            queryClient={queryClient}
+          >
+            {Object.entries(resources).map(([key, resource]) => (
+              <Resource key={key} name={key} {...resource.config} />
+            ))}
+          </Admin>
+        </LayoutProvider>
       </ThemeProvider>
     </BrowserRouter>
   </StyledEngineProvider>

frontend/src/common/layout/Layout.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { LayoutProps } from 'react-admin';
-import { Layout } from '../../layout';
+import { useLayoutContext } from '../../layouts/LayoutContext';
 
 const BaseLayout = (props: LayoutProps) => {
+  const { Layout } = useLayoutContext();
   return <Layout  {...props} />;
 };
 

frontend/src/common/layout/create/CreateView.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactElement } from 'react';
 import { useCreateContext } from 'react-admin';
 import { useCheckPermissions } from '@semapps/auth-provider';
 import { useCreateContainerUri } from '@semapps/semantic-data-provider';
-import { BaseView } from '../../../layout';
+import { useLayoutContext } from '../../../layouts/LayoutContext';
 
 type Props = {
   title?: string | ReactElement;
@@ -16,10 +16,12 @@ const CreateView = ({ title, actions, children }: PropsWithChildren<Props>) => {
   // @ts-expect-error Bad typing of Semapps
   useCheckPermissions(createContainerUri || {}, 'create');
 
+  const Layout = useLayoutContext();
+
   return(
-    <BaseView title={title ?? createContext.defaultTitle} actions={actions}>
+    <Layout.BaseView title={title ?? createContext.defaultTitle} actions={actions}>
       {children}
-    </BaseView>
+    </Layout.BaseView>
   )
 };
 

frontend/src/common/layout/edit/EditView.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { RaRecord, useEditContext, useGetRecordRepresentation, useResourceContext } from 'react-admin';
 import { useCheckPermissions } from '@semapps/auth-provider';
-import { BaseView } from '../../../layout';
+import { useLayoutContext } from '../../../layouts/LayoutContext';
 
 type Props = {
   title?: string | ReactElement;
@@ -19,10 +19,12 @@ const EditView = ({ title, actions, children }: PropsWithChildren<Props>) => {
 
   const recordTitle = getRecordRepresentation(editContext?.record);
 
+  const Layout = useLayoutContext();
+
   return (
-    <BaseView title={title || recordTitle} actions={actions}>
+    <Layout.BaseView title={title || recordTitle} actions={actions}>
       {children}
-    </BaseView>
+    </Layout.BaseView>
   );
 };
 

frontend/src/common/layout/list/ListView.tsx

@@ -3,7 +3,7 @@ import { useListContext, Pagination } from 'react-admin';
 import { Box } from '@mui/material';
 import { useCheckPermissions } from '@semapps/auth-provider';
 import { useCreateContainerUri } from '@semapps/semantic-data-provider';
-import { BaseView } from '../../../layout';
+import { useLayoutContext } from '../../../layouts/LayoutContext';
 
 type Props = {
   title?: string | ReactElement;
@@ -19,11 +19,13 @@ const ListView = ({ title, children, aside, actions, pagination }: PropsWithChil
   // @ts-expect-error Bad typing of Semapps
   useCheckPermissions(createContainerUri || {}, 'list');
 
+  const Layout = useLayoutContext();
+
   return (
-    <BaseView title={title ?? listContext.defaultTitle} actions={actions} aside={aside}>
+    <Layout.BaseView title={title ?? listContext.defaultTitle} actions={actions} aside={aside}>
       <Box p={3}>{children}</Box>
       {pagination === false ? null : pagination || <Pagination />}
-    </BaseView>
+    </Layout.BaseView>
   );
 };
 

frontend/src/common/layout/show/ShowView.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactElement } from 'react';
 import { RaRecord, useGetRecordRepresentation, useResourceContext, useShowContext } from 'react-admin';
 import { Box } from '@mui/material';
 import { useCheckPermissions } from '@semapps/auth-provider';
-import { BaseView } from '../../../layout';
+import { useLayoutContext } from '../../../layouts/LayoutContext';
 
 type Props = {
   title?: string | ReactElement;
@@ -20,10 +20,12 @@ const ShowView = ({ title, actions, children }: PropsWithChildren<Props>) => {
 
   const recordTitle = getRecordRepresentation(showContext?.record);
 
+  const Layout = useLayoutContext();
+
   return (
-    <BaseView title={title || recordTitle} actions={actions}>
+    <Layout.BaseView title={title || recordTitle} actions={actions}>
       <Box p={3}>{children}</Box>
-    </BaseView>
+    </Layout.BaseView>
   );
 };
 

frontend/src/config/config.ts

@@ -16,6 +16,12 @@ const config = {
     "Document",
     "Skill",
   ],
+
+  // UI layout configuration
+  layout: {
+    name: 'leftMenu',
+    options: {},
+  },
 };
 
 export default config;

frontend/src/layouts/LayoutContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, FunctionComponent, PropsWithChildren, ReactNode, useContext } from 'react';
+import { LayoutProps } from 'react-admin';
+import leftMenu, { LayoutOptions as LeftMenuOptions } from './leftMenu';
+
+type BaseViewProps = PropsWithChildren<{
+  title: string | ReactNode;
+  actions: JSX.Element;
+  aside?: JSX.Element;
+}>;
+
+export type LayoutComponents = {
+  Layout: FunctionComponent<LayoutProps>;
+  BaseView: FunctionComponent<BaseViewProps>;
+  Aside: FunctionComponent<PropsWithChildren>;
+};
+
+export type LeftMenuLayoutType = LayoutComponents & LeftMenuOptions;
+
+type LayoutOptions = LeftMenuOptions;
+type LayoutContextType = LeftMenuLayoutType;
+
+export const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
+
+const layoutsComponents = {
+  leftMenu,
+};
+
+type LayoutProviderProps = PropsWithChildren<{
+  layoutOptions: LayoutOptions;
+}>;
+
+export const LayoutProvider = ({ children, layoutOptions }: LayoutProviderProps) => {
+  const layoutComponents = layoutsComponents[layoutOptions.name];
+
+  if (!layoutComponents) {
+    return null;
+  }
+
+  return <LayoutContext.Provider value={{ ...layoutOptions, ...layoutComponents }}>{children}</LayoutContext.Provider>;
+};
+
+export const useLayoutContext = <T extends LayoutOptions = LayoutOptions>() => {
+  const layout = useContext(LayoutContext);
+  return layout as T & LayoutComponents;
+};

frontend/src/layout/TreeMenu/TreeMenu.tsx → frontend/src/layouts/leftMenu/TreeMenu/TreeMenu.tsx

@@ -8,7 +8,7 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
 import LoginIcon from '@mui/icons-material/Login';
 import SubMenu from './SubMenu';
 import ResourceMenuLink from './ResourceMenuLink';
-import resources from '../../resources';
+import resources from '../../../resources';
 
 export type ResourceOptions = {
   label: string;

frontend/src/layouts/leftMenu/index.ts

@@ -0,0 +1,13 @@
+import { lazy } from 'react';
+import { LayoutComponents } from '../LayoutContext';
+
+export type LayoutOptions = {
+  name: 'leftMenu';
+  options: Record<string, never>;
+};
+
+export default {
+  Layout: lazy(() => import('./Layout')),
+  BaseView: lazy(() => import('./BaseView')),
+  Aside: lazy(() => import('./Aside')),
+} as LayoutComponents;

frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.jsx → frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { ReferenceFilter } from '@semapps/list-components';
-import { Aside } from '../../../../layout';
+import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const EventFilterSidebar = () => {
+  const Layout = useLayoutContext();
+
   return (
-    <Aside>
+    <Layout.Aside>
       <ReferenceFilter
         reference="Theme"
         source="pair:hasTopic"
         inverseSource="pair:topicOf"
         limit={100}
         sort={{ field: 'pair:label', order: 'DESC' }}
       />
-    </Aside>
+    </Layout.Aside>
   );
 };
 

frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.jsx → frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { ReferenceFilter } from '@semapps/list-components';
-import { Aside } from '../../../../layout';
+import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const ProjectFilterSidebar = () => {
+  const Layout = useLayoutContext();
+
   return (
-    <Aside>
+    <Layout.Aside>
       <ReferenceFilter
         reference="Status"
         source="pair:hasStatus"
@@ -26,7 +28,7 @@ const ProjectFilterSidebar = () => {
         filter={{ a: 'pair:ProjectType' }}
         sort={{ field: 'pair:label', order: 'DESC' }}
       />
-    </Aside>
+    </Layout.Aside>
   );
 };
 

frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.jsx → frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { ReferenceFilter } from '@semapps/list-components';
-import { Aside } from '../../../../layout';
+import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const TaskFilterSidebar = () => {
+  const Layout = useLayoutContext();
+
   return (
-    <Aside>
+    <Layout.Aside>
       <ReferenceFilter
         reference="Status"
         source="pair:hasStatus"
@@ -19,7 +21,7 @@ const TaskFilterSidebar = () => {
         filter={{ a: 'pair:TaskType' }}
         sort={{ field: 'pair:label', order: 'DESC' }}
       />
-    </Aside>
+    </Layout.Aside>
   );
 };
 

frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.jsx → frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { ReferenceFilter } from '@semapps/list-components';
 import ReferenceFilterTree from '../../../../common/ReferenceFilterTree';
-import { Aside } from '../../../../layout';
+import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const OrganizationFilterSidebar = () => {
+  const Layout = useLayoutContext();
+
   return (
-    <Aside>
+    <Layout.Aside>
       <ReferenceFilter
         reference="Type"
         source="pair:hasType"
@@ -20,11 +22,10 @@ const OrganizationFilterSidebar = () => {
         broader="pair:broader"
         source="pair:hasTopic"
         label="pair:label"
-        predicate="http://virtual-assembly.org/ontologies/pair#hasTopic"
-        limit={100}
+        filter={{}}
         sort={{ field: 'pair:label', order: 'DESC' }}
       />
-    </Aside>
+    </Layout.Aside>
   );
 };
 

frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.jsx → frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { ReferenceFilter } from '@semapps/list-components';
-import { Aside } from '../../../../layout';
+import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const PersonFilterSidebar = () => {
+  const Layout = useLayoutContext();
+
   return (
-    <Aside>
+    <Layout.Aside>
       <ReferenceFilter
         label="Intérêts"
         reference="Theme"
@@ -13,7 +15,7 @@ const PersonFilterSidebar = () => {
         sort={{ field: 'pair:label', order: 'DESC' }}
         limit={100}
       />
-    </Aside>
+    </Layout.Aside>
   );
 };