ENG-1272 Migrate all small global settings components

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

@@ -1,80 +1,87 @@
 import React from "react";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
-import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
-import NumberPanel from "roamjs-components/components/ConfigPanels/NumberPanel";
-import MultiTextPanel from "roamjs-components/components/ConfigPanels/MultiTextPanel";
-import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
+import {
+  GlobalFlagPanel,
+  GlobalNumberPanel,
+  GlobalMultiTextPanel,
+  GlobalSelectPanel,
+} from "./components/BlockPropSettingPanels";
 
-const DiscourseGraphExport = ({}: {}) => {
+const DiscourseGraphExport = () => {
   const settings = getFormattedConfigTree();
   const exportSettings = settings.export;
   const parentUid = settings.export.exportUid;
   return (
     <div className="flex flex-col gap-4 p-1">
       <div>
-        <FlagPanel
+        <GlobalFlagPanel
           title="remove special characters"
           description="Whether or not to remove the special characters in a file name"
+          settingKeys={["Export", "Remove Special Characters"]}
+          initialValue={exportSettings.removeSpecialCharacters.value}
           order={1}
           uid={exportSettings.removeSpecialCharacters.uid}
           parentUid={parentUid}
-          value={exportSettings.removeSpecialCharacters.value || false}
         />
 
-        <FlagPanel
+        <GlobalFlagPanel
           title="resolve block references"
           description="Replaces block references in the markdown content with the block's content"
+          settingKeys={["Export", "Resolve Block References"]}
+          initialValue={exportSettings.optsRefs.value}
           order={3}
           uid={exportSettings.optsRefs.uid}
           parentUid={parentUid}
-          value={exportSettings.optsRefs.value || false}
         />
-        <FlagPanel
+        <GlobalFlagPanel
           title="resolve block embeds"
           description="Replaces block embeds in the markdown content with the block's content tree"
+          settingKeys={["Export", "Resolve Block Embeds"]}
+          initialValue={exportSettings.optsEmbeds.value}
           order={4}
           uid={exportSettings.optsEmbeds.uid}
           parentUid={parentUid}
-          value={exportSettings.optsEmbeds.value || false}
         />
 
-        <FlagPanel
+        <GlobalFlagPanel
           title="append referenced node"
           description="If a referenced node is defined in a node's format, it will be appended to the discourse context"
+          settingKeys={["Export", "Append Referenced Node"]}
+          initialValue={exportSettings.appendRefNodeContext.value}
           order={6}
           uid={exportSettings.appendRefNodeContext.uid}
           parentUid={parentUid}
-          value={exportSettings.appendRefNodeContext.value || false}
         />
       </div>
       <div className="link-type-select-wrapper">
-        <SelectPanel
+        <GlobalSelectPanel
           title="link type"
           description="How to format links that appear in your export."
+          settingKeys={["Export", "Link Type"]}
+          initialValue={exportSettings.linkType.value || "alias"}
           order={5}
-          options={{
-            items: ["alias", "wikilinks", "roam url"],
-          }}
+          options={["alias", "wikilinks", "roam url"]}
           uid={exportSettings.linkType.uid}
           parentUid={parentUid}
-          value={exportSettings.linkType.value || "alias"}
         />
       </div>
-      <NumberPanel
+      <GlobalNumberPanel
         title="max filename length"
         description="Set the maximum name length for markdown file exports"
+        settingKeys={["Export", "Max Filename Length"]}
+        initialValue={exportSettings.maxFilenameLength.value || 64}
         order={0}
         uid={exportSettings.maxFilenameLength.uid}
         parentUid={parentUid}
-        value={exportSettings.maxFilenameLength.value || 64}
       />
-      <MultiTextPanel
+      <GlobalMultiTextPanel
         title="frontmatter"
         description="Specify all the lines that should go to the Frontmatter of the markdown file"
+        settingKeys={["Export", "Frontmatter"]}
+        initialValue={exportSettings.frontmatter.values}
         order={2}
         uid={exportSettings.frontmatter.uid}
         parentUid={parentUid}
-        value={exportSettings.frontmatter.values || []}
       />
     </div>
   );

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

@@ -1,10 +1,12 @@
 import React, { useMemo, useState } 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 {
+  GlobalTextPanel,
+  FeatureFlagPanel,
+} from "./components/BlockPropSettingPanels";
 
 const DiscourseGraphHome = () => {
   const settings = useMemo(() => {
@@ -13,39 +15,40 @@ const DiscourseGraphHome = () => {
   }, []);
 
   const [isAlertOpen, setIsAlertOpen] = useState(false);
-
   return (
     <div className="flex flex-col gap-4 p-1">
-      <TextPanel
+      <GlobalTextPanel
         title="trigger"
         description="The trigger to create the node menu."
+        settingKeys={["Trigger"]}
+        initialValue={settings.trigger.value || "\\"}
         order={0}
         uid={settings.trigger.uid}
         parentUid={settings.settingsUid}
-        value={settings.trigger.value}
       />
-      <TextPanel
+      <GlobalTextPanel
         title="Canvas Page Format"
         description="The page format for canvas pages"
+        settingKeys={["Canvas Page Format"]}
+        initialValue={
+          settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT
+        }
         order={1}
         uid={settings.canvasPageFormat.uid}
         parentUid={settings.settingsUid}
-        value={settings.canvasPageFormat.value}
-        defaultValue={DEFAULT_CANVAS_PAGE_FORMAT}
       />
-      <FlagPanel
+      <FeatureFlagPanel
         title="(BETA) Left Sidebar"
         description="Whether or not to enable the left sidebar."
+        featureKey="Enable Left Sidebar"
+        initialValue={settings.leftSidebarEnabled.value}
         order={2}
         uid={settings.leftSidebarEnabled.uid}
         parentUid={settings.settingsUid}
-        value={settings.leftSidebarEnabled.value || false}
-        options={{
-          onChange: (checked: boolean) => {
-            if (checked) {
-              setIsAlertOpen(true);
-            }
-          },
+        onAfterChange={(checked: boolean) => {
+          if (checked) {
+            setIsAlertOpen(true);
+          }
         }}
       />
       <Alert

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

@@ -2,13 +2,13 @@
 import React, { useEffect, useState } from "react";
 import { Button, Intent, Tabs, Tab, TabId } from "@blueprintjs/core";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
-import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import PageGroupsPanel from "./PageGroupPanel";
 import createBlock from "roamjs-components/writes/createBlock";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
 import { createOrUpdateDiscourseEmbedding } from "~/utils/syncDgNodesToSupabase";
 import { render as renderToast } from "roamjs-components/components/Toast";
+import { GlobalFlagPanel } from "./components/BlockPropSettingPanels";
 
 const SuggestiveModeSettings = () => {
   const settings = getFormattedConfigTree();
@@ -64,35 +64,40 @@ const SuggestiveModeSettings = () => {
           panel={
             <div className="flex flex-col gap-4 p-1">
               <div className="sync-config-settings">
-                <FlagPanel
+                <GlobalFlagPanel
                   title="Include Current Page Relations"
                   description="Include relations from pages referenced on the current page"
+                  settingKeys={[
+                    "Suggestive Mode",
+                    "Include Current Page Relations",
+                  ]}
+                  initialValue={
+                    settings.suggestiveMode.includePageRelations.value
+                  }
                   order={0}
                   uid={settings.suggestiveMode.includePageRelations.uid}
                   parentUid={effectiveSuggestiveModeUid}
-                  value={includePageRelations}
-                  options={{
-                    onChange: (checked: boolean) => {
-                      setIncludePageRelations(checked);
-                    },
-                  }}
+                  onChange={setIncludePageRelations}
                 />
 
-                <FlagPanel
+                <GlobalFlagPanel
                   title="Include Parent And Child Blocks"
                   description={
                     includePageRelations
                       ? "Include relations from parent and child blocks (automatically enabled when including page relations)"
                       : "Include relations from parent and child blocks"
                   }
+                  settingKeys={[
+                    "Suggestive Mode",
+                    "Include Parent And Child Blocks",
+                  ]}
+                  initialValue={
+                    settings.suggestiveMode.includeParentAndChildren.value
+                  }
+                  value={includePageRelations ? true : undefined}
                   order={1}
                   uid={settings.suggestiveMode.includeParentAndChildren.uid}
                   parentUid={effectiveSuggestiveModeUid}
-                  value={
-                    includePageRelations
-                      ? true
-                      : settings.suggestiveMode.includeParentAndChildren.value
-                  }
                   disabled={includePageRelations}
                 />
               </div>