[CORL-132] Show version info (#2224)

* feat: show version info

* fix: use version from talk-common/version

src/core/build/createWebpackConfig.ts

@@ -12,6 +12,9 @@ import webpack, { Configuration, Plugin } from "webpack";
 import WebpackAssetsManifest from "webpack-assets-manifest";
 import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 
+// TODO: import form talk-common/version, for some reason this fails currently.
+// Try again when we have a chance to upgrade typescript.
+import { version } from "../common/version";
 import { Config } from "./config";
 import { createClientEnv } from "./config";
 import paths from "./paths";
@@ -49,7 +52,9 @@ export default function createWebpackConfig(
         result[key] = JSON.stringify((env as any)[key]);
         return result;
       },
-      {}
+      {
+        TALK_VERSION: JSON.stringify(version),
+      }
     ),
   };
 

src/core/client/admin/components/App.css

@@ -7,3 +7,7 @@
 
 .root {
 }
+
+.logoContainer {
+  position: relative;
+}

src/core/client/admin/components/App.tsx

@@ -6,6 +6,7 @@ import { AppBar, Begin, Divider, End } from "talk-ui/components/AppBar";
 import SignOutButtonContainer from "../containers/SignOutButtonContainer";
 import DecisionHistoryButton from "./DecisionHistoryButton";
 import Navigation from "./Navigation";
+import Version from "./Version";
 
 import styles from "./App.css";
 
