ENG-739 Move color selector from Canvas to General tab

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

@@ -1,11 +1,9 @@
 import {
   InputGroup,
-  Label,
   Radio,
   RadioGroup,
   Tooltip,
   Icon,
-  ControlGroup,
 } from "@blueprintjs/core";
 import React, { useState, useMemo } from "react";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
@@ -37,10 +35,6 @@ const DiscourseNodeCanvasSettings = ({
   uid: string;
 }) => {
   const tree = useMemo(() => getBasicTreeByParentUid(uid), [uid]);
-  const [color, setColor] = useState<string>(() => {
-    const color = getSettingValueFromTree({ tree, key: "color" });
-    return formatHexColor(color);
-  });
   const alias = getSettingValueFromTree({ tree, key: "alias" });
   const [queryBuilderAlias, setQueryBuilderAlias] = useState<string>(() =>
     getSettingValueFromTree({ tree, key: "query-builder-alias" }),
@@ -54,49 +48,6 @@ const DiscourseNodeCanvasSettings = ({
 
   return (
     <div>
-      <div className="mb-4">
-        <Label style={{ marginBottom: "4px" }}>Color picker</Label>
-        <ControlGroup>
-          <InputGroup
-            style={{ width: 120 }}
-            type={"color"}
-            value={color}
-            onChange={(e) => {
-              const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link
-              setColor(e.target.value);
-              void setInputSetting({
-                blockUid: uid,
-                key: "color",
-                value: colorValue,
-              });
-              setDiscourseNodeSetting(
-                nodeType,
-                ["canvasSettings", "color"],
-                colorValue,
-              );
-            }}
-          />
-          <Tooltip content={color ? "Unset" : "Color not set"}>
-            <Icon
-              className={"ml-2 align-middle opacity-80"}
-              icon={color ? "delete" : "info-sign"}
-              onClick={() => {
-                setColor("");
-                void setInputSetting({
-                  blockUid: uid,
-                  key: "color",
-                  value: "",
-                });
-                setDiscourseNodeSetting(
-                  nodeType,
-                  ["canvasSettings", "color"],
-                  "",
-                );
-              }}
-            />
-          </Tooltip>
-        </ControlGroup>
-      </div>
       <DiscourseNodeTextPanel
         nodeType={nodeType}
         title="Display alias"

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

@@ -3,13 +3,26 @@ import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import DualWriteBlocksPanel from "./components/EphemeralBlocksPanel";
 import { getSubTree } from "roamjs-components/util";
 import Description from "roamjs-components/components/Description";
-import { Label, Tabs, Tab, TabId } from "@blueprintjs/core";
+import {
+  Label,
+  Tabs,
+  Tab,
+  TabId,
+  InputGroup,
+  ControlGroup,
+  Tooltip,
+  Icon,
+} from "@blueprintjs/core";
 import DiscourseNodeSpecification from "./DiscourseNodeSpecification";
 import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
-import DiscourseNodeCanvasSettings from "./DiscourseNodeCanvasSettings";
+import DiscourseNodeCanvasSettings, {
+  formatHexColor,
+} from "./DiscourseNodeCanvasSettings";
 import DiscourseNodeIndex from "./DiscourseNodeIndex";
 import { OnloadArgs } from "roamjs-components/types";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
+import setInputSetting from "roamjs-components/util/setInputSetting";
+import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import refreshConfigTree from "~/utils/refreshConfigTree";
@@ -70,6 +83,10 @@ const NodeConfig = ({
     key: "Attributes",
   });
 
+  const [color, setColor] = useState<string>(() =>
+    formatHexColor(node.canvasSettings?.color ?? ""),
+  );
+
   const [selectedTabId, setSelectedTabId] = useState<TabId>("general");
   const [tagError, setTagError] = useState("");
   const [formatError, setFormatError] = useState("");
@@ -181,6 +198,52 @@ const NodeConfig = ({
                 parentUid={node.type}
                 uid={tagUid}
               />
+              <>
+                <Label>
+                  Color
+                  <Description description="Changes the color of tags and canvas nodes" />
+                  <ControlGroup>
+                    <InputGroup
+                      style={{ width: 120 }}
+                      type={"color"}
+                      value={color}
+                      onChange={(e) => {
+                        const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link
+                        setColor(e.target.value);
+                        void setInputSetting({
+                          blockUid: canvasUid,
+                          key: "color",
+                          value: colorValue,
+                        });
+                        setDiscourseNodeSetting(
+                          node.type,
+                          ["canvasSettings", "color"],
+                          colorValue,
+                        );
+                      }}
+                    />
+                    <Tooltip content={color ? "Unset" : "Color not set"}>
+                      <Icon
+                        className={"ml-2 align-middle opacity-80"}
+                        icon={color ? "delete" : "info-sign"}
+                        onClick={() => {
+                          setColor("");
+                          void setInputSetting({
+                            blockUid: canvasUid,
+                            key: "color",
+                            value: "",
+                          });
+                          setDiscourseNodeSetting(
+                            node.type,
+                            ["canvasSettings", "color"],
+                            "",
+                          );
+                        }}
+                      />
+                    </Tooltip>
+                  </ControlGroup>
+                </Label>
+              </>
             </div>
           }
         />