ENG-1274: Migrate feature flags

apps/roam/src/components/CreateRelationDialog.tsx

@@ -12,7 +12,6 @@ import { render as renderToast } from "roamjs-components/components/Toast";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
-import { getSetting } from "~/utils/extensionSettings";
 import getDiscourseRelations, {
   type DiscourseRelation,
 } from "~/utils/getDiscourseRelations";
@@ -23,7 +22,7 @@ import type { DiscourseNode } from "~/utils/getDiscourseNodes";
 import type { Result } from "~/utils/types";
 import internalError from "~/utils/internalError";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
+import { useFeatureFlag } from "~/components/settings/utils/hooks";
 
 export type CreateRelationDialogProps = {
   onClose: () => void;
@@ -379,7 +378,7 @@ export const renderCreateRelationDialog = (
 export const CreateRelationButton = (
   props: CreateRelationDialogProps,
 ): React.JSX.Element | null => {
-  const showAddRelation = getSetting<boolean>(USE_REIFIED_RELATIONS, false);
+  const showAddRelation = useFeatureFlag("Reified Relation Triples");
   if (!showAddRelation) return null;
   let extProps: ExtendedCreateRelationDialogProps | null = null;
   try {

apps/roam/src/components/LeftSidebarView.tsx

@@ -508,12 +508,20 @@ const migrateFavorites = async () => {
   refreshConfigTree();
 };
 
+let cachedOnloadArgs: OnloadArgs | null = null;
+
+export const cacheOnloadArgs = (onloadArgs: OnloadArgs): void => {
+  cachedOnloadArgs = onloadArgs;
+};
+
 export const mountLeftSidebar = async (
   wrapper: HTMLElement,
   onloadArgs: OnloadArgs,
 ): Promise<void> => {
   if (!wrapper) return;
 
+  cachedOnloadArgs = onloadArgs;
+
   const id = "dg-left-sidebar-root";
   let root = wrapper.querySelector(`#${id}`) as HTMLDivElement;
   if (!root) {
@@ -531,4 +539,24 @@ export const mountLeftSidebar = async (
   ReactDOM.render(<LeftSidebarView onloadArgs={onloadArgs} />, root);
 };
 
+export const unmountLeftSidebar = (): void => {
+  const wrapper = document.querySelector(".starred-pages-wrapper") as HTMLDivElement;
+  if (!wrapper) return;
+
+  const root = wrapper.querySelector("#dg-left-sidebar-root") as HTMLDivElement;
+  if (root) {
+    ReactDOM.unmountComponentAtNode(root);
+    root.remove();
+  }
+  wrapper.style.padding = "";
+};
+
+export const remountLeftSidebar = async (): Promise<void> => {
+  const wrapper = document.querySelector(".starred-pages-wrapper") as HTMLDivElement;
+  if (!wrapper || !cachedOnloadArgs) return;
+
+  wrapper.style.padding = "0";
+  await mountLeftSidebar(wrapper, cachedOnloadArgs);
+};
+
 export default LeftSidebarView;

apps/roam/src/components/SuggestionsBody.tsx

@@ -26,9 +26,8 @@ import normalizePageTitle from "roamjs-components/queries/normalizePageTitle";
 import { type RelationDetails } from "~/utils/hyde";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import { render as renderToast } from "roamjs-components/components/Toast";
-import { getSetting } from "~/utils/extensionSettings";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 import { createReifiedRelation } from "~/utils/createReifiedBlock";
+import { getFeatureFlag } from "~/components/settings/utils/accessors";
 
 export type DiscourseData = {
   results: Awaited<ReturnType<typeof getDiscourseContextResults>>;
@@ -309,7 +308,7 @@ const SuggestionsBody = ({
   };
 
   const handleCreateBlock = async (node: SuggestedNode) => {
-    if (getSetting<boolean>(USE_REIFIED_RELATIONS, false)) {
+    if (getFeatureFlag("Reified Relation Triples")) {
       if (discourseNode === false) {
         renderToast({
           id: "suggestions-create-block-error",

apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx

@@ -63,7 +63,6 @@ import {
   shapeAtTranslationStart,
   updateArrowTerminal,
 } from "./helpers";
-import { getSetting } from "~/utils/extensionSettings";
 import { createReifiedRelation } from "~/utils/createReifiedBlock";
 import { discourseContext, isPageUid } from "~/components/canvas/Tldraw";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
@@ -81,7 +80,7 @@ import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageU
 import { AddReferencedNodeType } from "./DiscourseRelationTool";
 import { dispatchToastEvent } from "~/components/canvas/ToastListener";
 import internalError from "~/utils/internalError";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
+import { getFeatureFlag } from "~/components/settings/utils/accessors";
 
 const COLOR_ARRAY = Array.from(textShapeProps.color.values)
   .filter((c) => !["red", "green", "grey"].includes(c))
@@ -612,7 +611,7 @@ export const createAllRelationShapeUtils = (
         if (arrow.type !== target.type) {
           editor.updateShapes([{ id: arrow.id, type: target.type }]);
         }
-        if (getSetting<boolean>(USE_REIFIED_RELATIONS, false)) {
+        if (getFeatureFlag("Reified Relation Triples")) {
           const sourceAsDNS = asDiscourseNodeShape(source, editor);
           const targetAsDNS = asDiscourseNodeShape(target, editor);
 

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -22,10 +22,9 @@ import toCellValue from "~/utils/toCellValue";
 import { ContextContent } from "~/components/DiscourseContext";
 import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 import { CONTEXT_OVERLAY_SUGGESTION } from "~/utils/predefinedSelections";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
-import { getSetting } from "~/utils/extensionSettings";
 import { strictQueryForReifiedBlocks } from "~/utils/createReifiedBlock";
 import internalError from "~/utils/internalError";
+import { useFeatureFlag } from "~/components/settings/utils/hooks";
 
 const EXTRA_ROW_TYPES = ["context", "discourse"] as const;
 type ExtraRowType = (typeof EXTRA_ROW_TYPES)[number] | null;
@@ -263,7 +262,7 @@ const ResultRow = ({
   onDragEnd,
   onRefresh,
 }: ResultRowProps) => {
-  const useReifiedRel = getSetting<boolean>(USE_REIFIED_RELATIONS, false);
+  const useReifiedRel = useFeatureFlag("Reified Relation Triples");
   const cell = (key: string) => {
     const value = toCellValue({
       value: r[`${key}-display`] || r[key] || "",

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   Button,
   Checkbox,
@@ -12,9 +12,7 @@ import {
   TabId,
   Tabs,
 } from "@blueprintjs/core";
-import Description from "roamjs-components/components/Description";
 import { Select } from "@blueprintjs/select";
-import { getSetting, setSetting } from "~/utils/extensionSettings";
 import {
   getSupabaseContext,
   getLoggedInClient,
@@ -32,11 +30,8 @@ import { countReifiedRelations } from "~/utils/createReifiedBlock";
 import { DGSupabaseClient } from "@repo/database/lib/client";
 import internalError from "~/utils/internalError";
 import SuggestiveModeSettings from "./SuggestiveModeSettings";
-import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
-import refreshConfigTree from "~/utils/refreshConfigTree";
-import createBlock from "roamjs-components/writes/createBlock";
-import deleteBlock from "roamjs-components/writes/deleteBlock";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
+import { FeatureFlagPanel } from "./components/BlockPropSettingPanels";
+import { useFeatureFlag } from "./utils/hooks";
 
 const NodeRow = ({ node }: { node: PConceptFull }) => {
   return (
@@ -261,7 +256,7 @@ const MigrationTab = (): React.ReactElement => {
   const [useMigrationResults, setMigrationResults] = useState<string>("");
   const [useOngoing, setOngoing] = useState<boolean>(false);
   const [useDryRun, setDryRun] = useState<boolean>(false);
-  const enabled = getSetting<boolean>(USE_REIFIED_RELATIONS, false);
+  const enabled = useFeatureFlag("Reified Relation Triples");
   const doMigrateRelations = async () => {
     setOngoing(true);
     try {
@@ -331,64 +326,40 @@ const MigrationTab = (): React.ReactElement => {
 };
 
 const FeatureFlagsTab = (): React.ReactElement => {
-  const [useReifiedRelations, setUseReifiedRelations] = useState<boolean>(
-    getSetting<boolean>(USE_REIFIED_RELATIONS, false),
-  );
-  const settings = useMemo(() => {
-    refreshConfigTree();
-    return getFormattedConfigTree();
-  }, []);
-
-  const [suggestiveModeEnabled, setSuggestiveModeEnabled] = useState(
-    settings.suggestiveModeEnabled.value || false,
-  );
-  const [suggestiveModeUid, setSuggestiveModeUid] = useState(
-    settings.suggestiveModeEnabled.uid,
-  );
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isInstructionOpen, setIsInstructionOpen] = useState(false);
+  const confirmResolverRef = useRef<((value: boolean) => void) | null>(null);
+
+  const handleSuggestiveModeBeforeEnable = (): Promise<boolean> => {
+    return new Promise((resolve) => {
+      confirmResolverRef.current = resolve;
+      setIsAlertOpen(true);
+    });
+  };
 
   return (
     <div className="flex flex-col gap-4 p-4">
-      <Checkbox
-        checked={suggestiveModeEnabled}
-        onChange={(e) => {
-          const checked = (e.target as HTMLInputElement).checked;
-          if (checked) {
-            setIsAlertOpen(true);
-          } else {
-            if (suggestiveModeUid) {
-              void deleteBlock(suggestiveModeUid);
-              setSuggestiveModeUid(undefined);
-            }
-            setSuggestiveModeEnabled(false);
-          }
+      <FeatureFlagPanel
+        title="(BETA) Suggestive Mode Enabled"
+        description="Whether or not to enable the suggestive mode, if this is first time enabling it, you will need to generate and upload all node embeddings to supabase. Go to Suggestive Mode -> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"
+        featureKey="Suggestive Mode Enabled"
+        onBeforeEnable={handleSuggestiveModeBeforeEnable}
+        onAfterChange={(checked) => {
+          if (checked) setIsInstructionOpen(true);
         }}
-        labelElement={
-          <>
-            (BETA) Suggestive Mode Enabled
-            <Description
-              description={
-                "Whether or not to enable the suggestive mode, if this is first time enabling it, you will need to generate and upload all node embeddings to supabase. Go to Suggestive Mode -> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"
-              }
-            />
-          </>
-        }
       />
       <Alert
         isOpen={isAlertOpen}
         onConfirm={() => {
-          void createBlock({
-            parentUid: settings.settingsUid,
-            node: { text: "(BETA) Suggestive Mode Enabled" },
-          }).then((uid) => {
-            setSuggestiveModeUid(uid);
-            setSuggestiveModeEnabled(true);
-            setIsAlertOpen(false);
-            setIsInstructionOpen(true);
-          });
+          confirmResolverRef.current?.(true);
+          confirmResolverRef.current = null;
+          setIsAlertOpen(false);
+        }}
+        onCancel={() => {
+          confirmResolverRef.current?.(false);
+          confirmResolverRef.current = null;
+          setIsAlertOpen(false);
         }}
-        onCancel={() => setIsAlertOpen(false)}
         canEscapeKeyCancel={true}
         canOutsideClickCancel={true}
         intent={Intent.PRIMARY}
@@ -404,45 +375,25 @@ const FeatureFlagsTab = (): React.ReactElement => {
 
       <Alert
         isOpen={isInstructionOpen}
-        onConfirm={() => window.location.reload()}
+        onConfirm={() => setIsInstructionOpen(false)}
         onCancel={() => setIsInstructionOpen(false)}
-        confirmButtonText="Reload Graph"
-        cancelButtonText="Later"
+        confirmButtonText="Got it"
         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>
         <p>
-          Please reload the graph to see the new &apos;Suggestive Mode&apos;
-          tab.
-        </p>
-        <p>
-          Then go to Suggestive Mode{" "}
-          {"-> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"}
+          Go to the new &apos;Suggestive Mode&apos; tab, then Sync Config{" "}
+          {"-> Click on 'Generate & Upload All Node Embeddings'"}
         </p>
       </Alert>
 
-      <Checkbox
-        defaultChecked={useReifiedRelations}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          setUseReifiedRelations(target.checked);
-          void setSetting(USE_REIFIED_RELATIONS, target.checked).catch(
-            () => undefined,
-          );
-        }}
-        labelElement={
-          <>
-            Reified Relation Triples
-            <Description
-              description={
-                "When ON, relations are read/written as reifiedRelationUid in [[roam/js/discourse-graph/relations]]."
-              }
-            />
-          </>
-        }
+      <FeatureFlagPanel
+        title="Reified Relation Triples"
+        description="When ON, relations are read/written as reifiedRelationUid in [[roam/js/discourse-graph/relations]]."
+        featureKey="Reified Relation Triples"
       />
 
       <Button
@@ -466,10 +417,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
 
 const AdminPanel = (): React.ReactElement => {
   const [selectedTabId, setSelectedTabId] = useState<TabId>("admin");
-  const settings = useMemo(() => {
-    refreshConfigTree();
-    return getFormattedConfigTree();
-  }, []);
+  const suggestiveModeEnabled = useFeatureFlag("Suggestive Mode Enabled");
 
   return (
     <Tabs
@@ -504,7 +452,7 @@ const AdminPanel = (): React.ReactElement => {
           </div>
         }
       />
-      {settings.suggestiveModeEnabled.value && (
+      {suggestiveModeEnabled && (
         <Tab
           id="suggestive-mode-settings"
           title="Suggestive Mode"

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

@@ -1,19 +1,16 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
-import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index";
-import { Alert, Intent } from "@blueprintjs/core";
+import { FeatureFlagPanel } from "./components/BlockPropSettingPanels";
 
 const DiscourseGraphHome = () => {
   const settings = useMemo(() => {
     refreshConfigTree();
     return getFormattedConfigTree();
   }, []);
 
-  const [isAlertOpen, setIsAlertOpen] = useState(false);
-
   return (
     <div className="flex flex-col gap-4 p-1">
       <TextPanel
@@ -33,32 +30,11 @@ const DiscourseGraphHome = () => {
         value={settings.canvasPageFormat.value}
         defaultValue={DEFAULT_CANVAS_PAGE_FORMAT}
       />
-      <FlagPanel
-        title="(BETA) Left Sidebar"
+      <FeatureFlagPanel
+        title="(BETA) Enable Left Sidebar"
         description="Whether or not to enable the left sidebar."
-        order={2}
-        uid={settings.leftSidebarEnabled.uid}
-        parentUid={settings.settingsUid}
-        value={settings.leftSidebarEnabled.value || false}
-        options={{
-          onChange: (checked: boolean) => {
-            if (checked) {
-              setIsAlertOpen(true);
-            }
-          },
-        }}
+        featureKey="Enable Left Sidebar"
       />
-      <Alert
-        isOpen={isAlertOpen}
-        onConfirm={() => window.location.reload()}
-        onCancel={() => setIsAlertOpen(false)}
-        confirmButtonText="Reload Graph"
-        cancelButtonText="Later"
-        intent={Intent.PRIMARY}
-      >
-        <p>Enabling the Left Sidebar requires a graph reload to take effect.</p>
-        <p>Would you like to reload now?</p>
-      </Alert>
     </div>
   );
 };