ENG-1484: reactive suggestive mode flag, gate reload prompts on new settings store

Author: sid597

apps/roam/src/components/settings/AdminPanel.tsx

@@ -18,7 +18,12 @@ import { setSetting } from "~/utils/extensionSettings";
 import {
   getFeatureFlag,
   setFeatureFlag,
+  isNewSettingsStoreEnabled,
 } from "~/components/settings/utils/accessors";
+import {
+  onSettingChange,
+  settingKeys,
+} from "~/components/settings/utils/settingsEmitter";
 import {
   getSupabaseContext,
   getLoggedInClient,
@@ -367,6 +372,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
   );
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isInstructionOpen, setIsInstructionOpen] = useState(false);
+  const isReactive = isNewSettingsStoreEnabled();
 
   return (
     <div className="flex flex-col gap-4 p-4">
@@ -424,26 +430,30 @@ const FeatureFlagsTab = (): React.ReactElement => {
         <p>Are you sure you want to proceed?</p>
       </Alert>
 
-      {/* TODO(ENG-1484): Add pull watcher reactivity so toggling suggestive mode
-          starts/stops sync and shows the tab without requiring a reload. */}
       <Alert
         isOpen={isInstructionOpen}
-        onConfirm={() => window.location.reload()}
-        onCancel={() => setIsInstructionOpen(false)}
-        confirmButtonText="Reload Graph"
-        cancelButtonText="Later"
+        onConfirm={() =>
+          isReactive
+            ? setIsInstructionOpen(false)
+            : window.location.reload()
+        }
+        onCancel={isReactive ? undefined : () => setIsInstructionOpen(false)}
+        confirmButtonText={isReactive ? "OK" : "Reload Graph"}
+        cancelButtonText={isReactive ? undefined : "Later"}
         intent={Intent.PRIMARY}
       >
         <p>
           If this is the first time enabling it, you will need to generate and
           upload all node embeddings to supabase.
         </p>
+        {!isReactive && (
+          <p>
+            Please reload the graph to see the new &apos;Suggestive Mode&apos;
+            tab.
+          </p>
+        )}
         <p>
-          Please reload the graph to see the new &apos;Suggestive Mode&apos;
-          tab.
-        </p>
-        <p>
-          Then go to Suggestive Mode{" "}
+          Go to Suggestive Mode{" "}
           {"-> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"}
         </p>
       </Alert>
@@ -500,6 +510,15 @@ const FeatureFlagsTab = (): React.ReactElement => {
 
 const AdminPanel = (): React.ReactElement => {
   const [selectedTabId, setSelectedTabId] = useState<TabId>("admin");
+  const [showSuggestiveTab, setShowSuggestiveTab] = useState(
+    getFeatureFlag("Suggestive mode enabled"),
+  );
+
+  useEffect(() => {
+    return onSettingChange(settingKeys.suggestiveModeEnabled, (newValue) => {
+      setShowSuggestiveTab(Boolean(newValue));
+    });
+  }, []);
 
   return (
     <Tabs
@@ -534,7 +553,7 @@ const AdminPanel = (): React.ReactElement => {
           </div>
         }
       />
-      {getFeatureFlag("Suggestive mode enabled") && (
+      {showSuggestiveTab && (
         <Tab
           id="suggestive-mode-settings"
           title="Suggestive mode"

apps/roam/src/components/settings/HomePersonalSettings.tsx

@@ -26,7 +26,10 @@ import { setSetting } from "~/utils/extensionSettings";
 import { enablePostHog, disablePostHog } from "~/utils/posthog";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
 import streamlineStyling from "~/styles/streamlineStyling";
-import { getFeatureFlag } from "~/components/settings/utils/accessors";
+import {
+  getFeatureFlag,
+  isNewSettingsStoreEnabled,
+} from "~/components/settings/utils/accessors";
 import { PersonalFlagPanel } from "./components/BlockPropSettingPanels";
 import posthog from "posthog-js";
 
@@ -39,18 +42,14 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
       <Label>
         Personal node menu trigger
         <Description
-          description={
-            "Override the global trigger for the discourse node menu. Must refresh after editing."
-          }
+          description={`Override the global trigger for the discourse node menu.${isNewSettingsStoreEnabled() ? "" : " Must refresh after editing."}`}
         />
         <NodeMenuTriggerComponent extensionAPI={extensionAPI} />
       </Label>
       <Label>
         Node search menu trigger
         <Description
-          description={
-            "Set the trigger character for the node search menu. Must refresh after editing."
-          }
+          description={`Set the trigger character for the node search menu.${isNewSettingsStoreEnabled() ? "" : " Must refresh after editing."}`}
         />
         <NodeSearchMenuTriggerSetting onloadArgs={onloadArgs} />
       </Label>

apps/roam/src/components/settings/utils/pullWatchers.ts

@@ -95,6 +95,9 @@ export const featureFlagHandlers: Partial<
   "Enable left sidebar": (newValue, oldValue) => {
     emitSettingChange(settingKeys.leftSidebarFlag, newValue, oldValue);
   },
+  "Suggestive mode enabled": (newValue, oldValue) => {
+    emitSettingChange(settingKeys.suggestiveModeEnabled, newValue, oldValue);
+  },
   /* eslint-enable @typescript-eslint/naming-convention */
 };
 

apps/roam/src/components/settings/utils/settingsEmitter.ts

@@ -8,6 +8,7 @@ export const settingKeys = {
   personalNodeMenuTrigger: "personal:Personal node menu trigger",
   nodeSearchMenuTrigger: "personal:Node search menu trigger",
   personalSuggestiveModeOverlay: "personal:Suggestive mode overlay",
+  suggestiveModeEnabled: "flag:Suggestive mode enabled",
 } as const;
 
 const listeners = new Map<string, Set<SettingChangeCallback>>();

apps/roam/src/index.ts

@@ -120,12 +120,21 @@ export default runExtension(async (onloadArgs) => {
   document.addEventListener("input", discourseNodeSearchTriggerListener);
   document.addEventListener("selectionchange", nodeCreationPopoverListener);
 
-  const isSuggestiveModeEnabled = getFeatureFlag("Suggestive mode enabled");
-
-  if (isSuggestiveModeEnabled) {
+  if (getFeatureFlag("Suggestive mode enabled")) {
     initializeSupabaseSync();
   }
 
+  const unsubSuggestiveMode = onSettingChange(
+    settingKeys.suggestiveModeEnabled,
+    (newValue) => {
+      if (newValue) {
+        initializeSupabaseSync();
+      } else {
+        setSyncActivity(false);
+      }
+    },
+  );
+
   const { extensionAPI } = onloadArgs;
   window.roamjs.extension.queryBuilder = {
     runQuery: (parentUid: string) =>
@@ -195,6 +204,7 @@ export default runExtension(async (onloadArgs) => {
     observers: observers,
     unload: () => {
       unsubLeftSidebarFlag();
+      unsubSuggestiveMode();
       cleanupPullWatchers();
       cleanups.forEach((fn) => fn());
       setSyncActivity(false);