Web: Files: added RoomSharingDialog

2023-05-22 13:17:11 +03:00 · 2023-05-22 13:17:11 +03:00 · e5a0170c22
commit e5a0170c22
parent 6f5e548689
14 changed files with 195 additions and 28 deletions
--- a/packages/client/public/locales/en/Files.json
+++ b/packages/client/public/locales/en/Files.json
@ -134,5 +134,7 @@
  "TableSettingsTitle": "Manage displayed columns",
  "DeleteLink": "Delete link",
  "DeleteLinkNote": "The link will be deleted permanently. You will not be able to undo this action.",
-  "LinkSuccessfullyCopied": "Link successfully copied"
+  "LinkSuccessfullyCopied": "Link successfully copied",
+  "ShareRoom": "Share room",
+  "DownloadAll": "Download all"
 }
--- a/packages/client/src/components/FilesPanels/index.js
+++ b/packages/client/src/components/FilesPanels/index.js
@ -28,6 +28,7 @@ import {
  ChangeUserTypeDialog,
  UnsavedChangesDialog,
  DeleteLinkDialog,
+  RoomSharingDialog,
 } from "../dialogs";
 import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
 import ArchiveDialog from "../dialogs/ArchiveDialog";
@ -68,6 +69,7 @@ const Panels = (props) => {
    unsavedChangesDialogVisible,
    deleteLinkDialogVisible,
    embeddingPanelIsVisible,
+    roomSharingPanelVisible,
  } = props;

  const { t } = useTranslation(["Translations", "Common"]);
@ -149,6 +151,7 @@ const Panels = (props) => {
    ),
    deleteLinkDialogVisible && <DeleteLinkDialog key="delete-link-dialog" />,
    embeddingPanelIsVisible && <EmbeddingPanel key="embedding-panel" />,
+    roomSharingPanelVisible && <RoomSharingDialog key="room-sharing-dialog" />,
  ];
 };

@ -191,6 +194,7 @@ export default inject(
      editLinkPanelIsVisible,
      deleteLinkDialogVisible,
      embeddingPanelIsVisible,
+      roomSharingPanelVisible,
    } = dialogsStore;

    const { preparationPortalDialogVisible } = backup;
@ -234,6 +238,7 @@ export default inject(
      unsavedChangesDialogVisible,
      deleteLinkDialogVisible,
      embeddingPanelIsVisible,
+      roomSharingPanelVisible,
    };
  }
 )(observer(Panels));
