feat(wip): add links in headers

outSH · Jul 16, 2024 · bf85406 · bf85406
1 parent 28a12a5
commit bf85406
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 40 deletions.
diff --git a/packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx b/packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx
@@ -18,55 +18,36 @@ import { themeOptions } from "./theme";
 import ContentLayout from "./components/Layout/ContentLayout";
 import HeaderBar from "./components/Layout/HeaderBar";
 import HomePage from "./pages/home/HomePage";
-import { AppInstance, AppListEntry } from "./common/types/app";
+import { AppInstance } from "./common/types/app";
 import { patchAppRoutePath } from "./common/utils";
 import { NotificationProvider } from "./common/context/NotificationContext";
 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: AppInstance[]) {
- const appList: AppListEntry[] = appConfig.map((app) => {
- return {
- path: app.path,
- name: app.appName,
- };
- });
-
- appList.unshift({
- path: "/",
- name: "Home",
- });
-
- return appList;
-}
-
 /**
  * Create header bar for each app based on app menuEntries field in config.
  */
 function getHeaderBarRoutes(appConfig: AppInstance[]) {
- 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}
+ appDocumentationURL={app.appDocumentationURL}
  />
  ),
  };
  });
  headerRoutesConfig.push({
  key: "home",
  path: `*`,
- element: <HeaderBar appList={appList} />,
+ element: (
+ <HeaderBar appDocumentationURL="https://github.com/hyperledger/cacti" />
+ ),
  });
  return useRoutes(headerRoutesConfig);
 }

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
@@ -78,6 +78,8 @@ const ethBrowserAppDefinition: AppDefinition = {
  StatusComponent: (
  <PersistencePluginStatus pluginName="PluginPersistenceEthereum" />
  ),
+ appSetupGuideURL: ethBrowserAppDefinition.appSetupGuideURL,
+ appDocumentationURL: ethBrowserAppDefinition.appDocumentationURL,
  };
  },
 };

diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/index.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/index.tsx
@@ -86,6 +86,8 @@ const fabricBrowserAppDefinition: AppDefinition = {
  StatusComponent: (
  <PersistencePluginStatus pluginName="PluginPersistenceFabric" />
  ),
+ appSetupGuideURL: fabricBrowserAppDefinition.appSetupGuideURL,
+ appDocumentationURL: fabricBrowserAppDefinition.appDocumentationURL,
  };
  },
 };

diff --git a/packages/cacti-ledger-browser/src/main/typescript/common/types/app.ts b/packages/cacti-ledger-browser/src/main/typescript/common/types/app.ts
@@ -40,13 +40,17 @@ export interface AppInstance<T = unknown> {
  routes: RouteObject[];
  useAppStatus: () => GetStatusResponse;
  StatusComponent: React.ReactElement;
+ appSetupGuideURL?: string;
+ appDocumentationURL?: string;
 }
 
 export type CreateAppInstanceFactoryType = (app: GuiAppConfig) => AppInstance;
 
 export interface AppDefinition {
  appName: string;
  category: string;
+ appSetupGuideURL?: string;
+ appDocumentationURL?: string;
  defaultInstanceName: string;
  defaultDescription: string;
  defaultPath: string;

diff --git a/packages/cacti-ledger-browser/src/main/typescript/common/utils.ts b/packages/cacti-ledger-browser/src/main/typescript/common/utils.ts
@@ -15,3 +15,21 @@ export function patchAppRoutePath(appPath: string, routePath?: string) {
  return appPath;
  }
 }
+
+/**
+ * Returns true if provided url is defined and vald, returns false and
+ * writes error to `console.error` otherwise.
+ */
+export function isValidUrl(urlString?: string) {
+ if (!urlString) {
+ return false;
+ }
+
+ try {
+ new URL(urlString);
+ return true;
+ } catch (e) {
+ console.error(`Invalid URL provided: ${urlString}, error: ${e}`);
+ return false;
+ }
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/components/Layout/HeaderBar.tsx b/packages/cacti-ledger-browser/src/main/typescript/components/Layout/HeaderBar.tsx
@@ -5,18 +5,23 @@ import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import AppsIcon from "@mui/icons-material/Apps";
+import HelpIcon from "@mui/icons-material/Help";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
-import { AppInstanceMenuEntry, AppListEntry } from "../../common/types/app";
-import { patchAppRoutePath } from "../../common/utils";
+import { AppInstanceMenuEntry } from "../../common/types/app";
+import { isValidUrl, patchAppRoutePath } from "../../common/utils";
 
 type HeaderBarProps = {
- appList: AppListEntry[];
  path?: string;
  menuEntries?: AppInstanceMenuEntry[];
+ appDocumentationURL?: string;
 };
 
-const HeaderBar: React.FC<HeaderBarProps> = ({ path, menuEntries }) => {
+export default function HeaderBarProps({
+ path,
+ menuEntries,
+ appDocumentationURL,
+}: HeaderBarProps) {
  return (
  <AppBar position="static" sx={{ paddingX: 2 }}>
  <Toolbar disableGutters>
@@ -48,9 +53,19 @@ const HeaderBar: React.FC<HeaderBarProps> = ({ path, menuEntries }) => {
  ))}
  </Box>
  )}
+ <Box sx={{ flexGrow: 1, display: "flex" }} />
+ {isValidUrl(appDocumentationURL) && (
+ <IconButton
+ size="large"
+ edge="start"
+ color="inherit"
+ aria-label="help-button"
+ onClick={() => window.open(appDocumentationURL, "_blank")}
+ >
+ <HelpIcon />
+ </IconButton>
+ )}
  </Toolbar>
  </AppBar>
  );
-};
-
-export default HeaderBar;
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/pages/add-new-app/SelectAppView.tsx b/packages/cacti-ledger-browser/src/main/typescript/pages/add-new-app/SelectAppView.tsx
@@ -6,9 +6,11 @@ import ListItemText from "@mui/material/ListItemText";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import Avatar from "@mui/material/Avatar";
 import ListItemButton from "@mui/material/ListItemButton";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
 import config from "../../common/config";
 import { AppCategory, getAppCategoryConfig } from "../../common/app-category";
+import { isValidUrl } from "../../common/utils";
 
 export interface SelectAppViewProps {
  appCategory: string;
@@ -36,15 +38,26 @@ export default function SelectAppView({
  <List sx={{ width: "100%", bgcolor: "background.paper" }}>
  {apps.map(([appId, app]) => {
  return (
- <ListItemButton onClick={() => handleAppSelected(appId)}>
- <ListItemAvatar>
- <Avatar>{categoryConfig.icon}</Avatar>
- </ListItemAvatar>
- <ListItemText
- primary={app.appName}
- secondary={app.defaultDescription}
- />
- </ListItemButton>
+ <Box sx={{ display: "flex", flexDirection: "row" }}>
+ <ListItemButton onClick={() => handleAppSelected(appId)}>
+ <ListItemAvatar>
+ <Avatar>{categoryConfig.icon}</Avatar>
+ </ListItemAvatar>
+ <ListItemText
+ primary={app.appName}
+ secondary={app.defaultDescription}
+ />
+ </ListItemButton>
+ <Button
+ disabled={!isValidUrl(app.appSetupGuideURL)}
+ endIcon={<OpenInNewIcon />}
+ size="large"
+ onClick={() => window.open(app.appSetupGuideURL, "_blank")}
+ sx={{ margin: 1, padding: 2 }}
+ >
+ Setup Guide
+ </Button>
+ </Box>
  );
  })}
  </List>