ENG-1225: Discourse node migration simple settings

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

@@ -6,12 +6,12 @@ import {
   Tooltip,
   Icon,
   ControlGroup,
-  Checkbox,
 } from "@blueprintjs/core";
 import React, { useState, useMemo } from "react";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
 import setInputSetting from "roamjs-components/util/setInputSetting";
+import { DiscourseNodeFlagPanel } from "./components/BlockPropSettingPanels";
 
 export const formatHexColor = (color: string) => {
   if (!color) return "";
@@ -25,7 +25,13 @@ export const formatHexColor = (color: string) => {
   return "";
 };
 
-const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
+const DiscourseNodeCanvasSettings = ({
+  nodeType,
+  uid,
+}: {
+  nodeType: string;
+  uid: string;
+}) => {
   const tree = useMemo(() => getBasicTreeByParentUid(uid), [uid]);
   const [color, setColor] = useState<string>(() => {
     const color = getSettingValueFromTree({ tree, key: "color" });
@@ -43,6 +49,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
   const [keyImageOption, setKeyImageOption] = useState(() =>
     getSettingValueFromTree({ tree, key: "key-image-option" }),
   );
+
   return (
     <div>
       <div className="mb-4">
@@ -54,7 +61,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
             value={color}
             onChange={(e) => {
               setColor(e.target.value);
-              setInputSetting({
+              void setInputSetting({
                 blockUid: uid,
                 key: "color",
                 value: e.target.value.replace("#", ""), // remove hash to not create roam link
@@ -67,7 +74,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
               icon={color ? "delete" : "info-sign"}
               onClick={() => {
                 setColor("");
-                setInputSetting({
+                void setInputSetting({
                   blockUid: uid,
                   key: "color",
                   value: "",
@@ -83,57 +90,41 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
           value={alias}
           onChange={(e) => {
             setAlias(e.target.value);
-            setInputSetting({
+            void setInputSetting({
               blockUid: uid,
               key: "alias",
               value: e.target.value,
             });
           }}
         />
       </Label>
-      <Checkbox
-        style={{ width: 240, lineHeight: "normal" }}
-        checked={isKeyImage}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          setIsKeyImage(target.checked);
-          if (target.checked) {
-            if (!keyImageOption) setKeyImageOption("first-image");
-            setInputSetting({
-              blockUid: uid,
-              key: "key-image",
-              value: "true",
-            });
-          } else {
-            setInputSetting({
-              blockUid: uid,
-              key: "key-image",
-              value: "false",
-            });
-          }
+      <DiscourseNodeFlagPanel
+        nodeType={nodeType}
+        title="Key image"
+        description="Add an image to the discourse node"
+        settingKeys={["canvasSettings", "key-image"]}
+        initialValue={isKeyImage}
+        onChange={(checked) => {
+          setIsKeyImage(checked);
+          if (checked && !keyImageOption) setKeyImageOption("first-image");
+          void setInputSetting({
+            blockUid: uid,
+            key: "key-image",
+            value: checked ? "true" : "false",
+          });
         }}
-      >
-        Key image
-        <Tooltip content={"Add an image to the discourse node"}>
-          <Icon
-            icon={"info-sign"}
-            iconSize={12}
-            className={"ml-2 align-middle opacity-80"}
-          />
-        </Tooltip>
-      </Checkbox>
-      {/* </Tooltip> */}
+      />
       <RadioGroup
         disabled={!isKeyImage}
-        selectedValue={!!keyImageOption ? keyImageOption : "first-image"}
+        selectedValue={keyImageOption || "first-image"}
         label="Key image location"
         onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          setKeyImageOption(target.value);
-          setInputSetting({
+          const value = (e.target as HTMLInputElement).value;
+          setKeyImageOption(value);
+          void setInputSetting({
             blockUid: uid,
             key: "key-image-option",
-            value: target.value,
+            value,
           });
         }}
       >
@@ -155,7 +146,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
         value={queryBuilderAlias}
         onChange={(e) => {
           setQueryBuilderAlias(e.target.value);
-          setInputSetting({
+          void setInputSetting({
             blockUid: uid,
             key: "query-builder-alias",
             value: e.target.value,

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

@@ -1,21 +1,16 @@
-import React, {
-  useState,
-  useMemo,
-  useEffect,
-  useRef,
-  useCallback,
-} from "react";
+import React, { useState, useMemo, useEffect, useRef } from "react";
 import { Button, Intent } from "@blueprintjs/core";
 import BlocksPanel from "roamjs-components/components/ConfigPanels/BlocksPanel";
-import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
-import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
 import getSubTree from "roamjs-components/util/getSubTree";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import extractRef from "roamjs-components/util/extractRef";
 import { getAllDiscourseNodesSince } from "~/utils/getAllDiscourseNodesSince";
 import { upsertNodesToSupabaseAsContentWithEmbeddings } from "~/utils/syncDgNodesToSupabase";
-import { discourseNodeBlockToLocalConcept } from "~/utils/conceptConversion";
 import { getLoggedInClient, getSupabaseContext } from "~/utils/supabaseContext";
+import {
+  DiscourseNodeFlagPanel,
+  DiscourseNodeTextPanel,
+} from "./components/BlockPropSettingPanels";
 
 const BlockRenderer = ({ uid }: { uid: string }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -44,12 +39,7 @@ const DiscourseNodeSuggestiveRules = ({
 }) => {
   const nodeUid = node.type;
 
-  const [embeddingRef, setEmbeddingRef] = useState(node.embeddingRef);
-
-  useEffect(() => {
-    setEmbeddingRef(node.embeddingRef || "");
-  }, [node.embeddingRef]);
-
+  const [embeddingRef, setEmbeddingRef] = useState(node.embeddingRef || "");
   const blockUidToRender = useMemo(
     () => extractRef(embeddingRef),
     [embeddingRef],
@@ -64,14 +54,6 @@ const DiscourseNodeSuggestiveRules = ({
     [nodeUid],
   );
 
-  const handleEmbeddingRefChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value;
-      setEmbeddingRef(newValue);
-      node.embeddingRef = newValue;
-    },
-    [node],
-  );
   const [isUpdating, setIsUpdating] = useState(false);
 
   const handleUpdateEmbeddings = async (): Promise<void> => {
@@ -96,6 +78,7 @@ const DiscourseNodeSuggestiveRules = ({
       setIsUpdating(false);
     }
   };
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <BlocksPanel
@@ -107,17 +90,17 @@ const DiscourseNodeSuggestiveRules = ({
         defaultValue={node.template}
       />
 
-      <TextPanel
+      <DiscourseNodeTextPanel
+        nodeType={nodeUid}
         title="Embedding Block Ref"
         description="Copy block ref from template which you want to be embedded and ranked."
+        settingKeys={["suggestiveRules", "embeddingRef"]}
+        initialValue={node.embeddingRef || ""}
+        placeholder="((block-uid))"
+        onChange={setEmbeddingRef}
         order={1}
         uid={node.embeddingRefUid || ""}
         parentUid={parentUid}
-        defaultValue={embeddingRef || ""}
-        options={{
-          placeholder: "((block-uid))",
-          onChange: handleEmbeddingRefChange,
-        }}
       />
 
       {blockUidToRender && (
@@ -127,13 +110,15 @@ const DiscourseNodeSuggestiveRules = ({
         </div>
       )}
 
-      <FlagPanel
+      <DiscourseNodeFlagPanel
+        nodeType={nodeUid}
         title="First Child"
         description="If the block is the first child of the embedding block ref, it will be embedded and ranked."
+        settingKeys={["suggestiveRules", "isFirstChild"]}
+        initialValue={node.isFirstChild?.value || false}
         order={2}
         uid={node.isFirstChild?.uid || ""}
         parentUid={parentUid}
-        value={node.isFirstChild?.value || false}
       />
 
       <Button