#3607: feature flag extension point search in page editor (#3633)

pixiebrix · Jun 9, 2022 · 7074d26 · 7074d26
1 parent 8e4cc18
commit 7074d26
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 65 deletions.
diff --git a/src/hooks/useQuickbarShortcut.ts b/src/hooks/useQuickbarShortcut.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+function useQuickbarShortcut(): {
+  shortcut: string | null;
+  isConfigured: boolean;
+} {
+  const [shortcut, setShortcut] = useState(null);
+
+  useEffect(() => {
+    chrome.commands.getAll((commands) => {
+      const command = commands.find(
+        (command) => command.name === "toggle-quick-bar"
+      );
+      if (command) {
+        setShortcut(command.shortcut);
+      }
+    });
+  }, []);
+
+  const isConfigured = shortcut !== "";
+
+  return {
+    // Optimistically return as isConfigured so interface doesn't show a warning
+    isConfigured: isConfigured || shortcut == null,
+    shortcut: isConfigured ? shortcut : null,
+  };
+}
+
+export default useQuickbarShortcut;
diff --git a/src/options/pages/marketplace/ActivateBody.tsx b/src/options/pages/marketplace/ActivateBody.tsx
@@ -34,8 +34,8 @@ import PermissionsBody from "@/options/pages/marketplace/PermissionsBody";
 import { resolveRecipe } from "@/registry/internal";
 import extensionPointRegistry from "@/extensionPoints/registry";
 import { useAsyncState } from "@/hooks/common";
-import { isEmpty } from "lodash";
 import { allSettledValues } from "@/utils";
