feat: display app version in setting panel (#3170)

(cherry picked from commit bbb1387469)

apps/web/next.config.mjs

@@ -13,6 +13,9 @@ import { blockSuiteFeatureFlags, buildFlags } from './preset.config.mjs';
 import { getCommitHash, getGitVersion } from './scripts/git-info.mjs';
 
 const require = createRequire(import.meta.url);
+const packageJson = require('./package.json');
+const appVersion = packageJson.version;
+const editorVersion = packageJson.dependencies['@blocksuite/editor'];
 const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
 const withVanillaExtract = createVanillaExtractPlugin();
 
@@ -102,6 +105,8 @@ const nextConfig = {
   publicRuntimeConfig: {
     PROJECT_NAME: process.env.npm_package_name ?? 'AFFiNE',
     BUILD_DATE: new Date().toISOString(),
+    appVersion,
+    editorVersion,
     gitVersion: getGitVersion(),
     hash: getCommitHash(),
     serverAPI: profileTarget.local,

apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -26,45 +26,49 @@ export const AboutAffine = () => {
         subtitle={t['com.affine.settings.about.message']()}
         data-testid="about-title"
       />
-      {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+      <SettingWrapper title={t['Version']()}>
-        <SettingWrapper title={t['Version']()}>
+        <SettingRow name="App Version" desc={runtimeConfig.appVersion} />
-          <SettingRow
+        <SettingRow name="Editor Version" desc={runtimeConfig.editorVersion} />
-            name={t['Check for updates']()}
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
-            desc={t['New version is ready']()}
+          <>
-          ></SettingRow>
+            <SettingRow
-          <SettingRow
+              name={t['Check for updates']()}
-            name={t['Check for updates automatically']()}
+              desc={t['New version is ready']()}
-            desc={t['com.affine.settings.about.update.check.message']()}
+            ></SettingRow>
-          >
+            <SettingRow
-            <Switch
+              name={t['Check for updates automatically']()}
-              checked={appSettings.autoCheckUpdate}
+              desc={t['com.affine.settings.about.update.check.message']()}
-              onChange={checked => changeSwitch('autoCheckUpdate', checked)}
+            >
-            />
+              <Switch
-          </SettingRow>
+                checked={appSettings.autoCheckUpdate}
-          <SettingRow
+                onChange={checked => changeSwitch('autoCheckUpdate', checked)}
-            name={t['Download updates automatically']()}
+              />
-            desc={t['com.affine.settings.about.update.download.message']()}
+            </SettingRow>
-          >
+            <SettingRow
-            <Switch
+              name={t['Download updates automatically']()}
-              checked={appSettings.autoCheckUpdate}
+              desc={t['com.affine.settings.about.update.download.message']()}
-              onChange={checked => changeSwitch('autoCheckUpdate', checked)}
+            >
-            />
+              <Switch
-          </SettingRow>
+                checked={appSettings.autoCheckUpdate}
-          <SettingRow
+                onChange={checked => changeSwitch('autoCheckUpdate', checked)}
-            name={t[`Discover what's new`]()}
+              />
-            desc={t['View the AFFiNE Changelog.']()}
+            </SettingRow>
-            style={{ cursor: 'pointer' }}
+            <SettingRow
-            onClick={() => {
+              name={t[`Discover what's new`]()}
-              window.open(
+              desc={t['View the AFFiNE Changelog.']()}
-                'https://affine.pro/blog/whats-new-affine-0630',
+              style={{ cursor: 'pointer' }}
-                '_blank'
+              onClick={() => {
-              );
+                window.open(
-            }}
+                  'https://affine.pro/blog/whats-new-affine-0630',
-          >
+                  '_blank'
-            <ArrowRightSmallIcon />
+                );
-          </SettingRow>
+              }}
-        </SettingWrapper>
+            >
-      ) : null}
+              <ArrowRightSmallIcon />
+            </SettingRow>
+          </>
+        ) : null}
+      </SettingWrapper>
       <SettingWrapper title={t['Contact with us']()}>
         <a className={link} href="https://affine.pro" target="_blank">
           {t['Official Website']()}

packages/env/src/global.ts

@@ -93,6 +93,8 @@ export const publicRuntimeConfigSchema = buildFlagsSchema.extend({
   PROJECT_NAME: z.string(),
   BUILD_DATE: z.string(),
   gitVersion: z.string(),
+  appVersion: z.string(),
+  editorVersion: z.string(),
   hash: z.string(),
   serverAPI: z.string(),
   editorFlags: blockSuiteFeatureFlags,

scripts/vitest/next-config-mock.ts

@@ -11,6 +11,8 @@ export default function getConfig() {
       BUILD_DATE: '2021-09-01T00:00:00.000Z',
       gitVersion: 'UNKNOWN',
       hash: 'UNKNOWN',
+      appVersion: '0.0.0',
+      editorVersion: '0.0.0',
       serverAPI: 'http://127.0.0.1:3000/',
       editorFlags: blockSuiteFeatureFlags,
       ...buildFlags,