Display GraphExplorer version in client UI

additionaldocs/development.md

@@ -20,6 +20,15 @@ This developer README details instructions for building on top of the graph-expl
 - Serve the static site using the method of your choice,
 for example, using `serve` npm package.
 
+#### Preparation of a release
+This repository is composed by 2 packages and a mono-repository structure itself. Then, you need to take into account 3 different `package.json` files:
+- `<root>/package.json` is intended to keep the dependencies for managing the repository. It has utilities like linter, code formatter, or git checks.
+- `<root>/packages/graph-explorer/package.json` is the package file that describes the UI client package.
+- `<root>/packages/graph-explorer-proxy-server/package.json` is the package file for the node server which is in charge of authentication and redirections of requests.
+
+Each of these `package.json` files has an independent `version` property. However, in this project we should keep them correlated. Therefore, when a new release version is being prepared, the version number should be increased in all 3 files.
+Regarding the version number displayed in the user interface, it is specifically extracted from the `<root>/packages/graph-explorer/package.json`. file
+
 ### Environment variables
 
 You can find a template for the following environment variables at `/packages/graph-explorer/.env`. All variables described below are optional and will default to the given values.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "graph-explorer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Graph Explorer",
   "packageManager": "[email protected]",
   "engines": {

packages/graph-explorer-proxy-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graph-explorer-proxy-server",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Server to facilitate communication between the browser and the supported graph database.",
   "main": "node-server.js",
   "scripts": {

packages/graph-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graph-explorer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Graph Explorer",
   "packageManager": "[email protected]",
   "engines": {

packages/graph-explorer/src/@types/typings.d.ts

@@ -83,7 +83,11 @@ declare global {
   interface PromiseWithCancel<T> extends Promise<T> {
     cancel?: () => void;
   }
+
+  /** Graph explorer version extracted from package.json */
+  const __GRAPH_EXP_VERSION__: string;
 }
+
 declare module "rc-dock" {
   /**
    * TabBase allow to add custom props

packages/graph-explorer/src/components/Workspace/Workspace.styles.ts

@@ -185,6 +185,16 @@ const topBarTitleContent: ThemeStyleFn = ({ theme }) => css`
   justify-content: center;
 `;
 
+const topBarTitleVersion: ThemeStyleFn = ({ theme }) => css`
+  display: flex;
+  margin: ${theme.spacing["2x"]};
+  justify-content: center;
+  align-items: center;
+  font-size: ${theme.typography.sizes.xs};
+  font-weight: ${theme.typography.weight.light};
+  color: ${theme.palette.text.secondary};
+`;
+
 const styles = {
   additionalControlsSectionStyles,
   baseStyles,
@@ -197,6 +207,7 @@ const styles = {
   togglesSectionStyles,
   topBarSectionStyles,
   topBarTitleContent,
+  topBarTitleVersion,
 };
 
 export default styles;

packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBar.tsx

@@ -10,6 +10,7 @@ import WorkspaceTopBarAdditionalControls from "./WorkspaceTopBarAdditionalContro
 import WorkspaceTopBarContent from "./WorkspaceTopBarContent";
 import WorkspaceTopBarTitle from "./WorkspaceTopBarTitle";
 import WorkspaceTopBarToggles from "./WorkspaceTopBarToggles";
+import WorkspaceTopBarVersion from "./WorkspaceTopBarVersion";
 
 export type WorkspaceTopBarProps = {
   className?: string;
@@ -24,6 +25,7 @@ interface WorkspaceTopBarComposition {
   Toggles: typeof WorkspaceTopBarToggles;
   AdditionalControls: typeof WorkspaceTopBarAdditionalControls;
   Content: typeof WorkspaceTopBarContent;
+  Version: typeof WorkspaceTopBarVersion;
 }
 
 const WorkspaceTopBar = ({
@@ -47,6 +49,7 @@ const WorkspaceTopBar = ({
           WorkspaceTopBarContent.displayName || WorkspaceTopBarContent.name,
           WorkspaceTopBarAdditionalControls.displayName ||
             WorkspaceTopBarAdditionalControls.name,
+          WorkspaceTopBarVersion.displayName || WorkspaceTopBarVersion.name,
         ],
         "rest"
       ),
@@ -78,6 +81,11 @@ const WorkspaceTopBar = ({
           ]
         }
         <div className={pfx("space")} />
+        {
+          childrenByType[
+            WorkspaceTopBarVersion.displayName || WorkspaceTopBarVersion.name
+          ]
+        }
         {
           childrenByType[
             WorkspaceTopBarToggles.displayName || WorkspaceTopBarToggles.name
@@ -108,6 +116,7 @@ WorkspaceTopBar.Title = WorkspaceTopBarTitle;
 WorkspaceTopBar.Toggles = WorkspaceTopBarToggles;
 WorkspaceTopBar.AdditionalControls = WorkspaceTopBarAdditionalControls;
 WorkspaceTopBar.Content = WorkspaceTopBarContent;
+WorkspaceTopBar.Version = WorkspaceTopBarVersion;
 
 export default WorkspaceTopBar as ((
   props: PropsWithChildren<WorkspaceTopBarProps>

packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBarVersion.tsx

@@ -0,0 +1,33 @@
+import { cx } from "@emotion/css";
+import type { PropsWithChildren } from "react";
+import { useWithTheme, withClassNamePrefix } from "../../../core";
+import styles from "../Workspace.styles";
+
+export type WorkspaceTopBarVersionProps = {
+  className?: string;
+  classNamePrefix?: string;
+};
+
+const WorkspaceTopBarVersion = ({
+  className,
+  classNamePrefix = "ft",
+  children,
+}: PropsWithChildren<WorkspaceTopBarVersionProps>) => {
+  const pfx = withClassNamePrefix(classNamePrefix);
+  const stylesWithTheme = useWithTheme();
+  return (
+    <div
+      className={cx(
+        stylesWithTheme(styles.topBarTitleVersion),
+        pfx("top-bar-version"),
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+WorkspaceTopBarVersion.displayName = "WorkspaceTopBarVersion";
+
+export default WorkspaceTopBarVersion;

packages/graph-explorer/src/core/ThemeProvider/themes/dark.ts

@@ -124,6 +124,7 @@ const DARK_THEME: ProcessedTheme = {
       xl: "1.25rem",
     },
     weight: {
+      light: 400,
       base: 500,
       bold: 600,
       extraBold: 700,

packages/graph-explorer/src/core/ThemeProvider/themes/light.ts

@@ -116,6 +116,7 @@ const LIGHT_THEME: ProcessedTheme = {
       xl: "1.25rem",
     },
     weight: {
+      light: 400,
       base: 500,
       bold: 600,
       extraBold: 700,

packages/graph-explorer/src/core/ThemeProvider/types.ts

@@ -46,6 +46,7 @@ export type Typography = {
     xl?: string;
   };
   weight?: {
+    light?: number;
     base?: number;
     bold?: number;
     extraBold?: number;

packages/graph-explorer/src/workspaces/common/TopBarWithLogo.tsx

@@ -15,6 +15,7 @@ const TopBarWithLogo = ({ children }: PropsWithChildren<any>) => {
       `}
     >
       {children}
+      <Workspace.TopBar.Version>{__GRAPH_EXP_VERSION__}</Workspace.TopBar.Version>
     </Workspace.TopBar>
   );
 };

packages/graph-explorer/vite.config.ts

@@ -1,6 +1,6 @@
 import react from "@vitejs/plugin-react";
+import * as fs from "fs";
 import { defineConfig, loadEnv } from "vite";
-import fs from "fs";
 
 export default defineConfig(async ({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
@@ -20,25 +20,36 @@ export default defineConfig(async ({ mode }) => {
   };
 
   const serverInfo = () => {
-    if (env.GRAPH_EXP_HTTPS_CONNECTION != "false" && fs.existsSync("../graph-explorer-proxy-server/cert-info/server.key") && fs.existsSync("../graph-explorer-proxy-server/cert-info/server.crt")) {
+    if (
+      env.GRAPH_EXP_HTTPS_CONNECTION != "false" &&
+      fs.existsSync("../graph-explorer-proxy-server/cert-info/server.key") &&
+      fs.existsSync("../graph-explorer-proxy-server/cert-info/server.crt")
+    ) {
       return {
         host: true,
         https: {
-          key: fs.readFileSync("../graph-explorer-proxy-server/cert-info/server.key"),
-          cert: fs.readFileSync("../graph-explorer-proxy-server/cert-info/server.crt"),
+          key: fs.readFileSync(
+            "../graph-explorer-proxy-server/cert-info/server.key"
+          ),
+          cert: fs.readFileSync(
+            "../graph-explorer-proxy-server/cert-info/server.crt"
+          ),
         },
-      }
+      };
     } else {
       return {
-        host: true
-      }
+        host: true,
+      };
     }
-  }
+  };
 
   return {
     server: serverInfo(),
     base: env.GRAPH_EXP_ENV_ROOT_FOLDER,
     envPrefix: "GRAPH_EXP",
+    define: {
+      __GRAPH_EXP_VERSION__: JSON.stringify(process.env.npm_package_version),
+    },
     plugins: [htmlPlugin(), react()],
   };
 });