Better looking version strings in the Dashboard

components/dashboard/src/components/SelectIDEComponent.tsx

@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
+import { IDEOption, IDEOptions, makeIdeVersionHumanReadable } from "@gitpod/gitpod-protocol";
 import { useCallback, useEffect, useState } from "react";
 import { getGitpodService } from "../service/service";
 import { DropDown2, DropDown2Element } from "./DropDown2";
@@ -149,7 +149,7 @@ function IdeOptionElementInDropDown(p: IdeOptionElementProps): JSX.Element {
                 {version && (
                     <>
                         <div className="mx-1">&middot;</div>
-                        <div>{version}</div>
+                        <div>{makeIdeVersionHumanReadable(version)}</div>
                     </>
                 )}
                 {label && (

components/dashboard/src/user-settings/SelectIDE.tsx

@@ -12,7 +12,7 @@ import Tooltip from "../components/Tooltip";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
 import CheckBox from "../components/CheckBox";
-import { User } from "@gitpod/gitpod-protocol";
+import { User, makeIdeVersionHumanReadable } from "@gitpod/gitpod-protocol";
 import PillLabel from "../components/PillLabel";
 
 export type IDEChangedTrackLocation = "workspace_list" | "workspace_start" | "preferences";
@@ -94,7 +94,12 @@ export default function SelectIDE(props: SelectIDEProps) {
                                     const selected = defaultIde === id;
                                     const version = useLatestVersion ? option.latestImageVersion : option.imageVersion;
                                     const onSelect = () => actuallySetDefaultIde(id);
-                                    return renderIdeOption(option, selected, version, onSelect);
+                                    return renderIdeOption(
+                                        option,
+                                        selected,
+                                        makeIdeVersionHumanReadable(version),
+                                        onSelect,
+                                    );
                                 })}
                             </div>
                             {ideOptions.options[defaultIde]?.notes && (

components/gitpod-protocol/src/ide-protocol.spec.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2020 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { suite, test } from "mocha-typescript";
+import * as chai from "chai";
+import { makeIdeVersionHumanReadable } from ".";
+
+const expect = chai.expect;
+
+@suite
+class TestIdeProtocol {
+    @test public testSuffixedIdeVersion() {
+        const versionString = "v1.74.0-insider";
+
+        expect(makeIdeVersionHumanReadable(versionString)).to.deep.equal("v1.74.0 Insider");
+    }
+    @test public testUnsuffixedIdeVersion() {
+        const versionString = "v1.74.0";
+
+        expect(makeIdeVersionHumanReadable(versionString)).to.deep.equal("v1.74.0");
+    }
+}
+module.exports = new TestIdeProtocol(); // Only to circumvent no usage warning :-/

components/gitpod-protocol/src/ide-protocol.ts

@@ -145,3 +145,27 @@ export interface IDEOption {
      */
     latestImageVersion?: string;
 }
+
+/**
+ * Takes a version string of the form `X.Y.Z-<pre-release-tag>` and returns a human-readable version string
+ * where the pre-release tag is capitalized and separated from the version number by a space.
+ *
+ * @example
+ * makeIdeVersionHumanReadable("1.74.0-insider") // returns "1.74.0 Insider"
+ *
+ * @param [versionString] - The version string to convert to human-readable format
+ * @returns A human-readable version string, or `undefined` if `versionString` is falsy
+ */
+export const makeIdeVersionHumanReadable = (versionString?: string): string | undefined => {
+    if (!versionString) {
+        return undefined;
+    }
+
+    let [version, pre] = versionString.split("-");
+    if (pre) {
+        // Capitalize the string, so that 1.74.0-insider becomes 1.74.0 Insider
+        pre = pre[0].toUpperCase() + pre.slice(1);
+    }
+
+    return [version, pre].join(" ").trim();
+};

components/gitpod-protocol/src/index.ts

@@ -20,3 +20,4 @@ export * from "./snapshot-url";
 export * from "./oss-allowlist";
 export * from "./installation-admin-protocol";
 export * from "./webhook-event";
+export * from "./ide-protocol";