Add server sha to frontend

packages/components/src/api/ApiConfig.ts

@@ -480,6 +480,12 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/v1/stripe/portal/create_redirect`;
   }
 
+  // =============== Server ===============
+
+  getServerInfo(): string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/server_info`;
+  }
+
   // =============== Helper ===============
 
   private getScheme(): string {

packages/components/src/api/server/GetServerInfo.ts

@@ -0,0 +1,45 @@
+import { ApiConfig } from "../ApiConfig";
+
+export interface GetServerInfoSuccessResponse {
+  success: boolean,
+  server_build_sha: string,
+  server_hostname: string,
+}
+
+export interface GetServerInfoErrorResponse {
+}
+
+export type GetServerInfoResponse = GetServerInfoSuccessResponse | GetServerInfoErrorResponse;
+
+export function GetServerInfoIsOk(response: GetServerInfoResponse): response is GetServerInfoSuccessResponse {
+  return response.hasOwnProperty('server_build_sha');
+}
+
+export function GetServerInfoIsErr(response: GetServerInfoResponse): response is GetServerInfoErrorResponse {
+  return !response.hasOwnProperty('server_build_sha');
+}
+
+export async function GetServerInfo() : Promise<GetServerInfoResponse> {
+  const endpoint = new ApiConfig().getServerInfo();
+
+  return fetch(endpoint, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
+  .then(res => res.json())
+  .then(res => {
+    if (res && 'success' in res && res['success']) {
+      // NB: Timestamps aren't converted to Date objects on their own!
+      res['cache_time'] = new Date(res['cache_time']);
+      return res;
+    } else {
+      return { success : false };
+    }
+  })
+  .catch(e => {
+    return { success : false };
+  });
+}

packages/components/src/elements/GitSha.tsx

@@ -3,11 +3,12 @@ import React  from 'react';
 const GIT_SHA = "CURRENT_STORYTELLER_VERSION";
 
 interface Props {
+  prefix?: string,
 }
 
 function GitSha(props: Props) {
   return (
-    <span className="git-sha">{GIT_SHA}</span>
+    <span className="git-sha">{props.prefix}{GIT_SHA}</span>
   )
 }
 

packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { GitSha } from "@storyteller/components/src/elements/GitSha";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { Link } from "react-router-dom";
@@ -16,12 +16,26 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { EchelonTwitterLink } from "@storyteller/components/src/elements/EchelonTwitterLink";
+import { GetServerInfo, GetServerInfoIsOk, GetServerInfoSuccessResponse } from "@storyteller/components/src/api/server/GetServerInfo";
 
 interface Props {
   sessionWrapper: SessionWrapper;
 }
 
 function FooterNav(props: Props) {
+  const [serverInfo, setServerInfo] = useState<GetServerInfoSuccessResponse|undefined>(undefined);
+
+  const getServerInfo = useCallback(async () => {
+    const response = await GetServerInfo();
+    if (GetServerInfoIsOk(response)) {
+      setServerInfo(response);
+    }
+  }, []);
+
+  useEffect(() => {
+    getServerInfo();
+  }, [getServerInfo]);
+
   let moderationLink = <span />;
 
   if (props.sessionWrapper.canBanUsers()) {
@@ -35,6 +49,19 @@ function FooterNav(props: Props) {
     );
   }
 
+  let serverGitSha = <></>;
+  
+  if (serverInfo !== undefined 
+    && !!serverInfo.server_build_sha 
+    && serverInfo.server_build_sha !== 'undefined') 
+  {
+    serverGitSha = (
+      <div className="d-flex flex-column flex-lg-row align-items-center ">
+        <div className="git-sha">API: {serverInfo.server_build_sha.substring(0, 8)}</div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <footer id="footer">
@@ -165,8 +192,13 @@ function FooterNav(props: Props) {
             </span>
             <div className="d-flex flex-column flex-lg-row align-items-center ">
               {moderationLink}
-              <GitSha />
             </div>
+            <div className="d-flex flex-column flex-lg-row align-items-center ">
+              <GitSha prefix="FE: " />
+            </div>
+
+            {serverGitSha}
+
           </div>
         </div>
       </footer>