feat: Share flyover (#2065)

* feat: Implement share as flyover instead of modal

* refactor

* i18n

app/scenes/Document/components/Header.js

@@ -3,16 +3,14 @@ import { observer } from "mobx-react";
 import {
   TableOfContentsIcon,
   EditIcon,
-  GlobeIcon,
   PlusIcon,
   MoreIcon,
 } from "outline-icons";
 import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Document from "models/Document";
-import DocumentShare from "scenes/DocumentShare";
 import { Action, Separator } from "components/Actions";
 import Badge from "components/Badge";
 import Breadcrumb, { Slash } from "components/Breadcrumb";
@@ -20,8 +18,8 @@ import Button from "components/Button";
 import Collaborators from "components/Collaborators";
 import Fade from "components/Fade";
 import Header from "components/Header";
-import Modal from "components/Modal";
 import Tooltip from "components/Tooltip";
+import ShareButton from "./ShareButton";
 import useMobile from "hooks/useMobile";
 import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
@@ -61,9 +59,8 @@ function DocumentHeader({
   onSave,
 }: Props) {
   const { t } = useTranslation();
-  const { auth, ui, shares, policies } = useStores();
+  const { auth, ui, policies } = useStores();
   const isMobile = useMobile();
-  const [showShareModal, setShowShareModal] = React.useState(false);
 
   const handleSave = React.useCallback(() => {
     onSave({ done: true });
@@ -73,21 +70,6 @@ function DocumentHeader({
     onSave({ done: true, publish: true });
   }, [onSave]);
 
-  const handleShareLink = React.useCallback(
-    async (ev: SyntheticEvent<>) => {
-      await document.share();
-
-      setShowShareModal(true);
-    },
-    [document]
-  );
-
-  const handleCloseShareModal = React.useCallback(() => {
-    setShowShareModal(false);
-  }, []);
-
-  const share = shares.getByDocumentId(document.id);
-  const isPubliclyShared = share && share.published;
   const isNew = document.isNew;
   const isTemplate = document.isTemplate;
   const can = policies.abilities(document.id);
@@ -146,13 +128,6 @@ function DocumentHeader({
 
   return (
     <>
-      <Modal
-        isOpen={showShareModal}
-        onRequestClose={handleCloseShareModal}
-        title={t("Share document")}
-      >
-        <DocumentShare document={document} onSubmit={handleCloseShareModal} />
-      </Modal>
       <Header
         breadcrumb={
           <Breadcrumb document={document}>
@@ -186,28 +161,7 @@ function DocumentHeader({
             )}
             {!isEditing && canShareDocument && (!isMobile || !isTemplate) && (
               <Action>
-                <Tooltip
-                  tooltip={
-                    isPubliclyShared ? (
-                      <Trans>
-                        Anyone with the link <br />
-                        can view this document
-                      </Trans>
-                    ) : (
-                      ""
-                    )
-                  }
-                  delay={500}
-                  placement="bottom"
-                >
-                  <Button
-                    icon={isPubliclyShared ? <GlobeIcon /> : undefined}
-                    onClick={handleShareLink}
-                    neutral
-                  >
-                    {t("Share")}
-                  </Button>
-                </Tooltip>
+                <ShareButton document={document} />
               </Action>
             )}
             {isEditing && (