Add modal for github token

src/components/EditorHeader/ControlPanel.jsx

@@ -1290,6 +1290,9 @@ export default function ControlPanel({
       language: {
         function: () => setModal(MODAL.LANGUAGE),
       },
+      github_token: {
+        function: () => setModal(MODAL.GITHUB_TOKEN),
+      },
       flush_storage: {
         warning: {
           title: t("flush_storage"),

src/components/EditorHeader/Modal/GithubToken.jsx

@@ -0,0 +1,43 @@
+import { Button, Input } from "@douyinfe/semi-ui";
+import { useTranslation } from "react-i18next";
+
+export default function GithubToken({ token, setToken }) {
+  const { t } = useTranslation();
+
+  const clearToken = () => {
+    localStorage.removeItem("github_token");
+    setToken("");
+  };
+
+  return (
+    <div>
+      <div className="mb-3">
+        Set your{" "}
+        <a
+          href="https://github.com/settings/tokens"
+          className="text-blue-500 hover:underline font-semibold"
+        >
+          personal access token
+        </a>{" "}
+        here if you wish to save diagrams to your gists.
+      </div>
+      <div className="flex gap-2">
+        <Input
+          className="w-full"
+          placeholder={t("github_token")}
+          value={token}
+          onChange={(v) => setToken(v)}
+        />
+        <Button
+          icon={<i className="fa-solid fa-xmark" />}
+          type="danger"
+          title={t("clear")}
+          onClick={clearToken}
+        />
+      </div>
+      <div className="mt-1 text-xs">
+        *This will be stored in the local storage
+      </div>
+    </div>
+  );
+}

src/components/EditorHeader/Modal/Modal.jsx

@@ -43,6 +43,7 @@ import { importSQL } from "../../../utils/importSQL";
 import { databases } from "../../../data/databases";
 import { isRtl } from "../../../i18n/utils/rtl";
 import Share from "./Share";
+import GithubToken from "./GithubToken";
 
 const languageExtension = {
   sql: [sql()],
@@ -82,6 +83,9 @@ export default function Modal({
   const [selectedTemplateId, setSelectedTemplateId] = useState(-1);
   const [selectedDiagramId, setSelectedDiagramId] = useState(0);
   const [saveAsTitle, setSaveAsTitle] = useState(title);
+  const [token, setToken] = useState(
+    localStorage.getItem("github_token") ?? "",
+  );
 
   const overwriteDiagram = () => {
     setTables(importData.tables);
@@ -238,6 +242,14 @@ export default function Modal({
         setModal(MODAL.NONE);
         createNewDiagram(selectedTemplateId);
         return;
+      case MODAL.GITHUB_TOKEN:
+        setModal(MODAL.NONE);
+        if (token !== "") {
+          localStorage.setItem("github_token", token);
+        } else {
+          localStorage.removeItem("github_token");
+        }
+        return;
       default:
         setModal(MODAL.NONE);
         return;
@@ -320,7 +332,7 @@ export default function Modal({
           );
         } else {
           return (
-            <div className="text-center my-3">
+            <div className="text-center my-3 text-sky-600">
               <Spin tip={t("loading")} size="large" />
             </div>
           );
@@ -330,7 +342,9 @@ export default function Modal({
       case MODAL.LANGUAGE:
         return <Language />;
       case MODAL.SHARE:
-        return <Share />;
+        return <Share setModal={setModal} />;
+      case MODAL.GITHUB_TOKEN:
+        return <GithubToken token={token} setToken={setToken} />;
       default:
         return <></>;
     }

src/components/EditorHeader/Modal/Share.jsx

@@ -1,14 +1,21 @@
-import { Button, Banner } from "@douyinfe/semi-ui";
+import { Banner, Button, Spin } from "@douyinfe/semi-ui";
 import { IconLink } from "@douyinfe/semi-icons";
 import { useTranslation } from "react-i18next";
 import { Octokit } from "octokit";
+import { useState } from "react";
+import { MODAL } from "../../../data/constants";
 
-export default function Share() {
+export default function Share({ setModal }) {
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
 
   const generateLink = async () => {
+    setLoading(true);
+    const userToken = localStorage.getItem("github_token");
+
     const octokit = new Octokit({
-      auth: import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
+      auth:
+        userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
     });
 
     try {
@@ -27,30 +34,52 @@ export default function Share() {
       console.log(res);
     } catch (e) {
       console.error(e);
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
-    <div className="space-y-4">
+    <div id="share" className="space-y-4">
       <Banner
         fullMode={false}
         type="info"
         icon={null}
         closeIcon={null}
-        description="When you generate a link a gist with the JSON representation of the
-        diagram will get created. This will not start a real-time collaboration
-        session."
+        description={
+          <ul className="list-disc ms-4">
+            <li>
+              Generating a link will create a gist with the JSON representation
+              of the diagram.
+            </li>
+            <li>
+              You can create the gist from your account by providing your token
+              <button
+                onClick={() => setModal(MODAL.GITHUB_TOKEN)}
+                className="ms-1 text-sky-500 hover:underline font-semibold"
+              >
+                here
+              </button>
+              .
+            </li>
+            <li>
+              Sharing will not create a live real-time collaboration session.
+            </li>
+          </ul>
+        }
       />
-      <Button
-        type="primary"
-        theme="solid"
-        className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"
-        size="default"
-        icon={<IconLink />}
-        onClick={generateLink}
-      >
-        {t("generate_link")}
-      </Button>
+      <div className="text-center">
+        <Button
+          type="primary"
+          theme="solid"
+          className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"
+          size="default"
+          icon={loading ? <Spin /> : <IconLink />}
+          onClick={generateLink}
+        >
+          {t("generate_link")}
+        </Button>
+      </div>
     </div>
   );
 }

src/data/constants.js

@@ -92,6 +92,7 @@ export const MODAL = {
   TABLE_WIDTH: 9,
   LANGUAGE: 10,
   SHARE: 11,
+  GITHUB_TOKEN: 12,
 };
 
 export const STATUS = {

src/i18n/locales/en.js

@@ -237,7 +237,8 @@ const en = {
     didnt_find_diagram: "Oops! Didn't find the diagram.",
     unsigned: "Unsigned",
     share: "Share",
-    generate_link: "Generate link"
+    generate_link: "Generate link",
+    github_token: "GitHub Token",
   },
 };
 

src/index.css

@@ -58,6 +58,10 @@
   background-color: rgba(var(--semi-blue-6), 1);
 }
 
+.semi-spin-wrapper{
+  color: inherit;
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;

src/utils/modalData.js

@@ -25,6 +25,8 @@ export const getModalTitle = (modal) => {
       return i18n.t("language");
     case MODAL.SHARE:
       return i18n.t("share");
+    case MODAL.GITHUB_TOKEN:
+      return i18n.t("github_token");
     default:
       return "";
   }