Add app version to UI in Settings (#1351)

* Make package version available in app code

* Show app version in settings page with link

* fmt

* Replace Vite define with Vite plugin

* Don't use import.meta.env in bare TS file

package.json

@@ -138,6 +138,7 @@
     "tailwindcss": "^3.3.6",
     "vite": "^4.5.2",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.2.1",
     "wait-on": "^7.2.0",
     "yarn": "^1.22.19"

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -78,5 +78,4 @@ export default defineConfig({
     // url: 'http://127.0.0.1:3000',
     reuseExistingServer: !process.env.CI,
   },
-});
-
+})

src/routes/Settings.tsx

@@ -31,6 +31,7 @@ import { sep } from '@tauri-apps/api/path'
 import { bracket } from 'lib/exampleKcl'
 
 export const Settings = () => {
+  const APP_VERSION = import.meta.env.PACKAGE_VERSION || 'unknown'
   const loaderData =
     (useRouteLoaderData(paths.FILE) as IndexLoaderData) || undefined
   const navigate = useNavigate()
@@ -118,7 +119,7 @@ export const Settings = () => {
           Close
         </ActionButton>
       </AppHeader>
-      <div className="max-w-5xl mx-5 lg:mx-auto my-24">
+      <div className="max-w-4xl mx-5 lg:mx-auto my-24">
         <h1 className="text-4xl font-bold">User Settings</h1>
         <p className="max-w-2xl mt-6">
           Don't see the feature you want? Check to see if it's on{' '}
@@ -304,6 +305,18 @@ export const Settings = () => {
             Replay Onboarding
           </ActionButton>
         </SettingsSection>
+        <p className="mt-24 text-sm font-mono">
+          {/* This uses a Vite plugin, set in vite.config.ts
+              to inject the version from package.json */}
+          App version {APP_VERSION}.{' '}
+          <a
+            href={`https://github.com/KittyCAD/modeling-app/releases/tag/v${APP_VERSION}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View release on GitHub
+          </a>
+        </p>
       </div>
     </div>
   )

tsconfig.json

@@ -27,7 +27,8 @@
   },
   "include": [
     "src",
-    "e2e"
+    "e2e",
+    "./*.ts"
   ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string

vite.config.ts

@@ -2,7 +2,8 @@ import react from '@vitejs/plugin-react'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 import eslint from 'vite-plugin-eslint'
 import dns from 'dns'
-import { defineConfig, configDefaults } from 'vitest/config';
+import { defineConfig, configDefaults } from 'vitest/config'
+import version from 'vite-plugin-package-version'
 
 // Only needed because we run Node < 17 
 // and we want to open `localhost` not `127.0.0.1` on server start
@@ -30,7 +31,8 @@ const config = defineConfig({
     react(),
     viteTsconfigPaths(),
     eslint(),
-  ],
+    version(),
+  ]
 })
 
 export default config

yarn.lock

@@ -8174,6 +8174,11 @@ vite-plugin-eslint@^1.8.1:
     "@types/eslint" "^8.4.5"
     rollup "^2.77.2"
 
+vite-plugin-package-version@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-package-version/-/vite-plugin-package-version-1.1.0.tgz#7d8088955aa21e4ec93353c98992b3f58c4bf13c"
+  integrity sha512-TPoFZXNanzcaKCIrC3e2L/TVRkkRLB6l4RPN/S7KbG7rWfyLcCEGsnXvxn6qR7fyZwXalnnSN/I9d6pSFjHpEA==
+
 vite-tsconfig-paths@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.1.tgz#e53b89096b91d31a6d1e26f75999ea8c336a89ed"