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 <[email protected]>

packages/cacti-ledger-browser/README.md

@@ -18,7 +18,7 @@ This component allows viewing ledger data in Supabase or other postgreSQL compat
 ## Remarks
 
 - Plugin requires running Supabase or other database and persistence plugins in order to properly view ledger data.
-- Currently, fabric and  ethereum based ledgers are supported.
+- Currently, fabric and ethereum based ledgers are supported.
 
 ## Getting Started
 
@@ -31,6 +31,7 @@ In the root of the project, execute the command to install and build the depende
 ```sh
 yarn run build
 ```
+
 ### Alternative Prerequisites using npm
 
 In the root of the project, execute the command to install and build the dependencies. It will also build this GUI front-end component:
@@ -40,14 +41,25 @@ npm install
 ```
 
 ### Usage
+
 - Run Supabase instance (see documentation for detailed instructions). For development purposes, you can use our image located in `tools/docker/supabase-all-in-one`.
 - Run one or more persistence plugins:
-    - [Ethereum](../cacti-plugin-persistence-ethereum)
-    - [Fabric] (../cacti-plugin-persistence-fabric)
+  - [Ethereum](../cacti-plugin-persistence-ethereum)
+  - [Fabric] (../cacti-plugin-persistence-fabric)
 - Edit [Supabase configuration file](./src/supabase-client.tsx), set correct supabase API URL and service_role key.
 - Execute `yarn run start` or `npm start` in this package directory.
 - The running application address: http://localhost:3001/ (can be changed in [Vite configuration](./vite.config.ts))
 
+#### Sample Data
+
+- To preview the GUI without running the persistence plugins you can use historic sample data located at `packages/cacti-ledger-browser/src/test/sql/sample-data.sql`.
+- Use `psql` tool to import it to your supabase postgres DB instance.
+- example:
+
+```bash
+psql "postgres://postgres.DB_NAME:[email protected]:5432/postgres" -f src/test/sql/sample-data.sql
+```
+
 ## Contributing
 
 We welcome contributions to Hyperledger Cacti in many forms, and there’s always plenty to do!
@@ -58,4 +70,4 @@ Please review [CONTIRBUTING.md](../../CONTRIBUTING.md) to get started.
 
 This distribution is published under the Apache License Version 2.0 found in the [LICENSE](../../LICENSE) file.
 
-## Acknowledgments
+## Acknowledgments

packages/cacti-ledger-browser/package.json

@@ -53,10 +53,10 @@
     "start": "vite"
   },
   "dependencies": {
-    "@emotion/react": "11.11.3",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
     "@mui/icons-material": "5.15.10",
-    "@mui/material": "5.15.10",
+    "@mui/material": "5.15.15",
     "@supabase/supabase-js": "1.35.6",
     "apexcharts": "3.45.2",
     "localforage": "1.10.0",

packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx

@@ -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;

packages/cacti-ledger-browser/src/main/typescript/apps/cacti/index.ts → packages/cacti-ledger-browser/src/main/typescript/apps/cacti/index.tsx

@@ -1,8 +1,9 @@
+import { AppConfig } from "../../common/types/app";
 import StatusPage from "./pages/status-page";
 
-const appConfig = {
-  name: "Cacti",
-  url: "cacti",
+const appConfig: AppConfig = {
+  name: "Status",
+  path: "/cacti",
   menuEntries: [
     {
       title: "Plugin Status",
@@ -11,8 +12,7 @@ const appConfig = {
   ],
   routes: [
     {
-      path: "/",
-      component: StatusPage,
+      element: <StatusPage />,
     },
   ],
 };