Web:EmptyContainer Added empty screen for the archive page

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

@@ -16,6 +16,7 @@ import CreateNewPresentation from "PUBLIC_DIR/images/emptyview/create.new.presen
 import CreateRoom from "PUBLIC_DIR/images/emptyview/create.room.svg";
 import InviteUserFormIcon from "PUBLIC_DIR/images/emptyview/invite.user.svg";
 import PersonIcon from "PUBLIC_DIR/images/icons/12/person.svg";
+import FolderIcon from "PUBLIC_DIR/images/icons/12/folder.svg";
 
 import SharedIcon from "PUBLIC_DIR/images/emptyview/share.svg";
 
@@ -301,8 +302,6 @@ export const getOptions = (
     ],
   };
 
-  if (isArchiveFolderRoot) return [];
-
   if (isRootEmptyPage) {
     return match([rootFolderType, access])
       .returnType<EmptyViewOptionsType>()
@@ -321,9 +320,16 @@ export const getOptions = (
         icon: <PersonIcon />,
         description: t("Files:GoToPersonal"),
       }))
+      .with([FolderType.Archive, ShareAccessRights.None], () => ({
+        ...actions.onGoToShared(),
+        icon: <FolderIcon />,
+        description: t("Files:GoToMyRooms"),
+      }))
       .otherwise(() => []);
   }
 
