Merge branch 'feature/workspaces' of github.com:ONLYOFFICE/AppServer into feature/workspaces

products/ASC.Files/Client/src/components/pages/Home/Section/Body/EmptyContainer/EmptyFilterContainer.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import EmptyContainer from "./EmptyContainer";
+import FilesFilter from "@appserver/common/api/files/filter";
+import Link from "@appserver/components/link";
+import IconButton from "@appserver/components/icon-button";
+import toastr from "studio/toastr";
+
+const EmptyFilterContainer = ({
+  t,
+  selectedFolderId,
+  setIsLoading,
+  fetchFiles,
+  linkStyles,
+}) => {
+  const subheadingText = t("EmptyFilterSubheadingText");
+  const descriptionText = t("EmptyFilterDescriptionText");
+
+  onResetFilter = () => {
+    setIsLoading(true);
+    const newFilter = FilesFilter.getDefault();
+    fetchFiles(selectedFolderId, newFilter)
+      .catch((err) => toastr.error(err))
+      .finally(() => setIsLoading(false));
+  };
+
+  const buttons = (
+    <div className="empty-folder_container-links">
+      <IconButton
+        className="empty-folder_container-icon"
+        size="12"
+        onClick={onResetFilter}
+        iconName="static/images/cross.react.svg"
+        isFill
+        color="#657077"
+      />
+      <Link onClick={onResetFilter} {...linkStyles}>
+        {t("ClearButton")}
+      </Link>
+    </div>
+  );
+
+  return (
+    <EmptyContainer
+      headerText={t("Filter")}
+      subheadingText={subheadingText}
+      descriptionText={descriptionText}
+      imageSrc="images/empty_screen_filter.png"
+      buttons={buttons}
+    />
+  );
+};
+
+export default inject(
+  ({ initFilesStore, filesStore, selectedFolderStore }) => ({
+    fetchFiles: filesStore.fetchFiles,
+    selectedFolderId: selectedFolderStore.id,
+    setIsLoading: initFilesStore.setIsLoading,
+  })
+)(withTranslation("Home")(observer(EmptyFilterContainer)));

products/ASC.Files/Client/src/components/pages/Home/Section/Body/EmptyContainer/EmptyFolderContainer.js

@@ -0,0 +1,91 @@
+import { inject, observer } from "mobx-react";
+import React from "react";
+import { withTranslation } from "react-i18next";
+import EmptyContainer from "./EmptyContainer";
+import Link from "@appserver/components/link";
+import Box from "@appserver/components/box";
+
+const EmptyFolderContainer = ({
+  t,
+  onCreate,
+  filter,
+  fetchFiles,
+  setIsLoading,
+  parentId,
+  linkStyles,
+}) => {
+  const onBackToParentFolder = () => {
+    const newFilter = filter.clone();
+    setIsLoading(true);
+    fetchFiles(parentId, newFilter).finally(() => setIsLoading(false));
+  };
+
+  const buttons = (
+    <>
+      <div className="empty-folder_container-links">
+        <img
+          className="empty-folder_container_plus-image"
+          src="images/plus.svg"
+          data-format="docx"
+          onClick={onCreate}
+          alt="plus_icon"
+        />
+        <Box className="flex-wrapper_container">
+          <Link data-format="docx" onClick={onCreate} {...linkStyles}>
+            {t("Document")},
+          </Link>
+          <Link data-format="xlsx" onClick={onCreate} {...linkStyles}>
+            {t("Spreadsheet")},
+          </Link>
+          <Link data-format="pptx" onClick={onCreate} {...linkStyles}>
+            {t("Presentation")}
+          </Link>
+        </Box>
+      </div>
+
+      <div className="empty-folder_container-links">
+        <img
+          className="empty-folder_container_plus-image"
+          src="images/plus.svg"
+          onClick={onCreate}
+          alt="plus_icon"
+        />
+        <Link {...linkStyles} onClick={onCreate}>
+          {t("Folder")}
+        </Link>
+      </div>
+
+      <div className="empty-folder_container-links">
+        <img
+          className="empty-folder_container_up-image"
+          src="images/up.svg"
+          onClick={onBackToParentFolder}
+          alt="up_icon"
+        />
+
+        <Link onClick={onBackToParentFolder} {...linkStyles}>
+          {t("BackToParentFolderButton")}
+        </Link>
+      </div>
+    </>
+  );
+
+  return (
+    <EmptyContainer
+      headerText={t("EmptyFolderHeader")}
+      imageSrc="images/empty_screen.png"
+      buttons={buttons}
+    />
+  );
+};
+
+export default inject(({ initFilesStore, filesStore, selectedFolderStore }) => {
+  const { filter, fetchFiles } = filesStore;
+
+  return {
+    filter,
+    fetchFiles,
+    setIsLoading: initFilesStore.setIsLoading,
+    parentId: selectedFolderStore.parentId,
+  };
+})(withTranslation("Home")(observer(EmptyFolderContainer)));

