Merge pull request #1047 from ONLYOFFICE/bugfix/redesign-empty-screen-into-room

Bugfix/redesign empty screen into room

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

@@ -1,4 +1,5 @@
 {
+  "AddMembersDescription": "You can add new team members manually or invite them via link.",
   "All": "All",
   "Archived": "Move to archive",
   "ArchiveAction": "Empty archive",
@@ -50,6 +51,7 @@
   "GoToPersonal": "Go to Personal",
   "Images": "Images",
   "InviteUsers": "Invite users",
+  "InviteUsersInRoom": "Invite users in room",
   "LinkForPortalUsers": "Link for portal users",
   "MarkAsFavorite": "Mark as favorite",
   "MarkRead": "Mark as read",
@@ -89,6 +91,7 @@
   "RemovedFromFavorites": "Removed from favorites",
   "Rename": "Rename",
   "ReviewRooms": "Review",
+  "RoomCreated": "Room created!",
   "RoomEmptyContainerDescription": "Please create the first room.",
   "RoomEmptyContainerDescriptionUser": "Rooms shared with you will appear here",
   "RoomRemoved": "Room removed",

packages/client/src/components/EmptyContainer/EmptyContainer.js

@@ -53,9 +53,18 @@ const EmptyFolderWrapper = styled.div`
       grid-column-gap: 8px;
     }
 
+    .second-description {
+      display: grid;
+      grid-template-columns: 1fr;
+
+      margin: 32px 0 26px !important;
+    }
+
     .flex-wrapper_container {
       display: flex;
       flex-wrap: wrap;
+
+      row-gap: 16px;
     }
 
     .empty-folder_container-image {

packages/client/src/components/EmptyContainer/EmptyFolderContainer.js

@@ -4,6 +4,7 @@ import { withTranslation } from "react-i18next";
 import EmptyContainer from "./EmptyContainer";
 import Link from "@docspace/components/link";
 import Box from "@docspace/components/box";
+import { Text } from "@docspace/components";
 
 const EmptyFolderContainer = ({
   t,
@@ -16,6 +17,10 @@ const EmptyFolderContainer = ({
   isRooms,
   sectionWidth,
   canCreateFiles,
+  canInviteUsers,
+  setIsEmptyPage,
+  onClickInviteUsers,
+  folderId,
 }) => {
   const onBackToParentFolder = () => {
     setIsLoading(true);
@@ -25,6 +30,18 @@ const EmptyFolderContainer = ({
       : fetchFiles(parentId).finally(() => setIsLoading(false));
   };
 
+  React.useEffect(() => {
+    setIsEmptyPage(true);
+
+    return () => setIsEmptyPage(false);
+  }, []);
+
+  const onInviteUsersClick = () => {
+    if (!isRooms) return;
+
+    onClickInviteUsers && onClickInviteUsers(folderId);
+  };
+
   const buttons = canCreateFiles ? (
     <>
       <div className="empty-folder_container-links">
@@ -63,18 +80,45 @@ const EmptyFolderContainer = ({
         </Link>
       </div>
 
-      <div className="empty-folder_container-links">
-        <img
-          className="empty-folder_container_up-image"
-          src="images/up.svg"
-          onClick={onBackToParentFolder}
-          alt="up_icon"
-        />
+      {isRooms ? (
+        canInviteUsers ? (
+          <>
+            <div className="empty-folder_container-links second-description">
+              <Text as="span" color="#6A7378" fontSize="12px" noSelect>
+                {t("AddMembersDescription")}
+              </Text>
+            </div>
 
-        <Link onClick={onBackToParentFolder} {...linkStyles}>
-          {t("BackToParentFolderButton")}
-        </Link>
-      </div>
+            <div className="empty-folder_container-links">
+              <img
+                className="empty-folder_container_up-image"
+                src="images/plus.svg"
+                onClick={onInviteUsersClick}
+                alt="up_icon"
+              />
+
+              <Link onClick={onInviteUsersClick} {...linkStyles}>
+                {t("InviteUsersInRoom")}
+              </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>
+      )}
     </>
   ) : (
     <></>
@@ -82,14 +126,18 @@ const EmptyFolderContainer = ({
 
   return (
     <EmptyContainer
-      headerText={t("EmptyScreenFolder")}
+      headerText={isRooms ? t("RoomCreated") : t("EmptyScreenFolder")}
       style={{ gridColumnGap: "39px" }}
       descriptionText={
         canCreateFiles
           ? t("EmptyFolderDecription")
           : t("EmptyFolderDescriptionUser")
       }
-      imageSrc="/static/images/empty_screen_alt.svg"
+      imageSrc={
+        isRooms
+          ? "images/empty_screen_corporate.png"
+          : "/static/images/empty_screen_alt.svg"
+      }
       buttons={buttons}
       sectionWidth={sectionWidth}
       isEmptyFolderContainer={true}
@@ -98,9 +146,19 @@ const EmptyFolderContainer = ({
 };
 
 export default inject(
-  ({ accessRightsStore, filesStore, selectedFolderStore }) => {
-    const { fetchFiles, fetchRooms } = filesStore;
-    const { navigationPath, parentId } = selectedFolderStore;
+  ({
+    accessRightsStore,
+    filesStore,
+    selectedFolderStore,
+    contextOptionsStore,
+  }) => {
+    const { fetchFiles, fetchRooms, setIsEmptyPage } = filesStore;
+    const {
+      navigationPath,
+      parentId,
+      access,
+      id: folderId,
+    } = selectedFolderStore;
 
     let isRootRoom, isRoom, id;
     if (navigationPath && navigationPath.length) {
@@ -111,7 +169,11 @@ export default inject(
       id = elem.id;
     }
 
-    const { canCreateFiles } = accessRightsStore;
+    const { canCreateFiles, canInviteUserInRoom } = accessRightsStore;
+
+    const { onClickInviteUsers } = contextOptionsStore;
+
+    const canInviteUsers = canInviteUserInRoom({ access });
 
     return {
       fetchFiles,
@@ -120,6 +182,10 @@ export default inject(
       parentId: id ?? parentId,
       isRooms: isRoom || isRootRoom,
       canCreateFiles,
+      canInviteUsers,
+      setIsEmptyPage,
+      onClickInviteUsers,
+      folderId,
     };
   }
 )(withTranslation(["Files", "Translations"])(observer(EmptyFolderContainer)));