@@ -13,7 +14,10 @@ const App: StatelessComponent = ({ children }) => (
   <div className={styles.root}>
     <AppBar gutterBegin gutterEnd>
       <Begin itemGutter="double">
-        <Logo />
+        <div className={styles.logoContainer}>
+          <Logo />
+          <Version />
+        </div>
         <Navigation />
       </Begin>
       <End>

src/core/client/admin/components/Version.css

@@ -0,0 +1,6 @@
+.version {
+  position: absolute;
+  right: 0;
+  top: 22px;
+  font-size: calc(10rem / var(--rem-base));
+}

src/core/client/admin/components/Version.tsx

@@ -0,0 +1,15 @@
+import React, { StatelessComponent } from "react";
+
+import { Typography } from "talk-ui/components";
+
+import styles from "./Version.css";
+
+const Version: StatelessComponent = () => {
+  return (
+    <Typography className={styles.version} variant="detail">
+      {process.env.TALK_VERSION ? `v${process.env.TALK_VERSION}` : "Unknown"}
+    </Typography>
+  );
+};
+
+export default Version;

src/core/client/admin/components/__snapshots__/App.spec.tsx.snap

@@ -11,7 +11,12 @@ exports[`renders correctly 1`] = `
     <withPropsOnChange(Begin)
       itemGutter="double"
     >
-      <withPropsOnChange(Logo) />
+      <div
+        className="App-logoContainer"
+      >
+        <withPropsOnChange(Logo) />
+        <Version />
+      </div>
       <Navigation />
     </withPropsOnChange(Begin)>
     <withPropsOnChange(End)>

src/core/client/admin/routes/login/views/signIn/components/SignIn.tsx

@@ -10,6 +10,7 @@ import SignInWithFacebookContainer from "../containers/SignInWithFacebookContain
 import SignInWithGoogleContainer from "../containers/SignInWithGoogleContainer";
 import SignInWithOIDCContainer from "../containers/SignInWithOIDCContainer";
 import OrSeparator from "./OrSeparator";
+import Version from "./Version";
 
 interface Props {
   error: string | null;
@@ -33,28 +34,31 @@ const SignIn: StatelessComponent<Props> = ({
   const oneClickIntegrationEnabled =
     facebookEnabled || googleEnabled || oidcEnabled;
   return (
-    <AuthBox
-      title={
-        <Localized id="login-signInTo">
-          <span>Sign in to</span>
-        </Localized>
-      }
-    >
-      <HorizontalGutter size="oneAndAHalf">
-        {error && (
-          <CallOut color="error" fullWidth>
-            {error}
-          </CallOut>
-        )}
-        {emailEnabled && <SignInWithEmailContainer />}
-        {emailEnabled && oneClickIntegrationEnabled && <OrSeparator />}
-        <HorizontalGutter>
-          {facebookEnabled && <SignInWithFacebookContainer auth={auth} />}
-          {googleEnabled && <SignInWithGoogleContainer auth={auth} />}
-          {oidcEnabled && <SignInWithOIDCContainer auth={auth} />}
+    <>
+      <AuthBox
+        title={
+          <Localized id="login-signInTo">
+            <span>Sign in to</span>
+          </Localized>
+        }
+      >
+        <HorizontalGutter size="oneAndAHalf">
+          {error && (
+            <CallOut color="error" fullWidth>
+              {error}
+            </CallOut>
+          )}
+          {emailEnabled && <SignInWithEmailContainer />}
+          {emailEnabled && oneClickIntegrationEnabled && <OrSeparator />}
+          <HorizontalGutter>
+            {facebookEnabled && <SignInWithFacebookContainer auth={auth} />}
+            {googleEnabled && <SignInWithGoogleContainer auth={auth} />}
+            {oidcEnabled && <SignInWithOIDCContainer auth={auth} />}
+          </HorizontalGutter>
         </HorizontalGutter>
-      </HorizontalGutter>
-    </AuthBox>
+      </AuthBox>
+      <Version />
+    </>
   );
 };
 

src/core/client/admin/routes/login/views/signIn/components/Version.css

@@ -0,0 +1,8 @@
+.version {
+  width: 350px;
+  background-color: #f5f5f5;
+  border: 1px solid var(--palette-grey-lighter);
+  border-top: 0;
+  padding: var(--spacing-unit);
+  box-sizing: border-box;
+}

src/core/client/admin/routes/login/views/signIn/components/Version.tsx

@@ -0,0 +1,17 @@
+import React, { StatelessComponent } from "react";
+
+import { Flex, Typography } from "talk-ui/components";
+
+import styles from "./Version.css";
+
+const Version: StatelessComponent = () => {
+  return (
+    <Flex justifyContent="center">
+      <Typography className={styles.version} variant="detail" align="center">
+        {process.env.TALK_VERSION ? `v${process.env.TALK_VERSION}` : "Unknown"}
+      </Typography>
+    </Flex>
+  );
+};
+
+export default Version;

src/core/client/admin/routes/login/views/signIn/components/__snapshots__/SignIn.spec.tsx.snap

@@ -1,21 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<AuthBox
-  title={
-    <Localized
-      id="login-signInTo"
-    >
-      <span>
-        Sign in to
-      </span>
-    </Localized>
-  }
->
-  <ForwardRef(forwardRef)
-    size="oneAndAHalf"
+<React.Fragment>
+  <AuthBox
+    title={
+      <Localized
+        id="login-signInTo"
+      >
+        <span>
+          Sign in to
+        </span>
+      </Localized>
+    }
   >
-    <ForwardRef(forwardRef) />
-  </ForwardRef(forwardRef)>
-</AuthBox>
+    <ForwardRef(forwardRef)
+      size="oneAndAHalf"
+    >
+      <ForwardRef(forwardRef) />
+    </ForwardRef(forwardRef)>
+  </AuthBox>
+  <Version />
+</React.Fragment>
 `;

src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap

@@ -526,6 +526,15 @@ exports[`renders sign in form 1`] = `
       </div>
     </div>
   </div>
+  <div
+    className="Flex-root Flex-flex Flex-justifyCenter"
+  >
+    <p
+      className="Typography-root Typography-detail Typography-colorTextPrimary Typography-alignCenter Version-version"
+    >
+      vTest
+    </p>
+  </div>
 </div>
 `;
 

src/core/client/test/setup.ts

@@ -2,3 +2,5 @@ import "jest-localstorage-mock";
 import "./enzyme";
 import "./jsdom";
 import "./mocks";
+
+process.env.TALK_VERSION = "Test";

tsconfig.json

@@ -13,6 +13,7 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "noErrorTruncation": true,
+    "resolveJsonModule": true,
     "lib": ["dom", "es6", "esnext.asynciterable"],
     "plugins": [
       {