products/ASC.Files/Client/src/components/pages/Home/Section/Body/EmptyContainer/RootFolderContainer.js

@@ -0,0 +1,223 @@
+import React from "react";
+import { FolderType } from "@appserver/common/constants";
+import { inject, observer } from "mobx-react";
+import { withTranslation, Trans } from "react-i18next";
+import EmptyContainer from "./EmptyContainer";
+import Link from "@appserver/components/link";
+import Text from "@appserver/components/text";
+import Box from "@appserver/components/box";
+
+const RootFolderContainer = (props) => {
+  const {
+    t,
+    isPrivacyFolder,
+    isDesktop,
+    isEncryptionSupport,
+    organizationName,
+    privacyInstructions,
+    title,
+    onCreate,
+    myFolderId,
+    filter,
+    fetchFiles,
+    setIsLoading,
+    rootFolderType,
+    linkStyles,
+  } = props;
+  const subheadingText = t("SubheadingEmptyText");
+  const myDescription = t("MyEmptyContainerDescription");
+  const shareDescription = t("SharedEmptyContainerDescription");
+  const commonDescription = t("CommonEmptyContainerDescription");
+  const trashDescription = t("TrashEmptyContainerDescription");
+  const favoritesDescription = t("FavoritesEmptyContainerDescription");
+  const recentDescription = t("RecentEmptyContainerDescription");
+
+  const privateRoomHeader = t("PrivateRoomHeader");
+  const privacyIcon = <img alt="" src="images/privacy.svg" />;
+  const privateRoomDescTranslations = [
+    t("PrivateRoomDescriptionSafest"),
+    t("PrivateRoomDescriptionSecure"),
+    t("PrivateRoomDescriptionEncrypted"),
+    t("PrivateRoomDescriptionUnbreakable"),
+  ];
+
+  const onGoToMyDocuments = () => {
+    const newFilter = filter.clone();
+    setIsLoading(true);
+    fetchFiles(myFolderId, newFilter).finally(() => setIsLoading(false));
+  };
+
+  const getEmptyFolderProps = () => {
+    switch (rootFolderType) {
+      case FolderType.USER:
+        return {
+          descriptionText: myDescription,
+          imageSrc: "images/empty_screen.png",
+          buttons: commonButtons,
+        };
+      case FolderType.SHARE:
+        return {
+          descriptionText: shareDescription,
+          imageSrc: "images/empty_screen_forme.png",
+        };
+      case FolderType.COMMON:
+        return {
+          descriptionText: commonDescription,
+          imageSrc: "images/empty_screen_corporate.png",
+          buttons: commonButtons,
+        };
+      case FolderType.Favorites:
+        return {
+          descriptionText: favoritesDescription,
+          imageSrc: "images/empty_screen_favorites.png",
+        };
+      case FolderType.Recent:
+        return {
+          descriptionText: recentDescription,
+          imageSrc: "images/empty_screen_recent.png",
+        };
+      case FolderType.Privacy:
+        return {
+          descriptionText: privateRoomDescription,
+          imageSrc: "images/empty_screen_privacy.png",
+          buttons: isDesktop && isEncryptionSupport && commonButtons,
+        };
+      case FolderType.TRASH:
+        return {
+          descriptionText: trashDescription,
+          imageSrc: "images/empty_screen_trash.png",
+          buttons: trashButtons,
+        };
+      default:
+        break;
+    }
+  };
+
+  const privateRoomDescription = (
+    <>
+      <Text fontSize="15px" as="div">
+        {privateRoomDescTranslations.map((el) => (
+          <Box
+            displayProp="flex"
+            alignItems="center"
+            paddingProp="0 0 13px 0"
+            key={el}
+          >
+            <Box paddingProp="0 7px 0 0">{privacyIcon}</Box>
+            <Box>{el}</Box>
+          </Box>
+        ))}
+      </Text>
+      {!isDesktop && (
+        <Text fontSize="12px">
+          <Trans i18nKey="PrivateRoomSupport" ns="Home">
+            Work in Private Room is available via {{ organizationName }}
+            desktop app.
+            <Link isBold isHovered color="#116d9d" href={privacyInstructions}>
+              Instructions
+            </Link>
+          </Trans>
+        </Text>
+      )}
+    </>
+  );
+
+  const commonButtons = (
+    <span>
+      <div className="empty-folder_container-links">
+        <img
+          className="empty-folder_container_plus-image"
+          src="images/plus.svg"
+          data-format="docx"
+          onClick={onCreate}
+          alt="plus_icon"
+        />
+        <Box className="flex-wrapper_container">
+          <Link data-format="docx" onClick={onCreate} {...linkStyles}>
+            {t("Document")},
+          </Link>
+          <Link data-format="xlsx" onClick={onCreate} {...linkStyles}>
+            {t("Spreadsheet")},
+          </Link>
+          <Link data-format="pptx" onClick={onCreate} {...linkStyles}>
+            {t("Presentation")}
+          </Link>
+        </Box>
+      </div>
+
+      <div className="empty-folder_container-links">
+        <img
+          className="empty-folder_container_plus-image"
+          src="images/plus.svg"
+          onClick={onCreate}
+          alt="plus_icon"
+        />
+        <Link {...linkStyles} onClick={onCreate}>
+          {t("Folder")}
+        </Link>
+      </div>
+    </span>
+  );
+
+  const trashButtons = (
+    <div className="empty-folder_container-links">
+      <img
+        className="empty-folder_container_up-image"
+        src="images/empty_screen_people.svg"
+        width="12px"
+        alt=""
+        onClick={onGoToMyDocuments}
+      />
+      <Link onClick={onGoToMyDocuments} {...linkStyles}>
+        {t("GoToMyButton")}
+      </Link>
+    </div>
+  );
+
+  const headerText = isPrivacyFolder ? privateRoomHeader : title;
+  const subheadingTextProp = isPrivacyFolder ? {} : { subheadingText };
+  const emptyFolderProps = getEmptyFolderProps();
+
+  return (
+    <EmptyContainer
+      headerText={headerText}
+      {...subheadingTextProp}
+      {...emptyFolderProps}
+    />
+  );
+};
+
+export default inject(
+  ({
+    auth,
+    initFilesStore,
+    filesStore,
+    treeFoldersStore,
+    selectedFolderStore,
+  }) => {
+    const {
+      isDesktopClient,
+      isEncryptionSupport,
+      organizationName,
+    } = auth.settingsStore;
+
+    const { privacyInstructions, setIsLoading } = initFilesStore;
+    const { filter, fetchFiles } = filesStore;
+    const { title, rootFolderType } = selectedFolderStore;
+    const { isPrivacyFolder, myFolderId } = treeFoldersStore;
+
+    return {
+      isPrivacyFolder,
+      isDesktop: isDesktopClient,
+      isEncryptionSupport,
+      organizationName,
+      privacyInstructions,
+      title,
+      myFolderId,
+      filter,
+      fetchFiles,
+      setIsLoading,
+      rootFolderType,
+    };
+  }
+)(withTranslation("Home")(observer(RootFolderContainer)));

