feat(ledger-browser): implement dynamic app setup

- Read gui supabase connection information from environment variable. Include `.env` files in common `.gitignore` file. Change ledger-browser typescript target and module to `esnext` to use vite environment variables. - Read app configuration from the supabase DB. - Add button on home page for adding new application. Clicking on it will open dialog with setup wizzard. User must filter apps by it's group (step 1), select the app (step 2), input common app configuration data (step 3) and lastly input app-specific configuration (JSON format). - Add button to configure already added app. It opens a dialog that allows editing app details in the database. It also contains a button for deleting the app (after confirmation). - Show full screen error message with setup guidelines when app has failed to connect to supabase. - Clean up supabase type files, move app-related typedefs to specific app dirs. Depends on #3347 Signed-off-by: Michal Bajer <michal.bajer@fujitsu.com>
hyperledger-cacti · Aug 12, 2024 · 0e368de · 0e368de
1 parent b160c52
commit 0e368de
Show file tree

Hide file tree

Showing 42 changed files with 1,646 additions and 354 deletions.
diff --git a/.gitignore b/.gitignore
@@ -54,6 +54,7 @@ cactus-openapi-spec-*.json
 build/
 .gradle/
 site/
+.env
 
 .build-cache/*.tsbuildinfo
 

diff --git a/packages/cacti-ledger-browser/.env.template b/packages/cacti-ledger-browser/.env.template
@@ -0,0 +1,3 @@
+VITE_SUPABASE_URL=__SUPABSE_URL__
+VITE_SUPABASE_KEY=__SUPABASE_KEY__
+VITE_SUPABASE_SCHEMA=public
diff --git a/packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx b/packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx
@@ -1,28 +1,37 @@
-import { useRoutes, BrowserRouter, RouteObject } from "react-router-dom";
+import {
+  useRoutes,
+  BrowserRouter,
+  RouteObject,
+  Outlet,
+} from "react-router-dom";
 import CssBaseline from "@mui/material/CssBaseline";
+import CircularProgress from "@mui/material/CircularProgress";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from "@tanstack/react-query";
 // import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { themeOptions } from "./theme";
 import ContentLayout from "./components/Layout/ContentLayout";
 import HeaderBar from "./components/Layout/HeaderBar";
 import HomePage from "./pages/home/HomePage";
-import { AppConfig, AppListEntry } from "./common/types/app";
+import { AppInstance, AppListEntry } from "./common/types/app";
 import { patchAppRoutePath } from "./common/utils";
 import { NotificationProvider } from "./common/context/NotificationContext";
-
-type AppConfigProps = {
-  appConfig: AppConfig[];
-};
+import { guiAppConfig } from "./common/queries";
+import createApplications from "./common/createApplications";
+import ConnectionFailedDialog from "./components/ConnectionFailedDialog/ConnectionFailedDialog";
 
 /**
  * Get list of all apps from the config
  */
