New Feature: GitHub Sync

README.md

@@ -24,6 +24,7 @@ For more information, check out our docs at [https://github.com/RoamJS/query-bui
   - [Examples](https://github.com/RoamJS/query-builder/blob/main/docs/query-builder.md#examples)
 - [Discourse Graphs](https://github.com/RoamJS/query-builder/blob/main/docs/discourse-graphs.md)
 - [Native Roam Queries](https://github.com/RoamJS/query-builder/blob/main/docs/roam-queries.md#native-roam-queries)
+- [GitHub Sync](https://github.com/RoamJS/query-builder/blob/main/docs/github-sync.md)
   - [Creating Native Roam Queries](https://github.com/RoamJS/query-builder/blob/main/docs/roam-queries.md#creating-native-roam-queries)
   - [Manipulating Native Roam Queries](https://github.com/RoamJS/query-builder/blob/main/docs/roam-queries.md#manipulating-native-roam-queries)
     - [Sorting](https://github.com/RoamJS/query-builder/blob/main/docs/roam-queries.md#sorting)

docs/github-sync.md

@@ -0,0 +1,56 @@
+# GitHub Sync
+
+This extension implemnents GitHub Sync, allowing you to synchronize specific pages directly from Roam to a specified GitHub repository as Issues.
+
+## Config Page
+
+This will be found at `[[roam/js/github-sync]]` in your graph.
+
+### Node Select
+
+Select which type of pages you want to sync to GitHub as Issues.
+
+The list is made from defined [Discourse Graph Nodes](discourse-graphs.md).
+
+### Comments Block
+
+This is where the comments will live. An `Add Comment` button will appear on this block as well as a download button.
+
+After you add a comment, that new comment block will have a `Add to GitHub` button to send it to the issue.
+
+Clicking the download button will grab any new comments and open a dialog to confirm adding them to the block.
+
+**Query Block Definition**
+
+Define which block will be the Comments Block.
+
+You can add the variables `:in NODETEXT` or `:in NODETITLE` which will grab the current pages's text or title.
+
+Example:
+
+![](media/github-sync-comment-query.png)
+
+## Issue Page
+
+### Send To GitHub
+
+When you first navigate to a defined Issue Page, you will see two buttons under the title
+
+![](media/github-sync-issue-page-title-1.png)
+
+Click the Send To GitHub button to start the upload process. The process is as follows:
+
+- install the SamePage GitHub App
+- authorize the app to access your GitHub repository
+- select the repository you want to send the issue to
+- click `Export`
+
+You will only need to do this once for each page you would like to sync.
+
+Once this is complete, the title will just show the `GitHub Sync Details` Button. Clicking this button will show additional details about the issue, include a link to the issue, a link to settings, as well as the ability to re-authorize if required.
+
+### Comments
+
+Click the `Add Comment` button to add a comment to the page. Once the comment is created you should see a `Add to GitHub` button. Clicking this will add the comment to the issue. After it is sent, the `Add to GitHub` button should change to a `link` icon which will open the comment on GitHub.
+
+Click the `Download Comments` button to fetch any new comments from the issue. You will see a confirmation dialog of all the comments that will be added.

src/components/Export.tsx

@@ -45,7 +45,7 @@ import { getNodeEnv } from "roamjs-components/util/env";
 import apiGet from "roamjs-components/util/apiGet";
 import apiPut from "roamjs-components/util/apiPut";
 import localStorageGet from "roamjs-components/util/localStorageGet";
-import { ExportGithub } from "./ExportGithub";
+import { ExportGithub, GitHubDestination } from "./ExportGithub";
 import localStorageSet from "roamjs-components/util/localStorageSet";
 
 const ExportProgress = ({ id }: { id: string }) => {
@@ -79,24 +79,27 @@ const ExportProgress = ({ id }: { id: string }) => {
   );
 };
 
+const EXPORT_DESTINATIONS = [
+  { id: "local", label: "Download Locally", active: true },
+  { id: "app", label: "Store in Roam", active: false },
+  { id: "samepage", label: "Store with SamePage", active: false },
+  { id: "github", label: "Send to GitHub", active: true },
+];
+
 export type ExportDialogProps = {
   results?: Result[] | ((isSamePageEnabled: boolean) => Promise<Result[]>);
   title?: string;
   columns?: Column[];
   isExportDiscourseGraph?: boolean;
   initialPanel?: "sendTo" | "export";
+  initialExportDestination?: (typeof EXPORT_DESTINATIONS)[number]["id"];
+  onClose?: () => void;
 };
 
 type ExportDialogComponent = (
   props: RoamOverlayProps<ExportDialogProps>
 ) => JSX.Element;
 
-const EXPORT_DESTINATIONS = [
-  { id: "local", label: "Download Locally", active: true },
-  { id: "app", label: "Store in Roam", active: false },
-  { id: "samepage", label: "Store with SamePage", active: false },
-  { id: "github", label: "Send to GitHub", active: true },
-];
 const exportDestinationById = Object.fromEntries(
   EXPORT_DESTINATIONS.map((ed) => [ed.id, ed])
 );
@@ -109,10 +112,8 @@ const ExportDialog: ExportDialogComponent = ({
   title = "Share Data",
   isExportDiscourseGraph = false,
   initialPanel,
+  initialExportDestination,
 }) => {
-  const [selectedRepo, setSelectedRepo] = useState(
-    localStorageGet("selected-repo")
-  );
   const exportId = useMemo(() => nanoid(), []);
   useEffect(() => {
     setDialogOpen(isOpen);
@@ -139,7 +140,11 @@ const ExportDialog: ExportDialogComponent = ({
     exportTypes[0].name
   );
   const [activeExportDestination, setActiveExportDestination] =
-    useState<string>(EXPORT_DESTINATIONS[0].id);
+    useState<string>(
+      initialExportDestination
+        ? exportDestinationById[initialExportDestination].id
+        : EXPORT_DESTINATIONS[0].id
+    );
   const [isSamePageEnabled, setIsSamePageEnabled] = useState(false);
 
   const checkForCanvasPage = (title: string) => {
@@ -166,9 +171,6 @@ const ExportDialog: ExportDialogComponent = ({
   const [includeDiscourseContext, setIncludeDiscourseContext] = useState(
     discourseGraphEnabled as boolean
   );
-  const [gitHubAccessToken, setGitHubAccessToken] = useState<string | null>(
-    localStorageGet("oauth-github")
-  );
   const [canSendToGitHub, setCanSendToGitHub] = useState(false);
 
   const writeFileToRepo = async ({
@@ -180,9 +182,15 @@ const ExportDialog: ExportDialogComponent = ({
     content: string;
     setError: (error: string) => void;
   }): Promise<{ status: number }> => {
-    const base64Content = btoa(content);
+    const gitHubAccessToken = localStorageGet("github-oauth");
+    const selectedRepo = localStorageGet("github-repo");
+
+    const encoder = new TextEncoder();
+    const uint8Array = encoder.encode(content);
+    const base64Content = btoa(String.fromCharCode(...uint8Array));
 
     try {
+      // https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28#create-or-update-file-contents
       const response = await apiPut({
         domain: "https://api.github.com",
         path: `repos/${selectedRepo}/contents/${filename}`,
@@ -195,7 +203,6 @@ const ExportDialog: ExportDialogComponent = ({
         },
       });
       if (response.status === 401) {
-        setGitHubAccessToken(null);
         setError("Authentication failed. Please log in again.");
         localStorageSet("oauth-github", "");
         return { status: 401 };
@@ -211,6 +218,73 @@ const ExportDialog: ExportDialogComponent = ({
       return { status: 500 };
     }
   };
+  const writeFileToIssue = async ({
+    title,
+    body,
+    setError,
+    pageUid,
+  }: {
+    title: string;
+    body: string;
+    setError: (error: string) => void;
+    pageUid: string;
+  }): Promise<{ status: number }> => {
+    const gitHubAccessToken = localStorageGet("github-oauth");
+    const selectedRepo = localStorageGet("github-repo");
+    try {
+      // https://docs.github.com/en/rest/issues/issues?apiVersion=2022-11-28#create-an-issue
+      const response = await apiPost({
+        domain: "https://api.github.com",
+        path: `repos/${selectedRepo}/issues`,
+        headers: {
+          Authorization: `token ${gitHubAccessToken}`,
+        },
+        data: {
+          title,
+          body,
+          // milestone,
+          // labels,
+          // assignees
+        },
+      });
+      if (response.status === 401) {
+        setError("Authentication failed. Please log in again.");
+        localStorageSet("oauth-github", "");
+        return { status: 401 };
+      }
+
+      if (response.status === 201) {
+        const props = getBlockProps(pageUid);
+        const newProps = {
+          ...props,
+          ["github-sync"]: {
+            issue: {
+              id: response.id,
+              number: response.number,
+              html_url: response.html_url,
+              state: response.state,
+              labels: response.labels,
+              createdAt: response.created_at,
+              updatedAt: response.updated_at,
+              repo: selectedRepo,
+            },
+          },
+        };
+        window.roamAlphaAPI.updateBlock({
+          block: {
+            uid: pageUid,
+            props: newProps,
+          },
+        });
+      }
+
+      return { status: response.status };
+    } catch (error) {
+      const e = error as Error;
+      setError("Failed to create issue");
+      return { status: 500 };
+    }
+  };
 
   const handleSetSelectedPage = (title: string) => {
     setSelectedPageTitle(title);
@@ -493,15 +567,12 @@ const ExportDialog: ExportDialogComponent = ({
                 onItemSelect={(et) => setActiveExportDestination(et)}
               />
             </Label>
-            <ExportGithub
-              isVisible={activeExportDestination === "github"}
-              selectedRepo={selectedRepo}
-              setSelectedRepo={setSelectedRepo}
-              setError={setError}
-              gitHubAccessToken={gitHubAccessToken}
-              setGitHubAccessToken={setGitHubAccessToken}
-              setCanSendToGitHub={setCanSendToGitHub}
-            />
+            {activeExportDestination === "github" && (
+              <ExportGithub
+                setError={setError}
+                setCanSendToGitHub={setCanSendToGitHub}
+              />
+            )}
           </div>
         </div>
 
@@ -622,17 +693,41 @@ const ExportDialog: ExportDialogComponent = ({
 
                     if (activeExportDestination === "github") {
                       const { title, content } = files[0];
+                      const githubDestination =
+                        localStorageGet("github-destination");
                       try {
-                        const { status } = await writeFileToRepo({
-                          filename: title,
-                          content,
-                          setError,
-                        });
+                        let status;
+                        if (githubDestination === "File") {
+                          status = (
+                            await writeFileToRepo({
+                              filename: title,
+                              content,
+                              setError,
+                            })
+                          ).status;
+                        }
+                        if (githubDestination === "Issue") {
+                          const pageUid =
+                            typeof results === "function" ? "" : results[0].uid; // TODO handle multiple results
+                          if (!pageUid) {
+                            setError("No page UID found.");
+                            return;
+                          }
+                          status = (
+                            await writeFileToIssue({
+                              title: title.replace(/\.[^/.]+$/, ""), // remove extension
+                              body: content,
+                              setError,
+                              pageUid,
+                            })
+                          ).status;
+                        }
+
                         if (status === 201) {
                           // TODO: remove toast by prolonging ExportProgress
                           renderToast({
                             id: "export-success",
-                            content: "Upload Success",
+                            content: `Upload Success to ${githubDestination}`,
                             intent: "success",
                           });
                           onClose();