ENG-1291: Port discourse node specification

apps/roam/src/components/QueryBuilder.tsx

@@ -32,6 +32,8 @@ type QueryPageComponent = (props: {
   isEditBlock?: boolean;
   showAlias?: boolean;
   discourseNodeType?: string;
+  settingKey?: "index" | "specification";
+  returnNode?: string;
 }) => JSX.Element;
 
 type Props = Parameters<QueryPageComponent>[0];
@@ -41,6 +43,8 @@ const QueryBuilder = ({
   isEditBlock,
   showAlias,
   discourseNodeType,
+  settingKey,
+  returnNode,
 }: Props) => {
   const extensionAPI = useExtensionAPI();
   const hideMetadata = useMemo(
@@ -165,6 +169,8 @@ const QueryBuilder = ({
             <QueryEditor
               parentUid={pageUid}
               discourseNodeType={discourseNodeType}
+              settingKey={settingKey}
+              returnNode={returnNode}
               onQuery={() => {
                 setHasResults(true);
                 setIsEdit(false);

apps/roam/src/components/QueryEditor.tsx

@@ -437,6 +437,8 @@ type QueryEditorComponent = (props: {
   hideCustomSwitch?: boolean;
   showAlias?: boolean;
   discourseNodeType?: string;
+  settingKey?: "index" | "specification";
+  returnNode?: string;
 }) => JSX.Element;
 
 const QueryEditor: QueryEditorComponent = ({
@@ -446,6 +448,8 @@ const QueryEditor: QueryEditorComponent = ({
   hideCustomSwitch,
   showAlias,
   discourseNodeType,
+  settingKey, // eslint-disable-line react/prop-types
+  returnNode, // eslint-disable-line react/prop-types
 }) => {
   useEffect(() => {
     const previewQuery = ((e: CustomEvent) => {
@@ -487,11 +491,11 @@ const QueryEditor: QueryEditorComponent = ({
     return () => window.clearTimeout(blockPropSyncTimeoutRef.current);
   }, []);
   useEffect(() => {
-    if (!discourseNodeType) return;
+    if (!discourseNodeType || !settingKey) return;
 
     const stripped: unknown = JSON.parse(
       JSON.stringify(
-        { conditions, selections, custom },
+        { conditions, selections, custom, returnNode },
         (key, value: unknown) => (key === "uid" ? undefined : value),
       ),
     );
@@ -501,18 +505,31 @@ const QueryEditor: QueryEditorComponent = ({
 
     const result = IndexSchema.safeParse(stripped);
     if (!result.success) {
-      console.error("Index blockprop sync failed validation:", result.error);
+      console.error(
+        `${settingKey} blockprop sync failed validation:`,
+        result.error,
+      );
       return;
     }
 
+    const path =
+      settingKey === "index" ? ["index"] : ["specification", "query"];
+
     window.clearTimeout(blockPropSyncTimeoutRef.current);
     blockPropSyncTimeoutRef.current = window.setTimeout(() => {
-      setDiscourseNodeSetting(discourseNodeType, ["index"], result.data);
+      setDiscourseNodeSetting(discourseNodeType, path, result.data);
       lastSyncedIndexRef.current = serialized;
     }, 250);
 
     return () => window.clearTimeout(blockPropSyncTimeoutRef.current);
-  }, [conditions, selections, custom, discourseNodeType]);
+  }, [
+    conditions,
+    selections,
+    custom,
+    discourseNodeType,
+    settingKey,
+    returnNode,
+  ]);
 
   const customNodeOnChange = (value: string) => {
     window.clearTimeout(debounceRef.current);

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

@@ -60,6 +60,8 @@ const NodeIndex = ({
             },
           ],
           selections: [],
+          custom: "",
+          returnNode: DEFAULT_RETURN_NODE,
         });
 
         setShowQuery(true);
@@ -69,7 +71,12 @@ const NodeIndex = ({
   return (
     <ExtensionApiContextProvider {...onloadArgs}>
       {showQuery ? (
-        <QueryBuilder pageUid={parentUid} discourseNodeType={node.type} />
+        <QueryBuilder
+          pageUid={parentUid}
+          discourseNodeType={node.type}
+          settingKey="index"
+          returnNode={DEFAULT_RETURN_NODE}
+        />
       ) : (
         <Spinner />
       )}

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

@@ -1,14 +1,15 @@
 import React from "react";
 import getSubTree from "roamjs-components/util/getSubTree";
 import createBlock from "roamjs-components/writes/createBlock";
-import { Checkbox } from "@blueprintjs/core";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpression";
 import QueryEditor from "~/components/QueryEditor";
 import internalError from "~/utils/internalError";
+import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
+import { DiscourseNodeFlagPanel } from "~/components/settings/components/BlockPropSettingPanels";
 
 const NodeSpecification = ({
   parentUid,
@@ -20,11 +21,14 @@ const NodeSpecification = ({
   parentSetEnabled?: (enabled: boolean) => void;
 }) => {
   const [migrated, setMigrated] = React.useState(false);
-  const [enabled, setEnabled] = React.useState<string>(
+  const enabledBlockUid = React.useMemo(
     () =>
       getSubTree({ tree: getBasicTreeByParentUid(parentUid), key: "enabled" })
         ?.uid,
+    [parentUid],
   );
+  const [enabled, setEnabled] = React.useState(!!enabledBlockUid);
+
   React.useEffect(() => {
     if (enabled) {
       const scratchNode = getSubTree({ parentUid, key: "scratch" });
@@ -69,19 +73,41 @@ const NodeSpecification = ({
               },
             }),
           )
-          .then(() => setMigrated(true))
+          .then(() => {
+            setDiscourseNodeSetting(node.type, ["specification", "query"], {
+              conditions: [
+                {
+                  type: "clause" as const,
+                  source: node.text,
+                  relation: "has title",
+                  target: `/${getDiscourseNodeFormatExpression(node.format).source}/`,
+                },
+              ],
+              selections: [],
+              custom: "",
+              returnNode: node.text,
+            });
+            setMigrated(true);
+          })
           .catch((error) => {
             internalError({ error });
           });
       }
     } else {
       const tree = getBasicTreeByParentUid(parentUid);
       const scratchNode = getSubTree({ tree, key: "scratch" });
-      Promise.all(scratchNode.children.map((c) => deleteBlock(c.uid))).catch(
-        (error) => {
+      Promise.all(scratchNode.children.map((c) => deleteBlock(c.uid)))
+        .then(() => {
+          setDiscourseNodeSetting(node.type, ["specification", "query"], {
+            conditions: [],
+            selections: [],
+            custom: "",
+            returnNode: "",
+          });
+        })
+        .catch((error) => {
           internalError({ error });
-        },
-      );
+        });
     }
     return () => {
       refreshConfigTree();
@@ -90,47 +116,34 @@ const NodeSpecification = ({
   return (
     <div className={"roamjs-node-specification"}>
       <style>
-        {`.roamjs-node-specification .bp3-button.bp3-intent-primary { display: none; }`}
+        {`.roamjs-node-specification .bp3-button.bp3-intent-primary { display: none; }
+.roamjs-node-specification .bp3-checkbox { visibility: hidden; }
+.roamjs-node-specification .bp3-checkbox .bp3-control-indicator { visibility: visible; }`}
       </style>
-      <p>
-        <Checkbox
-          checked={!!enabled}
-          className={"ml-8 inline-block"}
-          onChange={(e) => {
-            const flag = (e.target as HTMLInputElement).checked;
-            if (flag) {
-              createBlock({
-                parentUid,
-                order: 2,
-                node: { text: "enabled" },
-              })
-                .then((uid: string) => {
-                  setEnabled(uid);
-                  if (parentSetEnabled) parentSetEnabled(true);
-                })
-                .catch((error) => {
-                  internalError({ error });
-                });
-            } else {
-              deleteBlock(enabled)
-                .then(() => {
-                  setEnabled("");
-                  if (parentSetEnabled) parentSetEnabled(false);
-                })
-                .catch((error) => {
-                  internalError({ error });
-                });
-            }
-          }}
-        />
-      </p>
+      <DiscourseNodeFlagPanel
+        nodeType={node.type}
+        title="enabled"
+        description=""
+        settingKeys={["specification", "enabled"]}
+        initialValue={enabled}
+        parentUid={parentUid}
+        uid={enabledBlockUid}
+        order={2}
+        onChange={(checked) => {
+          setEnabled(checked);
+          parentSetEnabled?.(checked);
+        }}
+      />
       <div
         className={`${enabled ? "" : "bg-gray-200 opacity-75"} overflow-auto`}
       >
         <QueryEditor
           parentUid={parentUid}
           key={Number(migrated)}
           hideCustomSwitch
+          discourseNodeType={node.type}
+          settingKey="specification"
+          returnNode={node.text}
         />
       </div>
     </div>

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

@@ -74,7 +74,13 @@ const initializeSettingsBlockProps = (
     const uid = blockMap[key];
     if (uid) {
       const existingProps = getBlockProps(uid);
-      if (!existingProps || Object.keys(existingProps).length === 0) {
+      // TODO: Overwriting on safeParse failure is a temporary fix for schema shape changes
+      // (e.g. specification: [] -> {enabled, query}). Replace with proper versioned migrations.
+      if (
+        !existingProps ||
+        Object.keys(existingProps).length === 0 ||
+        !schema.safeParse(existingProps).success
+      ) {
         const defaults = schema.parse({});
         setBlockProps(uid, defaults, false);
       }
@@ -108,7 +114,12 @@ const initSingleDiscourseNode = async (
   );
   const existingProps = getBlockProps(pageUid);
 
-  if (!existingProps || Object.keys(existingProps).length === 0) {
+  // TODO: Same temporary fix as initializeSettingsBlockProps — replace with proper migrations.
+  if (
+    !existingProps ||
+    Object.keys(existingProps).length === 0 ||
+    !DiscourseNodeSchema.safeParse(existingProps).success
+  ) {
     const nodeData = DiscourseNodeSchema.parse({
       text: node.text,
       type: node.type,

apps/roam/src/components/settings/utils/zodSchema.example.ts

@@ -45,14 +45,22 @@ const discourseNodeSettings: DiscourseNodeSettings = {
   shortcut: "C",
   tag: "#claim",
   description: "A statement or assertion that can be supported or refuted",
-  specification: [
-    {
-      type: "clause",
-      source: "Claim",
-      relation: "has title",
-      target: "/^\\[\\[CLM\\]\\]/",
+  specification: {
+    enabled: true,
+    query: {
+      conditions: [
+        {
+          type: "clause",
+          source: "Claim",
+          relation: "has title",
+          target: "/^\\[\\[CLM\\]\\]/",
+        },
+      ],
+      selections: [],
+      custom: "",
+      returnNode: "Claim",
     },
-  ],
+  },
   template: [
     { text: "Summary::", heading: 2 },
     { text: "Evidence::", heading: 2, children: [{ text: "" }] },
@@ -76,6 +84,7 @@ const discourseNodeSettings: DiscourseNodeSettings = {
     ],
     selections: [],
     custom: "",
+    returnNode: "node",
   },
   suggestiveRules,
   backedBy: "user",

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

@@ -53,6 +53,7 @@ export const IndexSchema = z.object({
   conditions: z.array(ConditionSchema).default([]),
   selections: z.array(SelectionSchema).default([]),
   custom: z.string().default(""),
+  returnNode: z.string().default("node"),
 });
 
 type RoamNode = {
@@ -103,10 +104,19 @@ export const DiscourseNodeSchema = z.object({
   tag: stringWithDefault(""),
   description: stringWithDefault(""),
   specification: z
-    .array(ConditionSchema)
+    .object({
+      enabled: z.boolean().default(false),
+      query: IndexSchema.default({}),
+    })
     .nullable()
     .optional()
-    .transform((val) => val ?? []),
+    .transform(
+      (val) =>
+        val ?? {
+          enabled: false,
+          query: { conditions: [], selections: [], custom: "", returnNode: "" },
+        },
+    ),
   template: z
     .array(RoamNodeSchema)
     .nullable()