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>
+  );
+}