Client:EmptyView Added empty screen for collaboration room

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

@@ -1,4 +1,5 @@
 {
+  "CollaborationRoomEmptyTitle": "Welcome to the Collaboration room",
   "CollaboratorEmptyTitle": "The room is empty.",
   "CreateDocument": "Create a new document",
   "CreateDocumentDescription": "Take advantage of vast word processing functionality.",
@@ -16,6 +17,7 @@
   "FormFolderDefaultUserDescription": "The forms uploaded by the administrators will be appeared here.",
   "FormFolderDefaultUserTitle": "No forms in this folder yet",
   "FormRoomEmptyTitle": "Welcome to the Form filling room",
+  "InviteUsersCollaborationOptionDescription": "Add members for joint editing in the room.",
   "InviteUsersOptionDescription": "Add portal members for joint editing in the room",
   "InviteUsersOptionTitle": "Inviting Attendees",
   "PublicRoomEmptyTitle": "Welcome to the Public room",

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

@@ -28,11 +28,8 @@ import { useCallback, useMemo } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 
-import { FolderType, RoomsType } from "@docspace/shared/enums";
-
 import EmptyContainer from "./EmptyContainer";
 import CommonButtons from "./sub-components/CommonButtons";
-import EmptyViewContainer from "./sub-components/EmptyViewContainer/EmptyViewContainer";
 import {
   getDescriptionText,
   getEmptyScreenType,
@@ -79,17 +76,6 @@ const EmptyFolderContainer = ({
     [t, canCreateFiles, type],
   );
 
-  return (
-    <EmptyViewContainer
-      type={roomType}
-      folderType={type}
-      isFolder={!isRoom}
-      folderId={folderId}
-      parentRoomType={parentRoomType}
-      isArchiveFolderRoot={isArchiveFolderRoot}
-    />
-  );
-
   return (
     <EmptyContainer
       headerText={headerText}

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

@@ -31,9 +31,10 @@ import { Events, FileExtensions } from "@docspace/shared/enums";
 
 import RootFolderContainer from "./RootFolderContainer";
 import EmptyFilterContainer from "./EmptyFilterContainer";
-import EmptyFolderContainer from "./EmptyFolderContainer";
 import RoomNoAccessContainer from "./RoomNoAccessContainer";
 
+import EmptyViewContainer from "./sub-components/EmptyViewContainer/EmptyViewContainer";
+
 const linkStyles = {
   isHovered: true,
   type: "action",
@@ -56,9 +57,15 @@ const EmptyContainer = ({
   isRoot,
   isPublicRoom,
   isEmptyPage,
+  roomType,
+  parentRoomType,
+  folderId,
+  isArchiveFolderRoot,
 }) => {
   //const location = useLocation();
 
+  const isRoom = !!roomType;
+
   linkStyles.color = theme.filesEmptyContainer.linkColor;
 
   const onCreate = (e) => {
@@ -101,22 +108,26 @@ const EmptyContainer = ({
 
   //isLoading && location?.state ? location.state?.isRoot : parentId === 0;
 
-  return isFiltered ? (
+  if (isFiltered) return <EmptyFilterContainer linkStyles={linkStyles} />;
-    <EmptyFilterContainer linkStyles={linkStyles} />
+
-  ) : isRootEmptyPage ? (
+  if (isRootEmptyPage)
-    <RootFolderContainer
+    return (
-      onCreate={onCreate}
+      <RootFolderContainer
-      linkStyles={linkStyles}
+        onCreate={onCreate}
-      onCreateRoom={onCreateRoom}
+        linkStyles={linkStyles}
-      sectionWidth={sectionWidth}
+        onCreateRoom={onCreateRoom}
-    />
+        sectionWidth={sectionWidth}
-  ) : (
+      />
-    <EmptyFolderContainer
+    );
-      sectionWidth={sectionWidth}
+
-      onCreate={onCreate}
+  return (
-      linkStyles={linkStyles}
+    <EmptyViewContainer
-      type={type}
+      type={roomType}
-      isEmptyPage={isEmptyPage}
+      folderType={type}
+      isFolder={!isRoom}
+      folderId={folderId}
+      parentRoomType={parentRoomType}
+      isArchiveFolderRoot={isArchiveFolderRoot}
     />
   );
 };
@@ -131,6 +142,7 @@ export default inject(
     clientLoadingStore,
     currentTariffStatusStore,
     publicRoomStore,
+    treeFoldersStore,
   }) => {
     const { isErrorRoomNotAvailable, isFiltered } = filesStore;
     const { isLoading } = clientLoadingStore;
@@ -143,6 +155,9 @@ export default inject(
     const isRoomNotFoundOrMoved =
       isFiltered === null && isErrorRoomNotAvailable;
 
+    const { roomType, id: folderId, parentRoomType } = selectedFolderStore;
+    const { isArchiveFolderRoot } = treeFoldersStore;
+
     const isRoot = selectedFolderStore.pathParts?.length === 1;
 
     return {
@@ -157,6 +172,10 @@ export default inject(
       type: selectedFolderStore.type,
       isRoot,
       isPublicRoom,
+      roomType,
+      parentRoomType,
+      folderId,
+      isArchiveFolderRoot,
     };
   },
 )(observer(EmptyContainer));

packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx

@@ -12,26 +12,31 @@ import {
 import EmptyFormRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.dark.svg";
 import EmptyFormRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.light.svg";
 
+import EmptyFormRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.dark.svg";
+import EmptyFormRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.light.svg";
+
+import EmptyFormRoomFillingDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.dark.svg";
+import EmptyFormRoomFillingLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.light.svg";
+
 import EmptyCustomRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.dark.svg";
 import EmptyCustomRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.light.svg";
 
+import EmptyCustomRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.dark.svg";
+import EmptyCustomRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.light.svg";
+
 import EmptyPublicRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.dark.svg";
 import EmptyPublicRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.light.svg";
 
 import EmptyPublicRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.collaborator.dark.svg";
 import EmptyPublicRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.collaborator.light.svg";
 
-import EmptyFormRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.dark.svg";
+import EmptyCollaborationRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.dark.svg";
-import EmptyFormRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.light.svg";
+import EmptyCollaborationRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.light.svg";
+import EmptyCollaborationRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.collaborator.dark.svg";
+import EmptyCollaborationRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.collaborator.light.svg";
 
-import EmptyCustomRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.dark.svg";
+// import EmptyCustomRoomOtherDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.dark.svg";
-import EmptyCustomRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.light.svg";
+// import EmptyCustomRoomOtherLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.light.svg";
-
-import EmptyCustomRoomOtherDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.dark.svg";
-import EmptyCustomRoomOtherLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.light.svg";
-
-import EmptyFormRoomFillingDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.dark.svg";
-import EmptyFormRoomFillingLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.light.svg";
 
 import CreateNewFormIcon from "PUBLIC_DIR/images/emptyview/create.new.form.svg";
 import CreateNewSpreadsheetIcon from "PUBLIC_DIR/images/emptyview/create.new.spreadsheet.svg";
@@ -90,8 +95,6 @@ export const getDescription = (
   parentRoomType: Nullable<FolderType>,
   isArchiveFolderRoot: boolean,
 ): string => {
-  const isCollaborator = access === ShareAccessRights.Collaborator;
-
   const isNotAdmin = isUser(access);
 
   if (isFolder) {
@@ -189,7 +192,7 @@ export const getTitle = (
     case RoomsType.FormRoom:
       return t("EmptyView:FormRoomEmptyTitle");
     case RoomsType.EditingRoom:
-      return "";
+      return t("EmptyView:CollaborationRoomEmptyTitle");
     case RoomsType.PublicRoom:
       return t("EmptyView:PublicRoomEmptyTitle");
     case RoomsType.CustomRoom:
@@ -242,8 +245,25 @@ export const getRoomIcon = (
       .with([RoomsType.FormRoom, P._], () =>
         isBaseTheme ? <EmptyFormRoomLightIcon /> : <EmptyFormRoomDarkIcon />,
       )
-
+      .with(
-      .with([RoomsType.EditingRoom, P._], () => <div />)
+        [
+          RoomsType.EditingRoom,
+          P.union(ShareAccessRights.None, ShareAccessRights.RoomManager),
+        ],
+        () =>
+          isBaseTheme ? (
+            <EmptyCollaborationRoomLightIcon />
+          ) : (
+            <EmptyCollaborationRoomDarkIcon />
+          ),
+      )
+      .with([RoomsType.EditingRoom, ShareAccessRights.Collaborator], () =>
+        isBaseTheme ? (
+          <EmptyCollaborationRoomCollaboratorLightIcon />
+        ) : (
+          <EmptyCollaborationRoomCollaboratorDarkIcon />
+        ),
+      )
       .with(
         [
           RoomsType.PublicRoom,
@@ -282,12 +302,8 @@ export const getRoomIcon = (
           <EmptyCustomRoomCollaboratorDarkIcon />
         ),
       )
-      .with([RoomsType.CustomRoom, P._], () =>
+      .with([P._, P.when(isUser)], () =>
-        isBaseTheme ? (
+        isBaseTheme ? <DefaultFolderUserLight /> : <DefaultFolderUserDark />,
-          <EmptyCustomRoomOtherLightIcon />
-        ) : (
-          <EmptyCustomRoomOtherDarkIcon />
-        ),
       )
       // eslint-disable-next-line react/jsx-no-useless-fragment
       .otherwise(() => <></>)
@@ -426,6 +442,11 @@ export const getOptions = (
     t("EmptyView:InviteUsersOptionDescription"),
   );
 
+  const inviteUserEditingRoom = createInviteOption(
+    t("EmptyView:InviteUsersOptionTitle"),
+    t("EmptyView:InviteUsersCollaborationOptionDescription"),
+  );
+
   const shareFillingRoom = {
     title: t("EmptyView:ShareOptionTitle"),
     description: t("EmptyView:ShareOptionDescription"),
@@ -548,7 +569,17 @@ export const getOptions = (
 
       return [uploadPDFFromDocSpace, uploadFromDevicePDF, shareFillingRoom];
     case RoomsType.EditingRoom:
-      return [];
+      if (isNotAdmin) return [];
+
+      if (isCollaborator)
+        return [createFile, uploadAllFromDocSpace, uploadFromDeviceAnyFile];
+
+      return [
+        createFile,
+        inviteUserEditingRoom,
+        uploadAllFromDocSpace,
+        uploadFromDeviceAnyFile,
+      ];
     case RoomsType.PublicRoom:
       if (isNotAdmin) return [];
 
@@ -564,7 +595,8 @@ export const getOptions = (
     case RoomsType.CustomRoom:
       if (isNotAdmin) return [];
 
-      if (isCollaborator) return [createFile, uploadFromDeviceAnyFile];
+      if (isCollaborator)
+        return [createFile, uploadAllFromDocSpace, uploadFromDeviceAnyFile];
 
       return [
         createFile,