#6897: add page editor link to template gallery (#6898)

src/contentScript/messenger/api.ts

@@ -26,6 +26,7 @@ export const cancelTemporaryPanel = getNotifier("TEMPORARY_PANEL_CANCEL");
 export const closeTemporaryPanel = getNotifier("TEMPORARY_PANEL_CLOSE");
 export const resolveTemporaryPanel = getNotifier("TEMPORARY_PANEL_RESOLVE");
 export const queueReactivateTab = getNotifier("QUEUE_REACTIVATE_TAB");
+export const navigateTab = getNotifier("NAVIGATE_TAB");
 export const reactivateTab = getNotifier("REACTIVATE_TAB");
 export const ensureExtensionPointsInstalled = getMethod(
   "ENSURE_EXTENSION_POINTS_INSTALLED"

src/contentScript/messenger/registration.ts

@@ -54,6 +54,7 @@ import {
   runBlockPreview,
   resetTab,
   runRendererBlock,
+  navigateTab,
 } from "@/contentScript/pageEditor";
 import { checkAvailable } from "@/bricks/available";
 import notify from "@/utils/notify";
@@ -93,6 +94,7 @@ declare global {
     REACTIVATE_TAB: typeof reactivateTab;
     REMOVE_INSTALLED_EXTENSION: typeof removePersistedExtension;
 
+    NAVIGATE_TAB: typeof navigateTab;
     RESET_TAB: typeof resetTab;
 
     TOGGLE_QUICK_BAR: typeof toggleQuickBar;
@@ -158,6 +160,7 @@ export default function registerMessenger(): void {
     REMOVE_INSTALLED_EXTENSION: removePersistedExtension,
     GET_RESERVED_SIDEBAR_ENTRIES: getReservedPanelEntries,
     RESET_TAB: resetTab,
+    NAVIGATE_TAB: navigateTab,
 
     TOGGLE_QUICK_BAR: toggleQuickBar,
     HANDLE_MENU_ACTION: handleMenuAction,

src/contentScript/pageEditor.ts

@@ -248,3 +248,11 @@ export async function resetTab(): Promise<void> {
   await clearDynamicElements({});
   await reactivateTab();
 }
+
+/**
+ * Navigate to the given URL.
+ * @param url the url to navigate to
+ */
+export async function navigateTab({ url }: { url: string }): Promise<void> {
+  window.location.href = url;
+}

src/pageEditor/sidebar/AddExtensionPointButton.tsx → src/pageEditor/sidebar/AddStarterBrickButton.tsx

@@ -23,11 +23,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { sortBy } from "lodash";
 import useAddElement from "@/pageEditor/hooks/useAddElement";
 import { useSelector } from "react-redux";
+import { thisTab } from "@/pageEditor/utils";
 import { selectTabHasPermissions } from "@/pageEditor/tabState/tabStateSelectors";
-import { useAsyncState } from "@/hooks/common";
 import { flagOn } from "@/auth/authUtils";
+import useAsyncState from "@/hooks/useAsyncState";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { navigateTab } from "@/contentScript/messenger/api";
+import reportEvent from "@/telemetry/reportEvent";
+import { Events } from "@/telemetry/events";
+import { selectSessionId } from "@/pageEditor/slices/sessionSelectors";
 
-const sortedExtensionPoints = sortBy(
+const sortedStarterBricks = sortBy(
   [...ADAPTERS.values()],
   (x) => x.displayOrder
 );
@@ -52,55 +58,67 @@ const DropdownEntry: React.FunctionComponent<{
   </Dropdown.Item>
 );
 
-const AddExtensionPointButton: React.FunctionComponent = () => {
+const AddStarterBrickButton: React.FunctionComponent = () => {
   const tabHasPermissions = useSelector(selectTabHasPermissions);
+  const sessionId = useSelector(selectSessionId);
 
   const addElement = useAddElement();
 
-  const [entries] = useAsyncState<React.ReactNode>(
-    async () => {
-      const results = await Promise.all(
-        sortedExtensionPoints.map(async (config) => {
-          if (!config.flag) {
-            return true;
-          }
+  const { data: entries = [] } = useAsyncState<React.ReactNode>(async () => {
+    const results = await Promise.all(
+      sortedStarterBricks.map(async (config) => {
+        if (!config.flag) {
+          return true;
+        }
 
-          return flagOn(config.flag);
-        })
-      );
+        return flagOn(config.flag);
+      })
+    );
 
-      return (
-        sortedExtensionPoints
-          // eslint-disable-next-line security/detect-object-injection -- array index
-          .filter((_, index) => results[index])
-          .map((config) => (
-            <DropdownEntry
-              key={config.elementType}
-              caption={config.label}
-              icon={config.icon}
-              beta={Boolean(config.flag)}
-              onClick={() => {
-                addElement(config);
-              }}
-            />
-          ))
-      );
-    },
-    [],
-    []
-  );
+    return (
+      sortedStarterBricks
+        // eslint-disable-next-line security/detect-object-injection -- array index
+        .filter((_, index) => results[index])
+        .map((config) => (
+          <DropdownEntry
+            key={config.elementType}
+            caption={config.label}
+            icon={config.icon}
+            beta={Boolean(config.flag)}
+            onClick={() => {
+              addElement(config);
+            }}
+          />
+        ))
+    );
+  }, []);
 
   return (
     <DropdownButton
       disabled={!tabHasPermissions}
       variant="info"
       size="sm"
       title="Add"
-      id="add-extension-point"
+      id="add-starter-brick"
     >
       {entries}
+
+      <Dropdown.Divider />
+      <Dropdown.Item
+        onClick={() => {
+          reportEvent(Events.PAGE_EDITOR_VIEW_TEMPLATES, {
+            sessionId,
+          });
+          navigateTab(thisTab, {
+            url: "https://www.pixiebrix.com/templates-gallery?utm_source=pixiebrix&utm_medium=page_editor&utm_campaign=starter_brick_menu",
+          });
+        }}
+      >
+        <FontAwesomeIcon icon={faExternalLinkAlt} fixedWidth />
+        &nbsp;Start with a Template
+      </Dropdown.Item>
     </DropdownButton>
   );
 };
 
-export default AddExtensionPointButton;
+export default AddStarterBrickButton;

src/pageEditor/sidebar/SidebarExpanded.tsx

@@ -53,7 +53,7 @@ import useResetRecipe from "@/pageEditor/hooks/useResetRecipe";
 import useRemoveRecipe from "@/pageEditor/hooks/useRemoveRecipe";
 import Logo from "./Logo";
 import ReloadButton from "./ReloadButton";
-import AddExtensionPointButton from "./AddExtensionPointButton";
+import AddStarterBrickButton from "./AddStarterBrickButton";
 import ExtensionEntry from "./ExtensionEntry";
 import { actions } from "@/pageEditor/slices/editorSlice";
 import { measureDurationFromAppStart } from "@/utils/performance";
@@ -214,7 +214,7 @@ const SidebarExpanded: React.FunctionComponent<{
               <Logo />
             </a>
 
-            <AddExtensionPointButton />
+            <AddStarterBrickButton />
 
             {showDeveloperUI && <ReloadButton />}
           </div>

src/telemetry/events.ts

@@ -93,6 +93,7 @@ export const Events = {
   PAGE_EDITOR_RESET: "PageEditorReset",
   PAGE_EDITOR_SAVE: "PageEditorSave",
   PAGE_EDITOR_START: "PageEditorStart",
+  PAGE_EDITOR_VIEW_TEMPLATES: "PageEditorViewTemplates",
 
   PAGE_EDITOR_SESSION_START: "PageEditorSessionStart",
   PAGE_EDITOR_SESSION_END: "PageEditorSessionEnd",