created new CreateEditRoomConfirmDialog component

packages/client/public/locales/en/CreateEditRoomDialog.json

@@ -1,6 +1,7 @@
 {
   "ChooseRoomType": "Choose room type",
   "CollaborationRoomDescription": "Collaborate on one or multiple documents with your team",
+  "CreateRoomConfirmation": "Continue without connecting the storage?\nYou have selected a third-party storage option that is not connected yet. If you proceed without connecting the service, this option will not be added.",
   "CollaborationRoomTitle": "Collaboration room",
   "CreateTagOption": "Create tag",
   "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose",

packages/client/public/locales/ru/CreateEditRoomDialog.json

@@ -2,6 +2,7 @@
   "ChooseRoomType": "Выберите тип комнаты",
   "CollaborationRoomDescription": "Совместная работа над одним или несколькими документами с вашей командой",
   "CollaborationRoomTitle": "Комната для совместного редактирования",
+  "CreateRoomConfirmation": "Продолжить без подключения хранилища?\nВы выбрали сторонний вариант хранения, который еще не подключен. Если вы продолжите без подключения услуги, эта опция не будет добавлена",
   "CreateTagOption": "Создать тэг",
   "CustomRoomDescription": "Примените собственные настройки, чтобы использовать эту комнату для любых пользовательских целей",
   "CustomRoomTitle": "Пользовательская комната",

packages/client/src/components/FilesPanels/index.js

@@ -22,6 +22,7 @@ import {
   ConvertDialog,
   CreateRoomDialog,
   InviteUsersWarningDialog,
+  CreateRoomConfirmDialog,
 } from "../dialogs";
 import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
 import ArchiveDialog from "../dialogs/ArchiveDialog";
@@ -50,6 +51,8 @@ const Panels = (props) => {
     invitePanelVisible,
     convertPasswordDialogVisible,
     createRoomDialogVisible,
+    createRoomConfirmDialogVisible,
+    confirmDialogIsLoading,
     restoreAllPanelVisible,
     archiveDialogVisible,
     inviteUsersWarningDialogVisible,
@@ -94,6 +97,9 @@ const Panels = (props) => {
     ),
     convertDialogVisible && <ConvertDialog key="convert-dialog" />,
     createRoomDialogVisible && <CreateRoomDialog key="create-room-dialog" />,
+    (createRoomConfirmDialogVisible || confirmDialogIsLoading) && (
+      <CreateRoomConfirmDialog key="create-room-confirm-dialog" />
+    ),
     selectFileDialogVisible && (
       <SelectFileDialog
         key="select-file-dialog"
@@ -123,7 +129,13 @@ const Panels = (props) => {
 };
 
 export default inject(
-  ({ auth, dialogsStore, uploadDataStore, versionHistoryStore }) => {
+  ({
+    auth,
+    dialogsStore,
+    uploadDataStore,
+    versionHistoryStore,
+    createEditRoomStore,
+  }) => {
     const {
       sharingPanelVisible,
       ownerPanelVisible,
@@ -139,6 +151,7 @@ export default inject(
       conflictResolveDialogVisible,
       convertDialogVisible,
       createRoomDialogVisible,
+      createRoomConfirmDialogVisible,
       convertPasswordDialogVisible,
       connectItem, //TODO:
       restoreAllPanelVisible,
@@ -154,6 +167,7 @@ export default inject(
     const { uploadPanelVisible } = uploadDataStore;
     const { isVisible: versionHistoryPanelVisible } = versionHistoryStore;
     const { hotkeyPanelVisible } = auth.settingsStore;
+    const { confirmDialogIsLoading } = createEditRoomStore;
 
     return {
       sharingPanelVisible,
@@ -172,6 +186,7 @@ export default inject(
       conflictResolveDialogVisible,
       convertDialogVisible,
       createRoomDialogVisible,
+      createRoomConfirmDialogVisible,
       convertPasswordDialogVisible,
       selectFileDialogVisible,
       createMasterForm,
@@ -181,6 +196,7 @@ export default inject(
       invitePanelVisible: invitePanelOptions.visible,
       archiveDialogVisible,
       inviteUsersWarningDialogVisible,
+      confirmDialogIsLoading,
     };
   }
 )(observer(Panels));

packages/client/src/components/GlobalEvents/CreateRoomEvent.js

@@ -2,122 +2,43 @@ import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import { CreateRoomDialog } from "../dialogs";
-import { toastr } from "@docspace/components";
 import { isMobile } from "react-device-detect";
 
 const CreateRoomEvent = ({
   visible,
   onClose,
 
-  createRoom,
-  createRoomInThirdpary,
-  createTag,
-  addTagsToRoom,
-  deleteThirdParty,
-  fetchThirdPartyProviders,
-  calculateRoomLogoParams,
-  uploadRoomLogo,
-  addLogoToRoom,
   fetchTags,
-
+  setRoomParams,
+  onCreateRoom,
+  createRoomConfirmDialogVisible,
+  setCreateRoomConfirmDialogVisible,
+  confirmDialogIsLoading,
   connectDialogVisible,
 
-  currentFolderId,
-  updateCurrentFolder,
-
-  withPaging,
+  isLoading,
+  setIsLoading,
+  setOnClose,
   setCreateRoomDialogVisible,
-  fetchFiles,
-  setInfoPanelIsVisible,
-  setView,
+
+  fetchThirdPartyProviders,
   enableThirdParty,
+  deleteThirdParty,
 }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]);
   const [fetchedTags, setFetchedTags] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
 
-  const openNewRoom = (id) => {
-    setView("info_members");
-    fetchFiles(id)
-      .then(() => {
-        !isMobile && setInfoPanelIsVisible(true);
-      })
-      .finally(() => {
-        setIsLoading(false);
-        onClose();
-      });
-  };
+  const onCreate = (roomParams) => {
+    setRoomParams(roomParams);
+    setOnClose(onClose);
 
-  const onCreate = async (roomParams) => {
-    const createRoomData = {
-      roomType: roomParams.type,
-      title: roomParams.title || t("Files:NewRoom"),
-    };
-
-    const createTagsData = roomParams.tags
-      .filter((t) => t.isNew)
-      .map((t) => t.name);
-    const addTagsData = roomParams.tags.map((tag) => tag.name);
-
-    const isThirdparty = roomParams.storageLocation.isThirdparty;
-    const storageFolderId = roomParams.storageLocation.storageFolderId;
-    const thirdpartyAccount = roomParams.storageLocation.thirdpartyAccount;
-
-    const uploadLogoData = new FormData();
-    uploadLogoData.append(0, roomParams.icon.uploadedFile);
-
-    try {
-      setIsLoading(true);
-
-      // create room
-      let room =
-        isThirdparty && storageFolderId
-          ? await createRoomInThirdpary(storageFolderId, createRoomData)
-          : await createRoom(createRoomData);
-
-      room.isLogoLoading = true;
-
-      // delete thirdparty account if not needed
-      if (!isThirdparty && storageFolderId)
-        await deleteThirdParty(thirdpartyAccount.providerId);
-
-      // create new tags
-      for (let i = 0; i < createTagsData.length; i++)
-        await createTag(createTagsData[i]);
-
-      // add new tags to room
-      if (!!addTagsData.length)
-        room = await addTagsToRoom(room.id, addTagsData);
-
-      // calculate and upload logo to room
-      if (roomParams.icon.uploadedFile) {
-        await uploadRoomLogo(uploadLogoData).then((response) => {
-          const url = URL.createObjectURL(roomParams.icon.uploadedFile);
-          const img = new Image();
-          img.onload = async () => {
-            const { x, y, zoom } = roomParams.icon;
-            room = await addLogoToRoom(room.id, {
-              tmpFile: response.data,
-              ...calculateRoomLogoParams(img, x, y, zoom),
-            });
-
-            !withPaging && openNewRoom(room.id);
-
-            URL.revokeObjectURL(img.src);
-          };
-          img.src = url;
-        });
-      } else !withPaging && openNewRoom(room.id);
-    } catch (err) {
-      toastr.error(err);
-      console.log(err);
-
-      setIsLoading(false);
-      onClose();
-    } finally {
-      if (withPaging) {
-        await updateCurrentFolder(null, currentFolderId);
-      }
+    if (
+      roomParams.storageLocation.isThirdparty &&
+      !roomParams.storageLocation.storageFolderId
+    ) {
+      setCreateRoomConfirmDialogVisible(true);
+    } else {
+      onCreateRoom();
     }
   };
 
@@ -128,14 +49,18 @@ const CreateRoomEvent = ({
 
   useEffect(() => {
     setCreateRoomDialogVisible(true);
-
     return () => setCreateRoomDialogVisible(false);
   }, []);
 
   return (
     <CreateRoomDialog
       t={t}
-      visible={visible && !connectDialogVisible}
+      visible={
+        visible &&
+        !connectDialogVisible &&
+        !createRoomConfirmDialogVisible &&
+        !confirmDialogIsLoading
+      }
       onClose={onClose}
       onCreate={onCreate}
       fetchedTags={fetchedTags}
@@ -151,65 +76,51 @@ const CreateRoomEvent = ({
 export default inject(
   ({
     auth,
+    createEditRoomStore,
     filesStore,
     tagsStore,
-    filesActionsStore,
-    selectedFolderStore,
     dialogsStore,
     settingsStore,
   }) => {
-    const {
-      createRoom,
-      createRoomInThirdpary,
-      addTagsToRoom,
-      calculateRoomLogoParams,
-      uploadRoomLogo,
-      addLogoToRoom,
-      fetchFiles,
-      addItem,
-    } = filesStore;
-    const { createTag, fetchTags } = tagsStore;
-
-    const { id: currentFolderId } = selectedFolderStore;
-    const { updateCurrentFolder } = filesActionsStore;
-
-    const { connectDialogVisible, setCreateRoomDialogVisible } = dialogsStore;
+    const { fetchTags } = tagsStore;
 
     const {
       deleteThirdParty,
       fetchThirdPartyProviders,
     } = settingsStore.thirdPartyStore;
-    const { withPaging } = auth.settingsStore;
-
-    const {
-      setIsVisible: setInfoPanelIsVisible,
-      setView,
-    } = auth.infoPanelStore;
-
     const { enableThirdParty } = settingsStore;
 
-    return {
-      createRoom,
-      createRoomInThirdpary,
-      createTag,
-      fetchTags,
-      addTagsToRoom,
-      deleteThirdParty,
-      fetchThirdPartyProviders,
-      calculateRoomLogoParams,
-      uploadRoomLogo,
-      addLogoToRoom,
-
+    const {
+      createRoomConfirmDialogVisible,
+      setCreateRoomConfirmDialogVisible,
       connectDialogVisible,
-      currentFolderId,
-      updateCurrentFolder,
-
-      withPaging,
       setCreateRoomDialogVisible,
-      fetchFiles,
-      setInfoPanelIsVisible,
-      setView,
+    } = dialogsStore;
+
+    const {
+      setRoomParams,
+      onCreateRoom,
+      isLoading,
+      setIsLoading,
+      setOnClose,
+      confirmDialogIsLoading,
+    } = createEditRoomStore;
+
+    return {
+      fetchTags,
+      setRoomParams,
+      onCreateRoom,
+      createRoomConfirmDialogVisible,
+      setCreateRoomConfirmDialogVisible,
+      connectDialogVisible,
+      isLoading,
+      setIsLoading,
+      setOnClose,
+      confirmDialogIsLoading,
+      setCreateRoomDialogVisible,
+      fetchThirdPartyProviders,
       enableThirdParty,
+      deleteThirdParty,
     };
   }
 )(observer(CreateRoomEvent));

packages/client/src/components/dialogs/CreateRoomConfirmDialog/index.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import ModalDialog from "@docspace/components/modal-dialog";
+import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import { Button } from "@docspace/components";
+
+const CreateRoomConfirmDialog = ({
+  t,
+
+  visible,
+  setVisible,
+
+  confirmDialogIsLoading,
+  onCreateRoom,
+}) => {
+  const onContinue = async () => {
+    await onCreateRoom();
+    onClose();
+  };
+
+  const onClose = () => setVisible(false);
+
+  return (
+    <ModalDialog
+      visible={visible || confirmDialogIsLoading}
+      onClose={onClose}
+      isLarge
+      zIndex={310}
+    >
+      <ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        {t("CreateEditRoomDialog:CreateRoomConfirmation")}
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button
+          label={t("Common:ContinueButton")}
+          size="normal"
+          primary
+          isLoading={confirmDialogIsLoading}
+          onClick={onContinue}
+        />
+        <Button
+          label={t("Common:CancelButton")}
+          size="normal"
+          onClick={onClose}
+        />
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default inject(({ dialogsStore, createEditRoomStore }) => {
+  const {
+    createRoomConfirmDialogVisible: visible,
+    setCreateRoomConfirmDialogVisible: setVisible,
+  } = dialogsStore;
+
+  const { confirmDialogIsLoading, onCreateRoom } = createEditRoomStore;
+
+  return {
+    visible,
+    setVisible,
+
+    confirmDialogIsLoading,
+    onCreateRoom,
+  };
+})(withTranslation(["Common, Files"])(observer(CreateRoomConfirmDialog)));

packages/client/src/components/dialogs/index.js

@@ -26,6 +26,7 @@ import DeletePortalDialog from "./DeletePortalDialog";
 import InviteUsersWarningDialog from "./InviteUsersWarningDialog";
 import LogoutConnectionDialog from "./LogoutConnectionDialog";
 import LogoutAllConnectionDialog from "./LogoutAllConnectionDialog";
+import CreateRoomConfirmDialog from "./CreateRoomConfirmDialog";
 
 export {
   EmptyTrashDialog,
@@ -48,6 +49,7 @@ export {
   ResetApplicationDialog,
   BackupCodesDialog,
   CreateRoomDialog,
+  CreateRoomConfirmDialog,
   EditRoomDialog,
   ChangePortalOwnerDialog,
   ChangeNameDialog,

packages/client/src/store/CreateEditRoomStore.js

@@ -0,0 +1,166 @@
+import { makeAutoObservable } from "mobx";
+import { toastr } from "@docspace/components";
+import { isMobile } from "react-device-detect";
+
+class CreateEditRoomStore {
+  roomParams = null;
+  isLoading = null;
+  confirmDialogIsLoading = false;
+  onClose = null;
+
+  filesStore = null;
+  tagsStore = null;
+  selectedFolderStore = null;
+  filesActionsStore = null;
+  thirdPartyStore = null;
+  settingsStore = null;
+  infoPanelStore = null;
+
+  constructor(
+    filesStore,
+    filesActionsStore,
+    selectedFolderStore,
+    tagsStore,
+    thirdPartyStore,
+    settingsStore,
+    infoPanelStore
+  ) {
+    makeAutoObservable(this);
+
+    this.filesStore = filesStore;
+    this.tagsStore = tagsStore;
+    this.selectedFolderStore = selectedFolderStore;
+    this.filesActionsStore = filesActionsStore;
+    this.thirdPartyStore = thirdPartyStore;
+    this.settingsStore = settingsStore;
+    this.infoPanelStore = infoPanelStore;
+  }
+
+  setRoomParams = (roomParams) => {
+    this.roomParams = roomParams;
+  };
+
+  setIsLoading = (isLoading) => {
+    this.isLoading = isLoading;
+  };
+
+  setConfirmDialogIsLoading = (confirmDialogIsLoading) => {
+    this.confirmDialogIsLoading = confirmDialogIsLoading;
+  };
+
+  setOnClose = (onClose) => {
+    this.onClose = onClose;
+  };
+
+  setRoomIsCreated = (onClose) => {
+    this.onClose = onClose;
+  };
+
+  onCreateRoom = async () => {
+    const roomParams = this.roomParams;
+
+    const { createTag } = this.tagsStore;
+    const { id: currentFolderId } = this.selectedFolderStore;
+    const { updateCurrentFolder } = this.filesActionsStore;
+    const { deleteThirdParty } = this.thirdPartyStore;
+    const { withPaging } = this.settingsStore;
+    const {
+      createRoom,
+      createRoomInThirdpary,
+      addTagsToRoom,
+      calculateRoomLogoParams,
+      uploadRoomLogo,
+      addLogoToRoom,
+    } = this.filesStore;
+
+    const createRoomData = {
+      roomType: roomParams.type,
+      title: roomParams.title || t("Files:NewRoom"),
+    };
+
+    const createTagsData = roomParams.tags
+      .filter((t) => t.isNew)
+      .map((t) => t.name);
+    const addTagsData = roomParams.tags.map((tag) => tag.name);
+
+    const isThirdparty = roomParams.storageLocation.isThirdparty;
+    const storageFolderId = roomParams.storageLocation.storageFolderId;
+    const thirdpartyAccount = roomParams.storageLocation.thirdpartyAccount;
+
+    const uploadLogoData = new FormData();
+    uploadLogoData.append(0, roomParams.icon.uploadedFile);
+
+    try {
+      this.setIsLoading(true);
+      this.setConfirmDialogIsLoading(true);
+
+      // create room
+      let room =
+        isThirdparty && storageFolderId
+          ? await createRoomInThirdpary(storageFolderId, createRoomData)
+          : await createRoom(createRoomData);
+
+      room.isLogoLoading = true;
+
+      // delete thirdparty account if not needed
+      if (!isThirdparty && storageFolderId)
+        await deleteThirdParty(thirdpartyAccount.providerId);
+
+      // create new tags
+      for (let i = 0; i < createTagsData.length; i++)
+        await createTag(createTagsData[i]);
+
+      // add new tags to room
+      if (!!addTagsData.length)
+        room = await addTagsToRoom(room.id, addTagsData);
+
+      // calculate and upload logo to room
+      if (roomParams.icon.uploadedFile) {
+        await uploadRoomLogo(uploadLogoData).then(async (response) => {
+          const url = URL.createObjectURL(roomParams.icon.uploadedFile);
+          const img = new Image();
+          img.onload = async () => {
+            const { x, y, zoom } = roomParams.icon;
+            room = await addLogoToRoom(room.id, {
+              tmpFile: response.data,
+              ...calculateRoomLogoParams(img, x, y, zoom),
+            });
+
+            !withPaging && this.onOpenNewRoom(room.id);
+
+            URL.revokeObjectURL(img.src);
+          };
+          img.src = url;
+        });
+      } else !withPaging && this.onOpenNewRoom(room.id);
+      this.roomIsCreated = true;
+    } catch (err) {
+      toastr.error(err);
+      console.log(err);
+      this.setIsLoading(false);
+      this.setConfirmDialogIsLoading(false);
+      this.onClose();
+      this.roomIsCreated = true;
+    } finally {
+      if (withPaging) await updateCurrentFolder(null, currentFolderId);
+    }
+  };
+
+  onOpenNewRoom = async (id) => {
+    const { fetchFiles } = this.filesStore;
+    const { setView, setIsVisible } = this.infoPanelStore;
+
+    setView("info_members");
+    fetchFiles(id)
+      .then(() => {
+        !isMobile && setIsVisible(true);
+      })
+      .finally(() => {
+        this.setIsLoading(false);
+        this.setConfirmDialogIsLoading(false);
+        this.onClose();
+      });
+  };
+}
+
+export default CreateEditRoomStore;

packages/client/src/store/DialogsStore.js

@@ -56,6 +56,7 @@ class DialogsStore {
   isConnectDialogReconnect = false;
   saveAfterReconnectOAuth = false;
   createRoomDialogVisible = false;
+  createRoomConfirmDialogVisible = false;
 
   constructor(
     authStore,
@@ -302,6 +303,10 @@ class DialogsStore {
     this.createRoomDialogVisible = createRoomDialogVisible;
   };
 
+  setCreateRoomConfirmDialogVisible = (createRoomConfirmDialogVisible) => {
+    this.createRoomConfirmDialogVisible = createRoomConfirmDialogVisible;
+  };
+
   get someDialogIsOpen() {
     return (
       this.sharingPanelVisible ||
@@ -325,7 +330,8 @@ class DialogsStore {
       this.archiveDialogVisible ||
       this.restoreAllPanelVisible ||
       this.inviteUsersWarningDialogVisible ||
-      this.createRoomDialogVisible
+      this.createRoomDialogVisible ||
+      this.createRoomConfirmDialogVisible
     );
   }
 

packages/client/src/store/index.js

@@ -32,6 +32,7 @@ import PeopleStore from "./PeopleStore";
 import OformsStore from "./OformsStore";
 import AccessRightsStore from "./AccessRightsStore";
 import TableStore from "./TableStore";
+import CreateEditRoomStore from "./CreateEditRoomStore";
 
 const oformsStore = new OformsStore(authStore);
 
@@ -146,6 +147,16 @@ authStore.infoPanelStore.peopleStore = peopleStore;
 authStore.infoPanelStore.selectedFolderStore = selectedFolderStore;
 authStore.infoPanelStore.treeFoldersStore = treeFoldersStore;
 
+const createEditRoomStore = new CreateEditRoomStore(
+  filesStore,
+  filesActionsStore,
+  selectedFolderStore,
+  tagsStore,
+  thirdPartyStore,
+  authStore.settingsStore,
+  authStore.infoPanelStore
+);
+
 const store = {
   auth: authStore,
   payments: paymentStore,
@@ -180,6 +191,7 @@ const store = {
   peopleStore,
 
   accessRightsStore,
+  createEditRoomStore,
 };
 
 export default store;

packages/components/modal-dialog/styled-modal-dialog.js

@@ -100,6 +100,8 @@ const StyledBody = styled(Box)`
   padding-bottom: ${(props) =>
     props.currentDisplayType === "aside" || props.hasFooter ? "8px" : "16px"};
 
+  white-space: pre-line;
+
   #modal-scroll > .scroll-body {
     ${isMobile && "margin-right: 0 !important"}
     padding-right: 16px !important;