-function getAppList(appConfig: AppConfig[]) {
+function getAppList(appConfig: AppInstance[]) {
   const appList: AppListEntry[] = appConfig.map((app) => {
     return {
-      path: app.options.path,
+      path: app.path,
       name: app.appName,
     };
   });
@@ -38,17 +47,17 @@ function getAppList(appConfig: AppConfig[]) {
 /**
  * Create header bar for each app based on app menuEntries field in config.
  */
-function getHeaderBarRoutes(appConfig: AppConfig[]) {
+function getHeaderBarRoutes(appConfig: AppInstance[]) {
   const appList = getAppList(appConfig);
 
   const headerRoutesConfig = appConfig.map((app) => {
     return {
-      key: app.options.path,
-      path: `${app.options.path}/*`,
+      key: app.path,
+      path: `${app.path}/*`,
       element: (
         <HeaderBar
           appList={appList}
-          path={app.options.path}
+          path={app.path}
           menuEntries={app.menuEntries}
         />
       ),
@@ -65,15 +74,16 @@ function getHeaderBarRoutes(appConfig: AppConfig[]) {
 /**
  * Create content routes
  */
-function getContentRoutes(appConfig: AppConfig[]) {
+function getContentRoutes(appConfig: AppInstance[]) {
   const appRoutes: RouteObject[] = appConfig.map((app) => {
     return {
-      key: app.options.path,
-      path: app.options.path,
+      key: app.path,
+      path: app.path,
+      element: <Outlet context={app.options} />,
       children: app.routes.map((route) => {
         return {
           key: route.path,
-          path: patchAppRoutePath(app.options.path, route.path),
+          path: patchAppRoutePath(app.path, route.path),
           element: route.element,
           children: route.children,
         };
@@ -84,7 +94,7 @@ function getContentRoutes(appConfig: AppConfig[]) {
   // Include landing / welcome page
   appRoutes.push({
     index: true,
-    element: <HomePage />,
+    element: <HomePage appConfig={appConfig} />,
   });
 
   return useRoutes([
@@ -96,38 +106,54 @@ function getContentRoutes(appConfig: AppConfig[]) {
   ]);
 }
 
-const App: React.FC<AppConfigProps> = ({ appConfig }) => {
+function App() {
+  const { isError, isPending, data } = useQuery(guiAppConfig());
+
+  if (isError) {
+    return <ConnectionFailedDialog />;
+  }
+
+  const appConfig = createApplications(data);
+
   const headerRoutes = getHeaderBarRoutes(appConfig);
   const contentRoutes = getContentRoutes(appConfig);
 
   return (
     <div>
+      {isPending && (
+        <CircularProgress
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            zIndex: 9999,
+          }}
+        />
+      )}
       {headerRoutes}
       {contentRoutes}
     </div>
   );
-};
+}
 
 // MUI Theme
 const theme = createTheme(themeOptions);
 
 // React Query client
 const queryClient = new QueryClient();
 
-const CactiLedgerBrowserApp: React.FC<AppConfigProps> = ({ appConfig }) => {
+export default function CactiLedgerBrowserApp() {
   return (
     <BrowserRouter>
       <ThemeProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
           <NotificationProvider>
             <CssBaseline />
-            <App appConfig={appConfig} />
+            <App />
             {/* <ReactQueryDevtools initialIsOpen={false} /> */}
           </NotificationProvider>
         </QueryClientProvider>
       </ThemeProvider>
     </BrowserRouter>
   );
-};
-
-export default CactiLedgerBrowserApp;
+}
diff --git a/...ger-browser/src/main/typescript/apps/eth/components/AccountERC20View/AccountERC20View.tsx b/...ger-browser/src/main/typescript/apps/eth/components/AccountERC20View/AccountERC20View.tsx
@@ -3,9 +3,9 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 
-import { TokenERC20 } from "../../../../common/supabase-types";
 import ERC20TokenList from "./ERC20TokenList";
 import ERC20TokenDetails from "./ERC20TokenDetails";
+import { TokenERC20 } from "../../supabase-types";
 
 export type AccountERC20ViewProps = {
   accountAddress: string;

diff --git a/...ser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20BalanceHistoryTable.tsx b/...ser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20BalanceHistoryTable.tsx
@@ -14,8 +14,8 @@ import Typography from "@mui/material/Typography";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 
-import { TokenHistoryItem20 } from "../../../../common/supabase-types";
 import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
+import { TokenHistoryItem20 } from "../../supabase-types";
 
 const StyledHeaderCell = styled(TableCell)(({ theme }) => ({
   color: theme.palette.primary.main,

diff --git a/...er-browser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20TokenDetails.tsx b/...er-browser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20TokenDetails.tsx
@@ -7,12 +7,12 @@ import Typography from "@mui/material/Typography";
 import Skeleton from "@mui/material/Skeleton";
 
 import { ethERC20TokenHistory } from "../../queries";
-import { TokenERC20 } from "../../../../common/supabase-types";
 import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
 import { useNotification } from "../../../../common/context/NotificationContext";
 import ERC20BalanceHistoryChart from "./ERC20BalanceHistoryChart";
 import ERC20BalanceHistoryTable from "./ERC20BalanceHistoryTable";
 import { createBalanceHistoryList } from "./balanceHistory";
+import { TokenERC20 } from "../../supabase-types";
 
 function TokenDetailsPlaceholder() {
   return (

diff --git a/...edger-browser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20TokenList.tsx b/...edger-browser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20TokenList.tsx
@@ -14,8 +14,8 @@ import TableHead from "@mui/material/TableHead";
 import CircularProgress from "@mui/material/CircularProgress";
 
 import { useNotification } from "../../../../common/context/NotificationContext";
-import { TokenERC20 } from "../../../../common/supabase-types";
 import { ethAllERC20TokensByAccount } from "../../queries";
+import { TokenERC20 } from "../../supabase-types";
 
 const StyledHeaderCell = styled(TableCell)(({ theme }) => ({
   color: theme.palette.primary.main,

diff --git a/...ledger-browser/src/main/typescript/apps/eth/components/AccountERC20View/balanceHistory.ts b/...ledger-browser/src/main/typescript/apps/eth/components/AccountERC20View/balanceHistory.ts
@@ -1,4 +1,4 @@
-import { TokenHistoryItem20 } from "../../../../common/supabase-types";
+import { TokenHistoryItem20 } from "../../supabase-types";
 
 export type BalanceHistoryListData = {
   created_at: string;

diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/eth/hooks.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/eth/hooks.tsx
@@ -0,0 +1,16 @@
+import { useOutletContext } from "react-router-dom";
+import { AppInstancePersistencePluginOptions } from "../../common/types/app";
+
+export function useEthAppConfig() {
+  return useOutletContext<AppInstancePersistencePluginOptions>();
+}
+
+export function useEthSupabaseConfig() {
+  const appConfig = useEthAppConfig();
+
+  return {
+    schema: appConfig.supabaseSchema,
+    url: appConfig.supabaseUrl,
+    key: appConfig.supabaseKey,
+  };
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/eth/index.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/eth/index.tsx
@@ -2,49 +2,84 @@ import Dashboard from "./pages/Dashboard/Dashboard";
 import Blocks from "./pages/Blocks/Blocks";
 import Transactions from "./pages/Transactions/Transactions";
 import Accounts from "./pages/Accounts/Accounts";
-import { AppConfig } from "../../common/types/app";
+import {
+  AppInstancePersistencePluginOptions,
+  AppDefinition,
+} from "../../common/types/app";
 import { usePersistenceAppStatus } from "../../common/hook/use-persistence-app-status";
 import PersistencePluginStatus from "../../components/PersistencePluginStatus/PersistencePluginStatus";
+import { GuiAppConfig } from "../../common/supabase-types";
+import { AppCategory } from "../../common/app-category";
 
-const ethConfig: AppConfig = {
+const ethBrowserAppDefinition: AppDefinition = {
   appName: "Ethereum Browser",
-  options: {
-    instanceName: "Ethereum",
-    description:
-      "Applicaion for browsing Ethereum ledger blocks, transactions and tokens. Requires Ethereum persistence plugin to work correctly.",
-    path: "/eth",
+  category: AppCategory.LedgerBrowser,
+  defaultInstanceName: "My Eth Browser",
+  defaultDescription:
+    "Application for browsing Ethereum ledger blocks, transactions and tokens. Requires Ethereum persistence plugin to work correctly.",
+  defaultPath: "/eth",
+  defaultOptions: {
+    supabaseUrl: "http://localhost:8000",
+    supabaseKey:
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE",
+    supabaseSchema: "ethereum",
+  },
+
+  createAppInstance(app: GuiAppConfig) {
+    const supabaseOptions =
+      app.options as any as AppInstancePersistencePluginOptions;
+
+    if (
+      !supabaseOptions ||
+      !supabaseOptions.supabaseUrl ||
+      !supabaseOptions.supabaseKey ||
+      !supabaseOptions.supabaseSchema
+    ) {
+      throw new Error(
+        `Invalid ethereum app specific options in the database: ${JSON.stringify(supabaseOptions)}`,
+      );
+    }
+
+    return {
+      id: app.id,
+      appName: "Ethereum Browser",
+      instanceName: app.instance_name,
+      description: app.description,
+      path: app.path,
+      options: supabaseOptions,
+      menuEntries: [
+        {
+          title: "Dashboard",
+          url: "/",
+        },
+        {
+          title: "Accounts",
+          url: "/accounts",
+        },
+      ],
+      routes: [
+        {
+          element: <Dashboard />,
+        },
+        {
+          path: "blocks",
+          element: <Blocks />,
+        },
+        {
+          path: "transactions",
+          element: <Transactions />,
+        },
+        {
+          path: "accounts",
+          element: <Accounts />,
+        },
+      ],
+      useAppStatus: () => usePersistenceAppStatus("PluginPersistenceEthereum"),
+      StatusComponent: (
+        <PersistencePluginStatus pluginName="PluginPersistenceEthereum" />
+      ),
+    };
   },
-  menuEntries: [
-    {
-      title: "Dashboard",
-      url: "/",
-    },
-    {
-      title: "Accounts",
-      url: "/accounts",
-    },
-  ],
-  routes: [
-    {
-      element: <Dashboard />,
-    },
-    {
-      path: "blocks",
-      element: <Blocks />,
-    },
-    {
-      path: "transactions",
-      element: <Transactions />,
-    },
-    {
-      path: "accounts",
-      element: <Accounts />,
-    },
-  ],
-  useAppStatus: () => usePersistenceAppStatus("PluginPersistenceEthereum"),
-  StatusComponent: (
-    <PersistencePluginStatus pluginName="PluginPersistenceEthereum" />
-  ),
 };
 
-export default ethConfig;
+export default ethBrowserAppDefinition;