Integrate build version in UI (#629)

Makefile

@@ -1,14 +1,27 @@
-ifeq ($(OS),Windows_NT)
+IS_WIN =
+ifeq (${SHELL}, sh.exe)
+  IS_WIN = true
+endif
+ifeq (${SHELL}, cmd)
+  IS_WIN = true
+endif
+
+ifdef IS_WIN
   SEPARATOR := &&
   SET := set
+else 
+  SEPARATOR := ;
+  SET := export
 endif
 
 release: generate ui build
 
-build:
+pre-build:
 	$(eval DATE := $(shell go run scripts/getDate.go))
 	$(eval GITHASH := $(shell git rev-parse --short HEAD))
 	$(eval STASH_VERSION := $(shell git describe --tags --exclude latest_develop))
+
+build: pre-build
 	$(SET) CGO_ENABLED=1 $(SEPARATOR) go build -mod=vendor -v -ldflags "-X 'github.com/stashapp/stash/pkg/api.version=$(STASH_VERSION)' -X 'github.com/stashapp/stash/pkg/api.buildstamp=$(DATE)' -X 'github.com/stashapp/stash/pkg/api.githash=$(GITHASH)'"
 
 install:
@@ -59,10 +72,19 @@ pre-ui:
 	cd ui/v2.5 && yarn install --frozen-lockfile
 
 .PHONY: ui
-ui:
+ui: pre-build
+	$(SET) REACT_APP_DATE="$(DATE)" $(SEPARATOR) \
+	$(SET) REACT_APP_GITHASH=$(GITHASH) $(SEPARATOR) \
+	$(SET) REACT_APP_STASH_VERSION=$(STASH_VERSION) $(SEPARATOR) \
 	cd ui/v2.5 && yarn build
 	packr2
 
+ui-start: pre-build
+	$(SET) REACT_APP_DATE="$(DATE)" $(SEPARATOR) \
+	$(SET) REACT_APP_GITHASH=$(GITHASH) $(SEPARATOR) \
+	$(SET) REACT_APP_STASH_VERSION=$(STASH_VERSION) $(SEPARATOR) \
+	cd ui/v2.5 && yarn start
+
 fmt-ui:
 	cd ui/v2.5 && yarn format
 

ui/v2.5/src/components/Changelog/Changelog.tsx

@@ -6,6 +6,14 @@ import { V010, V011, V020, V021, V030 } from "./versions";
 const Changelog: React.FC = () => {
   const [{ data, loading }, setOpenState] = useChangelogStorage();
 
+  const stashVersion = process.env.REACT_APP_STASH_VERSION;
+  const buildTime = process.env.REACT_APP_DATE;
+
+  let buildDate;
+  if (buildTime) {
+    buildDate = buildTime.substring(0, buildTime.indexOf(" "));
+  }
+
   if (loading) return <></>;
 
   const openState = data?.versions ?? {};
@@ -22,7 +30,8 @@ const Changelog: React.FC = () => {
     <>
       <h1 className="mb-4">Changelog:</h1>
       <Version
-        version="v0.3.0"
+        version={stashVersion || "v0.3.0"}
+        date={buildDate}
         openState={openState}
         setOpenState={setVersionOpenState}
         defaultOpen

ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import { Button, Table } from "react-bootstrap";
 import { LoadingIndicator } from "src/components/Shared";
-import { useVersion, useLatestVersion } from "src/core/StashService";
+import { useLatestVersion } from "src/core/StashService";
 
 export const SettingsAboutPanel: React.FC = () => {
-  const { data, error, loading } = useVersion();
+  const gitHash = process.env.REACT_APP_GITHASH;
+  const stashVersion = process.env.REACT_APP_STASH_VERSION;
+  const buildTime = process.env.REACT_APP_DATE;
+
   const {
     data: dataLatest,
     error: errorLatest,
@@ -14,13 +17,13 @@ export const SettingsAboutPanel: React.FC = () => {
   } = useLatestVersion();
 
   function maybeRenderTag() {
-    if (!data || !data.version || !data.version.version) {
+    if (!stashVersion) {
       return;
     }
     return (
       <tr>
         <td>Version:</td>
-        <td>{data.version.version}</td>
+        <td>{stashVersion}</td>
       </tr>
     );
   }
@@ -32,11 +35,8 @@ export const SettingsAboutPanel: React.FC = () => {
     ) {
       return;
     }
-    if (!data || !data.version || !data.version.hash) {
-      return <>{dataLatest.latestversion.shorthash}</>;
-    }
 
-    if (data.version.hash !== dataLatest.latestversion.shorthash) {
+    if (gitHash !== dataLatest.latestversion.shorthash) {
       return (
         <>
           <strong>{dataLatest.latestversion.shorthash} [NEW] </strong>
@@ -49,9 +49,6 @@ export const SettingsAboutPanel: React.FC = () => {
   }
 
   function renderLatestVersion() {
-    if (!data || !data.version || !data.version.version) {
-      return;
-    } // if there is no "version" latest version check is obviously not supported
     return (
       <Table>
         <tbody>
@@ -70,9 +67,6 @@ export const SettingsAboutPanel: React.FC = () => {
   }
 
   function renderVersion() {
-    if (!data || !data.version) {
-      return;
-    }
     return (
       <>
         <Table>
@@ -80,11 +74,11 @@ export const SettingsAboutPanel: React.FC = () => {
             {maybeRenderTag()}
             <tr>
               <td>Build hash:</td>
-              <td>{data.version.hash}</td>
+              <td>{gitHash}</td>
             </tr>
             <tr>
               <td>Build time:</td>
-              <td>{data.version.build_time}</td>
+              <td>{buildTime}</td>
             </tr>
           </tbody>
         </Table>
@@ -148,8 +142,6 @@ export const SettingsAboutPanel: React.FC = () => {
           </tr>
         </tbody>
       </Table>
-      {!data || loading ? <LoadingIndicator inline /> : ""}
-      {error && <span>{error.message}</span>}
       {errorLatest && <span>{errorLatest.message}</span>}
       {renderVersion()}
       {!dataLatest || loadingLatest || networkStatus === 4 ? (