products/ASC.Files/Client/src/components/pages/Home/Section/Body/EmptyContainer/index.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { observer, inject } from "mobx-react";
+import RootFolderContainer from "./RootFolderContainer";
+import EmptyFilterContainer from "./EmptyFilterContainer";
+import EmptyFolderContainer from "./EmptyFolderContainer";
+import { FileAction } from "@appserver/common/constants";
+
+const linkStyles = {
+  isHovered: true,
+  type: "action",
+  fontWeight: "600",
+  color: "#555f65",
+  className: "empty-folder_link",
+  display: "flex",
+};
+
+const EmptyContainer = ({
+  isFiltered,
+  setAction,
+  isPrivacyFolder,
+  parentId,
+}) => {
+  const onCreate = (e) => {
+    const format = e.currentTarget.dataset.format || null;
+    setAction({
+      type: FileAction.Create,
+      extension: format,
+      id: -1,
+    });
+  };
+
+  return isFiltered ? (
+    <EmptyFilterContainer linkStyles={linkStyles} />
+  ) : parentId === 0 || (isPrivacyFolder && !isEncryptionSupport) ? (
+    <RootFolderContainer onCreate={onCreate} linkStyles={linkStyles} />
+  ) : (
+    <EmptyFolderContainer onCreate={onCreate} linkStyles={linkStyles} />
+  );
+};
+
+export default inject(
+  ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
+    const {
+      authorType,
+      search,
+      withSubfolders,
+      filterType,
+    } = filesStore.filter;
+    const isFiltered = authorType || search || !withSubfolders || filterType;
+
+    return {
+      isEncryptionSupport: auth.settingsStore.isEncryptionSupport,
+      isFiltered,
+      setAction: filesStore.fileActionStore.setAction,
+      isPrivacyFolder: treeFoldersStore.isPrivacyFolder,
+      parentId: selectedFolderStore.parentId,
+    };
+  }
+)(observer(EmptyContainer));

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -1,30 +1,16 @@
 import React from "react";
 import { withRouter } from "react-router";
