-
Notifications
You must be signed in to change notification settings - Fork 285
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ledger-browser): refactor routing, improve UI
- Add dynamic routing based on configuration instead of hardcoded one.
- Add MUI and configure custom theme.
Use this new UI kit to create app better bar and ledger selector.
- Cleanup common application code.
- Add sample SQL data to quickly test the GUI
without running persistence plugins.
Signed-off-by: Michal Bajer <michal.bajer@fujitsu.com>- Loading branch information
Showing
24 changed files
with
1,615 additions
and
579 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import { useRoutes, BrowserRouter, RouteObject } from "react-router-dom"; | ||
| import CssBaseline from "@mui/material/CssBaseline"; | ||
| import { ThemeProvider, createTheme } from "@mui/material/styles"; | ||
|
|
||
| import { themeOptions } from "./theme"; | ||
| import ContentLayout from "./components/Layout/ContentLayout"; | ||
| import HeaderBar from "./components/Layout/HeaderBar"; | ||
| import WelcomePage from "./components/WelcomePage"; | ||
| import { AppConfig, AppListEntry } from "./common/types/app"; | ||
| import { patchAppRoutePath } from "./common/utils"; | ||
|
|
||
| type AppConfigProps = { | ||
| appConfig: AppConfig[]; | ||
| }; | ||
|
|
||
| /** | ||
| * Get list of all apps from the config | ||
| */ | ||
| function getAppList(appConfig: AppConfig[]) { | ||
| const appList: AppListEntry[] = appConfig.map((app) => { | ||
| return { | ||
| path: app.path, | ||
| name: app.name, | ||
| }; | ||
| }); | ||
|
|
||
| appList.unshift({ | ||
| path: "/", | ||
| name: "Home", | ||
| }); | ||
|
|
||
| return appList; | ||
| } | ||
|
|
||
| /** | ||
| * Create header bar for each app based on app menuEntries field in config. | ||
| */ | ||
| function getHeaderBarRoutes(appConfig: AppConfig[]) { | ||
| const appList = getAppList(appConfig); | ||
|
|
||
| const headerRoutesConfig = appConfig.map((app) => { | ||
| return { | ||
| key: app.path, | ||
| path: `${app.path}/*`, | ||
| element: ( | ||
| <HeaderBar | ||
| appList={appList} | ||
| path={app.path} | ||
| menuEntries={app.menuEntries} | ||
| /> | ||
| ), | ||
| }; | ||
| }); | ||
| headerRoutesConfig.push({ | ||
| key: "home", | ||
| path: `*`, | ||
| element: <HeaderBar appList={appList} />, | ||
| }); | ||
| return useRoutes(headerRoutesConfig); | ||
| } | ||
|
|
||
| /** | ||
| * Create content routes | ||
| */ | ||
| function getContentRoutes(appConfig: AppConfig[]) { | ||
| const appRoutes: RouteObject[] = appConfig.map((app) => { | ||
| return { | ||
| key: app.path, | ||
| path: app.path, | ||
| children: app.routes.map((route) => { | ||
| return { | ||
| key: route.path, | ||
| path: patchAppRoutePath(app.path, route.path), | ||
| element: route.element, | ||
| children: route.children, | ||
| }; | ||
| }), | ||
| }; | ||
| }); | ||
|
|
||
| // Include landing / welcome page | ||
| appRoutes.push({ | ||
| index: true, | ||
| element: <WelcomePage />, | ||
| }); | ||
|
|
||
| return useRoutes([ | ||
| { | ||
| path: "/", | ||
| element: <ContentLayout />, | ||
| children: appRoutes, | ||
| }, | ||
| ]); | ||
| } | ||
|
|
||
| const App: React.FC<AppConfigProps> = ({ appConfig }) => { | ||
| const headerRoutes = getHeaderBarRoutes(appConfig); | ||
| const contentRoutes = getContentRoutes(appConfig); | ||
|
|
||
| return ( | ||
| <div> | ||
| {headerRoutes} | ||
| {contentRoutes} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const theme = createTheme(themeOptions); | ||
|
|
||
| const CactiLedgerBrowserApp: React.FC<AppConfigProps> = ({ appConfig }) => { | ||
| return ( | ||
| <BrowserRouter> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <App appConfig={appConfig} /> | ||
| </ThemeProvider> | ||
| </BrowserRouter> | ||
| ); | ||
| }; | ||
|
|
||
| export default CactiLedgerBrowserApp; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.