Web: Client: Data Import: added empty screen for without email table

packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/RowView/index.tsx

@@ -29,15 +29,25 @@ import { inject, observer } from "mobx-react";
 import { tablet } from "@docspace/shared/utils/device";
 import styled from "styled-components";
 
+import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
+import { IconButton } from "@docspace/shared/components/icon-button";
+import { Link, LinkType } from "@docspace/shared/components/link";
+import { Box } from "@docspace/shared/components/box";
 import { RowContainer } from "@docspace/shared/components/row-container";
 import { Row } from "@docspace/shared/components/row";
 import { Text } from "@docspace/shared/components/text";
+import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
+import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
 import { TEnhancedMigrationUser } from "@docspace/shared/api/settings/types";
 import UsersRow from "./UsersRow";
 import { AddEmailRowProps, RowViewProps } from "../../../../types";
 
 const StyledRowContainer = styled(RowContainer)`
   margin: 0 0 20px;
+
+  .clear-icon {
+    margin-inline-end: 8px;
+  }
 `;
 
 const StyledRow = styled(Row)`
@@ -71,6 +81,7 @@ const RowView = (props: RowViewProps) => {
     toggleAccount,
     toggleAllAccounts,
     isAccountChecked,
+    setSearchValue,
   } = props as AddEmailRowProps;
 
   const [openedEmailKey, setOpenedEmailKey] = useState("");
@@ -85,6 +96,8 @@ const RowView = (props: RowViewProps) => {
   const handleToggle = (user: TEnhancedMigrationUser) =>
     toggleAccount(user, checkedAccountType);
 
+  const onClearFilter = () => setSearchValue("");
+
   const isIndeterminate =
     checkedUsers.withoutEmail.length > 0 &&
     checkedUsers.withoutEmail.length !== usersWithFilledEmails.length;
@@ -95,6 +108,8 @@ const RowView = (props: RowViewProps) => {
 
   return (
     <StyledRowContainer useReactWindow={false}>
+      {accountsData.length > 0 ? (
+        <>
           <StyledRow
             checked={isChecked}
             onSelect={toggleAll}
@@ -115,6 +130,34 @@ const RowView = (props: RowViewProps) => {
               setOpenedEmailKey={setOpenedEmailKey}
             />
           ))}
+        </>
+      ) : (
+        <EmptyScreenContainer
+          imageSrc={EmptyScreenUserReactSvgUrl}
+          imageAlt="Empty Screen user image"
+          headerText={t("Common:NotFoundUsers")}
+          descriptionText={t("Common:NotFoundUsersDescription")}
+          buttons={
+            <Box displayProp="flex" alignItems="center">
+              <IconButton
+                className="clear-icon"
+                isFill
+                size={12}
+                onClick={onClearFilter}
+                iconName={ClearEmptyFilterSvgUrl}
+              />
+              <Link
+                type={LinkType.action}
+                isHovered
+                fontWeight="600"
+                onClick={onClearFilter}
+              >
+                {t("Common:ClearFilter")}
+              </Link>
+            </Box>
+          }
+        />
+      )}
     </StyledRowContainer>
   );
 };
@@ -126,6 +169,7 @@ export default inject<TStore>(({ importAccountsStore }) => {
     toggleAccount,
     toggleAllAccounts,
     isAccountChecked,
+    setSearchValue,
   } = importAccountsStore;
 
   return {
@@ -134,5 +178,6 @@ export default inject<TStore>(({ importAccountsStore }) => {
     toggleAccount,
     toggleAllAccounts,
     isAccountChecked,
+    setSearchValue,
   };
 })(observer(RowView));

packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/TableView/index.tsx

@@ -27,7 +27,13 @@
 import { useState, useRef } from "react";
 import { inject, observer } from "mobx-react";
 
+import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
+import { IconButton } from "@docspace/shared/components/icon-button";
+import { Link, LinkType } from "@docspace/shared/components/link";
+import { Box } from "@docspace/shared/components/box";
 import { TableBody } from "@docspace/shared/components/table";
+import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
+import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
 import UsersTableHeader from "./UsersTableHeader";
 import UsersTableRow from "./UsersTableRow";
 import { StyledTableContainer } from "../../../../StyledDataImport";
@@ -45,13 +51,13 @@ const TableView = (props: TableViewProps) => {
     t,
     sectionWidth,
     accountsData,
-
     userId,
     checkedUsers,
     toggleAccount,
     toggleAllAccounts,
     isAccountChecked,
     users,
+    setSearchValue,
   } = props as AddEmailTableProps;
   const [openedEmailKey, setOpenedEmailKey] = useState<string>("");
   const tableRef = useRef(null);
@@ -67,6 +73,10 @@ const TableView = (props: TableViewProps) => {
       checkedAccountType,
     );
 
+  const onClearFilter = () => {
+    setSearchValue("");
+  };
+
   const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
   const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
 
@@ -76,6 +86,8 @@ const TableView = (props: TableViewProps) => {
 
   return (
     <StyledTableContainer forwardedRef={tableRef} useReactWindow>
+      {accountsData.length > 0 ? (
+        <>
           <UsersTableHeader
             t={t}
             sectionWidth={sectionWidth}
@@ -114,6 +126,34 @@ const TableView = (props: TableViewProps) => {
               />
             ))}
           </TableBody>
+        </>
+      ) : (
+        <EmptyScreenContainer
+          imageSrc={EmptyScreenUserReactSvgUrl}
+          imageAlt="Empty Screen user image"
+          headerText={t("Common:NotFoundUsers")}
+          descriptionText={t("Common:NotFoundUsersDescription")}
+          buttons={
+            <Box displayProp="flex" alignItems="center">
+              <IconButton
+                className="clear-icon"
+                isFill
+                size={12}
+                onClick={onClearFilter}
+                iconName={ClearEmptyFilterSvgUrl}
+              />
+              <Link
+                type={LinkType.action}
+                isHovered
+                fontWeight="600"
+                onClick={onClearFilter}
+              >
+                {t("Common:ClearFilter")}
+              </Link>
+            </Box>
+          }
+        />
+      )}
     </StyledTableContainer>
   );
 };
@@ -126,6 +166,7 @@ export default inject<TStore>(({ userStore, importAccountsStore }) => {
     toggleAccount,
     toggleAllAccounts,
     isAccountChecked,
+    setSearchValue,
   } = importAccountsStore;
 
   return {
@@ -135,5 +176,6 @@ export default inject<TStore>(({ userStore, importAccountsStore }) => {
     toggleAccount,
     toggleAllAccounts,
     isAccountChecked,
+    setSearchValue,
   };
 })(observer(TableView));

packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/index.tsx

@@ -51,7 +51,6 @@ const REFRESH_TIMEOUT = 100;
 const AddEmailsStep = (props: AddEmailsStepProps) => {
   const {
     t,
-
     incrementStep,
     decrementStep,
     users,
@@ -67,10 +66,8 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
     setWorkspace,
     setMigratingWorkspace,
     setMigrationPhase,
-
     cancelUploadDialogVisible,
     setCancelUploadDialogVisible,
-
     quotaCharacteristics,
   } = props as InjectedAddEmailsStepProps;
 
@@ -97,8 +94,8 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
   const filteredAccounts = dataPortion.filter(
     (data) =>
       data.firstName?.toLowerCase().startsWith(searchValue.toLowerCase()) ||
-      data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
-      data.email.toLowerCase().startsWith(searchValue.toLowerCase()),
+      data.displayName?.toLowerCase().startsWith(searchValue.toLowerCase()) ||
+      data.email?.toLowerCase().startsWith(searchValue.toLowerCase()),
   );
 
   const handleStepIncrement = () => {
@@ -195,7 +192,7 @@ const AddEmailsStep = (props: AddEmailsStepProps) => {
         </Text>
       )}
 
-      {Buttons}
+      {filteredAccounts.length > 0 && Buttons}
 
       {cancelUploadDialogVisible && (
         <CancelUploadDialog

packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts

@@ -169,6 +169,7 @@ export interface InjectedTableViewProps extends TableViewProps {
 
 export interface AddEmailTableProps extends InjectedTableViewProps {
   users: TStore["importAccountsStore"]["users"];
+  setSearchValue: TStore["importAccountsStore"]["setSearchValue"];
 }
 
 export interface SelectUserTableProps extends InjectedTableViewProps {
@@ -220,6 +221,7 @@ export interface AddEmailRowProps extends RowViewProps {
   toggleAccount: TStore["importAccountsStore"]["toggleAccount"];
   toggleAllAccounts: TStore["importAccountsStore"]["toggleAllAccounts"];
   isAccountChecked: TStore["importAccountsStore"]["isAccountChecked"];
+  setSearchValue: TStore["importAccountsStore"]["setSearchValue"];
 }
 
 export interface UsersRowProps {