-import { withTranslation, Trans } from "react-i18next";
+import { withTranslation } from "react-i18next";
 import styled from "styled-components";
-import Link from "@appserver/components/link";
-import IconButton from "@appserver/components/icon-button";
-import Box from "@appserver/components/box";
-import Text from "@appserver/components/text";
-import EmptyFolderContainer from "./EmptyFolderContainer";
-import FilesFilter from "@appserver/common/api/files/filter";
-import { FileAction } from "@appserver/common/constants";
-import toastr from "studio/toastr";
 import Loaders from "@appserver/common/components/Loaders";
 import { isMobile } from "react-device-detect";
 import { observer, inject } from "mobx-react";
 import FilesRowContainer from "./FilesRow/FilesRowContainer";
 import FilesTileContainer from "./FilesTile/FilesTileContainer";
+import EmptyContainer from "./EmptyContainer";
 
-const linkStyles = {
-  isHovered: true,
-  type: "action",
-  fontWeight: "600",
-  color: "#555f65",
-  className: "empty-folder_link",
-  display: "flex",
-};
 const backgroundDragColor = "#EFEFB2";
+
 const backgroundDragEnterColor = "#F8F7BF";
 
 const CustomTooltip = styled.div`
@@ -112,315 +98,6 @@ class SectionBodyContent extends React.Component {
     }
   }
 
-  onCreate = (e) => {
-    const format = e.currentTarget.dataset.format || null;
-    this.props.setAction({
-      type: FileAction.Create,
-      extension: format,
-      id: -1,
-    });
-  };
-
-  onResetFilter = () => {
-    const { selectedFolderId, setIsLoading, fetchFiles } = this.props;
-    setIsLoading(true);
-    const newFilter = FilesFilter.getDefault();
-    fetchFiles(selectedFolderId, newFilter)
-      .catch((err) => toastr.error(err))
-      .finally(() => setIsLoading(false));
-  };
-
-  onGoToMyDocuments = () => {
-    const { filter, myDocumentsId, setIsLoading, fetchFiles } = this.props;
-    const newFilter = filter.clone();
-    setIsLoading(true);
-    fetchFiles(myDocumentsId, newFilter).finally(() => setIsLoading(false));
-  };
-
-  onBackToParentFolder = () => {
-    const { filter, parentId, setIsLoading, fetchFiles } = this.props;
-    const newFilter = filter.clone();
-    setIsLoading(true);
-    fetchFiles(parentId, newFilter).finally(() => setIsLoading(false));
-  };
-
-  renderEmptyRootFolderContainer = () => {
-    const {
-      isMy,
-      isShare,
-      isCommon,
-      isRecycleBin,
-      isFavorites,
-      isRecent,
-      isPrivacy,
-      isDesktop,
-      isEncryptionSupport,
-      organizationName,
-      privacyInstructions,
-      title,
-      t,
-    } = this.props;
-    const subheadingText = t("SubheadingEmptyText");
-    const myDescription = t("MyEmptyContainerDescription");
-    const shareDescription = t("SharedEmptyContainerDescription");
-    const commonDescription = t("CommonEmptyContainerDescription");
-    const trashDescription = t("TrashEmptyContainerDescription");
-    const favoritesDescription = t("FavoritesEmptyContainerDescription");
-    const recentDescription = t("RecentEmptyContainerDescription");
-
-    const privateRoomHeader = t("PrivateRoomHeader");
-    const privacyIcon = <img alt="" src="images/privacy.svg" />;
-    const privateRoomDescTranslations = [
-      t("PrivateRoomDescriptionSafest"),
-      t("PrivateRoomDescriptionSecure"),
-      t("PrivateRoomDescriptionEncrypted"),
-      t("PrivateRoomDescriptionUnbreakable"),
-    ];
-    const privateRoomDescription = (
-      <>
-        <Text fontSize="15px" as="div">
-          {privateRoomDescTranslations.map((el) => (
-            <Box
-              displayProp="flex"
-              alignItems="center"
-              paddingProp="0 0 13px 0"
-              key={el}
-            >
-              <Box paddingProp="0 7px 0 0">{privacyIcon}</Box>
-              <Box>{el}</Box>
-            </Box>
-          ))}
-        </Text>
-        {!isDesktop && (
-          <Text fontSize="12px">
-            <Trans i18nKey="PrivateRoomSupport" ns="Home">
-              Work in Private Room is available via {{ organizationName }}
-              desktop app.
-              <Link isBold isHovered color="#116d9d" href={privacyInstructions}>
-                Instructions
-              </Link>
-            </Trans>
-          </Text>
-        )}
-      </>
-    );
-
-    const commonButtons = (
-      <span>
-        <div className="empty-folder_container-links">
-          <img
-            className="empty-folder_container_plus-image"
-            src="images/plus.svg"
-            data-format="docx"
-            onClick={this.onCreate}
-            alt="plus_icon"
-          />
-          <Box className="flex-wrapper_container">
-            <Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
-              {t("Document")},
-            </Link>
-            <Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
-              {t("Spreadsheet")},
-            </Link>
-            <Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
-              {t("Presentation")}
-            </Link>
-          </Box>
-        </div>
-
-        <div className="empty-folder_container-links">
-          <img
-            className="empty-folder_container_plus-image"
-            src="images/plus.svg"
-            onClick={this.onCreate}
-            alt="plus_icon"
-          />
-          <Link {...linkStyles} onClick={this.onCreate}>
-            {t("Folder")}
-          </Link>
-        </div>
-      </span>
-    );
-
-    const trashButtons = (
-      <div className="empty-folder_container-links">
-        <img
-          className="empty-folder_container_up-image"
-          src="images/empty_screen_people.svg"
-          width="12px"
-          alt=""
-          onClick={this.onGoToMyDocuments}
-        />
-        <Link onClick={this.onGoToMyDocuments} {...linkStyles}>
-          {t("GoToMyButton")}
-        </Link>
-      </div>
-    );
-
-    if (isMy) {
-      return (
-        <EmptyFolderContainer
-          headerText={title}
-          subheadingText={subheadingText}
-          descriptionText={myDescription}
-          imageSrc="images/empty_screen.png"
-          buttons={commonButtons}
-        />
-      );
-    } else if (isShare) {
-      return (
-        <EmptyFolderContainer
-          headerText={title}
-          subheadingText={subheadingText}
-          descriptionText={shareDescription}
-          imageSrc="images/empty_screen_forme.png"
-        />
-      );
-    } else if (isCommon) {
-      return (
-        <EmptyFolderContainer
-          headerText={title}
-          subheadingText={subheadingText}
-          descriptionText={commonDescription}
-          imageSrc="images/empty_screen_corporate.png"
-          buttons={commonButtons}
-        />
-      );
-    } else if (isRecycleBin) {
-      return (
-        <EmptyFolderContainer
-          headerText={title}
-          subheadingText={subheadingText}
-          descriptionText={trashDescription}
-          imageSrc="images/empty_screen_trash.png"
-          buttons={trashButtons}
-        />
-      );
-    } else if (isFavorites) {
-      return (
-        <EmptyFolderContainer
-          headerText={title}
-          subheadingText={subheadingText}
-          descriptionText={favoritesDescription}
-          imageSrc="images/empty_screen_favorites.png"
-        />
-      );
-    } else if (isRecent) {
-      return (
-        <EmptyFolderContainer
-          headerText={title}
-          subheadingText={subheadingText}
-          descriptionText={recentDescription}
-          imageSrc="images/empty_screen_recent.png"
-        />
-      );
-    } else if (isPrivacy) {
-      return (
-        <EmptyFolderContainer
-          headerText={privateRoomHeader}
-          descriptionText={privateRoomDescription}
-          imageSrc="images/empty_screen_privacy.png"
-          buttons={isDesktop && isEncryptionSupport && commonButtons}
-        />
-      );
-    } else {
-      return null;
-    }
-  };
-
-  renderEmptyFolderContainer = () => {
-    const { t } = this.props;
-    const buttons = (
-      <>
-        <div className="empty-folder_container-links">
-          <img
-            className="empty-folder_container_plus-image"
-            src="images/plus.svg"
-            data-format="docx"
-            onClick={this.onCreate}
-            alt="plus_icon"
-          />
-          <Box className="flex-wrapper_container">
-            <Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
-              {t("Document")},
-            </Link>
-            <Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
-              {t("Spreadsheet")},
-            </Link>
-            <Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
-              {t("Presentation")}
-            </Link>
-          </Box>
-        </div>
-
-        <div className="empty-folder_container-links">
-          <img
-            className="empty-folder_container_plus-image"
-            src="images/plus.svg"
-            onClick={this.onCreate}
-            alt="plus_icon"
-          />
-          <Link {...linkStyles} onClick={this.onCreate}>
-            {t("Folder")}
-          </Link>
-        </div>
-
-        <div className="empty-folder_container-links">
-          <img
-            className="empty-folder_container_up-image"
-            src="images/up.svg"
-            onClick={this.onBackToParentFolder}
-            alt="up_icon"
-          />
-
-          <Link onClick={this.onBackToParentFolder} {...linkStyles}>
-            {t("BackToParentFolderButton")}
-          </Link>
-        </div>
-      </>
-    );
-
-    return (
-      <EmptyFolderContainer
-        headerText={t("EmptyFolderHeader")}
-        imageSrc="images/empty_screen.png"
-        buttons={buttons}
-      />
-    );
-  };
-
-  renderEmptyFilterContainer = () => {
-    const { t } = this.props;
-    const subheadingText = t("EmptyFilterSubheadingText");
-    const descriptionText = t("EmptyFilterDescriptionText");
-
-    const buttons = (
-      <div className="empty-folder_container-links">
-        <IconButton
-          className="empty-folder_container-icon"
-          size="12"
-          onClick={this.onResetFilter}
-          iconName="static/images/cross.react.svg"
-          isFill
-          color="#657077"
-        />
-        <Link onClick={this.onResetFilter} {...linkStyles}>
-          {t("ClearButton")}
-        </Link>
-      </div>
-    );
-
-    return (
-      <EmptyFolderContainer
-        headerText={t("Filter")}
-        subheadingText={subheadingText}
-        descriptionText={descriptionText}
-        imageSrc="images/empty_screen_filter.png"
-        buttons={buttons}
-      />
-    );
-  };
-
   onDragStart = (e) => {
     if (e.dataTransfer.dropEffect === "none") {
       this.state.canDrag && this.setState({ canDrag: false });
@@ -712,18 +389,14 @@ class SectionBodyContent extends React.Component {
     //console.log("Files Home SectionBodyContent render", this.props);
 
     const {
-      parentId,
       selection,
       fileActionId,
-      isPrivacy,
-      isEncryptionSupport,
       dragging,
       viewAs,
       t,
       isMobile,
       firstLoad,
       tooltipValue,
-      filter,
       isLoading,
       isEmptyFilesList,
     } = this.props;
@@ -738,21 +411,12 @@ class SectionBodyContent extends React.Component {
         : "";
     }
 
-    const { authorType, search, withSubfolders, filterType } = filter;
-    const isFiltered = authorType || search || !withSubfolders || filterType;
-
     return (!fileActionId && isEmptyFilesList) || null ? (
-      firstLoad ? (
+      firstLoad || (isMobile && isLoading) ? (
         <Loaders.Rows />
-      ) : isFiltered ? (
-        this.renderEmptyFilterContainer()
-      ) : parentId === 0 || (isPrivacy && !isEncryptionSupport) ? (
-        this.renderEmptyRootFolderContainer()
       ) : (
-        this.renderEmptyFolderContainer()
+        <EmptyContainer />
       )
-    ) : isMobile && isLoading ? (
-      <Loaders.Rows />
     ) : (
       <>
         <CustomTooltip ref={this.tooltipRef}>{fileMoveTooltip}</CustomTooltip>
@@ -769,85 +433,50 @@ export default inject(
     filesStore,
     uploadDataStore,
     treeFoldersStore,
-    selectedFolderStore,
     filesActionsStore,
   }) => {
-    const { secondaryProgressDataStore } = uploadDataStore;
-    const {
-      isEncryptionSupport,
-      organizationName,
-      isDesktopClient,
-    } = auth.settingsStore;
     const {
       dragging,
       setDragging,
       isLoading,
-      setIsLoading,
       viewAs,
       dragItem,
-      privacyInstructions,
       tooltipValue,
     } = initFilesStore;
     const {
       firstLoad,
-      fetchFiles,
       selection,
-      filter,
       fileActionStore,
       iconOfDraggedFile,
       filesList,
     } = filesStore;
 
+    const { isShareFolder, isCommonFolder } = treeFoldersStore;
+    const { id: fileActionId } = fileActionStore;
     const {
-      myFolderId,
+      setSecondaryProgressBarData,
-      isMyFolder,
+    } = uploadDataStore.secondaryProgressDataStore;
-      isRecycleBinFolder,
+    const { copyToAction, moveToAction } = filesActionsStore;
-      isShareFolder,
-      isFavoritesFolder,
-      isCommonFolder,
-      isRecentFolder,
-      isPrivacyFolder,
-    } = treeFoldersStore;
-
-    const { id: fileActionId, setAction } = fileActionStore;
-    const { setSecondaryProgressBarData } = secondaryProgressDataStore;
 
     return {
       isAdmin: auth.isAdmin,
-      isEncryptionSupport,
-      organizationName,
-      isDesktop: isDesktopClient,
       dragging,
       fileActionId,
       firstLoad,
-      title: selectedFolderStore.title,
-      parentId: selectedFolderStore.parentId,
-      selectedFolderId: selectedFolderStore.id,
       selection,
-      isRecycleBin: isRecycleBinFolder,
-      myDocumentsId: myFolderId,
       isShare: isShareFolder,
-      isFavorites: isFavoritesFolder,
       isCommon: isCommonFolder,
-      isRecent: isRecentFolder,
-      isMy: isMyFolder,
-      isPrivacy: isPrivacyFolder,
-      filter,
       viewAs,
       dragItem,
-      privacyInstructions,
       iconOfDraggedFile,
       tooltipValue,
       isLoading,
       isEmptyFilesList: filesList.length <= 0,
 
       setDragging,
-      setAction,
-      setIsLoading,
-      fetchFiles,
       setSecondaryProgressBarData,
-      copyToAction: filesActionsStore.copyToAction,
+      copyToAction,
-      moveToAction: filesActionsStore.moveToAction,
+      moveToAction,
     };
   }
 )(withRouter(withTranslation("Home")(observer(SectionBodyContent))));

products/ASC.Files/Client/src/components/pages/Home/index.js

@@ -23,7 +23,6 @@ import {
 } from "./Section";
 
 import { ConvertDialog } from "../../dialogs";
-import { ChangeOwnerPanel } from "../../panels";
 import { getFilterByLocation } from "../../../helpers/converters";
 import Panels from "./Panels";
 import MediaViewer from "./MediaViewer";

products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedClouds.js

@@ -10,7 +10,7 @@ import Row from "@appserver/components/row";
 import RowContainer from "@appserver/components/row-container";
 
 import { withTranslation } from "react-i18next";
-import EmptyFolderContainer from "../../../Home/Section/Body/EmptyFolderContainer";
+import EmptyFolderContainer from "../../../Home/Section/Body/EmptyContainer/EmptyContainer";
 import { Trans } from "react-i18next";
 import { DeleteThirdPartyDialog, ConnectDialog } from "../../../../dialogs";
 import BoxIcon from "../../../../../../public/images/icon_box.react.svg";

products/ASC.Files/Client/src/store/FilesStore.js

@@ -781,7 +781,6 @@ class FilesStore {
     if (this.filesList) {
       this.filesList.forEach((file) => {
         if (file.canOpenPlayer) {
-          debugger;
           playlist.push({
             id: id,
             fileId: file.id,

products/ASC.Files/Client/src/store/TreeFoldersStore.js

@@ -15,9 +15,6 @@ class TreeFoldersStore {
       expandedKeys: observable,
 
       myFolderId: computed,
-      //shareFolderId: computed,
-      //favoritesFolderId: computed,
-      //recentFolderId: computed,
       commonFolderId: computed,
 
       myFolder: computed,

web/ASC.Web.Client/src/Shell.jsx

@@ -12,7 +12,9 @@ import Layout from "./components/Layout";
 import ScrollToTop from "./components/Layout/ScrollToTop";
 import history from "@appserver/common/history";
 import toastr from "studio/toastr";
-import RectangleLoader from "@appserver/common/components/Loaders/RectangleLoader";
+import Loader from "@appserver/components/loader";
+import Grid from "@appserver/components/grid";
+import PageLayout from "@appserver/common/components/PageLayout";
 import { updateTempContent } from "@appserver/common/utils";
 import { Provider as MobxProvider } from "mobx-react";
 import ThemeProvider from "@appserver/components/theme-provider";
@@ -33,14 +35,14 @@ const About = React.lazy(() => import("./components/pages/About"));
 const Settings = React.lazy(() => import("./components/pages/Settings"));
 const ComingSoon = React.lazy(() => import("./components/pages/ComingSoon"));
 
-const LoadingBody = styled.div`
-  width: 100vw;
-  padding: 20px;
-`;
 const LoadingShell = () => (
-  <LoadingBody>
+  <PageLayout>
-    <RectangleLoader height="100%" width="100%" />
+    <PageLayout.SectionBody>
-  </LoadingBody>
+      <Box displayProp="flex" alignItems="center" justifyContent="center">
+        <Loader type="rombs" size="40px" />
+      </Box>
+    </PageLayout.SectionBody>
+  </PageLayout>
 );
 
 const SettingsRoute = (props) => (

yarn.lock

@@ -4272,9 +4272,9 @@ acorn@^7.1.0, acorn@^7.1.1:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.0.4:
-  version "8.0.5"
+  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.0.5.tgz#a3bfb872a74a6a7f661bc81b9849d9cac12601b7"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
-  integrity sha512-v+DieK/HJkJOpFBETDJioequtc3PfxsWMaxIdIwujtF7FEV/MAyDQLlm6/zPvr7Mix07mLh6ccVwIsloceodlg==
+  integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
 
 add-dom-event-listener@^1.1.0:
   version "1.1.0"
@@ -9687,9 +9687,9 @@ i18next-http-backend@^1.1.0, i18next-http-backend@^1.1.1:
     node-fetch "2.6.1"
 
 i18next@^19.8.4, i18next@^19.9.1:
-  version "19.9.1"
+  version "19.9.2"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.1.tgz#7a072b75daf677aa51fd4ce55214f21702af3ffd"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.2.tgz#ea5a124416e3c5ab85fddca2c8e3c3669a8da397"
-  integrity sha512-9Azzyb3DvMJUMd7sPhwVEs6PQcogvdHmLQTjMQ+P+h3XwW4O66/8lgZTmYShgkjPOCqTw4Fwl5LOp/VhZgPo5A==
+  integrity sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==
   dependencies:
     "@babel/runtime" "^7.12.0"