No more conditional rendering based on FFs

Author: filiptronicek

src/button/button-contributions.ts

@@ -108,7 +108,7 @@ export interface ButtonContributionParams {
     manipulations?: { element: string; removeClassName?: string; addClassName?: string; style?: Partial<CSSStyleDeclaration>, setAttribute?: { name: string, value: string }[] }[];
 
     /**
-     * A function that can be used to transform the URL that should be opened when the Gitpod button is clicked.
+     * A function that can be used to transform the URL that should be opened when the Ona button is clicked.
      * @returns The transformed URL.
      */
     urlTransformer?: (originalURL: string) => string;

src/button/button.css

@@ -40,7 +40,7 @@
     max-width: fit-content;
 }
 
-.gitpod-button {
+.ona-button {
     position: "relative";
     display: "inline-block";
 }

src/button/button.tsx

@@ -2,9 +2,7 @@ import { useStorage } from "@plasmohq/storage/hook";
 import classNames from "classnames";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import Logo from "react:./logo-mark.svg";
 import { DEFAULT_ONA_ENDPOINT, EVENT_CURRENT_URL_CHANGED } from "~constants";
-import { FeatureFlags, useFlag } from "~hooks/use-configcat";
 import { OnaLettermark } from "~icons/OnaLettermark";
 import { STORAGE_KEY_ADDRESS, STORAGE_KEY_ALWAYS_OPTIONS, STORAGE_KEY_NEW_TAB } from "~storage";
 import { isOnaEndpoint } from "~utils/parse-endpoint";
@@ -22,7 +20,6 @@ export const OnaButton = ({ application, additionalClassNames, urlTransformer }:
     const [disableAutostart] = useStorage<boolean>(STORAGE_KEY_ALWAYS_OPTIONS, false);
     const [showDropdown, setShowDropdown] = useState(false);
     const [currentHref, setCurrentHref] = useState(window.location.href);
-    const { value: isOnaEnabled } = useFlag(FeatureFlags.ONA_ENABLED, false);
 
     const linkRef = useRef<HTMLAnchorElement | null>(null);
 
@@ -88,9 +85,9 @@ export const OnaButton = ({ application, additionalClassNames, urlTransformer }:
 
     return (
         <div
-            id="gitpod-btn-nav"
-            title={`Open with ${isOnaEnabled ? "Ona" : "Gitpod"}`}
-            className={classNames("gitpod-button", application, ...(additionalClassNames ?? []))}
+            id="ona-btn-nav"
+            title={`Open with "Ona"`}
+            className={classNames("ona-button", application, ...(additionalClassNames ?? []))}
         >
             <div className={classNames("button")}>
                 <a
@@ -101,10 +98,7 @@ export const OnaButton = ({ application, additionalClassNames, urlTransformer }:
                     ref={linkRef}
                 >
                     <span className={classNames("action-label")}>
-                        {isOnaEnabled ?
-                            <OnaLettermark className={classNames("action-logo")} width={14} height={14} /> :
-                            <Logo className={classNames("action-logo")} width={14} height={14} />
-                        }
+                        <OnaLettermark className={classNames("action-logo")} width={14} height={14} />
                         {actions[0].label}
                     </span>
                 </a>

src/components/forms/Button.tsx

@@ -33,18 +33,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         },
         ref: ForwardedRef<HTMLButtonElement>,
     ) => {
-        const { value: isOnaEnabled } = useFlag(FeatureFlags.ONA_ENABLED, false);
-
         return (
             <button
                 type={htmlType}
                 className={classNames(
                     "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",
-                            "text-gray-50 dark:text-gray-900",
-                            { "bg-[#1F1F1F] hover:bg-[#737373] dark:bg-[#FAFAFA] dark:hover:bg-[#A3A3A3]": isOnaEnabled },
+                            "text-gray-50 dark:text-gray-900 bg-[#1F1F1F] hover:bg-[#737373] dark:bg-[#FAFAFA] dark:hover:bg-[#A3A3A3]",
                         ]
                     :   null,
                     type === "secondary" ?

src/components/forms/TextInputField.tsx

@@ -1,6 +1,5 @@
 import classNames from "classnames";
 import React, { memo, useCallback, useId, type PropsWithChildren, type ReactNode } from "react";
-import { FeatureFlags, useFlag } from "~hooks/use-configcat";
 import { InputField } from "./InputField";
 
 type TextInputFieldTypes = "text" | "password" | "email" | "url";
@@ -91,8 +90,6 @@ export const TextInput = memo(
         onChange,
         onBlur,
     }: PropsWithChildren<TextInputProps>) => {
-        const { value: isOnaEnabled } = useFlag(FeatureFlags.ONA_ENABLED, false);
-
         const handleChange = useCallback(
             (e: React.ChangeEvent<HTMLInputElement>) => {
                 onChange && onChange(e.target.value);
@@ -107,11 +104,11 @@ export const TextInput = memo(
                 id={id}
                 className={classNames(
                     "w-full text-base",
-                    "block text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-lg border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0",
+                    "block text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0",
                     "py-2 px-3",
                     "placeholder:text-gray-400 dark:placeholder:text-gray-500",
                     "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:border disabled:border-gray-200 dark:disabled:border-gray-600 disabled:text-gray-400 dark:disabled:text-gray-500",
-                    { "bg-white focus-visible:ring-2 focus-visible:ring-gray-400 dark:bg-[#262626]": isOnaEnabled },
+                    "bg-white focus-visible:ring-2 focus-visible:ring-gray-400 dark:bg-[#262626]",
                     className,
                 )}
                 value={value}

src/popup.tsx

@@ -8,15 +8,15 @@ import { CheckboxInputField } from "~components/forms/CheckboxInputField";
 import { InputField } from "~components/forms/InputField";
 import { TextInput } from "~components/forms/TextInputField";
 import { ALL_ORIGINS_WILDCARD, DEFAULT_ONA_ENDPOINT } from "~constants";
-import { ConfigCatProvider, configCatProviderConfig, FeatureFlags, useFlag } from "~hooks/use-configcat";
+import { ConfigCatProvider, configCatProviderConfig } from "~hooks/use-configcat";
 import { useTemporaryState } from "~hooks/use-temporary-state";
 import {
     STORAGE_AUTOMATICALLY_DETECT_GITPOD,
     STORAGE_KEY_ADDRESS,
     STORAGE_KEY_ALWAYS_OPTIONS,
     STORAGE_KEY_NEW_TAB,
 } from "~storage";
-import { hostToOrigin, parseEndpoint } from "~utils/parse-endpoint";
+import { hostToOrigin, isOnaEndpoint, parseEndpoint } from "~utils/parse-endpoint";
 import { canAccessAllSites } from "~utils/permissions";
 import "./popup.css";
 
@@ -35,11 +35,10 @@ function PopupContent() {
     const [error, setError] = useState<string>();
 
     const [storedAddress] = useStorage<string>(STORAGE_KEY_ADDRESS, DEFAULT_ONA_ENDPOINT);
+    const isStoredAddressOna = isOnaEndpoint(storedAddress);
     const [address, setAddress] = useState<string>(storedAddress);
     const [justSaved, setJustSaved] = useTemporaryState(false, 2000);
 
-    const { value: isOnaEnabled } = useFlag(FeatureFlags.ONA_ENABLED, false);
-
     const updateAddress = useCallback(
         (e: FormEvent) => {
             e.preventDefault();
@@ -97,12 +96,12 @@ function PopupContent() {
                 minWidth: "360px",
                 padding: "16px",
             }}
-            className={`${isOnaEnabled && "ona"}`}
+            className="ona"
         >
             <form className="w-full" onSubmit={updateAddress} action="#">
                 <InputField
-                    label={`${isOnaEnabled ? "Ona" : "Gitpod"} URL`}
-                    hint={`${isOnaEnabled ? "Ona" : "Gitpod"} instance URL, e.g. ${DEFAULT_ONA_ENDPOINT}.`}
+                    label={`Ona URL`}
+                    hint={`Ona instance URL, e.g. ${DEFAULT_ONA_ENDPOINT}.`}
                     topMargin={false}
                 >
                     <div className="flex w-full h-10 max-w-sm items-center space-x-2">
@@ -119,7 +118,7 @@ function PopupContent() {
                     </div>
                 </InputField>
                 <CheckboxInputField
-                    label={`Open ${isOnaEnabled ? "Environments" : "Workspaces"} in a new tab`}
+                    label={`Open Environments in a new tab`}
                     checked={openInNewTab}
                     onChange={setOpenInNewTab}
                 />
@@ -144,13 +143,13 @@ function PopupContent() {
                 <CheckboxInputField
                     label="Always start with options"
                     hint="Changes the primary button to always open with options"
-                    checked={isOnaEnabled ? true : disableAutostart}
+                    checked={isStoredAddressOna ? true : disableAutostart}
                     onChange={setDisableAutostart}
-                    disabled={isOnaEnabled}
+                    disabled={isStoredAddressOna}
                 />
                 <CheckboxInputField
                     label="Automatic instance hopping"
-                    hint={`Changes the ${isOnaEnabled ? "Ona" : "Gitpod"} URL automatically when a${isOnaEnabled ? "n Ona" : " Gitpod"} instance is detected`}
+                    hint={`Changes the Ona URL automatically when an Ona instance is detected`}
                     checked={enableInstanceHopping}
                     onChange={setEnableInstanceHopping}
                 />

test/src/button-contributions-copy.ts

@@ -105,10 +105,10 @@ export interface ButtonContributionParams {
      * Each manipulation contains a CSS selector (element) that is used to find the element to manipulate and optionally
      * the classnames to remove and add.
      */
-    manipulations?: { element: string; remove?: string; add?: string; style?: Partial<CSSStyleDeclaration> }[];
+    manipulations?: { element: string; removeClassName?: string; addClassName?: string; style?: Partial<CSSStyleDeclaration>, setAttribute?: { name: string, value: string }[] }[];
 
     /**
-     * A function that can be used to transform the URL that should be opened when the Gitpod button is clicked.
+     * A function that can be used to transform the URL that should be opened when the Ona button is clicked.
      * @returns The transformed URL.
      */
     urlTransformer?: (originalURL: string) => string;
@@ -140,7 +140,7 @@ export const buttonContributions: ButtonContributionParams[] = [
         manipulations: [
             {
                 element: "div.repos-files-header-commandbar.scroll-hidden",
-                remove: "scroll-hidden",
+                removeClassName: "scroll-hidden",
             },
         ],
         urlTransformer(originalUrl) {
@@ -198,7 +198,7 @@ export const buttonContributions: ButtonContributionParams[] = [
             {
                 // make the clone button secondary
                 element: "#clone-dropdown",
-                remove: "btn-confirm",
+                removeClassName: "btn-confirm",
             },
         ],
     },
@@ -224,7 +224,7 @@ export const buttonContributions: ButtonContributionParams[] = [
                 // make the clone button secondary
                 element:
                     "#fileHolder > div.js-file-title.file-title-flex-parent > div.gl-display-flex.gl-flex-wrap.file-actions > div.gl-sm-ml-3.gl-mr-3 > div > button",
-                remove: "btn-confirm",
+                removeClassName: "btn-confirm",
             },
         ],
     },
@@ -241,7 +241,7 @@ export const buttonContributions: ButtonContributionParams[] = [
                 // make the clone button secondary
                 element:
                     "#content-body > div.merge-request .js-issuable-actions > div.dropdown.gl-dropdown > button",
-                remove: "btn-confirm",
+                removeClassName: "btn-confirm",
             },
         ],
     },
@@ -267,6 +267,16 @@ export const buttonContributions: ButtonContributionParams[] = [
         containerElement: createElement("div", {}),
         additionalClassNames: ["medium"],
         application: "github",
+        manipulations: [
+            {
+                // make the clone button secondary
+                element:
+                    "xpath://button[contains(., 'Code')]",
+                setAttribute: [
+                    { name: "data-variant", value: "default" },
+                ],
+            },
+        ],
         match: () => {
             const regex = /^https?:\/\/([^/]+)\/([^/]+)\/([^/]+)(\/(tree\/.*)?)?$/;
             return document.querySelector("div.file-navigation") === null && regex.test(window.location.href);
@@ -290,20 +300,12 @@ export const buttonContributions: ButtonContributionParams[] = [
     {
         id: "gh-issue",
         exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/issues/1"],
-        selector: "#partial-discussion-header > div.gh-header-show > div > div",
-        containerElement: createElement("div", {
-            order: "2",
-        }),
+        selector: "[data-component='PH_Actions'] > div", //
+        insertBefore: "[data-component='PH_Actions'] > div > button",
+        containerElement: createElement("div", {}),
         match: /\/issues\//,
         application: "github",
-        manipulations: [
-            {
-                // make the code button secondary
-                element: "#partial-discussion-header > div.gh-header-show > div > div > a",
-                remove: "Button--primary",
-                add: "Button--secondary",
-            },
-        ],
+        additionalClassNames: ["tall"],
     },
     {
         id: "gh-issue-new", // this isn't referring to "new issue", but to new "issue"
@@ -318,7 +320,7 @@ export const buttonContributions: ButtonContributionParams[] = [
     {
         id: "gh-pull",
         exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/pull/2"],
-        selector: "#partial-discussion-header > div.gh-header-show > div > div",
+        selector: "#partial-discussion-header div.gh-header-show > div > div",
         containerElement: createElement("div", {
             order: "2",
         }),