Eng 286 show when GitHub sync is disabled globally (#143)

mdroidian · web-flow · commit f9f93a35117d · 2025-05-03T21:01:38.000-06:00
* Refactor GitHub Sync settings in NodeConfig and GeneralSettings components

- Updated the onChange handler for GitHub Sync to use async/await and added a timeout for refreshing the config tree.
- Introduced a global settings check in NodeConfig to conditionally render the GitHub Sync checkbox and comments configuration.
- Passed setMainTab prop to NodeConfig for better navigation control.

This improves the user experience by ensuring that settings are updated correctly and provides clear feedback when global settings are disabled.

* matchingNode fix
diff --git a/apps/roam/src/components/GitHubSync.tsx b/apps/roam/src/components/GitHubSync.tsx
@@ -49,6 +49,7 @@ import {
 import CustomPanel from "roamjs-components/components/ConfigPanels/CustomPanel";
 import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeByParentUid";
 import isFlagEnabled from "~/utils/isFlagEnabled";
+import getPageTitleByBlockUid from "roamjs-components/queries/getPageTitleByBlockUid";
 
 const CommentUidCache = new Set<string>();
 const CommentContainerUidCache = new Set<string>();
@@ -130,7 +131,7 @@ export const insertNewCommentsFromGitHub = async ({
 }: {
   pageUid: string;
   extensionAPI: OnloadArgs["extensionAPI"];
-  matchingNode?: DiscourseNode;
+  matchingNode: DiscourseNode;
 }) => {
   const getCommentsOnPage = (pageUid: string) => {
     const query = `[:find
@@ -314,6 +315,7 @@ export const renderGitHubSyncPage = async ({
         <CommentsContainerComponent
           commentsContainerUid={commentsContainerUid}
           extensionAPI={extensionAPI}
+          matchingNode={matchingNode}
         />,
         containerDiv,
       );
@@ -466,9 +468,11 @@ const CommentsComponent = ({ blockUid }: { blockUid: string }) => {
 const CommentsContainerComponent = ({
   commentsContainerUid,
   extensionAPI,
+  matchingNode,
 }: {
   commentsContainerUid: string;
   extensionAPI: OnloadArgs["extensionAPI"];
+  matchingNode: DiscourseNode;
 }) => {
   const [loadingComments, setLoadingComments] = useState(false);
   return (
@@ -523,7 +527,11 @@ const CommentsContainerComponent = ({
         onClick={async () => {
           setLoadingComments(true);
           const pageUid = getPageUidByBlockUid(commentsContainerUid);
-          await insertNewCommentsFromGitHub({ pageUid, extensionAPI });
+          await insertNewCommentsFromGitHub({
+            pageUid,
+            extensionAPI,
+            matchingNode,
+          });
           setLoadingComments(false);
         }}
       />
@@ -907,6 +915,12 @@ const initializeGitHubSync = async (onloadArgs: OnloadArgs) => {
           const { blockUid } = getUids(b);
           if (CommentContainerUidCache.has(blockUid)) {
             if (b.hasAttribute("github-sync-comment-container")) return;
+
+            // TODO: move this to renderGitHubSyncPage so we can pass in the matching node
+            const title = getPageTitleByBlockUid(blockUid);
+            const matchingNode = isGitHubSyncPage(title);
+            if (!matchingNode) return;
+
             b.setAttribute("github-sync-comment-container", "true");
             const containerDiv = document.createElement("div");
             containerDiv.className = "inline-block ml-2";
@@ -916,6 +930,7 @@ const initializeGitHubSync = async (onloadArgs: OnloadArgs) => {
               <CommentsContainerComponent
                 commentsContainerUid={blockUid}
                 extensionAPI={onloadArgs.extensionAPI}
+                matchingNode={matchingNode}
               />,
               containerDiv,
             );
diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx
@@ -40,7 +40,13 @@ const DiscourseGraphHome = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         uid={settings.githubSync.uid}
         value={settings.githubSync.value}
         options={{
-          onChange: (checked) => toggleGitHubSync(checked, onloadArgs),
+          onChange: async (checked) => {
+            await toggleGitHubSync(checked, onloadArgs);
+            setTimeout(() => {
+              // Wait for the GitHub Sync flag block to be updated
+              refreshConfigTree();
+            }, 250);
+          },
         }}
       />
     </div>
diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
@@ -14,20 +14,24 @@ import {
   Checkbox,
   Icon,
   Tooltip,
+  Button,
 } from "@blueprintjs/core";
 import DiscourseNodeSpecification from "./DiscourseNodeSpecification";
 import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
 import DiscourseNodeCanvasSettings from "./DiscourseNodeCanvasSettings";
 import DiscourseNodeIndex from "./DiscourseNodeIndex";
 import { OnloadArgs } from "roamjs-components/types";
 import CommentsQuery from "~/components/GitHubSyncCommentsQuery";
+import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 
 const NodeConfig = ({
   node,
   onloadArgs,
+  setMainTab,
 }: {
   node: DiscourseNode;
   onloadArgs: OnloadArgs;
+  setMainTab: (tabId: TabId) => void;
 }) => {
   const getUid = (key: string) =>
     getSubTree({
@@ -69,6 +73,8 @@ const NodeConfig = ({
     node.githubSync?.enabled || false,
   );
 
+  const globalSettings = useMemo(() => getFormattedConfigTree(), []);
+  const globalGithubSyncEnabled = globalSettings.githubSync.value;
   return (
     <>
       <Tabs
@@ -207,49 +213,58 @@ const NodeConfig = ({
                   <li>Configure where comments appear in the page</li>
                 </ul>
               </div>
-              <Checkbox
-                style={{ width: 240, lineHeight: "normal" }}
-                checked={isGithubSyncEnabled}
-                onChange={(e) => {
-                  const target = e.target as HTMLInputElement;
-                  setIsGithubSyncEnabled(target.checked);
-                  if (target.checked) {
-                    setInputSetting({
-                      blockUid: githubSyncUid,
-                      key: "Enabled",
-                      value: "true",
-                    });
-                  } else {
-                    setInputSetting({
-                      blockUid: githubSyncUid,
-                      key: "Enabled",
-                      value: "false",
-                    });
-                  }
-                }}
-              >
-                GitHub Sync Enabled
-                <Tooltip
-                  content={`When enabled, ${node.text} pages can be synced with GitHub Issues.`}
-                >
-                  <Icon
-                    icon={"info-sign"}
-                    iconSize={12}
-                    className={"ml-2 align-middle opacity-80"}
+
+              {!globalGithubSyncEnabled && (
+                <div className="flex flex-col gap-2">
+                  <p>GitHub Sync is not enabled globally.</p>
+                  <Button
+                    intent="primary"
+                    className="max-w-xs"
+                    text="Navigate to global settings"
+                    onClick={() => setMainTab("discourse-graph-home")}
                   />
-                </Tooltip>
-              </Checkbox>
+                </div>
+              )}
 
-              {isGithubSyncEnabled && (
+              {globalGithubSyncEnabled && (
                 <>
-                  <Label>
-                    Comments Configuration
-                    <Description description="Define where GitHub Issue comments should appear on this node type. This query will run when comments are imported." />
-                  </Label>
-                  <CommentsQuery
-                    parentUid={githubCommentsFormatUid}
-                    onloadArgs={onloadArgs}
-                  />
+                  <Checkbox
+                    style={{ width: 240, lineHeight: "normal" }}
+                    checked={isGithubSyncEnabled}
+                    onChange={(e) => {
+                      const target = e.target as HTMLInputElement;
+                      setIsGithubSyncEnabled(target.checked);
+                      setInputSetting({
+                        blockUid: githubSyncUid,
+                        key: "Enabled",
+                        value: target.checked ? "true" : "false",
+                      });
+                    }}
+                  >
+                    GitHub Sync Enabled
+                    <Tooltip
+                      content={`When enabled, ${node.text} pages can be synced with GitHub Issues.`}
+                    >
+                      <Icon
+                        icon={"info-sign"}
+                        iconSize={12}
+                        className={"ml-2 align-middle opacity-80"}
+                      />
+                    </Tooltip>
+                  </Checkbox>
+
+                  {isGithubSyncEnabled && (
+                    <>
+                      <Label>
+                        Comments Configuration
+                        <Description description="Define where GitHub Issue comments should appear on this node type. This query will run when comments are imported." />
+                      </Label>
+                      <CommentsQuery
+                        parentUid={githubCommentsFormatUid}
+                        onloadArgs={onloadArgs}
+                      />
+                    </>
+                  )}
                 </>
               )}
             </div>
diff --git a/apps/roam/src/components/settings/Settings.tsx b/apps/roam/src/components/settings/Settings.tsx
@@ -155,7 +155,13 @@ export const SettingsDialog = ({
               id={n.type}
               title={n.text}
               className="overflow-y-auto"
-              panel={<NodeConfig node={n} onloadArgs={onloadArgs} />}
+              panel={
+                <NodeConfig
+                  node={n}
+                  onloadArgs={onloadArgs}
+                  setMainTab={setSelectedTabId}
+                />
+              }
             />
           ))}
           <Tabs.Expander />
