Show @stellar/anchor-tests version on UI (#113)

* Show @stellar/anchor-tests version on UI

* Use local package.json

* Use peer dependency

* Get package version from server

* Cleanup

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 lib
 config.json
+tsconfig.tsbuildinfo
 
 .DS_Store
 

server/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc -p ./src/tsconfig.json",
     "start": "node ./lib/index.js"
   },
   "prettier": "@stellar/prettier-config",

server/src/anchorTestsPkgVersion.ts

@@ -0,0 +1,4 @@
+import PackageJson from "../package.json";
+
+export const anchorTestsPkgVersion = () =>
+  PackageJson.peerDependencies["@stellar/anchor-tests"].replace(/^(\^)/, "");

server/src/eventHandlers.ts

@@ -8,9 +8,11 @@ import {
   SerializedError,
 } from "./serializers";
 import logger from "./logging";
+import { anchorTestsPkgVersion } from "./anchorTestsPkgVersion";
 
 export const getTestsEventName = "getTests";
 export const runTestsEventName = "runTests";
+export const getVersionEventName = "getVersion";
 
 export async function onGetTests(
   this: Socket,
@@ -51,3 +53,20 @@ export async function onRunTests(
     return;
   }
 }
+
+export async function onGetVersion(
+  this: Socket,
+  callback: (error: SerializedError) => void,
+) {
+  logger.info(`received '${getVersionEventName}' request from ${this.id}`);
+  try {
+    this.emit(getVersionEventName, anchorTestsPkgVersion());
+  } catch (e) {
+    const error = serializeError(e);
+    logger.error(
+      `anchorTestsPkgVersion() threw an exception: '${error.name}: ${error.message}\n${e.stack}'`,
+    );
+    if (callback) callback(error);
+    return;
+  }
+}

server/src/index.ts

@@ -5,8 +5,10 @@ import { createServer } from "http";
 import {
   getTestsEventName,
   runTestsEventName,
+  getVersionEventName,
   onGetTests,
   onRunTests,
+  onGetVersion,
 } from "./eventHandlers";
 import logger from "./logging";
 
@@ -23,11 +25,16 @@ io.on("connection", (socket: Socket) => {
   logger.info(`Connection established with socket ${socket.id}`);
   socket.on(getTestsEventName, onGetTests);
   socket.on(runTestsEventName, onRunTests);
+  socket.on(getVersionEventName, onGetVersion);
   socket.on("disconnect", (reason: string) => {
     logger.info(`socket ${socket.id} disconnected: ${reason}`);
   });
   socket.onAny((event, ..._args) => {
-    if (![getTestsEventName, runTestsEventName].includes(event)) {
+    if (
+      ![getTestsEventName, runTestsEventName, getVersionEventName].includes(
+        event,
+      )
+    ) {
       logger.warning(`unexpected event received: ${event}`);
     }
   });

server/src/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "declaration": true,
+    "declarationDir": "../lib",
+    "rootDir": ".",
+    "outDir": "../lib",
+    "lib": ["esnext"],
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true // required to make package.json file import to work
+  },
+  "references": [
+    {
+      "path": "../"
+    }
+  ],
+}

server/tsconfig.json

@@ -2,13 +2,14 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
-    "declaration": true,
-    "declarationDir": "lib",
-    "rootDir": "src",
-    "outDir": "lib",
+    "rootDir": ".",
+    "outDir": ".",
     "lib": ["esnext"],
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "resolveJsonModule": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "files": ["package.json"]
 }

ui/nginx.conf

@@ -23,6 +23,13 @@ server {
       proxy_pass http://localhost:8000;
     }
 
+    location /version {
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header Host $host;
+
+      proxy_pass http://localhost:8000;
+    }
+
     location /api {
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Host $host;

ui/src/App.tsx

@@ -1,12 +1,15 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import * as Sentry from "@sentry/browser";
 import { Integrations } from "@sentry/tracing";
 import { Layout } from "@stellar/design-system";
 
 import { METRIC_NAMES } from "constants/metricNames";
 import { emitMetric } from "helpers/metrics";
+import { socket } from "helpers/socketConnection";
 import { TestRunner } from "views/TestRunner";
 
+import "./styles.css";
+
 if (process.env.REACT_APP_SENTRY_KEY) {
   Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_KEY,
@@ -17,6 +20,28 @@ if (process.env.REACT_APP_SENTRY_KEY) {
 }
 
 export const App = () => {
+  const [pkgVersion, setPkgVersion] = useState("");
+
+  useEffect(() => {
+    socket.on("connect", () => {
+      socket.emit("getVersion");
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    socket.on("getVersion", (version) => {
+      setPkgVersion(version);
+    });
+
+    return () => {
+      socket.off("getVersion");
+    };
+  }, []);
+
   useEffect(() => {
     emitMetric(METRIC_NAMES.viewHome);
   }, []);
@@ -35,7 +60,11 @@ export const App = () => {
         </Layout.Inset>
       </Layout.Content>
 
-      <Layout.Footer gitHubLink="https://github.com/stellar/stellar-anchor-tests" />
+      <Layout.Footer gitHubLink="https://github.com/stellar/stellar-anchor-tests">
+        {pkgVersion ? (
+          <div className="Footer__note">{`@stellar/anchor-tests v${pkgVersion}`}</div>
+        ) : null}
+      </Layout.Footer>
     </>
   );
 };

ui/src/styles.css

@@ -0,0 +1,8 @@
+.Footer__note {
+  color: var(--pal-text-secondary);
+  font-size: 14px;
+}
+
+.Layout__footer__content > a.TextLink {
+  order: 1;
+}