Merge pull request #992 from tallycash/fix-displayed-version

Fix issues with computing and displaying the current extension version

This PR fixes some issues left over in previous work to display the version,
namely:

- Change the method used to compute the current version to git describe --tags.
  This fixes some cases where the current version was not computed correctly due
  to unannotated tags in the repo. In the future, we may consider updating the
  repo so that all the version tags are annotated (so they can be dated and
  signed), and revert this particular change.
- The computed version is matched against the version in manifest.json. If a
  mismatch is found, the build is aborted.
- The UI displaying the version was updated, loosely based on this an existing
  Figma design (with one difference with respect to the design in Show version,
  git commit and date in settings page: version is displayed inside the block
  with light background, because it's closely related to release name and the
  feedback button -- version number is mostly useful when reporting feedback.

Note: configured CI to fetch the entire Git history (needed to compute the
version).

.github/workflows/build.yml

@@ -11,6 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
     - name: Read .nvmrc
       run: echo "::set-output name=NVMRC::$(cat ./.nvmrc)"
       id: nvm

ui/pages/Menu.tsx

@@ -87,7 +87,6 @@ export default function Menu(): ReactElement {
           ))}
         </ul>
         <div className="community_cta_wrap">
-          <div className="illustration_discord" />
           <h2 className="serif_header">Community release!</h2>
           <p>Join our discord to give us feedback!</p>
           <SharedButton
@@ -104,19 +103,24 @@ export default function Menu(): ReactElement {
           </SharedButton>
           <div className="version">
             Version: {process.env.VERSION ?? `<unknown>`} (
-            {process.env.GIT_COMMIT_DATE?.slice(0, "YYYY-MM-DD".length)})
+            {new Date(
+              process.env.GIT_COMMIT_DATE ?? "invalid date"
+            ).toLocaleDateString(undefined, { dateStyle: "medium" })}
+            )
           </div>
         </div>
       </section>
       <style jsx>
         {`
           section {
+            display: flex;
+            flex-flow: column;
+            height: 544px;
             background-color: var(--hunter-green);
           }
           .community_cta_wrap {
             width: 100vw;
-            height: 370px;
-            margin-top: 19px;
+            margin-top: auto;
             margin-left: -21px;
             background-color: var(--green-95);
             text-align: center;
@@ -159,15 +163,8 @@ export default function Menu(): ReactElement {
           .mega_discord_chat_bubble_button:hover {
             opacity: 0.8;
           }
-          .illustration_discord {
-            background: url("./images/[email protected]");
-            background-size: cover;
-            width: 252px;
-            height: 162px;
-            margin: 5px 0px 20px -19px;
-          }
           .version {
-            margin: 4px 0;
+            margin: 16px 0;
             color: var(--green-60);
             font-size: 12px;
           }

webpack.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import path from "path"
 import webpack, {
   Configuration,
@@ -17,7 +18,23 @@ import WebExtensionArchivePlugin from "./build-utils/web-extension-archive-webpa
 
 const supportedBrowsers = ["brave", "chrome", "edge", "firefox", "opera"]
 
-const gitRevisionPlugin = new GitRevisionPlugin()
+const gitRevisionPlugin = new GitRevisionPlugin({
+  /* `--tags` option allows for un-annotated tags, currently present in the repo */
+  versionCommand: `describe --tags`,
+})
+
+const gitVersion = gitRevisionPlugin.version()
+if (gitVersion === null || !gitVersion.startsWith("v")) {
+  throw new Error(`cannot get current version from git: missing or invalid`)
+}
+
+const [manifestVersion, versionQualifier] = gitVersion
+  .substring(1)
+  .split("-", 2)
+
+if (typeof versionQualifier !== "undefined") {
+  console.log(`Building NON-OFFICIAL version ${gitVersion}. Do not release.`)
+}
 
 // Replicated and adjusted for each target browser and the current build mode.
 const baseConfig: Configuration = {
@@ -218,6 +235,12 @@ export default (
                     .map((assetData) => JSON.parse(assetData))
                 )
 
+                if (combinedManifest.version !== manifestVersion) {
+                  throw new Error(
+                    `manifest version '${combinedManifest.version}' does not match git version '${manifestVersion}'`
+                  )
+                }
+
                 return JSON.stringify(combinedManifest, null, 2)
               },
             } as unknown as ObjectPattern, // ObjectPattern doesn't include transformAll in current types