+import useQuickbarShortcut from "@/hooks/useQuickbarShortcut";
 
 const QuickBarAlert = () => (
   <Alert variant="warning">
@@ -68,13 +68,7 @@ const ActivateBody: React.FunctionComponent<{
     selectedAuths
   );
 
-  const [hasShortcut] = useAsyncState(async () => {
-    const commands = await browser.commands.getAll();
-    return commands.some(
-      (command) =>
-        command.name === "toggle-quick-bar" && !isEmpty(command.shortcut)
-    );
-  }, []);
+  const { isConfigured: isShortcutConfigured } = useQuickbarShortcut();
 
   const [hasQuickBar] = useAsyncState(
     async () => {
@@ -98,7 +92,7 @@ const ActivateBody: React.FunctionComponent<{
       <Card.Body className="mb-0 p-3">
         <Card.Title>Review Permissions & Activate</Card.Title>
 
-        {hasQuickBar && !hasShortcut ? (
+        {hasQuickBar && !isShortcutConfigured ? (
           <QuickBarAlert />
         ) : (
           <p className="text-info">

diff --git a/src/pageEditor/extensionPoints/quickBar.tsx b/src/pageEditor/extensionPoints/quickBar.tsx
@@ -22,11 +22,11 @@ import {
   baseSelectExtension,
   baseSelectExtensionPoint,
   cleanIsAvailable,
+  extensionWithNormalizedPipeline,
   getImplicitReader,
   lookupExtensionPoint,
   makeInitialBaseState,
   makeIsAvailable,
-  extensionWithNormalizedPipeline,
   PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
   removeEmptyValues,
   selectIsAvailable,
@@ -43,18 +43,18 @@ import {
   ElementConfig,
   SingleLayerReaderConfig,
 } from "@/pageEditor/extensionPoints/elementConfig";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Alert } from "react-bootstrap";
 import {
   QuickBarConfig,
   QuickBarDefinition,
   QuickBarExtensionPoint,
 } from "@/extensionPoints/quickBarExtension";
 import QuickBarConfiguration from "@/pageEditor/tabs/quickBar/QuickBarConfiguration";
-import { isEmpty } from "lodash";
 import type { DynamicDefinition } from "@/contentScript/nativeEditor/types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { QuickBarFormState } from "./formStateTypes";
+import useQuickbarShortcut from "@/hooks/useQuickbarShortcut";
 
 function fromNativeElement(url: string, metadata: Metadata): QuickBarFormState {
   const base = makeInitialBaseState();
@@ -223,6 +223,30 @@ function asDynamicElement(element: QuickBarFormState): DynamicDefinition {
   };
 }
 
+export const UnconfiguredQuickBarAlert: React.FunctionComponent = () => {
+  const { isConfigured } = useQuickbarShortcut();
+
+  if (!isConfigured) {
+    return (
+      <Alert variant="warning">
+        <FontAwesomeIcon icon={faExclamationTriangle} />
+        &nbsp;You have not{" "}
+        <a
+          href="chrome://extensions/shortcuts"
+          onClick={(event) => {
+            event.preventDefault();
+            void browser.tabs.create({ url: event.currentTarget.href });
+          }}
+        >
+          configured a Quick Bar shortcut
+        </a>
+      </Alert>
+    );
+  }
+
+  return null;
+};
+
 const config: ElementConfig<undefined, QuickBarFormState> = {
   displayOrder: 1,
   elementType: "quickBar",
@@ -238,50 +262,39 @@ const config: ElementConfig<undefined, QuickBarFormState> = {
   selectExtension,
   fromExtension,
   InsertModeHelpText() {
-    const [shortcut, setShortcut] = useState("");
-
-    useEffect(() => {
-      chrome.commands.getAll((commands) => {
-        const command = commands.find(
-          (command) => command.name === "toggle-quick-bar"
-        );
-        if (command) {
-          setShortcut(command.shortcut);
-        }
-      });
-    }, []);
+    const { isConfigured, shortcut } = useQuickbarShortcut();
 
     return (
       <div className="text-center pb-2">
-        {isEmpty(shortcut) ? (
-          <Alert variant="warning">
-            <FontAwesomeIcon icon={faExclamationTriangle} />
-            &nbsp;You have not{" "}
+        {isConfigured ? (
+          <p>
+            You&apos;ve configured&nbsp;
+            <kbd style={{ fontFamily: "system" }}>{shortcut}</kbd>&nbsp; to open
+            the Quick Bar.{" "}
             <a
               href="chrome://extensions/shortcuts"
               onClick={(event) => {
                 event.preventDefault();
                 void browser.tabs.create({ url: event.currentTarget.href });
               }}
             >
-              configured a Quick Bar shortcut
+              Change your Quick Bar shortcut
             </a>
-          </Alert>
+          </p>
         ) : (
-          <p>
-            You&apos;ve configured&nbsp;
-            <kbd style={{ fontFamily: "system" }}>{shortcut}</kbd>&nbsp; to open
-            the Quick Bar.{" "}
+          <Alert variant="warning">
+            <FontAwesomeIcon icon={faExclamationTriangle} />
+            &nbsp;You have not{" "}
             <a
               href="chrome://extensions/shortcuts"
               onClick={(event) => {
                 event.preventDefault();
                 void browser.tabs.create({ url: event.currentTarget.href });
               }}
             >
-              Change your Quick Bar shortcut
+              configured a Quick Bar shortcut
             </a>
-          </p>
+          </Alert>
         )}
       </div>
     );

diff --git a/src/pageEditor/panes/insert/GenericInsertPane.module.scss b/src/pageEditor/panes/insert/GenericInsertPane.module.scss
@@ -30,3 +30,7 @@
 .cancelRow {
   justify-content: center;
 }
+
+.loadingRow {
+  justify-content: center;
+}
diff --git a/src/pageEditor/panes/insert/GenericInsertPane.tsx b/src/pageEditor/panes/insert/GenericInsertPane.tsx
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import paneStyles from "@/pageEditor/panes/Pane.module.scss";
 import styles from "./GenericInsertPane.module.scss";
 import { useDispatch } from "react-redux";
@@ -37,14 +37,20 @@ import {
 } from "@/contentScript/messenger/api";
 import { FormState } from "@/pageEditor/pageEditorTypes";
 import { getExampleBlockPipeline } from "@/pageEditor/exampleExtensionConfig";
+import useFlags from "@/hooks/useFlags";
+import GridLoader from "react-spinners/GridLoader";
 
 const { addElement } = editorSlice.actions;
 
 const GenericInsertPane: React.FunctionComponent<{
   cancel: () => void;
   config: ElementConfig;
 }> = ({ cancel, config }) => {
+  const { flagOn } = useFlags();
   const dispatch = useDispatch();
+
+  const showMarketplace = flagOn("page-editor-extension-point-marketplace");
+
   const start = useCallback(
     async (state: FormState) => {
       try {
@@ -113,8 +119,26 @@ const GenericInsertPane: React.FunctionComponent<{
     }
   }, [start, config]);
 
+  useEffect(() => {
+    if (!showMarketplace) {
+      // Add the extension directly since there's no options for the user. The insert pane will flash up quickly.
+      void addNew();
+    }
+  }, [showMarketplace, addNew]);
+
   const extensionPoints = useAvailableExtensionPoints(config.baseClass);
 
+  if (!showMarketplace) {
+    // The insert pane will flash up quickly while the addNew is running.
+    return (
+      <Centered isScrollable>
+        <Row className={styles.loadingRow}>
+          <GridLoader />
+        </Row>
+      </Centered>
+    );
+  }
+
   return (
     <Centered isScrollable>
       <div className={paneStyles.title}>Build new {config.label} extension</div>

diff --git a/src/pageEditor/panes/insert/InsertMenuItemPane.tsx b/src/pageEditor/panes/insert/InsertMenuItemPane.tsx
@@ -36,6 +36,7 @@ import {
 import BrickModal from "@/components/brickModalNoTags/BrickModal";
 import { ExtensionPointConfig } from "@/extensionPoints/types";
 import useAddExisting from "@/pageEditor/panes/insert/useAddExisting";
+import useFlags from "@/hooks/useFlags";
 
 type MenuItemWithConfig = MenuItemExtensionPoint & {
   rawConfig: ExtensionPointConfig<MenuDefinition>;
@@ -44,6 +45,8 @@ type MenuItemWithConfig = MenuItemExtensionPoint & {
 const InsertMenuItemPane: React.FunctionComponent<{ cancel: () => void }> = ({
   cancel,
 }) => {
+  const { flagOn } = useFlags();
+
   const menuItemExtensionPoints = useAvailableExtensionPoints(
     MenuItemExtensionPoint
   );
@@ -71,20 +74,22 @@ const InsertMenuItemPane: React.FunctionComponent<{ cancel: () => void }> = ({
         </div>
       </div>
       <div>
-        <BrickModal
-          bricks={menuItemExtensionPoints ?? []}
-          caption="Select button foundation"
-          renderButton={(onClick) => (
-            <Button
-              variant="info"
-              onClick={onClick}
-              disabled={!menuItemExtensionPoints?.length}
-            >
-              <FontAwesomeIcon icon={faSearch} /> Search Marketplace
-            </Button>
-          )}
-          onSelect={async (block) => addExisting(block as MenuItemWithConfig)}
-        />
+        {flagOn("page-editor-extension-point-marketplace") && (
+          <BrickModal
+            bricks={menuItemExtensionPoints ?? []}
+            caption="Select button foundation"
+            renderButton={(onClick) => (
+              <Button
+                variant="info"
+                onClick={onClick}
+                disabled={!menuItemExtensionPoints?.length}
+              >
+                <FontAwesomeIcon icon={faSearch} /> Search Marketplace
+              </Button>
+            )}
+            onSelect={async (block) => addExisting(block as MenuItemWithConfig)}
+          />
+        )}
 
         <Button variant="danger" className="ml-2" onClick={cancel}>
           <FontAwesomeIcon icon={faTimes} /> Cancel

diff --git a/src/pageEditor/panes/insert/InsertPanelPane.tsx b/src/pageEditor/panes/insert/InsertPanelPane.tsx
@@ -36,6 +36,7 @@ import {
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import useAddExisting from "@/pageEditor/panes/insert/useAddExisting";
+import useFlags from "@/hooks/useFlags";
 
 type PanelWithConfig = PanelExtensionPoint & {
   rawConfig: ExtensionPointConfig<PanelDefinition>;
@@ -47,6 +48,8 @@ const InsertPanelPane: React.FunctionComponent<{
   const panelExtensionPoints = useAvailableExtensionPoints(PanelExtensionPoint);
   const addExistingPanel = useAddExisting(config, cancel);
 
+  const { flagOn } = useFlags();
+
   return (
     <Centered isScrollable>
       <div className={styles.title}>Inserting Panel</div>
@@ -68,20 +71,24 @@ const InsertPanelPane: React.FunctionComponent<{
         </div>
       </div>
       <div>
-        <BrickModal
-          bricks={panelExtensionPoints ?? []}
-          caption="Select panel foundation"
-          renderButton={(onClick) => (
-            <Button
-              variant="info"
-              onClick={onClick}
-              disabled={!panelExtensionPoints?.length}
-            >
-              <FontAwesomeIcon icon={faSearch} /> Search Marketplace
-            </Button>
-          )}
-          onSelect={async (block) => addExistingPanel(block as PanelWithConfig)}
-        />
+        {flagOn("page-editor-extension-point-marketplace") && (
+          <BrickModal
+            bricks={panelExtensionPoints ?? []}
+            caption="Select panel foundation"
+            renderButton={(onClick) => (
+              <Button
+                variant="info"
+                onClick={onClick}
+                disabled={!panelExtensionPoints?.length}
+              >
+                <FontAwesomeIcon icon={faSearch} /> Search Marketplace
+              </Button>
+            )}
+            onSelect={async (block) =>
+              addExistingPanel(block as PanelWithConfig)
+            }
+          />
+        )}
 
         <Button className="ml-2" variant="danger" onClick={cancel}>
           <FontAwesomeIcon icon={faTimes} /> Cancel

diff --git a/src/pageEditor/tabs/editTab/EditTab.tsx b/src/pageEditor/tabs/editTab/EditTab.tsx
@@ -53,6 +53,7 @@ import devtoolFieldOverrides from "@/pageEditor/fields/devtoolFieldOverrides";
 import SchemaFieldContext from "@/components/fields/schemaFields/SchemaFieldContext";
 import { get } from "lodash";
 import Loader from "@/components/Loader";
+import { UnconfiguredQuickBarAlert } from "@/pageEditor/extensionPoints/quickBar";
 import { BlockType } from "@/runtime/runtimeTypes";
 
 const EditTab: React.FC<{
@@ -191,6 +192,9 @@ const EditTab: React.FC<{
               {isApiAtLeastV2 ? (
                 activeNodeId === FOUNDATION_NODE_ID ? (
                   <>
+                    {extensionPointType === "quickBar" && (
+                      <UnconfiguredQuickBarAlert />
+                    )}
                     <ConnectedFieldTemplate
                       name="label"
                       label="Extension Name"