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,28 @@
 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,
+  Tag,
+} 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 getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
+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 +85,18 @@
     key: "Attributes",
   });
 
+  const canvasTree = useMemo(
+    () => getBasicTreeByParentUid(canvasUid),
+    [canvasUid],
+  );
+  const [color, setColor] = useState<string>(() => {
+    const colorValue = getSettingValueFromTree({
+      tree: canvasTree,
+      key: "color",
+    });
+    return formatHexColor(colorValue);
+  });
+
   const [selectedTabId, setSelectedTabId] = useState<TabId>("general");
   const [tagError, setTagError] = useState("");
   const [formatError, setFormatError] = useState("");
@@ -180,7 +207,51 @@
                 order={2}
                 parentUid={node.type}
                 uid={tagUid}
+                inputStyle={color ? { color } : undefined}
               />
+              <div>
+                <Label style={{ marginBottom: "4px" }}>Color</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: 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>
+              </div>
             </div>
           }
         />

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

@@ -50,6 +50,7 @@ type BaseTextPanelProps = {
   multiline?: boolean;
   error?: string;
   onChange?: (value: string) => void;
+  inputStyle?: React.CSSProperties;
 } & RoamBlockSyncProps;
 
 type BaseFlagPanelProps = {
@@ -105,6 +106,7 @@ const BaseTextPanel = ({
   multiline,
   error,
   onChange,
+  inputStyle,
   parentUid,
   uid,
   order,
@@ -162,6 +164,7 @@ const BaseTextPanel = ({
             value={value}
             onChange={handleChange}
             placeholder={placeholder || initialValue}
+            style={inputStyle}
           />
         )}
       </Label>
@@ -612,6 +615,7 @@ export const DiscourseNodeTextPanel = ({
     multiline?: boolean;
     error?: string;
     onChange?: (value: string) => void;
+    inputStyle?: React.CSSProperties;
   }) => (
   <BaseTextPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
 );