--- a/packages/client/src/components/dialogs/RoomSharingDialog/index.js
+++ b/packages/client/src/components/dialogs/RoomSharingDialog/index.js
@ -0,0 +1,65 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+import styled from "styled-components";
+import { withTranslation } from "react-i18next";
+import ModalDialog from "@docspace/components/modal-dialog";
+import Button from "@docspace/components/button";
+import InputBlock from "@docspace/components/input-block";
+import copy from "copy-to-clipboard";
+import toastr from "@docspace/components/toast/toastr";
+
+const StyledDeleteDialog = styled(ModalDialog)`
+  .modal-dialog-content-body {
+    display: flex;
+    gap: 12px;
+  }
+
+  .modal-dialog-aside-header {
+    margin: 0 -24px 0 -16px;
+    padding: 0 0 0 16px;
+  }
+`;
+
+const RoomSharingDialog = ({ t, tReady, visible, setIsVisible, roomHref }) => {
+  const onClose = () => {
+    setIsVisible(false);
+  };
+
+  const onCopy = () => {
+    copy(roomHref);
+    toastr.success(t("Files:LinkSuccessfullyCopied"));
+    onClose();
+  };
+
+  return (
+    <StyledDeleteDialog isLoading={!tReady} visible={visible} onClose={onClose}>
+      <ModalDialog.Header>{t("Files:ShareRoom")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <div className="modal-dialog-content-body">
+          <InputBlock value={roomHref} scale isReadOnly isDisabled />
+          <Button
+            label={t("Translations:Copy")}
+            size="small"
+            onClick={onCopy}
+            isLoading={!tReady}
+          />
+        </div>
+      </ModalDialog.Body>
+    </StyledDeleteDialog>
+  );
+};
+
+export default inject(({ dialogsStore, publicRoomStore }) => {
+  const { setRoomSharingPanelVisible, roomSharingPanelVisible } = dialogsStore;
+  const { roomHref } = publicRoomStore;
+
+  return {
+    visible: roomSharingPanelVisible,
+    setIsVisible: setRoomSharingPanelVisible,
+    roomHref,
+  };
+})(
+  withTranslation(["Files", "Common", "Translations"])(
+    observer(RoomSharingDialog)
+  )
+);
--- a/packages/client/src/components/dialogs/index.js
+++ b/packages/client/src/components/dialogs/index.js
@ -30,6 +30,7 @@ import LogoutAllConnectionDialog from "./LogoutAllConnectionDialog";
 import CreateRoomConfirmDialog from "./CreateRoomConfirmDialog";
 import UnsavedChangesDialog from "./UnsavedChangesDialog";
 import DeleteLinkDialog from "./DeleteLinkDialog";
+import RoomSharingDialog from "./RoomSharingDialog";

 export {
  EmptyTrashDialog,
@ -64,4 +65,5 @@ export {
  LogoutAllConnectionDialog,
  UnsavedChangesDialog,
  DeleteLinkDialog,
+  RoomSharingDialog,
 };
--- a/packages/client/src/components/panels/EditLinkPanel/LinkBlock.js
+++ b/packages/client/src/components/panels/EditLinkPanel/LinkBlock.js
@ -47,6 +47,7 @@ const LinkBlock = (props) => {
        size="base"
        withBorder
        isDisabled
+        isReadOnly
        className="edit-link_link-input"
        value={linkValue}
        placeholder={t("ExternalLink")}
--- a/packages/client/src/pages/Home/Section/Header/index.js
+++ b/packages/client/src/pages/Home/Section/Header/index.js
@ -185,6 +185,7 @@ const SectionHeaderContent = (props) => {
    isPublicRoomInit,
    theme,
    whiteLabelLogoUrls,
+    setRoomSharingPanelVisible,
  } = props;

  const navigate = useNavigate();
@ -508,6 +509,14 @@ const SectionHeaderContent = (props) => {
    onCopyLink && onCopyLink({ ...selectedFolder, isFolder: true }, t);
  };

+  const onDownloadAll = () => {
+    alert("onDownloadAll");
+  };
+
+  const onShareRoom = () => {
+    setRoomSharingPanelVisible(true);
+  };
+
  const getContextOptionsFolder = () => {
    const {
      t,
@ -530,8 +539,30 @@ const SectionHeaderContent = (props) => {

      security,
      isPublicRoom,
+      isPublicRoomInit,
    } = props;

+    if (isPublicRoomInit) {
+      return [
+        {
+          key: "public-room_edit",
+          label: t("Files:DownloadAll"),
+          icon: DownloadReactSvgUrl,
+          onClick: onDownloadAll,
+        },
+        {
+          key: "public-room_separator",
+          isSeparator: true,
+        },
+        {
+          key: "public-room_share",
+          label: t("Files:ShareRoom"),
+          icon: ShareReactSvgUrl,
+          onClick: onShareRoom,
+        },
+      ];
+    }
+
    const isDisabled = isRecycleBinFolder || isRoom;

    const links = [];
@ -886,7 +917,8 @@ const SectionHeaderContent = (props) => {
                showText={showText}
                isRootFolder={isRoot}
                canCreate={
-                  security?.Create || isAccountsPage || !isSettingsPage
+                  (security?.Create || isAccountsPage || !isSettingsPage) &&
+                  !isPublicRoomInit
                }
                title={currentTitle}
                isDesktop={isDesktop}
@ -923,6 +955,7 @@ const SectionHeaderContent = (props) => {
                isRoom={isRoom}
                hideInfoPanel={isSettingsPage || isPublicRoomInit}
                withLogo={isPublicRoomInit && logo}
+                isPublicRoom={isPublicRoomInit}
              />
            </div>
          )}
@ -989,6 +1022,7 @@ export default inject(
      setArchiveAction,
      setInvitePanelOptions,
      setInviteUsersWarningDialogVisible,
+      setRoomSharingPanelVisible,
    } = dialogsStore;

    const {
@ -1162,6 +1196,7 @@ export default inject(
      isEmptyPage,
      theme,
      whiteLabelLogoUrls,
+      setRoomSharingPanelVisible,
    };
  }
 )(
--- a/packages/client/src/pages/PublicRoom/Header.js
+++ b/packages/client/src/pages/PublicRoom/Header.js
@ -15,9 +15,6 @@ const SectionHeaderContent = (props) => {
    ? getLogoFromPath(whiteLabelLogoUrls[0].path.dark)
    : getLogoFromPath(whiteLabelLogoUrls[0].path.light);

-  const DownloadAll = "Download all";
-  const ShareRoom = "Share room";
-
  const onDownloadAll = () => {
    alert("onDownloadAll");
  };
@ -30,7 +27,7 @@ const SectionHeaderContent = (props) => {
    return [
      {
        key: "public-room_edit",
-        label: DownloadAll,
+        label: t("Files:DownloadAll"),
        icon: DownloadReactSvgUrl,
        onClick: onDownloadAll,
      },
@ -40,7 +37,7 @@ const SectionHeaderContent = (props) => {
      },
      {
        key: "public-room_share",
-        label: ShareRoom,
+        label: t("Files:ShareRoom"),
        icon: ShareReactSvgUrl,
        onClick: onShareRoom,
      },
@ -76,4 +73,4 @@ export default inject(({ auth, publicRoomStore }) => {

    roomTitle,
  };
-})(withTranslation("Common")(observer(SectionHeaderContent)));
+})(withTranslation(["Common", "Files"])(observer(SectionHeaderContent)));
--- a/packages/client/src/pages/PublicRoom/index.js
+++ b/packages/client/src/pages/PublicRoom/index.js
@ -15,6 +15,8 @@ import SectionBodyContent from "../Home/Section/Body";
 import RoomPassword from "./sub-components/RoomPassword";
 import RoomErrors from "./sub-components/RoomErrors";

+import { RoomSharingDialog } from "../../components/dialogs";
+
 const PublicRoom = (props) => {
  const {
    isLoaded,
@ -24,6 +26,7 @@ const PublicRoom = (props) => {
    withPaging,
    validatePublicRoomKey,
    fetchFiles,
+    setRoomHref,
  } = props;

  const location = useLocation();
@ -34,27 +37,33 @@ const PublicRoom = (props) => {
  }, [validatePublicRoomKey]);

  useEffect(() => {
-    isLoaded && fetchFiles(roomId);
+    isLoaded &&
+      fetchFiles(roomId).then((res) => {
+        setRoomHref(res?.links[0]?.href);
+      });
  }, [fetchFiles, isLoaded]);

  const roomPage = () => (
-    <Section
-      withBodyScroll
-      // withBodyAutoFocus={!isMobile}
-      withPaging={withPaging}
-    >
-      <Section.SectionHeader>
-        <SectionHeaderContent />
-      </Section.SectionHeader>
+    <>
+      <Section
+        withBodyScroll
+        // withBodyAutoFocus={!isMobile}
+        withPaging={withPaging}
+      >
+        <Section.SectionHeader>
+          <SectionHeaderContent />
+        </Section.SectionHeader>

-      <Section.SectionFilter>
-        <SectionFilterContent />
-      </Section.SectionFilter>
+        <Section.SectionFilter>
+          <SectionFilterContent />
+        </Section.SectionFilter>

-      <Section.SectionBody>
-        <SectionBodyContent />
-      </Section.SectionBody>
-    </Section>
+        <Section.SectionBody>
+          <SectionBodyContent />
+        </Section.SectionBody>
+      </Section>
+      <RoomSharingDialog />
+    </>
  );

  const renderLoader = () => {
@ -88,8 +97,14 @@ const PublicRoom = (props) => {

 export default inject(({ auth, filesStore, publicRoomStore }) => {
  const { withPaging } = auth.settingsStore;
-  const { validatePublicRoomKey, isLoaded, isLoading, roomStatus, roomId } =
-    publicRoomStore;
+  const {
+    validatePublicRoomKey,
+    isLoaded,
+    isLoading,
+    roomStatus,
+    roomId,
+    setRoomHref,
+  } = publicRoomStore;

  const { fetchFiles } = filesStore;

@ -99,6 +114,7 @@ export default inject(({ auth, filesStore, publicRoomStore }) => {
    isLoading,
    roomStatus,
    fetchFiles,
+    setRoomHref,

    withPaging,
    validatePublicRoomKey,
--- a/packages/client/src/store/DialogsStore.js
+++ b/packages/client/src/store/DialogsStore.js
@ -11,6 +11,7 @@ class DialogsStore {
  versionHistoryStore;

  sharingPanelVisible = false;
+  roomSharingPanelVisible = false;
  ownerPanelVisible = false;
  moveToPanelVisible = false;
  copyPanelVisible = false;
@ -101,6 +102,10 @@ class DialogsStore {
    this.sharingPanelVisible = sharingPanelVisible;
  };

+  setRoomSharingPanelVisible = (roomSharingPanelVisible) => {
+    this.roomSharingPanelVisible = roomSharingPanelVisible;
+  };
+
  setIsFolderActions = (isFolderActions) => {
    this.isFolderActions = isFolderActions;
  };
--- a/packages/client/src/store/FilesStore.js
+++ b/packages/client/src/store/FilesStore.js
@ -1358,7 +1358,11 @@ class FilesStore {
          this.setCreatedItem(null);
        }

-        return Promise.resolve(selectedFolder);
+        if (window.location.pathname === "/rooms/share") {
+          return Promise.resolve(data);
+        } else {
+          return Promise.resolve(selectedFolder);
+        }
      })
      .catch((err) => {
        console.error(err);
--- a/packages/client/src/store/PublicRoomStore.js
+++ b/packages/client/src/store/PublicRoomStore.js
@ -8,6 +8,7 @@ class PublicRoomStore {
  roomId = null;
  roomStatus = null;
  roomType = null;
+  roomHref = null;

  isLoaded = false;
  isLoading = false;
@ -80,13 +81,19 @@ class PublicRoomStore {
    this.setIsLoading(true);
    api.rooms
      .validatePublicRoomKey(key)
-      .then((res) => this.setRoomData(res))
+      .then((res) => {
+        this.setRoomData(res);
+      })
      .finally(() => this.setIsLoading(false));
  };

  validatePublicRoomPassword = (key, password) => {
    return api.rooms.validatePublicRoomPassword(key, password);
  };
+
+  setRoomHref = (roomHref) => {
+    this.roomHref = roomHref;
+  };
 }

 export default PublicRoomStore;
--- a/packages/common/components/Navigation/Navigation.js
+++ b/packages/common/components/Navigation/Navigation.js
@ -51,6 +51,7 @@ const Navigation = ({
  isRoom,
  hideInfoPanel,
  withLogo,
+  isPublicRoom,
  ...rest
 }) => {
  const [isOpen, setIsOpen] = React.useState(false);
@ -211,6 +212,7 @@ const Navigation = ({
              titles={titles}
              withMenu={withMenu}
              onPlusClick={onPlusClick}
+              isPublicRoom={isPublicRoom}
            />
          </StyledContainer>
          {isTrashFolder && !isEmptyPage && (
--- a/packages/common/components/Navigation/sub-components/control-btn.js
+++ b/packages/common/components/Navigation/sub-components/control-btn.js
@ -105,6 +105,7 @@ const ControlButtons = ({
  titles,
  withMenu,
  onPlusClick,
+  isPublicRoom,
 }) => {
  const toggleInfoPanelAction = () => {
    toggleInfoPanel && toggleInfoPanel();
@ -175,6 +176,21 @@ const ControlButtons = ({
              toggleInfoPanel={toggleInfoPanelAction}
            />
          )}
+
+          {isPublicRoom && (
+            <ContextMenuButton
+              id="header_optional-button"
+              zIndex={402}
+              className="option-button"
+              directionX="right"
+              iconName={VerticalDotsReactSvgUrl}
+              size={15}
+              isFill
+              getData={getContextOptionsFolder}
+              isDisabled={false}
+              title={titles?.contextMenu}
+            />
+          )}
        </>
      )}
    </StyledContainer>
--- a/packages/common/utils/axiosClient.js
+++ b/packages/common/utils/axiosClient.js
@ -113,6 +113,16 @@ class AxiosClient {

      if (response.request.responseType === "text") return response.data;

+      if (
+        response.data.response.hasOwnProperty("total") &&
+        response.data.links
+      ) {
+        return {
+          ...response.data.response,
+          ...{ links: response.data.links },
+        };
+      }
+
      return response.data.response;
    };