From fbfb09c9d4f7f4e7e755ece9d32e84d2a64fc64a Mon Sep 17 00:00:00 2001
From: "Rossdan Craig rossdan@lastmileai.dev" <>
Date: Fri, 26 Jan 2024 17:28:50 -0500
Subject: [PATCH] Share Button [7/n]: Display loading UI

Created a separate component for the shareButton to manage the `isLoading` state and show that in the UI

## Test Plan
Rebase on then do: https://github.com/lastmile-ai/aiconfig/pull/1045

Go to `aiconfig/python/src/aiconfig/editor/client` and run this command:
```
rm -rf node_modules && yarn && yarn build
```

Then go to `aiconfig` dir and run this command:
```
aiconfig_path  =./cookbooks/Gradio/huggingface.aiconfig.json
parsers_path=./cookbooks/Gradio/hf_model_parsers.py
aiconfig edit --aiconfig-path=$aiconfig_path --server-port=8080 --server-mode=debug_servers --parsers-module-path=$parsers_path
```

No Error Testing

https://github.com/lastmile-ai/aiconfig/assets/151060367/1e9f4b90-a9e9-4c60-a813-afa2a46a1b5a

Error Testing

https://github.com/lastmile-ai/aiconfig/assets/151060367/1abcce37-8ba4-4513-b826-ea0f9d7bb720
---
 .../client/src/components/AIConfigEditor.tsx  | 19 ++------
 .../src/components/global/ShareButton.tsx     | 48 +++++++++++++++++++
 2 files changed, 51 insertions(+), 16 deletions(-)
 create mode 100644 python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx

diff --git a/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx b/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
index 1100653c0..cc3440295 100644
--- a/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
+++ b/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
@@ -56,6 +56,7 @@ import {
 import { IconDeviceFloppy } from "@tabler/icons-react";
 import CopyButton from "./CopyButton";
 import AIConfigEditorThemeProvider from "../themes/AIConfigEditorThemeProvider";
+import ShareButton from "./global/ShareButton";
 import PromptsContainer from "./prompt/PromptsContainer";
 
 type Props = {
@@ -155,10 +156,8 @@ export default function AIConfigEditor({
       return;
     }
     try {
-      // TODO: While uploading, show a loader state for share button
       const { share_url: shareUrl } = await shareCallback();
-      // TODO: display the shareUrl in a dialog
-      // console.log("Share URL: ", shareUrl);
+      return shareUrl;
     } catch (err: unknown) {
       const message = (err as RequestCallbackError).message ?? null;
       showNotification({
@@ -962,19 +961,7 @@ export default function AIConfigEditor({
             <Flex justify="flex-end" mt="md" mb="xs">
               {!readOnly && (
                 <Group>
-                  {shareCallback && (
-                    <Tooltip label={"Create a link to share your AIConfig!"}>
-                      <Button
-                        loading={undefined}
-                        onClick={onShare}
-                        size="xs"
-                        variant="filled"
-                      >
-                        Share
-                      </Button>
-                    </Tooltip>
-                  )}
-
+                  {shareCallback && <ShareButton onShare={onShare} />}
                   {onClearOutputs && (
                     <Button
                       loading={undefined}
diff --git a/python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx b/python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx
new file mode 100644
index 000000000..c19cd1863
--- /dev/null
+++ b/python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx
@@ -0,0 +1,48 @@
+import { Button, Tooltip } from "@mantine/core";
+import { memo, useState } from "react";
+
+type Props = {
+  onShare: () => Promise<string | void>;
+};
+
+export default memo(function ShareButton({ onShare }: Props) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const onClick = async () => {
+    if (isLoading) {
+      return;
+    }
+
+    setIsLoading(true);
+    const shareUrl: string | void = await onShare();
+    setIsLoading(false);
+
+    if (!shareUrl) {
+      return;
+    }
+
+    console.log("Share URL: ", shareUrl);
+  };
+
+  const button = (
+    <Button
+      loaderPosition="center"
+      loading={isLoading}
+      onClick={onClick}
+      p="xs"
+      size="xs"
+      variant="filled"
+    >
+      Share
+    </Button>
+  );
+
+  const tooltipMessage: string = isLoading
+    ? "Generating share link..."
+    : "Create a link to share your AIConfig!";
+  return (
+    <Tooltip label={tooltipMessage} withArrow>
+      <div>{button}</div>
+    </Tooltip>
+  );
+});