ENG-2188 Node type settings are spread across seven inner tabs; put them on one page

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

@@ -155,7 +155,8 @@ const NodeSpecification = ({
       </style>
       <DiscourseNodeFlagPanel
         nodeType={node.type}
-        title="enabled"
+        title="Enabled"
+        blockKey="enabled"
         description=""
         settingKeys={[
           DISCOURSE_NODE_KEYS.specification,
@@ -170,18 +171,18 @@ const NodeSpecification = ({
           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>
+      {enabled && (
+        <div className="overflow-auto">
+          <QueryEditor
+            parentUid={parentUid}
+            key={Number(migrated)}
+            hideCustomSwitch
+            discourseNodeType={node.type}
+            settingKey="specification"
+            returnNode={node.text}
+          />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { Button, Intent } from "@blueprintjs/core";
+import { Button, Collapse, Intent } from "@blueprintjs/core";
 import DualWriteBlocksPanel from "./components/EphemeralBlocksPanel";
 import getSubTree from "roamjs-components/util/getSubTree";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
@@ -17,6 +17,7 @@ import {
   TEMPLATE_SETTING_KEYS,
 } from "~/components/settings/utils/settingKeys";
 import { RenderRoamBlock } from "~/utils/roamReactComponents";
+import Description from "~/components/settings/SettingsDescription";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
 
 const DiscourseNodeSuggestiveRules = ({
@@ -42,6 +43,7 @@ const DiscourseNodeSuggestiveRules = ({
       }).uid || "",
     [nodeUid],
   );
+  const [isTemplateOpen, setIsTemplateOpen] = useState(false);
 
   const [isUpdating, setIsUpdating] = useState(false);
 
@@ -68,18 +70,39 @@ const DiscourseNodeSuggestiveRules = ({
   };
 
   return (
-    <div className="flex flex-col gap-4 p-4">
-      <DualWriteBlocksPanel
-        nodeType={node.type}
-        title="Template"
-        description={withDocsLink(
-          `The template that auto fills ${node.text} page when generated.`,
-          ROAM_DOCS.creatingNodes,
-        )}
-        settingKeys={TEMPLATE_SETTING_KEYS}
-        uid={templateUid}
-        defaultValue={node.template}
-      />
+    <div className="flex flex-col gap-4">
+      <div>
+        <div className="flex items-center">
+          <Button
+            minimal
+            small
+            icon={isTemplateOpen ? "chevron-down" : "chevron-right"}
+            text="Template"
+            onClick={() => setIsTemplateOpen((open) => !open)}
+          />
+          <Description
+            description={withDocsLink(
+              `The template that auto fills ${node.text} page when generated.`,
+              ROAM_DOCS.creatingNodes,
+            )}
+          />
+        </div>
+        {/* Collapse unmounts its children, so the buffer block only exists while open. */}
+        <Collapse isOpen={isTemplateOpen}>
+          <div className="pl-6 pt-2">
+            <DualWriteBlocksPanel
+              nodeType={node.type}
+              description={withDocsLink(
+                `The template that auto fills ${node.text} page when generated.`,
+                ROAM_DOCS.creatingNodes,
+              )}
+              settingKeys={TEMPLATE_SETTING_KEYS}
+              uid={templateUid}
+              defaultValue={node.template}
+            />
+          </div>
+        </Collapse>
+      </div>
 
       <DiscourseNodeTextPanel
         nodeType={nodeUid}

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

@@ -3,13 +3,21 @@ import { OnloadArgs } from "roamjs-components/types";
 import getDiscourseNodes, {
   excludeDefaultNodes,
 } from "~/utils/getDiscourseNodes";
+import { nodeConfigSegmentIds } from "./utils/settingsNavigation";
 import { useSettingsNav } from "./navigation/SettingsNavContext";
 import SettingsPageHeader from "./navigation/SettingsPageHeader";
 import DiscourseNodeConfigPanel from "./DiscourseNodeConfigPanel";
 import NodeConfig from "./NodeConfig";
+import NodeIndexPage from "./NodeIndexPage";
+import NodeTemplatePage from "./NodeTemplatePage";
 
 const NODES_ANCESTOR_LABELS = ["Grammar"] as const;
 
+const SUB_PAGE_LABELS: Record<string, string | undefined> = {
+  [nodeConfigSegmentIds.index]: "Index",
+  [nodeConfigSegmentIds.template]: "Template",
+};
+
 const GrammarNodesRoute = ({
   onloadArgs,
 }: {
@@ -18,7 +26,7 @@ const GrammarNodesRoute = ({
   const { segments, goToDepth } = useSettingsNav();
   const nodes = getDiscourseNodes().filter(excludeDefaultNodes);
 
-  const [nodeTypeUid] = segments;
+  const [nodeTypeUid, subPage] = segments;
   const node = nodeTypeUid
     ? nodes.find((n) => n.type === nodeTypeUid)
     : undefined;
@@ -29,8 +37,10 @@ const GrammarNodesRoute = ({
     if (isStalePath) goToDepth(0);
   }, [isStalePath, goToDepth]);
 
-  const resolveLabel = (segment: string): string =>
-    nodes.find((n) => n.type === segment)?.text ?? segment;
+  const resolveLabel = (segment: string, segmentIndex: number): string =>
+    segmentIndex === 0
+      ? (nodes.find((n) => n.type === segment)?.text ?? segment)
+      : (SUB_PAGE_LABELS[segment] ?? segment);
 
   return (
     <div className="dg-settings-route">
@@ -40,12 +50,16 @@ const GrammarNodesRoute = ({
         resolveLabel={resolveLabel}
       />
       <div className="dg-settings-route__body">
-        {node ? (
-          <NodeConfig node={node} onloadArgs={onloadArgs} />
-        ) : (
+        {!node ? (
           <div className="p-1">
             <DiscourseNodeConfigPanel />
           </div>
+        ) : subPage === nodeConfigSegmentIds.index ? (
+          <NodeIndexPage node={node} onloadArgs={onloadArgs} />
+        ) : subPage === nodeConfigSegmentIds.template ? (
+          <NodeTemplatePage node={node} />
+        ) : (
+          <NodeConfig node={node} />
         )}
       </div>
     </div>