Browser Extension in-app banner

components/dashboard/package.json

@@ -14,6 +14,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",
     "classnames": "^2.3.1",
     "configcat-js": "^6.0.0",
@@ -41,6 +42,7 @@
     "react-router-dom": "^5.2.0",
     "setimmediate": "^1.0.5",
     "stream-browserify": "^2.0.1",
+    "ua-parser-js": "^1.0.36",
     "url": "^0.11.1",
     "util": "^0.11.1",
     "validator": "^13.9.0",

components/dashboard/src/index.css

@@ -68,6 +68,9 @@
     button:disabled {
         @apply cursor-default opacity-50 pointer-events-none;
     }
+    button.reset {
+        @apply bg-transparent border-none p-0 m-0 text-inherit cursor-pointer focus:outline-none focus:ring;
+    }
 
     button.gp-link {
         @apply bg-transparent hover:bg-transparent p-0 font-normal rounded-none;

components/dashboard/src/workspaces/BrowserExtensionBanner.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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";
+import flashIcon from "../icons/Flash.svg";
+import { ReactComponent as CloseIcon } from "../images/x.svg";
+import classNames from "classnames";
+
+interface 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 [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const persistedDisabled =
+            sessionStorage.getItem("browser-extension-installed") ||
+            localStorage.getItem("browser-extension-banner-dismissed");
+
+        setIsVisible(!persistedDisabled);
+    }, []);
+
+    const handleClose = () => {
+        localStorage.setItem("browser-extension-banner-dismissed", "true");
+        setIsVisible(false);
+    };
+
+    if (!isVisible) {
+        return null;
+    }
+
+    const browserName = parser.getBrowser().name?.toLowerCase();
+    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="hidden p-4 sm:block sm:absolute sm:bottom-2 sm:left-2">
+            <div className="grid h-28 w-72 grid-cols-12 items-end content-center gap-x-2 rounded-xl border-2 border-dashed border-[#dadada] bg-[#fafaf9] dark:bg-gray-800 dark:border-gray-600 p-4">
+                <div className="col-span-2 self-center">
+                    <img src={flashIcon} alt="" className="h-8 w-8" />
+                </div>
+
+                <div className="col-span-9">
+                    <p className="text-sm font-medium leading-5 text-[#666564]">
+                        Open workspaces directly from your source control repository.
+                    </p>
+                </div>
+                <div className="col-span-1 flex justify-end items-start h-full pt-1">
+                    <button
+                        className={classNames(
+                            "cursor-pointer p-2 ml-2 -mt-1",
+                            "bg-transparent hover:bg-transparent",
+                            "text-gray-500 hover:text-gray-300 dark:text-gray-200 dark:hover:text-gray-600",
+                        )}
+                        onClick={handleClose}
+                    >
+                        <CloseIcon />
+                    </button>
+                </div>
+                <div className="col-span-2"></div>
+
+                <div className="col-span-10">
+                    <a
+                        href={browserOption.url}
+                        className="text-sm font-semibold text-blue-500"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        Try the browser extension →
+                    </a>
+                </div>
+            </div>
+        </section>
+    );
+}

components/dashboard/src/workspaces/CreateWorkspacePage.tsx

@@ -36,6 +36,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";
 
 export function CreateWorkspacePage() {
@@ -359,7 +360,7 @@ export function CreateWorkspacePage() {
     }
 
     return (
-        <div className="flex flex-col mt-32 mx-auto ">
+        <div className="flex flex-col mt-32 mx-auto">
             <div className="flex flex-col max-h-screen max-w-lg mx-auto items-center w-full">
                 <Heading1>New Workspace</Heading1>
                 <div className="text-gray-500 text-center text-base">
@@ -441,6 +442,7 @@ export function CreateWorkspacePage() {
                     </div>
                 )}
             </div>
+            {!autostart && <BrowserExtensionBanner />}
         </div>
     );
 }

yarn.lock

@@ -3667,6 +3667,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"
@@ -14552,6 +14557,11 @@ typescript@~4.2.3:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz"
   integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
 
+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"