From e5fc6eb66df75c28242cbe32a829c6d2dd9671bf Mon Sep 17 00:00:00 2001 From: mguihal Date: Fri, 1 Nov 2024 01:08:18 +0100 Subject: [PATCH] feat: Move existing layout to new leftMenu layout --- frontend/src/App.jsx | 38 +++++++++------- frontend/src/common/layout/Layout.tsx | 3 +- .../src/common/layout/create/CreateView.tsx | 8 ++-- frontend/src/common/layout/edit/EditView.tsx | 8 ++-- frontend/src/common/layout/list/ListView.tsx | 8 ++-- frontend/src/common/layout/show/ShowView.tsx | 8 ++-- frontend/src/config/config.ts | 6 +++ frontend/src/layout/index.ts | 3 -- frontend/src/layouts/LayoutContext.tsx | 45 +++++++++++++++++++ .../{layout => layouts/leftMenu}/AppBar.tsx | 0 .../{layout => layouts/leftMenu}/Aside.tsx | 0 .../{layout => layouts/leftMenu}/BaseView.tsx | 0 .../{layout => layouts/leftMenu}/Layout.tsx | 0 .../leftMenu}/SearchForm.tsx | 0 .../leftMenu}/TreeMenu/ResourceMenuLink.tsx | 0 .../leftMenu}/TreeMenu/SubMenu.tsx | 0 .../leftMenu}/TreeMenu/TreeMenu.tsx | 2 +- frontend/src/layouts/leftMenu/index.ts | 13 ++++++ ...lterSidebar.jsx => EventFilterSidebar.tsx} | 8 ++-- ...erSidebar.jsx => ProjectFilterSidebar.tsx} | 8 ++-- ...ilterSidebar.jsx => TaskFilterSidebar.tsx} | 8 ++-- ...ebar.jsx => OrganizationFilterSidebar.tsx} | 11 ++--- ...terSidebar.jsx => PersonFilterSidebar.tsx} | 8 ++-- ...ilterSidebar.jsx => IdeaFilterSidebar.tsx} | 8 ++-- 24 files changed, 139 insertions(+), 54 deletions(-) delete mode 100644 frontend/src/layout/index.ts create mode 100644 frontend/src/layouts/LayoutContext.tsx rename frontend/src/{layout => layouts/leftMenu}/AppBar.tsx (100%) rename frontend/src/{layout => layouts/leftMenu}/Aside.tsx (100%) rename frontend/src/{layout => layouts/leftMenu}/BaseView.tsx (100%) rename frontend/src/{layout => layouts/leftMenu}/Layout.tsx (100%) rename frontend/src/{layout => layouts/leftMenu}/SearchForm.tsx (100%) rename frontend/src/{layout => layouts/leftMenu}/TreeMenu/ResourceMenuLink.tsx (100%) rename frontend/src/{layout => layouts/leftMenu}/TreeMenu/SubMenu.tsx (100%) rename frontend/src/{layout => layouts/leftMenu}/TreeMenu/TreeMenu.tsx (98%) create mode 100644 frontend/src/layouts/leftMenu/index.ts rename frontend/src/resources/Agent/Activity/Event/{EventFilterSidebar.jsx => EventFilterSidebar.tsx} (72%) rename frontend/src/resources/Agent/Activity/Project/{ProjectFilterSidebar.jsx => ProjectFilterSidebar.tsx} (84%) rename frontend/src/resources/Agent/Activity/Task/{TaskFilterSidebar.jsx => TaskFilterSidebar.tsx} (79%) rename frontend/src/resources/Agent/Actor/Organization/{OrganizationFilterSidebar.jsx => OrganizationFilterSidebar.tsx} (81%) rename frontend/src/resources/Agent/Actor/Person/{PersonFilterSidebar.jsx => PersonFilterSidebar.tsx} (73%) rename frontend/src/resources/Idea/{IdeaFilterSidebar.jsx => IdeaFilterSidebar.tsx} (80%) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 33b8e6f..c0e257d 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -6,6 +6,7 @@ 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'; @@ -13,6 +14,7 @@ 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 = () => ( - - {Object.entries(resources).map(([key, resource]) => ( - - ))} - + + + {Object.entries(resources).map(([key, resource]) => ( + + ))} + + diff --git a/frontend/src/common/layout/Layout.tsx b/frontend/src/common/layout/Layout.tsx index f70f435..f0b6a2e 100644 --- a/frontend/src/common/layout/Layout.tsx +++ b/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 ; }; diff --git a/frontend/src/common/layout/create/CreateView.tsx b/frontend/src/common/layout/create/CreateView.tsx index 57c1bc4..2f095b9 100644 --- a/frontend/src/common/layout/create/CreateView.tsx +++ b/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) => { // @ts-expect-error Bad typing of Semapps useCheckPermissions(createContainerUri || {}, 'create'); + const Layout = useLayoutContext(); + return( - + {children} - + ) }; diff --git a/frontend/src/common/layout/edit/EditView.tsx b/frontend/src/common/layout/edit/EditView.tsx index b00975b..879b714 100644 --- a/frontend/src/common/layout/edit/EditView.tsx +++ b/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) => { const recordTitle = getRecordRepresentation(editContext?.record); + const Layout = useLayoutContext(); + return ( - + {children} - + ); }; diff --git a/frontend/src/common/layout/list/ListView.tsx b/frontend/src/common/layout/list/ListView.tsx index c7965b3..b4e120e 100644 --- a/frontend/src/common/layout/list/ListView.tsx +++ b/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 ( - + {children} {pagination === false ? null : pagination || } - + ); }; diff --git a/frontend/src/common/layout/show/ShowView.tsx b/frontend/src/common/layout/show/ShowView.tsx index aa604b1..1820aa8 100644 --- a/frontend/src/common/layout/show/ShowView.tsx +++ b/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) => { const recordTitle = getRecordRepresentation(showContext?.record); + const Layout = useLayoutContext(); + return ( - + {children} - + ); }; diff --git a/frontend/src/config/config.ts b/frontend/src/config/config.ts index 18a590a..7c3adc5 100644 --- a/frontend/src/config/config.ts +++ b/frontend/src/config/config.ts @@ -16,6 +16,12 @@ const config = { "Document", "Skill", ], + + // UI layout configuration + layout: { + name: 'leftMenu', + options: {}, + }, }; export default config; diff --git a/frontend/src/layout/index.ts b/frontend/src/layout/index.ts deleted file mode 100644 index 19bb0e2..0000000 --- a/frontend/src/layout/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as Layout } from './Layout'; -export { default as BaseView } from './BaseView'; -export { default as Aside } from './Aside'; diff --git a/frontend/src/layouts/LayoutContext.tsx b/frontend/src/layouts/LayoutContext.tsx new file mode 100644 index 0000000..4b7b214 --- /dev/null +++ b/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; + BaseView: FunctionComponent; + Aside: FunctionComponent; +}; + +export type LeftMenuLayoutType = LayoutComponents & LeftMenuOptions; + +type LayoutOptions = LeftMenuOptions; +type LayoutContextType = LeftMenuLayoutType; + +export const LayoutContext = createContext(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 {children}; +}; + +export const useLayoutContext = () => { + const layout = useContext(LayoutContext); + return layout as T & LayoutComponents; +}; diff --git a/frontend/src/layout/AppBar.tsx b/frontend/src/layouts/leftMenu/AppBar.tsx similarity index 100% rename from frontend/src/layout/AppBar.tsx rename to frontend/src/layouts/leftMenu/AppBar.tsx diff --git a/frontend/src/layout/Aside.tsx b/frontend/src/layouts/leftMenu/Aside.tsx similarity index 100% rename from frontend/src/layout/Aside.tsx rename to frontend/src/layouts/leftMenu/Aside.tsx diff --git a/frontend/src/layout/BaseView.tsx b/frontend/src/layouts/leftMenu/BaseView.tsx similarity index 100% rename from frontend/src/layout/BaseView.tsx rename to frontend/src/layouts/leftMenu/BaseView.tsx diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layouts/leftMenu/Layout.tsx similarity index 100% rename from frontend/src/layout/Layout.tsx rename to frontend/src/layouts/leftMenu/Layout.tsx diff --git a/frontend/src/layout/SearchForm.tsx b/frontend/src/layouts/leftMenu/SearchForm.tsx similarity index 100% rename from frontend/src/layout/SearchForm.tsx rename to frontend/src/layouts/leftMenu/SearchForm.tsx diff --git a/frontend/src/layout/TreeMenu/ResourceMenuLink.tsx b/frontend/src/layouts/leftMenu/TreeMenu/ResourceMenuLink.tsx similarity index 100% rename from frontend/src/layout/TreeMenu/ResourceMenuLink.tsx rename to frontend/src/layouts/leftMenu/TreeMenu/ResourceMenuLink.tsx diff --git a/frontend/src/layout/TreeMenu/SubMenu.tsx b/frontend/src/layouts/leftMenu/TreeMenu/SubMenu.tsx similarity index 100% rename from frontend/src/layout/TreeMenu/SubMenu.tsx rename to frontend/src/layouts/leftMenu/TreeMenu/SubMenu.tsx diff --git a/frontend/src/layout/TreeMenu/TreeMenu.tsx b/frontend/src/layouts/leftMenu/TreeMenu/TreeMenu.tsx similarity index 98% rename from frontend/src/layout/TreeMenu/TreeMenu.tsx rename to frontend/src/layouts/leftMenu/TreeMenu/TreeMenu.tsx index f3537d7..c84c492 100644 --- a/frontend/src/layout/TreeMenu/TreeMenu.tsx +++ b/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; diff --git a/frontend/src/layouts/leftMenu/index.ts b/frontend/src/layouts/leftMenu/index.ts new file mode 100644 index 0000000..be11cdf --- /dev/null +++ b/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; +}; + +export default { + Layout: lazy(() => import('./Layout')), + BaseView: lazy(() => import('./BaseView')), + Aside: lazy(() => import('./Aside')), +} as LayoutComponents; diff --git a/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.jsx b/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.tsx similarity index 72% rename from frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.jsx rename to frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.tsx index a2a01d9..799a007 100644 --- a/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.jsx +++ b/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.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 EventFilterSidebar = () => { + const Layout = useLayoutContext(); + return ( - + ); }; diff --git a/frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.jsx b/frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.tsx similarity index 84% rename from frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.jsx rename to frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.tsx index e03aac2..0ae138b 100644 --- a/frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.jsx +++ b/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 ( - + ); }; diff --git a/frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.jsx b/frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.tsx similarity index 79% rename from frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.jsx rename to frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.tsx index b88f900..0393b12 100644 --- a/frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.jsx +++ b/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 ( - + ); }; diff --git a/frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.jsx b/frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.tsx similarity index 81% rename from frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.jsx rename to frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.tsx index 6b30348..c0d5e75 100644 --- a/frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.jsx +++ b/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 ( - + ); }; diff --git a/frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.jsx b/frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.tsx similarity index 73% rename from frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.jsx rename to frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.tsx index 7f67c34..9f22b10 100644 --- a/frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.jsx +++ b/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 ( - + ); }; diff --git a/frontend/src/resources/Idea/IdeaFilterSidebar.jsx b/frontend/src/resources/Idea/IdeaFilterSidebar.tsx similarity index 80% rename from frontend/src/resources/Idea/IdeaFilterSidebar.jsx rename to frontend/src/resources/Idea/IdeaFilterSidebar.tsx index d252912..f1362e2 100644 --- a/frontend/src/resources/Idea/IdeaFilterSidebar.jsx +++ b/frontend/src/resources/Idea/IdeaFilterSidebar.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 IdeaFilterSidebar = () => { + const Layout = useLayoutContext(); + return ( - + ); };