Browser Extension in-app banner

components/dashboard/package.json

@@ -24,6 +24,7 @@
     "@tanstack/react-query-devtools": "^4.29.19",
     "@tanstack/react-query-persist-client": "^4.29.19",
     "@types/react-datepicker": "^4.8.0",
+    "@types/ua-parser-js": "^0.7.37",
     "buffer": "^4.3.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.1",
@@ -54,6 +55,7 @@
     "react-router-dom": "^5.2.0",
     "setimmediate": "^1.0.5",
     "stream-browserify": "^2.0.1",
+    "ua-parser-js": "^1.0.36",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "url": "^0.11.1",

components/dashboard/src/workspaces/BrowserExtensionBanner.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023 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 { useEffect, useMemo, useState } from "react";
+import UAParser from "ua-parser-js";
+
+type BrowserOption = {
+    aliases?: string[];
+    url: string;
+};
+
+const installationOptions: Record<string, BrowserOption> = {
+    firefox: {
+        url: "https://addons.mozilla.org/en-US/firefox/addon/gitpod/",
+    },
+    chrome: {
+        aliases: ["edge", "brave", "chromium", "vivaldi", "opera"],
+        url: "https://chrome.google.com/webstore/detail/gitpod-always-ready-to-co/dodmmooeoklaejobgleioelladacbeki",
+    },
+};
+
+export function BrowserExtensionBanner() {
+    const parser = useMemo(() => new UAParser(), []);
+    const browserName = useMemo(() => parser.getBrowser().name?.toLowerCase(), [parser]);
+
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const installedOrDismissed =
+            sessionStorage.getItem("browser-extension-installed") ||
+            localStorage.getItem("browser-extension-banner-dismissed");
+
+        setIsVisible(!installedOrDismissed);
+    }, []);
+
+    // Todo: Implement the x button
+    // const handleClose = () => {
+    //     localStorage.setItem("browser-extension-banner-dismissed", "true");
+    //     setIsVisible(false);
+    // };
+
+    if (!isVisible) {
+        return null;
+    }
+
+    if (!browserName) {
+        return null;
+    }
+
+    let browserOption: BrowserOption | undefined = installationOptions[browserName];
+    if (!browserOption) {
+        browserOption = Object.values(installationOptions).find(
+            (opt) => opt.aliases && opt.aliases.includes(browserName),
+        );
+        if (!browserOption) {
+            return null;
+        }
+    }
+
+    return (
+        <section className="sm:flex justify-between border-2 rounded-xl m-4 hidden max-w-xl mt-4">
+            <div className="flex flex-col gap-1 py-4 px-2 justify-center">
+                <span className="text-lg font-semibold">Open from Github</span>
+                <span>
+                    <a href={browserOption.url} className="gp-link">
+                        Install the Gitpod extension
+                    </a>
+                    to launch workspaces from Github.
+                </span>
+            </div>
+            <img alt="A button that says Gitpod" src="https://picsum.photos/151/88" />
+        </section>
+    );
+}

components/dashboard/src/workspaces/CreateWorkspacePage.tsx

@@ -35,6 +35,7 @@ import { StartWorkspaceOptions } from "../start/start-workspace-options";
 import { UserContext, useCurrentUser } from "../user-context";
 import { SelectAccountModal } from "../user-settings/SelectAccountModal";
 import { settingsPathIntegrations } from "../user-settings/settings.routes";
+import { BrowserExtensionBanner } from "./BrowserExtensionBanner";
 import { WorkspaceEntry } from "./WorkspaceEntry";
 import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 import {
@@ -565,6 +566,7 @@ export function CreateWorkspacePage() {
                     )}
                 </div>
             </div>
+            {!autostart && <BrowserExtensionBanner />}
         </div>
     );
 }

yarn.lock

@@ -4076,6 +4076,11 @@
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
   integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
 
+"@types/ua-parser-js@^0.7.37":
+  version "0.7.37"
+  resolved "https://registry.yarnpkg.com/@types/ua-parser-js/-/ua-parser-js-0.7.37.tgz#2e45bf948a6a94391859a1b0682104ae3c13ba72"
+  integrity sha512-4sOxS3ZWXC0uHJLYcWAaLMxTvjRX3hT96eF4YWUh1ovTaenvibaZOE5uXtIp4mksKMLRwo7YDiCBCw6vBiUPVg==
+
 "@types/[email protected]", "@types/uuid@^8.3.1":
   version "8.3.1"
   resolved "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz"
@@ -15068,6 +15073,11 @@ typescript@^4.2.4, typescript@~4.4.2, typescript@~4.4.4:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz"
   integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
 
+ua-parser-js@^1.0.36:
+  version "1.0.36"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.36.tgz#a9ab6b9bd3a8efb90bb0816674b412717b7c428c"
+  integrity sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"