Share Button [8/n] Show modal on UI click

Showing the modal after button  returns a URL. I'm pretty annoyed, wasn't able to get it:

1. Show up right beside the Share button
2. Have it look beautiful in the modal
3. Have the copy button be displayed on the right side (I was able to use position absolute, but now the label does not work and it's also not aligned with the padding for the X close button)

## Test plan

https://github.com/lastmile-ai/aiconfig/assets/151060367/9fba2b38-0602-4a92-b77a-2d8624d8fe34

python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx

@@ -1,12 +1,43 @@
-import { Button, Tooltip } from "@mantine/core";
+import { Button, Modal, Tooltip, createStyles, rem } from "@mantine/core";
 import { memo, useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import CopyButton from "../CopyButton";
 
 type Props = {
   onShare: () => Promise<string | void>;
 };
 
+const useStyles = createStyles((theme) => ({
+  copyIcon: {
+    alignItems: "flex-end",
+    align: "right",
+    justifyContent: "flex-end",
+    position: "absolute",
+    right: 0,
+  },
+  urlContainer: {
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    align: "center",
+    [theme.fn.smallerThan("sm")]: {
+      marginLeft: "0",
+      display: "block",
+      position: "static",
+      bottom: -10,
+      left: 0,
+      height: 28,
+      margin: "10px 0",
+    },
+  },
+}));
+
 export default memo(function ShareButton({ onShare }: Props) {
+  const { classes } = useStyles();
+  const [isModalOpened, { open: openModal, close: closeModal }] =
+    useDisclosure(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [shareUrl, setShareUrl] = useState<string>("");
 
   const onClick = async () => {
     if (isLoading) {
@@ -20,29 +51,39 @@ export default memo(function ShareButton({ onShare }: Props) {
     if (!shareUrl) {
       return;
     }
-
-    console.log("Share URL: ", shareUrl);
+    setShareUrl(shareUrl);
+    openModal();
   };
 
-  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 (
+  const button = (
     <Tooltip label={tooltipMessage} withArrow>
-      <div>{button}</div>
+      <Button
+        loaderPosition="center"
+        loading={isLoading}
+        onClick={onClick}
+        p="xs"
+        size="xs"
+        variant="filled"
+      >
+        Share
+      </Button>
     </Tooltip>
   );
+
+  return (
+    <>
+      <Modal opened={isModalOpened} onClose={closeModal} title="AIConfig URL">
+        <div className={classes.urlContainer}>
+          {shareUrl}
+          <div className={classes.copyIcon}>
+            <CopyButton value={shareUrl} contentLabel="AIConfig URL" />
+          </div>
+        </div>
+      </Modal>
+      {button}
+    </>
+  );
 });