Allow gitpod:// (#117)

Author: filiptronicek

src/components/forms/Button.tsx

@@ -4,7 +4,6 @@ import React, { forwardRef, type FC, type ForwardedRef, type ReactNode } from "r
 export type ButtonProps = {
     type?: "primary" | "secondary" | "danger" | "danger.secondary" | "transparent";
     size?: "small" | "medium" | "block";
-    spacing?: "compact" | "default";
     disabled?: boolean;
     className?: string;
     autoFocus?: boolean;
@@ -27,7 +26,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             disabled = false,
             autoFocus = false,
             size,
-            spacing = "default",
             icon,
             children,
             onClick,
@@ -38,14 +36,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             <button
                 type={htmlType}
                 className={classNames(
-                    "cursor-pointer my-auto",
-                    "text-sm font-medium whitespace-nowrap",
-                    "rounded-xl focus:outline-none focus:ring transition ease-in-out",
-                    spacing === "compact" ? ["px-1 py-1"] : null,
-                    spacing === "default" ? ["px-4 py-2"] : null,
+                    "inline-flex items-center whitespace-nowrap rounded-lg text-sm justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2",
                     type === "primary" ?
                         [
-                            "bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe",
+                            "bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe text-gray-50 dark:text-gray-900",
                             "text-gray-50 dark:text-gray-900",
                         ]
                     :   null,

src/popup.tsx

@@ -47,9 +47,11 @@ function IndexPopup() {
                         setJustSaved(true);
                     });
 
-                browser.permissions.request({ origins: [origin] }).catch((e) => {
-                    setError(e.message);
-                });
+                if (origin) {
+                    browser.permissions.request({ origins: [origin] }).catch((e) => {
+                        setError(e.message);
+                    });
+                }
             } catch (e) {
                 setError(e.message);
             }

src/utils/parse-endpoint.spec.ts

@@ -0,0 +1,30 @@
+import { expect } from "chai";
+
+import { hostToOrigin, parseEndpoint } from "./parse-endpoint";
+
+describe("parseEndpoint", () => {
+    it("parses valid hosts", () => {
+        expect(parseEndpoint("https://gitpod.io/new")).to.equal("https://gitpod.io");
+        expect(parseEndpoint("gitpod.io")).to.equal("https://gitpod.io");
+        expect(parseEndpoint("gitpod.io/new")).to.equal("https://gitpod.io");
+        expect(parseEndpoint("gitpod://")).to.equal("gitpod://");
+        expect(parseEndpoint("http://localhost:3000")).to.equal("http://localhost:3000");
+    });
+
+    it("does not parse invalid hosts", () => {
+        expect(() => parseEndpoint("gitpod")).to.throw(TypeError);
+        expect(() => parseEndpoint("ftp://gitpod.io")).to.throw(TypeError);
+    });
+});
+
+describe("hostToOrigin", () => {
+    it("converts hosts to origins", () => {
+        expect(hostToOrigin("https://gitpod.io")).to.equal("https://gitpod.io/*");
+        expect(hostToOrigin("http://localhost:3000")).to.equal("http://localhost:3000/*");
+    });
+
+    it("does not convert invalid hosts", () => {
+        expect(hostToOrigin("ftp://gitpod.io")).to.be.undefined;
+        expect(hostToOrigin("gitpod://")).to.be.undefined;
+    });
+});

src/utils/parse-endpoint.ts

@@ -1,13 +1,17 @@
 import isUrl from "validator/es/lib/isURL";
 
+const allowedProtocols = ["http:", "https:", "gitpod:"];
+
 export const parseEndpoint = (input: string): string => {
     let url: URL;
 
-    if (isUrl(input, { require_protocol: true, protocols: ["https"] })) {
-        url = new URL(input);
-    } else if (isUrl(input, { require_protocol: true, protocols: ["https", "http"], host_whitelist: ["localhost"] })) {
+    if (URL.canParse(input)) {
         url = new URL(input);
-    } else if (isUrl(input, { require_protocol: false, protocols: ["https"] })) {
+
+        if (!allowedProtocols.includes(url.protocol)) {
+            throw new TypeError(`Invalid protocol in URL: ${input}`);
+        }
+    } else if (isUrl(input, { require_protocol: false, protocols: ["http", "https", "gitpod"] })) {
         url = new URL(`https://${input}`);
     } else {
         throw new TypeError(`Invalid URL: ${input}`);
@@ -16,8 +20,11 @@ export const parseEndpoint = (input: string): string => {
     return `${url.protocol}//${url.host}`;
 };
 
-export const hostToOrigin = (host: string): string => {
-    const url = new URL(host);
+export const hostToOrigin = (host: string): string | undefined => {
+    const { origin, protocol } = new URL(host);
+    if (origin === "null" || !["http:", "https:"].includes(protocol)) {
+        return undefined;
+    }
 
-    return url.origin + "/*";
+    return `${origin}/*`;
 };

tailwind.config.js

@@ -7,6 +7,8 @@ module.exports = {
         extend: {
             colors: {
                 "gitpod-black": "#161616",
+                "kumquat-base": "#FFAE33",
+                "kumquat-ripe": "#FFB45B",
                 "gitpod-red": "#CE4A3E",
             },
         },