Skip to content

Commit

Permalink
Display GraphExplorer version in client UI (#46)
Browse files Browse the repository at this point in the history
* Display GraphExplorer version in client UI

* Update version number to 1.1.0

---------

Co-authored-by: Michael Chin <[email protected]>
  • Loading branch information
nestoralvarezd and michaelnchin authored Feb 24, 2023
1 parent 7c6d142 commit 295d8a0
Showing 13 changed files with 92 additions and 11 deletions.
9 changes: 9 additions & 0 deletions additionaldocs/development.md
Original file line number Diff line number Diff line change
@@ -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.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "graph-explorer",
"version": "1.0.0",
"version": "1.1.0",
"description": "Graph Explorer",
"packageManager": "[email protected]",
"engines": {
2 changes: 1 addition & 1 deletion packages/graph-explorer-proxy-server/package.json
Original file line number Diff line number Diff line change
@@ -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": {
2 changes: 1 addition & 1 deletion packages/graph-explorer/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "graph-explorer",
"version": "1.0.0",
"version": "1.1.0",
"description": "Graph Explorer",
"packageManager": "[email protected]",
"engines": {
4 changes: 4 additions & 0 deletions packages/graph-explorer/src/@types/typings.d.ts
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -124,6 +124,7 @@ const DARK_THEME: ProcessedTheme = {
xl: "1.25rem",
},
weight: {
light: 400,
base: 500,
bold: 600,
extraBold: 700,
Original file line number Diff line number Diff line change
@@ -116,6 +116,7 @@ const LIGHT_THEME: ProcessedTheme = {
xl: "1.25rem",
},
weight: {
light: 400,
base: 500,
bold: 600,
extraBold: 700,
1 change: 1 addition & 0 deletions packages/graph-explorer/src/core/ThemeProvider/types.ts
Original file line number Diff line number Diff line change
@@ -46,6 +46,7 @@ export type Typography = {
xl?: string;
};
weight?: {
light?: number;
base?: number;
bold?: number;
extraBold?: number;
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ const TopBarWithLogo = ({ children }: PropsWithChildren<any>) => {
`}
>
{children}
<Workspace.TopBar.Version>{__GRAPH_EXP_VERSION__}</Workspace.TopBar.Version>
</Workspace.TopBar>
);
};
27 changes: 19 additions & 8 deletions packages/graph-explorer/vite.config.ts
Original file line number Diff line number Diff line change
@@ -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()],
};
});

0 comments on commit 295d8a0

Please sign in to comment.