Web:EmptyContainer Added a empty screen for the filter

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

@@ -23,19 +23,24 @@
 // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-import EmptyScreenFilterAltSvgUrl from "PUBLIC_DIR/images/empty_screen_filter_alt.svg?url";
-import EmptyScreenFilterAltDarkSvgUrl from "PUBLIC_DIR/images/empty_screen_filter_alt_dark.svg?url";
-import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
 import React from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
-import EmptyContainer from "./EmptyContainer";
+
-import FilesFilter from "@docspace/shared/api/files/filter";
+import ClearEmptyFilterSvg from "PUBLIC_DIR/images/clear.empty.filter.svg";
+
+import EmptyFilterRoomsLightIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.rooms.light.svg";
+import EmptyFilterRoomsDarkIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.rooms.dark.svg";
+
+import EmptyFilterFilesLightIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.files.light.svg";
+import EmptyFilterFilesDarkIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.files.dark.svg";
+
 import RoomsFilter from "@docspace/shared/api/rooms/filter";
-import { IconButton } from "@docspace/shared/components/icon-button";
+import FilesFilter from "@docspace/shared/api/files/filter";
-import { Link } from "@docspace/shared/components/link";
+import { EmptyView } from "@docspace/shared/components/empty-view";
+
+// import EmptyContainer from "./EmptyContainer";
 
 const EmptyFilterContainer = ({
   t,
@@ -55,12 +60,32 @@ const EmptyFilterContainer = ({
   const navigate = useNavigate();
   const location = useLocation();
 
-  const subheadingText = t("EmptyFilterSubheadingText");
   const descriptionText = isRooms
-    ? t("Common:SearchEmptyRoomsDescription")
+    ? t("Common:EmptyFilterRoomsDescription")
-    : t("Common:EmptyFilterDescriptionText");
+    : t("Common:EmptyFilterFilesDescription");
+
+  const getIconURL = () => {
+    if (isRooms)
+      return theme.isBase ? (
+        <EmptyFilterRoomsLightIcon />
+      ) : (
+        <EmptyFilterRoomsDarkIcon />
+      );
+
+    return theme.isBase ? (
+      <EmptyFilterFilesLightIcon />
+    ) : (
+      <EmptyFilterFilesDarkIcon />
+    );
+  };
+
+  /**
+   * @param {React.MouseEvent<HTMLAnchorElement, MouseEvent>} event
+   * @returns {void}
+   */
+  const onResetFilter = (event) => {
+    event.preventDefault();
 
-  const onResetFilter = () => {
     setIsLoading(true);
 
     if (isArchiveFolder) {
@@ -86,31 +111,21 @@ const EmptyFilterContainer = ({
     }
   };
 
-  const buttons = (
+  const options = {
-    <div className="empty-folder_container-links">
+    to: "",
-      <IconButton
+    description: t("Common:ClearFilter"),
-        className="empty-folder_container-icon"
+    icon: <ClearEmptyFilterSvg />,
-        size="12"
+    onClick: onResetFilter,
-        onClick={onResetFilter}
+  };
-        iconName={ClearEmptyFilterSvgUrl}
-        isFill
-      />
-      <Link onClick={onResetFilter} {...linkStyles}>
-        {t("Common:ClearFilter")}
-      </Link>
-    </div>
-  );
 
-  const imageSrc = theme.isBase
+  const imageSrc = getIconURL();
-    ? EmptyScreenFilterAltSvgUrl
-    : EmptyScreenFilterAltDarkSvgUrl;
 
   return (
-    <EmptyContainer
+    <EmptyView
-      headerText={t("Common:NotFoundTitle")}
+      icon={imageSrc}
-      descriptionText={descriptionText}
+      title={t("Common:NoFindingsFound")}
-      imageSrc={imageSrc}
+      options={options}
-      buttons={buttons}
+      description={descriptionText}
     />
   );
 };

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

@@ -67,6 +67,9 @@ export const EmptyViewBody = styled.div`
     color: #4781d1;
     svg {
       color: #4781d1;
+      g {
+        fill: currentColor;
+      }
       flex-shrink: 0;
     }
 

packages/shared/components/empty-view/EmptyView.tsx

@@ -46,7 +46,12 @@ export const EmptyView = ({
       </EmptyViewHeader>
       <EmptyViewBody>
         {isEmptyLinkOptions(options) ? (
-          <Link className="ev-link" to={options.to} state={options.state}>
+          <Link
+            className="ev-link"
+            to={options.to}
+            state={options.state}
+            onClick={options.onClick}
+          >
             {options.icon}
             <span>{options.description}</span>
           </Link>

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

@@ -5,6 +5,7 @@ export type EmptyViewLinkType = {
   state?: unknown;
   icon: React.ReactElement;
   description: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 };
 
 export type EmptyViewItemType = {

public/locales/en/Common.json

@@ -50,6 +50,7 @@
   "Color": "Color",
   "ComingSoon": "Coming soon",
   "Comment": "Comment",
+  "Commentator": "Commentator",
   "Comments": "Comments",
   "Common": "Common",
   "CommonFiles": "Common files",
@@ -127,8 +128,8 @@
   "Delete": "Delete",
   "DenyAccess": "Deny access",
   "Description": "Description",
-  "Disable": "Disable",
   "DeveloperTools": "Developer Tools",
+  "Disable": "Disable",
   "Disabled": "Disabled",
   "DisableQuota": "Disable quota",
   "DisableStorageQuota": "Disable storage quota",
@@ -148,12 +149,13 @@
   "EditButton": "Edit",
   "Editing": "Editing",
   "Editor": "Editor",
-  "Commentator": "Commentator",
   "Email": "Email",
   "EmptyDescription": "The list of users previously invited to {{productName}} or separate rooms will appear here. You will be able to invite these users for collaboration at any time.",
   "EmptyEmail": "No email address parsed",
   "EmptyFieldError": "Empty field",
   "EmptyFilterDescriptionText": "No files or folders match this filter. Try a different one or clear filter to view all files.",
+  "EmptyFilterFilesDescription": "No files or folders match this filter. Try another or remove the filter to view all files.",
+  "EmptyFilterRoomsDescription": "No room matches this filter. Try another or reset filter to view all rooms.",
   "EmptyGroupsDescription": "Please create the first group.",
   "EmptyGroupsHeader": "No groups here yet",
   "EmptyHeader": "No other accounts here yet",
@@ -252,6 +254,7 @@
   "LinkExpireAfter": "The link will expire after <1>{{date}}</1>",
   "LinkExpired": "The link has expired.",
   "LinkIsValid": "The link is valid for <1>{{date}}</1>",
+  "LinkRemoved": "Link removed",
   "LinkSuccessfullyCopied": "Link successfully copied to clipboard",
   "ListAccounts": "Account list",
   "LiveChat": "Live chat",
@@ -302,6 +305,7 @@
   "NewVersionAvailable": "A new version of the website available",
   "Next": "Next",
   "No": "No",
+  "NoFindingsFound": "No findings found",
   "NoRoomsFound": "No rooms found",
   "NotFoundGroups": "No groups found",
   "NotFoundGroupsDescription": "No groups match your search. Please adjust your search parameters or clear the search field to view the full list of groups.",
@@ -327,8 +331,8 @@
   "OAuthRoomsWriteDescription": "View and manage all rooms",
   "OCT": "OCT",
   "OFORMsGallery": "Form Gallery",
-  "OkButton": "Ok",
   "OKButton": "OK",
+  "OkButton": "Ok",
   "Or": "or",
   "orContinueWith": "or continue with",
   "OrganizationName": "ONLYOFFICE",
@@ -388,12 +392,11 @@
   "RecoverDescribeYourProblemPlaceholder": "Describe your problem",
   "RecoverTitle": "Access recovery",
   "Regenerate": "Regenerate",
-  "RemoveLink": "Remove link",
-  "LinkRemoved": "Link removed",
   "RegistrationEmail": "Your registration email address",
   "ReloadPage": "Reload page",
   "Remember": "Remember me",
   "Remove": "Remove",
+  "RemoveLink": "Remove link",
   "Rename": "Rename",
   "RenewSubscription": "Renew subscription?",
   "RepeatInvitation": "Repeat invitation",