Set up upload workflow

src/components/EditorHeader/ControlPanel.jsx

@@ -1365,8 +1365,9 @@ export default function ControlPanel({
               className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"
               size="default"
               icon={<IconShareStroked />}
+              onClick={() => setModal(MODAL.SHARE)}
             >
-              Share
+              {t("share")}
             </Button>
           </div>
         )}

src/components/EditorHeader/Modal/Modal.jsx

@@ -42,6 +42,7 @@ import { useTranslation } from "react-i18next";
 import { importSQL } from "../../../utils/importSQL";
 import { databases } from "../../../data/databases";
 import { isRtl } from "../../../i18n/utils/rtl";
+import Share from "./Share";
 
 const languageExtension = {
   sql: [sql()],
@@ -328,6 +329,8 @@ export default function Modal({
         return <SetTableWidth />;
       case MODAL.LANGUAGE:
         return <Language />;
+      case MODAL.SHARE:
+        return <Share />;
       default:
         return <></>;
     }

src/components/EditorHeader/Modal/Share.jsx

@@ -0,0 +1,56 @@
+import { Button, Banner } from "@douyinfe/semi-ui";
+import { IconLink } from "@douyinfe/semi-icons";
+import { useTranslation } from "react-i18next";
+import { Octokit } from "octokit";
+
+export default function Share() {
+  const { t } = useTranslation();
+
+  const generateLink = async () => {
+    const octokit = new Octokit({
+      auth: import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
+    });
+
+    try {
+      const res = await octokit.request("POST /gists", {
+        description: "Hello world",
+        public: false,
+        files: {
+          "test.json": {
+            content: '{"Hello":"WORLD"}',
+          },
+        },
+        headers: {
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      });
+      console.log(res);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <div 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."
+      />
+      <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>
+  );
+}

src/data/constants.js

@@ -91,6 +91,7 @@ export const MODAL = {
   IMPORT_SRC: 8,
   TABLE_WIDTH: 9,
   LANGUAGE: 10,
+  SHARE: 11,
 };
 
 export const STATUS = {

src/i18n/locales/en.js

@@ -236,6 +236,8 @@ const en = {
     empty_index_name: "Declared an index with no name in table '{{tableName}}'",
     didnt_find_diagram: "Oops! Didn't find the diagram.",
     unsigned: "Unsigned",
+    share: "Share",
+    generate_link: "Generate link"
   },
 };
 

src/utils/modalData.js

@@ -23,6 +23,8 @@ export const getModalTitle = (modal) => {
       return i18n.t("table_width");
     case MODAL.LANGUAGE:
       return i18n.t("language");
+    case MODAL.SHARE:
+      return i18n.t("share");
     default:
       return "";
   }
@@ -55,6 +57,8 @@ export const getOkText = (modal) => {
       return i18n.t("save_as");
     case MODAL.NEW:
       return i18n.t("create");
+    case MODAL.SHARE:
+      return i18n.t("share");
     default:
       return i18n.t("confirm");
   }