Automatic Dedicated switching (#93)

Author: filiptronicek

src/button/button.tsx

@@ -3,6 +3,7 @@ import Logo from "react:./logo-mark.svg"
 import type { SupportedApplication } from "./button-contributions";
 import classNames from "classnames";
 import { STORAGE_KEY_ADDRESS, STORAGE_KEY_NEW_TAB } from "~storage";
+import { DEFAULT_GITPOD_ENDPOINT } from "~constants";
 import { useStorage } from "@plasmohq/storage/hook";
 import React from "react";
 
@@ -12,7 +13,7 @@ export interface GitpodButtonProps {
 }
 
 export const GitpodButton = ({ application, additionalClassNames }: GitpodButtonProps) => {
-  const [address] = useStorage<string>(STORAGE_KEY_ADDRESS, "https://gitpod.io");
+  const [address] = useStorage<string>(STORAGE_KEY_ADDRESS, DEFAULT_GITPOD_ENDPOINT);
   const [openInNewTab] = useStorage<boolean>(STORAGE_KEY_NEW_TAB, false);
 
   const [showDropdown, setShowDropdown] = useState(false);

src/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_GITPOD_ENDPOINT = "https://gitpod.io";

src/contents/gitpod-dashboard.ts

@@ -1,4 +1,8 @@
 import type { PlasmoCSConfig } from "plasmo";
+import { Storage } from "@plasmohq/storage";
+import { STORAGE_AUTOMATICALLY_DETECT_GITPOD, STORAGE_KEY_ADDRESS } from "~storage";
+import { parseEndpoint } from "~utils/parse-endpoint";
+import { DEFAULT_GITPOD_ENDPOINT } from "~constants";
 
 /**
  * Checks if the current site is a Gitpod instance.
@@ -11,6 +15,23 @@ export const config: PlasmoCSConfig = {
   matches: ["https://*/*"]
 }
 
+const storage = new Storage();
+
+const automaticallyUpdateEndpoint = async () => {
+  if (await storage.get<boolean>(STORAGE_AUTOMATICALLY_DETECT_GITPOD) === false) {
+    return;
+  }
+  
+  const currentUserSetEndpoint = await storage.get(STORAGE_KEY_ADDRESS);
+  if (!currentUserSetEndpoint || currentUserSetEndpoint === DEFAULT_GITPOD_ENDPOINT) {
+    const currentHost = window.location.host;
+    if (currentHost !== new URL(DEFAULT_GITPOD_ENDPOINT).host) {
+      console.log(`Gitpod extension: switching default endpoint to ${currentHost}.`)
+      await storage.set(STORAGE_KEY_ADDRESS, parseEndpoint(currentHost));
+    }
+  }
+}
 if (isSiteGitpod()) {
   sessionStorage.setItem("browser-extension-installed", "true");
+  automaticallyUpdateEndpoint();
 }

src/popup.tsx

@@ -1,13 +1,14 @@
 import { useStorage } from "@plasmohq/storage/hook";
 import { useCallback, useEffect, useState } from "react"
-import { STORAGE_KEY_ADDRESS, STORAGE_KEY_NEW_TAB } from "~storage";
+import { STORAGE_AUTOMATICALLY_DETECT_GITPOD, STORAGE_KEY_ADDRESS, STORAGE_KEY_NEW_TAB } from "~storage";
 import { parseEndpoint } from "~utils/parse-endpoint";
 import React from "react";
 
 import "./popup.css"
 import { InputField } from "~components/forms/InputField";
 import { TextInput } from "~components/forms/TextInputField";
 import { CheckboxInputField } from "~components/forms/CheckboxInputField";
+import { DEFAULT_GITPOD_ENDPOINT } from "~constants";
 
 function IndexPopup() {
   const [error, setError] = useState<string>();
@@ -31,6 +32,7 @@ function IndexPopup() {
   }, [storedAddress])
 
   const [openInNewTab, setOpenInNewTab] = useStorage<boolean>(STORAGE_KEY_NEW_TAB, false);
+  const [automaticallyDetect, setAutomaticallyDetect] = useStorage<boolean>(STORAGE_AUTOMATICALLY_DETECT_GITPOD, true);
 
   return (
     <div
@@ -45,7 +47,7 @@ function IndexPopup() {
       <form className="w-full">
         <InputField
           label="Gitpod URL"
-          hint="Gitpod instance URL, e.g. https://gitpod.io."
+          hint={`Gitpod instance URL, e.g. ${DEFAULT_GITPOD_ENDPOINT}.`}
           topMargin={false}
         >
           <div className="flex space-x-2">
@@ -60,7 +62,13 @@ function IndexPopup() {
         <CheckboxInputField
           label="Open Workspaces in a new tab"
           checked={openInNewTab}
-          onChange={(checked) => setOpenInNewTab(checked)}
+          onChange={setOpenInNewTab}
+        />
+        <CheckboxInputField
+          label="Automatically switch to Gitpod Dedicated"
+          hint="Upon visiting a Gitpod Dedicated instance, switch to it"
+          checked={automaticallyDetect}
+          onChange={setAutomaticallyDetect}
         />
       </form>
 

src/storage.ts

@@ -1,3 +1,4 @@
 
 export const STORAGE_KEY_ADDRESS = "gitpod-installation-address";
-export const STORAGE_KEY_NEW_TAB = "gitpod-installation-new-tab";
+export const STORAGE_KEY_NEW_TAB = "gitpod-installation-new-tab";
+export const STORAGE_AUTOMATICALLY_DETECT_GITPOD = "gitpod-installation-automatically-detect-gitpod";