From 295d8a0bf83bba64793c9a8ff3db660633ff3458 Mon Sep 17 00:00:00 2001 From: nestoralvarezd <117365582+nestoralvarezd@users.noreply.github.com> Date: Fri, 24 Feb 2023 23:08:05 +0000 Subject: [PATCH] Display GraphExplorer version in client UI (#46) * Display GraphExplorer version in client UI * Update version number to 1.1.0 --------- Co-authored-by: Michael Chin --- additionaldocs/development.md | 9 +++++ package.json | 2 +- .../graph-explorer-proxy-server/package.json | 2 +- packages/graph-explorer/package.json | 2 +- .../graph-explorer/src/@types/typings.d.ts | 4 +++ .../components/Workspace/Workspace.styles.ts | 11 +++++++ .../Workspace/components/WorkspaceTopBar.tsx | 9 +++++ .../components/WorkspaceTopBarVersion.tsx | 33 +++++++++++++++++++ .../src/core/ThemeProvider/themes/dark.ts | 1 + .../src/core/ThemeProvider/themes/light.ts | 1 + .../src/core/ThemeProvider/types.ts | 1 + .../src/workspaces/common/TopBarWithLogo.tsx | 1 + packages/graph-explorer/vite.config.ts | 27 ++++++++++----- 13 files changed, 92 insertions(+), 11 deletions(-) create mode 100644 packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBarVersion.tsx diff --git a/additionaldocs/development.md b/additionaldocs/development.md index 58f3c475b..902142ca7 100644 --- a/additionaldocs/development.md +++ b/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: +- `/package.json` is intended to keep the dependencies for managing the repository. It has utilities like linter, code formatter, or git checks. +- `/packages/graph-explorer/package.json` is the package file that describes the UI client package. +- `/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 `/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. diff --git a/package.json b/package.json index 6dc41daf5..0dfa3a7d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "graph-explorer", - "version": "1.0.0", + "version": "1.1.0", "description": "Graph Explorer", "packageManager": "pnpm@7.9.3", "engines": { diff --git a/packages/graph-explorer-proxy-server/package.json b/packages/graph-explorer-proxy-server/package.json index aec8edb8e..b6b8e9fd5 100644 --- a/packages/graph-explorer-proxy-server/package.json +++ b/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": { diff --git a/packages/graph-explorer/package.json b/packages/graph-explorer/package.json index 14cc56f52..68d33dcca 100644 --- a/packages/graph-explorer/package.json +++ b/packages/graph-explorer/package.json @@ -1,6 +1,6 @@ { "name": "graph-explorer", - "version": "1.0.0", + "version": "1.1.0", "description": "Graph Explorer", "packageManager": "pnpm@7.9.3", "engines": { diff --git a/packages/graph-explorer/src/@types/typings.d.ts b/packages/graph-explorer/src/@types/typings.d.ts index a395d3689..1e7ca6b38 100644 --- a/packages/graph-explorer/src/@types/typings.d.ts +++ b/packages/graph-explorer/src/@types/typings.d.ts @@ -83,7 +83,11 @@ declare global { interface PromiseWithCancel extends Promise { cancel?: () => void; } + + /** Graph explorer version extracted from package.json */ + const __GRAPH_EXP_VERSION__: string; } + declare module "rc-dock" { /** * TabBase allow to add custom props diff --git a/packages/graph-explorer/src/components/Workspace/Workspace.styles.ts b/packages/graph-explorer/src/components/Workspace/Workspace.styles.ts index 729c298a7..7c39ebfbd 100644 --- a/packages/graph-explorer/src/components/Workspace/Workspace.styles.ts +++ b/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; diff --git a/packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBar.tsx b/packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBar.tsx index ba1a76b07..2f05df0a1 100644 --- a/packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBar.tsx +++ b/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 = ({ ] }
+ { + 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 diff --git a/packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBarVersion.tsx b/packages/graph-explorer/src/components/Workspace/components/WorkspaceTopBarVersion.tsx new file mode 100644 index 000000000..8bfe92677 --- /dev/null +++ b/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) => { + const pfx = withClassNamePrefix(classNamePrefix); + const stylesWithTheme = useWithTheme(); + return ( +
+ {children} +
+ ); +}; + +WorkspaceTopBarVersion.displayName = "WorkspaceTopBarVersion"; + +export default WorkspaceTopBarVersion; diff --git a/packages/graph-explorer/src/core/ThemeProvider/themes/dark.ts b/packages/graph-explorer/src/core/ThemeProvider/themes/dark.ts index 6909d892c..f6e7bef8f 100644 --- a/packages/graph-explorer/src/core/ThemeProvider/themes/dark.ts +++ b/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, diff --git a/packages/graph-explorer/src/core/ThemeProvider/themes/light.ts b/packages/graph-explorer/src/core/ThemeProvider/themes/light.ts index a69a80d79..d2b91d9c1 100644 --- a/packages/graph-explorer/src/core/ThemeProvider/themes/light.ts +++ b/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, diff --git a/packages/graph-explorer/src/core/ThemeProvider/types.ts b/packages/graph-explorer/src/core/ThemeProvider/types.ts index d34a274d9..a55d66b2e 100644 --- a/packages/graph-explorer/src/core/ThemeProvider/types.ts +++ b/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; diff --git a/packages/graph-explorer/src/workspaces/common/TopBarWithLogo.tsx b/packages/graph-explorer/src/workspaces/common/TopBarWithLogo.tsx index 785b6f579..58f2dc00e 100644 --- a/packages/graph-explorer/src/workspaces/common/TopBarWithLogo.tsx +++ b/packages/graph-explorer/src/workspaces/common/TopBarWithLogo.tsx @@ -15,6 +15,7 @@ const TopBarWithLogo = ({ children }: PropsWithChildren) => { `} > {children} + {__GRAPH_EXP_VERSION__} ); }; diff --git a/packages/graph-explorer/vite.config.ts b/packages/graph-explorer/vite.config.ts index 8f568a1f1..4754f2083 100644 --- a/packages/graph-explorer/vite.config.ts +++ b/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()], }; });