From 1bf63285bcb05ad93f43c716de57a8a11cd1f26f Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Thu, 14 Mar 2019 23:09:16 +0100
Subject: [PATCH] [CORL-132] Show version info (#2224)

* feat: show version info

* fix: use version from talk-common/version
---
 src/core/build/createWebpackConfig.ts         |  7 ++-
 src/core/client/admin/components/App.css      |  4 ++
 src/core/client/admin/components/App.tsx      |  6 ++-
 src/core/client/admin/components/Version.css  |  6 +++
 src/core/client/admin/components/Version.tsx  | 15 ++++++
 .../__snapshots__/App.spec.tsx.snap           |  7 ++-
 .../login/views/signIn/components/SignIn.tsx  | 46 ++++++++++---------
 .../login/views/signIn/components/Version.css |  8 ++++
 .../login/views/signIn/components/Version.tsx | 17 +++++++
 .../__snapshots__/SignIn.spec.tsx.snap        | 35 +++++++-------
 .../signInWithEmail.spec.tsx.snap             |  9 ++++
 src/core/client/test/setup.ts                 |  2 +
 tsconfig.json                                 |  1 +
 13 files changed, 123 insertions(+), 40 deletions(-)
 create mode 100644 src/core/client/admin/components/Version.css
 create mode 100644 src/core/client/admin/components/Version.tsx
 create mode 100644 src/core/client/admin/routes/login/views/signIn/components/Version.css
 create mode 100644 src/core/client/admin/routes/login/views/signIn/components/Version.tsx

diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
index feddb4456..12a13e9a2 100644
--- a/src/core/build/createWebpackConfig.ts
+++ b/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),
+      }
     ),
   };
 
diff --git a/src/core/client/admin/components/App.css b/src/core/client/admin/components/App.css
index 3bddc8818..fe0f29c44 100644
--- a/src/core/client/admin/components/App.css
+++ b/src/core/client/admin/components/App.css
@@ -7,3 +7,7 @@
 
 .root {
 }
+
+.logoContainer {
+  position: relative;
+}
diff --git a/src/core/client/admin/components/App.tsx b/src/core/client/admin/components/App.tsx
index 1ab832afc..f04127343 100644
--- a/src/core/client/admin/components/App.tsx
+++ b/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>
diff --git a/src/core/client/admin/components/Version.css b/src/core/client/admin/components/Version.css
new file mode 100644
index 000000000..02722beec
--- /dev/null
+++ b/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));
+}
diff --git a/src/core/client/admin/components/Version.tsx b/src/core/client/admin/components/Version.tsx
new file mode 100644
index 000000000..5ec6e11cc
--- /dev/null
+++ b/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;
diff --git a/src/core/client/admin/components/__snapshots__/App.spec.tsx.snap b/src/core/client/admin/components/__snapshots__/App.spec.tsx.snap
index 5f0d02dca..32304ba1a 100644
--- a/src/core/client/admin/components/__snapshots__/App.spec.tsx.snap
+++ b/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)>
diff --git a/src/core/client/admin/routes/login/views/signIn/components/SignIn.tsx b/src/core/client/admin/routes/login/views/signIn/components/SignIn.tsx
index fbe440a90..b9987e2fd 100644
--- a/src/core/client/admin/routes/login/views/signIn/components/SignIn.tsx
+++ b/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 />
+    </>
   );
 };
 
diff --git a/src/core/client/admin/routes/login/views/signIn/components/Version.css b/src/core/client/admin/routes/login/views/signIn/components/Version.css
new file mode 100644
index 000000000..d66b90d5d
--- /dev/null
+++ b/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;
+}
diff --git a/src/core/client/admin/routes/login/views/signIn/components/Version.tsx b/src/core/client/admin/routes/login/views/signIn/components/Version.tsx
new file mode 100644
index 000000000..39f507fed
--- /dev/null
+++ b/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;
diff --git a/src/core/client/admin/routes/login/views/signIn/components/__snapshots__/SignIn.spec.tsx.snap b/src/core/client/admin/routes/login/views/signIn/components/__snapshots__/SignIn.spec.tsx.snap
index 0678c6565..16bd78727 100644
--- a/src/core/client/admin/routes/login/views/signIn/components/__snapshots__/SignIn.spec.tsx.snap
+++ b/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>
 `;
diff --git a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
index 8f622d720..b4ad5e947 100644
--- a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+++ b/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>
 `;
 
diff --git a/src/core/client/test/setup.ts b/src/core/client/test/setup.ts
index b818ce265..67ec80410 100644
--- a/src/core/client/test/setup.ts
+++ b/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";
diff --git a/tsconfig.json b/tsconfig.json
index 54485936a..6b4a4e4e3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "noErrorTruncation": true,
+    "resolveJsonModule": true,
     "lib": ["dom", "es6", "esnext.asynciterable"],
     "plugins": [
       {