+  if (isArchiveFolderRoot) return [];
+
   if (isFolder) {
     return match([parentRoomType, folderType, access])
       .with(

packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.hooks.ts

@@ -0,0 +1,291 @@
+import { useTheme } from "styled-components";
+import { useMemo, useCallback } from "react";
+import { useNavigate, LinkProps } from "react-router-dom";
+
+import {
+  Events,
+  FilesSelectorFilterTypes,
+  FilterType,
+  RoomSearchArea,
+} from "@docspace/shared/enums";
+import RoomsFilter from "@docspace/shared/api/rooms/filter";
+import FilesFilter from "@docspace/shared/api/files/filter";
+import type { TTranslation } from "@docspace/shared/types";
+
+import { getCategoryUrl } from "SRC_DIR/helpers/utils";
+import { CategoryType } from "SRC_DIR/helpers/constants";
+
+import {
+  getDescription,
+  getIcon,
+  getOptions,
+  getTitle,
+} from "./EmptyViewContainer.helpers";
+
+import type {
+  CreateEvent,
+  EmptyViewContainerProps,
+  ExtensiontionType,
+  UploadType,
+} from "./EmptyViewContainer.types";
+
+export const useEmptyView = (
+  {
+    type,
+    access,
+    isFolder,
+    folderType,
+    parentRoomType,
+    isRootEmptyPage,
+    isArchiveFolderRoot,
+    rootFolderType,
+  }: EmptyViewContainerProps,
+  t: TTranslation,
+) => {
+  const theme = useTheme();
+
+  const emptyViewOptions = useMemo(() => {
+    const description = getDescription(
+      type,
+      t,
+      access,
+      isFolder,
+      folderType,
+      parentRoomType,
+      isArchiveFolderRoot,
+      isRootEmptyPage,
+      rootFolderType,
+    );
+    const title = getTitle(
+      type,
+      t,
+      access,
+      isFolder,
+      folderType,
+      parentRoomType,
+      isArchiveFolderRoot,
+      isRootEmptyPage,
+      rootFolderType,
+    );
+    const icon = getIcon(
+      type,
+      theme.isBase,
+      access,
+      isFolder,
+      folderType,
+      parentRoomType,
+      isRootEmptyPage,
+      rootFolderType,
+    );
+
+    return { description, title, icon };
+  }, [
+    type,
+    t,
+    theme.isBase,
+    access,
+    isFolder,
+    folderType,
+    parentRoomType,
+    isRootEmptyPage,
+    isArchiveFolderRoot,
+    rootFolderType,
+  ]);
+
+  return emptyViewOptions;
+};
+
+export const useOptions = (
+  {
+    type,
+    access,
+    folderId,
+    isFolder,
+    security,
+    folderType,
+    selectedFolder,
+    parentRoomType,
+    isRootEmptyPage,
+    isVisibleInfoPanel,
+    isArchiveFolderRoot,
+    rootFolderType,
+    isGracePeriod,
+    myFolderId,
+    myFolder,
+    roomsFolder,
+    userId,
+    setViewInfoPanel,
+    onClickInviteUsers,
+    setVisibleInfoPanel,
+    onCreateAndCopySharedLink,
+    // setIsSectionFilterLoading,
+    setSelectFileFormRoomDialogVisible,
+    setInviteUsersWarningDialogVisible,
+    inviteUser: inviteRootUser,
+  }: EmptyViewContainerProps,
+  t: TTranslation,
+) => {
+  const navigate = useNavigate();
+
+  const onGoToShared = useCallback(() => {
+    const newFilter = RoomsFilter.getDefault(userId, RoomSearchArea.Active);
+
+    newFilter.searchArea = RoomSearchArea.Active;
+
+    const state = {
+      title: roomsFolder.title,
+      isRoot: true,
+      rootFolderType: roomsFolder.rootFolderType,
+    };
+
+    const path = getCategoryUrl(CategoryType.Shared);
+    return {
+      to: {
+        pathname: path,
+        search: newFilter.toUrlParams(),
+      },
+      state,
+    };
+  }, [roomsFolder.rootFolderType, roomsFolder.title, userId]);
+
+  const onGoToPersonal = useCallback((): LinkProps => {
+    const newFilter = FilesFilter.getDefault();
+
+    newFilter.folder = myFolderId?.toString() ?? "";
+
+    const state = {
+      title: myFolder.title,
+      isRoot: true,
+      rootFolderType: myFolder.rootFolderType,
+    };
+
+    const path = getCategoryUrl(CategoryType.Personal);
+
+    // setIsSectionFilterLoading(true);
+
+    return {
+      to: {
+        pathname: path,
+        search: newFilter.toUrlParams(),
+      },
+      state,
+    };
+  }, [myFolder.rootFolderType, myFolder.title, myFolderId]);
+
+  const onCreateRoom = useCallback(() => {
+    if (isGracePeriod) {
+      setInviteUsersWarningDialogVisible(true);
+      return;
+    }
+
+    const event = new Event(Events.ROOM_CREATE);
+    window.dispatchEvent(event);
+  }, [isGracePeriod, setInviteUsersWarningDialogVisible]);
+
+  const openInfoPanel = useCallback(() => {
+    if (!isVisibleInfoPanel) setVisibleInfoPanel?.(true);
+
+    setViewInfoPanel?.("info_members");
+  }, [setViewInfoPanel, setVisibleInfoPanel, isVisibleInfoPanel]);
+
+  const onUploadAction = useCallback((uploadType: UploadType) => {
+    const element =
+      uploadType === "file"
+        ? document.getElementById("customFileInput")
+        : uploadType === "pdf"
+          ? document.getElementById("customPDFInput")
+          : document.getElementById("customFolderInput");
+
+    element?.click();
+  }, []);
+
+  const inviteUser = useCallback(() => {
+    onClickInviteUsers?.(folderId, type);
+  }, [onClickInviteUsers, folderId, type]);
+
+  const uploadFromDocspace = useCallback(
+    (
+      filterParam: FilesSelectorFilterTypes | FilterType,
+      openRoot: boolean = true,
+    ) => {
+      setSelectFileFormRoomDialogVisible?.(true, filterParam, openRoot);
+    },
+    [setSelectFileFormRoomDialogVisible],
+  );
+
+  const onCreate = useCallback(
+    (extension: ExtensiontionType, withoutDialog?: boolean) => {
+      const event: CreateEvent = new Event(Events.CREATE);
+
+      const payload = {
+        id: -1,
+        extension,
+        withoutDialog,
+      };
+      event.payload = payload;
+
+      window.dispatchEvent(event);
+    },
+    [],
+  );
+
+  const createAndCopySharedLink = useCallback(() => {
+    if (!selectedFolder) return;
+
+    onCreateAndCopySharedLink?.(selectedFolder, t);
+  }, [selectedFolder, onCreateAndCopySharedLink, t]);
+
+  const options = useMemo(
+    () =>
+      getOptions(
+        type,
+        security!,
+        t,
+        access,
+        isFolder,
+        folderType,
+        parentRoomType,
+        isArchiveFolderRoot,
+        isRootEmptyPage,
+        rootFolderType,
+        {
+          inviteUser,
+          onCreate,
+          uploadFromDocspace,
+          onUploadAction,
+          createAndCopySharedLink,
+          openInfoPanel,
+          onCreateRoom,
+          inviteRootUser,
+          navigate,
+          onGoToPersonal,
+          onGoToShared,
+        },
+      ),
+    [
+      type,
+      access,
+      security,
+      isFolder,
+      folderType,
+      parentRoomType,
+      isArchiveFolderRoot,
+      isRootEmptyPage,
+      rootFolderType,
+      t,
+      inviteUser,
+      uploadFromDocspace,
+      onUploadAction,
+      createAndCopySharedLink,
+      onCreate,
+      openInfoPanel,
+      onCreateRoom,
+      inviteRootUser,
+      navigate,
+      onGoToPersonal,
+      onGoToShared,
+    ],
+  );
+
+  return options;
+};

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

@@ -1,275 +1,38 @@
-import { useTheme } from "styled-components";
+import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
-import React, { useMemo, useCallback } from "react";
-import { useNavigate, LinkProps } from "react-router-dom";
 
-import {
-  Events,
-  FilesSelectorFilterTypes,
-  FilterType,
-} from "@docspace/shared/enums";
 import { EmptyView } from "@docspace/shared/components/empty-view";
-import FilesFilter from "@docspace/shared/api/files/filter";
-
-import { getCategoryUrl } from "SRC_DIR/helpers/utils";
-import { CategoryType } from "SRC_DIR/helpers/constants";
-
-import {
-  getDescription,
-  getIcon,
-  getOptions,
-  getTitle,
-} from "./EmptyViewContainer.helpers";
 
+import { useEmptyView, useOptions } from "./EmptyViewContainer.hooks";
 import type {
-  CreateEvent,
   EmptyViewContainerProps,
-  ExtensiontionType,
   InjectedEmptyViewContainerProps,
   OutEmptyViewContainerProps,
-  UploadType,
 } from "./EmptyViewContainer.types";
 
-const EmptyViewContainer = observer(
-  ({
-    type,
-    access,
-    folderId,
-    isFolder,
-    security,
-    folderType,
-    selectedFolder,
-    parentRoomType,
-    isRootEmptyPage,
-    isVisibleInfoPanel,
-    isArchiveFolderRoot,
-    rootFolderType,
-    isGracePeriod,
-    myFolderId,
-    myFolder,
-    setViewInfoPanel,
-    onClickInviteUsers,
-    setVisibleInfoPanel,
-    onCreateAndCopySharedLink,
-    // setIsSectionFilterLoading,
-    setSelectFileFormRoomDialogVisible,
-    setInviteUsersWarningDialogVisible,
-    inviteUser: inviteRootUser,
-  }: EmptyViewContainerProps) => {
-    const navigate = useNavigate();
+const EmptyViewContainer = observer((props: EmptyViewContainerProps) => {
+  const { t } = useTranslation([
+    "EmptyView",
+    "Files",
+    "Common",
+    "Translations",
+  ]);
 
-    const { t } = useTranslation([
-      "EmptyView",
-      "Files",
-      "Common",
-      "Translations",
-    ]);
+  const options = useOptions(props, t);
+  const emptyViewOptions = useEmptyView(props, t);
 
-    const theme = useTheme();
+  const { description, title, icon } = emptyViewOptions;
 
-    const onGoToPersonal = useCallback((): LinkProps => {
-      const newFilter = FilesFilter.getDefault();
-
-      newFilter.folder = myFolderId?.toString() ?? "";
-
-      const state = {
-        title: myFolder.title,
-        isRoot: true,
-        rootFolderType: myFolder.rootFolderType,
-      };
-
-      const path = getCategoryUrl(CategoryType.Personal);
-
-      // setIsSectionFilterLoading(true);
-
-      return {
-        to: {
-          pathname: path,
-          search: newFilter.toUrlParams(),
-        },
-        state,
-      };
-    }, [
-      myFolder.rootFolderType,
-      myFolder.title,
-      myFolderId,
-      // setIsSectionFilterLoading,
-    ]);
-
-    const onCreateRoom = useCallback(() => {
-      if (isGracePeriod) {
-        setInviteUsersWarningDialogVisible(true);
-        return;
-      }
-
-      const event = new Event(Events.ROOM_CREATE);
-      window.dispatchEvent(event);
-    }, [isGracePeriod, setInviteUsersWarningDialogVisible]);
-
-    const openInfoPanel = useCallback(() => {
-      if (!isVisibleInfoPanel) setVisibleInfoPanel?.(true);
-
-      setViewInfoPanel?.("info_members");
-    }, [setViewInfoPanel, setVisibleInfoPanel, isVisibleInfoPanel]);
-
-    const onUploadAction = useCallback((uploadType: UploadType) => {
-      const element =
-        uploadType === "file"
-          ? document.getElementById("customFileInput")
-          : uploadType === "pdf"
-            ? document.getElementById("customPDFInput")
-            : document.getElementById("customFolderInput");
-
-      element?.click();
-    }, []);
-
-    const inviteUser = useCallback(() => {
-      onClickInviteUsers?.(folderId, type);
-    }, [onClickInviteUsers, folderId, type]);
-
-    const uploadFromDocspace = useCallback(
-      (
-        filterParam: FilesSelectorFilterTypes | FilterType,
-        openRoot: boolean = true,
-      ) => {
-        setSelectFileFormRoomDialogVisible?.(true, filterParam, openRoot);
-      },
-      [setSelectFileFormRoomDialogVisible],
-    );
-
-    const onCreate = useCallback(
-      (extension: ExtensiontionType, withoutDialog?: boolean) => {
-        const event: CreateEvent = new Event(Events.CREATE);
-
-        const payload = {
-          id: -1,
-          extension,
-          withoutDialog,
-        };
-        event.payload = payload;
-
-        window.dispatchEvent(event);
-      },
-      [],
-    );
-
-    const createAndCopySharedLink = useCallback(() => {
-      if (!selectedFolder) return;
-
-      onCreateAndCopySharedLink?.(selectedFolder, t);
-    }, [selectedFolder, onCreateAndCopySharedLink, t]);
-
-    const emptyViewOptions = useMemo(() => {
-      const description = getDescription(
-        type,
-        t,
-        access,
-        isFolder,
-        folderType,
-        parentRoomType,
-        isArchiveFolderRoot,
-        isRootEmptyPage,
-        rootFolderType,
-      );
-      const title = getTitle(
-        type,
-        t,
-        access,
-        isFolder,
-        folderType,
-        parentRoomType,
-        isArchiveFolderRoot,
-        isRootEmptyPage,
-        rootFolderType,
-      );
-      const icon = getIcon(
-        type,
-        theme.isBase,
-        access,
-        isFolder,
-        folderType,
-        parentRoomType,
-        isRootEmptyPage,
-        rootFolderType,
-      );
-
-      return { description, title, icon };
-    }, [
-      type,
-      t,
-      theme.isBase,
-      access,
-      isFolder,
-      folderType,
-      parentRoomType,
-      isRootEmptyPage,
-      isArchiveFolderRoot,
-      rootFolderType,
-    ]);
-
-    const options = useMemo(
-      () =>
-        getOptions(
-          type,
-          security!,
-          t,
-          access,
-          isFolder,
-          folderType,
-          parentRoomType,
-          isArchiveFolderRoot,
-          isRootEmptyPage,
-          rootFolderType,
-          {
-            inviteUser,
-            onCreate,
-            uploadFromDocspace,
-            onUploadAction,
-            createAndCopySharedLink,
-            openInfoPanel,
-            onCreateRoom,
-            inviteRootUser,
-            navigate,
-            onGoToPersonal,
-          },
-        ),
-      [
-        type,
-        access,
-        security,
-        isFolder,
-        folderType,
-        parentRoomType,
-        isArchiveFolderRoot,
-        isRootEmptyPage,
-        rootFolderType,
-        t,
-        inviteUser,
-        uploadFromDocspace,
-        onUploadAction,
-        createAndCopySharedLink,
-        onCreate,
-        openInfoPanel,
-        onCreateRoom,
-        inviteRootUser,
-        navigate,
-        onGoToPersonal,
-      ],
-    );
-
-    const { description, title, icon } = emptyViewOptions;
-
-    return (
-      <EmptyView
-        icon={icon}
-        title={title}
-        options={options}
-        description={description}
-      />
-    );
-  },
-);
+  return (
+    <EmptyView
+      icon={icon}
+      title={title}
+      options={options}
+      description={description}
+    />
+  );
+});
 
 const InjectedEmptyViewContainer = inject<
   TStore,
@@ -284,8 +47,9 @@ const InjectedEmptyViewContainer = inject<
     currentTariffStatusStore,
     treeFoldersStore,
     clientLoadingStore,
+    userStore,
   }): InjectedEmptyViewContainerProps => {
-    const { myFolderId, myFolder } = treeFoldersStore;
+    const { myFolderId, myFolder, roomsFolder } = treeFoldersStore;
 
     const { setIsSectionFilterLoading } = clientLoadingStore;
 
@@ -309,6 +73,8 @@ const InjectedEmptyViewContainer = inject<
 
     const selectedFolder = selectedFolderStore.getSelectedFolder();
 
+    const userId = userStore?.user?.id;
+
     return {
       access,
       security,
@@ -318,6 +84,8 @@ const InjectedEmptyViewContainer = inject<
       isGracePeriod,
       myFolderId,
       myFolder,
+      roomsFolder,
+      userId,
       inviteUser,
       setViewInfoPanel,
       onClickInviteUsers,

packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.types.ts

@@ -55,11 +55,12 @@ export interface InjectedEmptyViewContainerProps
       TStore["selectedFolderStore"],
       "access" | "security" | "rootFolderType"
     >,
-    Pick<TStore["treeFoldersStore"], "myFolder" | "myFolderId">,
+    Pick<TStore["treeFoldersStore"], "myFolder" | "myFolderId" | "roomsFolder">,
     Pick<TStore["clientLoadingStore"], "setIsSectionFilterLoading"> {
   selectedFolder: ReturnType<
     TStore["selectedFolderStore"]["getSelectedFolder"]
   >;
+  userId: string | undefined;
   isGracePeriod: boolean;
   isVisibleInfoPanel: boolean;
   setVisibleInfoPanel: (arg: boolean) => void;
@@ -83,4 +84,5 @@ export type OptionActions = {
   onCreateRoom: VoidFunction;
   inviteRootUser: TStore["contextOptionsStore"]["inviteUser"];
   onGoToPersonal: () => LinkProps;
+  onGoToShared: () => LinkProps;
 };

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

@@ -37,6 +37,12 @@ import EmptyRoomsRootLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.roo
 import EmptyRecentDarkIcon from "PUBLIC_DIR/images/emptyview/empty.recent.dark.svg";
 import EmptyRecentLightIcon from "PUBLIC_DIR/images/emptyview/empty.recent.light.svg";
 
+import EmptyArchiveDarkIcon from "PUBLIC_DIR/images/emptyview/empty.archive.dark.svg";
+import EmptyArchiveLightIcon from "PUBLIC_DIR/images/emptyview/empty.archive.light.svg";
+
+import EmptyArchiveUserDarkIcon from "PUBLIC_DIR/images/emptyview/empty.archive.user.dark.svg";
+import EmptyArchiveUserLightIcon from "PUBLIC_DIR/images/emptyview/empty.archive.user.light.svg";
+
 import EmptyRoomsRootUserDarkIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.dark.svg";
 import EmptyRoomsRootUserLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.light.svg";
 
@@ -175,7 +181,14 @@ export const getRootDesctiption = (
       t("EmptyView:DefaultFolderDescription"),
     )
     .with([FolderType.Recent, P._], () => t("EmptyView:EmptyRecentDescription"))
-    .with([FolderType.Archive, P._], () => t("Test"))
+    .with([FolderType.Archive, ShareAccessRights.None], () =>
+      t("Files:ArchiveEmptyScreen", {
+        productName: t("Common:ProductName"),
+      }),
+    )
+    .with([FolderType.Archive, ShareAccessRights.DenyAccess], () =>
+      t("Files:ArchiveEmptyScreenUser"),
+    )
     .with([FolderType.TRASH, P._], () => t("Test"))
     .otherwise(() => "");
 };
@@ -266,7 +279,7 @@ export const getRootTitle = (
       t("Files:EmptyScreenFolder"),
     )
     .with([FolderType.Recent, P._], () => t("Files:NoFilesHereYet"))
-    .with([FolderType.Archive, P._], () => t("Test"))
+    .with([FolderType.Archive, P._], () => t("Files:ArchiveEmptyScreenHeader"))
     .with([FolderType.TRASH, P._], () => t("Test"))
     .otherwise(() => "");
 };
@@ -401,7 +414,16 @@ export const getRootIcom = (
     .with([FolderType.Recent, P._], () =>
       isBaseTheme ? <EmptyRecentLightIcon /> : <EmptyRecentDarkIcon />,
     )
-    .with([FolderType.Archive, P._], () => <div />)
+    .with([FolderType.Archive, ShareAccessRights.None], () =>
+      isBaseTheme ? <EmptyArchiveLightIcon /> : <EmptyArchiveDarkIcon />,
+    )
+    .with([FolderType.Archive, ShareAccessRights.DenyAccess], () =>
+      isBaseTheme ? (
+        <EmptyArchiveUserLightIcon />
+      ) : (
+        <EmptyArchiveUserDarkIcon />
+      ),
+    )
     .with([FolderType.TRASH, P._], () => <div />)
     .otherwise(() => <div />);
 };

packages/shared/components/empty-view/EmptyView.styled.ts

@@ -75,7 +75,7 @@ export const EmptyViewBody = styled.div`
       font-size: 13px;
       line-height: 15px;
       text-decoration: underline dotted;
-      text-underline-offset: 1px;
+      text-underline-offset: 2px;
     }
   }
 `;