added empty screen

2023-09-26 13:40:12 +05:00 · 2023-09-26 13:40:12 +05:00 · 7a4e734699
commit 7a4e734699
parent 9372eb3012
11 changed files with 378 additions and 162 deletions
--- a/packages/client/public/locales/en/People.json
+++ b/packages/client/public/locales/en/People.json
@ -3,5 +3,6 @@
  "MessageEmailActivationInstuctionsSentOnEmail": "The email activation instructions have been sent to the <1>{{email}}</1> email address.",
  "NotFoundUsers": "No users found",
  "NotFoundUsersDescription": "No people matching your filter can be displayed. Please select other filter options or clear filter to view all the people in this section.",
-  "UserStatus": "Status"
+  "UserStatus": "Status",
+  "NotFoundUsersDesc": "No users match your search. Please adjust your search parameters or clear the search field to view the full list of users."
 }
--- a/packages/client/public/locales/ru/People.json
+++ b/packages/client/public/locales/ru/People.json
@ -3,5 +3,6 @@
  "MessageEmailActivationInstuctionsSentOnEmail": "Инструкции по активации электронной почты были отправлены на адрес <1>{{email}}</1>.",
  "NotFoundUsers": "Пользователи не найдены",
  "NotFoundUsersDescription": "Невозможно отобразить людей, соответствующих вашему фильтру. Выберите другие параметры фильтра или очистите фильтр, чтобы просмотреть всех людей в этом разделе.",
-  "UserStatus": "Статус"
+  "UserStatus": "Статус",
+  "NotFoundUsersDesc": "Ни один пользователь не соответствует вашему запросу. Пожалуйста, измените параметры поиска или очистите поле поиска, чтобы просмотреть полный список пользователей."
 }
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js
@ -4,14 +4,28 @@ import { isMobile } from "react-device-detect";
 import { tablet } from "@docspace/components/utils/device";
 import styled from "styled-components";

+import EmptyScreenContainer from "@docspace/components/empty-screen-container";
+import IconButton from "@docspace/components/icon-button";
+import Link from "@docspace/components/link";
+import Box from "@docspace/components/box";
 import RowContainer from "@docspace/components/row-container";
 import Row from "@docspace/components/row";
 import Checkbox from "@docspace/components/checkbox";
 import Text from "@docspace/components/text";
 import UsersRow from "./UsersRow";
+import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
+import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";

 const StyledRowContainer = styled(RowContainer)`
  margin: 0 0 20px;
+
+  .clear-icon {
+    margin-right: 8px;
+  }
+
+  .ec-desc {
+    max-width: 348px;
+  }
 `;

 const StyledRow = styled(Row)`
@ -50,7 +64,7 @@ const RowView = (props) => {
    toggleAccount,
    toggleAllAccounts,
    isAccountChecked,
-    searchValue,
+    setSearchValue,
  } = props;
  const rowRef = useRef(null);

@ -58,6 +72,10 @@ const RowView = (props) => {

  const handleToggle = (id) => toggleAccount(id);

+  const onClearFilter = () => {
+    setSearchValue("");
+  };
+
  const isIndeterminate =
    checkedAccounts.length > 0 && checkedAccounts.length !== users.length;

@ -71,36 +89,60 @@ const RowView = (props) => {
    }
  }, [sectionWidth]);

-  const filteredAccounts = accountsData.filter(
-    (data) =>
-      data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
-      data.email.toLowerCase().startsWith(searchValue.toLowerCase())
-  );
-
  return (
    <StyledRowContainer forwardedRef={rowRef} useReactWindow={false}>
-      <StyledRow sectionWidth={sectionWidth}>
-        <div className="row-header-item">
-          {checkedAccounts.length > 0 && (
-            <Checkbox
-              isChecked={checkedAccounts.length === users.length}
-              isIndeterminate={isIndeterminate}
-              onChange={toggleAll}
+      {accountsData.length > 0 ? (
+        <>
+          <StyledRow sectionWidth={sectionWidth}>
+            <div className="row-header-item">
+              {checkedAccounts.length > 0 && (
+                <Checkbox
+                  isChecked={checkedAccounts.length === users.length}
+                  isIndeterminate={isIndeterminate}
+                  onChange={toggleAll}
+                />
+              )}
+              <Text className="row-header-title">{t("Common:Name")}</Text>
+            </div>
+          </StyledRow>
+          {accountsData.map((data) => (
+            <UsersRow
+              t={t}
+              key={data.key}
+              data={data}
+              sectionWidth={sectionWidth}
+              isChecked={isAccountChecked(data.key)}
+              toggleAccount={() => handleToggle(data.key)}
            />
-          )}
-          <Text className="row-header-title">{t("Common:Name")}</Text>
-        </div>
-      </StyledRow>
-      {filteredAccounts.map((data) => (
-        <UsersRow
-          t={t}
-          key={data.key}
-          data={data}
-          sectionWidth={sectionWidth}
-          isChecked={isAccountChecked(data.key)}
-          toggleAccount={() => handleToggle(data.key)}
+          ))}
+        </>
+      ) : (
+        <EmptyScreenContainer
+          imageSrc={EmptyScreenUserReactSvgUrl}
+          imageAlt="Empty Screen user image"
+          headerText={t("People:NotFoundUsers")}
+          descriptionText={t("People:NotFoundUsersDesc")}
+          buttons={
+            <Box displayProp="flex" alignItems="center">
+              <IconButton
+                className="clear-icon"
+                isFill
+                size="12"
+                onClick={onClearFilter}
+                iconName={ClearEmptyFilterSvgUrl}
+              />
+              <Link
+                type="action"
+                isHovered={true}
+                fontWeight="600"
+                onClick={onClearFilter}
+              >
+                {t("Common:ClearFilter")}
+              </Link>
+            </Box>
+          }
        />
-      ))}
+      )}
    </StyledRowContainer>
  );
 };
@ -113,7 +155,7 @@ export default inject(({ setup, importAccountsStore }) => {
    toggleAccount,
    toggleAllAccounts,
    isAccountChecked,
-    searchValue,
+    setSearchValue,
  } = importAccountsStore;

  return {
@ -124,6 +166,6 @@ export default inject(({ setup, importAccountsStore }) => {
    toggleAccount,
    toggleAllAccounts,
    isAccountChecked,
-    searchValue,
+    setSearchValue,
  };
 })(observer(RowView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js
@ -4,10 +4,16 @@ import { isMobile } from "react-device-detect";
 import { Base } from "@docspace/components/themes";
 import styled from "styled-components";

+import EmptyScreenContainer from "@docspace/components/empty-screen-container";
+import IconButton from "@docspace/components/icon-button";
+import Link from "@docspace/components/link";
+import Box from "@docspace/components/box";
 import UsersTableHeader from "./UsersTableHeader";
 import UsersTableRow from "./UsersTableRow";
 import TableContainer from "@docspace/components/table-container/TableContainer";
 import TableBody from "@docspace/components/table-container/TableBody";
+import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
+import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";

 const StyledTableContainer = styled(TableContainer)`
  margin: 0 0 20px;
@ -29,6 +35,14 @@ const StyledTableContainer = styled(TableContainer)`
        props.theme.client.settings.migration.tableRowHoverColor};
    }
  }
+  .clear-icon {
+    margin-right: 8px;
+    margin-top: 2px;
+  }
+
+  .ec-desc {
+    max-width: 618px;
+  }
 `;

 StyledTableContainer.defaultProps = { theme: Base };
@ -40,6 +54,7 @@ const INFO_PANEL_COLUMNS_SIZE = `infoPanelGoogleWorkspaceColumnsSize_ver-${TABLE
 const TableView = (props) => {
  const {
    t,
+    users,
    userId,
    viewAs,
    setViewAs,
@ -49,8 +64,7 @@ const TableView = (props) => {
    toggleAccount,
    toggleAllAccounts,
    isAccountChecked,
-    users,
-    searchValue,
+    setSearchValue,
  } = props;
  const tableRef = useRef(null);

@ -61,6 +75,10 @@ const TableView = (props) => {
    toggleAccount(id);
  };

+  const onClearFilter = () => {
+    setSearchValue("");
+  };
+
  const isIndeterminate =
    checkedAccounts.length > 0 && checkedAccounts.length !== users.length;

@ -76,47 +94,71 @@ const TableView = (props) => {
  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;

-  const filteredAccounts = accountsData.filter(
-    (data) =>
-      data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
-      data.email.toLowerCase().startsWith(searchValue.toLowerCase())
-  );
-
  return (
    <StyledTableContainer forwardedRef={tableRef} useReactWindow>
-      <UsersTableHeader
-        t={t}
-        sectionWidth={sectionWidth}
-        tableRef={tableRef}
-        userId={userId}
-        columnStorageName={columnStorageName}
-        columnInfoPanelStorageName={columnInfoPanelStorageName}
-        isIndeterminate={isIndeterminate}
-        isChecked={checkedAccounts.length === users.length}
-        toggleAll={toggleAll}
-      />
-      <TableBody
-        itemHeight={49}
-        useReactWindow
-        infoPanelVisible={false}
-        columnStorageName={columnStorageName}
-        columnInfoPanelStorageName={columnInfoPanelStorageName}
-        filesLength={accountsData.length}
-        hasMoreFiles={false}
-        itemCount={accountsData.length}
-      >
-        {filteredAccounts.map((data) => (
-          <UsersTableRow
+      {accountsData.length > 0 ? (
+        <>
+          <UsersTableHeader
            t={t}
-            key={data.key}
-            displayName={data.displayName}
-            email={data.email}
-            isDublicate={data.isDublicate}
-            isChecked={isAccountChecked(data.key)}
-            toggleAccount={(e) => handleToggle(e, data.key)}
+            sectionWidth={sectionWidth}
+            tableRef={tableRef}
+            userId={userId}
+            columnStorageName={columnStorageName}
+            columnInfoPanelStorageName={columnInfoPanelStorageName}
+            isIndeterminate={isIndeterminate}
+            isChecked={checkedAccounts.length === users.length}
+            toggleAll={toggleAll}
          />
-        ))}
-      </TableBody>
+          <TableBody
+            itemHeight={49}
+            useReactWindow
+            infoPanelVisible={false}
+            columnStorageName={columnStorageName}
+            columnInfoPanelStorageName={columnInfoPanelStorageName}
+            filesLength={accountsData.length}
+            hasMoreFiles={false}
+            itemCount={accountsData.length}
+          >
+            {accountsData.map((data) => (
+              <UsersTableRow
+                t={t}
+                key={data.key}
+                displayName={data.displayName}
+                email={data.email}
+                isDublicate={data.isDublicate}
+                isChecked={isAccountChecked(data.key)}
+                toggleAccount={(e) => handleToggle(e, data.key)}
+              />
+            ))}
+          </TableBody>
+        </>
+      ) : (
+        <EmptyScreenContainer
+          imageSrc={EmptyScreenUserReactSvgUrl}
+          imageAlt="Empty Screen user image"
+          headerText={t("People:NotFoundUsers")}
+          descriptionText={t("People:NotFoundUsersDesc")}
+          buttons={
+            <Box displayProp="flex" alignItems="center">
+              <IconButton
+                className="clear-icon"
+                isFill
+                size="12"
+                onClick={onClearFilter}
+                iconName={ClearEmptyFilterSvgUrl}
+              />
+              <Link
+                type="action"
+                isHovered={true}
+                fontWeight="600"
+                onClick={onClearFilter}
+              >
+                {t("Common:ClearFilter")}
+              </Link>
+            </Box>
+          }
+        />
+      )}
    </StyledTableContainer>
  );
 };
@ -125,12 +167,12 @@ export default inject(({ setup, auth, importAccountsStore }) => {
  const { viewAs, setViewAs } = setup;
  const { id: userId } = auth.userStore.user;
  const {
+    users,
    checkedAccounts,
    toggleAccount,
    toggleAllAccounts,
    isAccountChecked,
-    users,
-    searchValue,
+    setSearchValue,
  } = importAccountsStore;

  return {
@ -142,6 +184,6 @@ export default inject(({ setup, auth, importAccountsStore }) => {
    toggleAccount,
    toggleAllAccounts,
    isAccountChecked,
-    searchValue,
+    setSearchValue,
  };
 })(observer(TableView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/index.js
@ -1,4 +1,5 @@
 import { inject, observer } from "mobx-react";
+import { withTranslation } from "react-i18next";
 import { Consumer } from "@docspace/components/utils/context";

 import TableView from "./TableView";
@ -32,4 +33,4 @@ export default inject(({ setup }) => {
  return {
    viewAs,
  };
-})(observer(AccountsTable));
+})(withTranslation(["People"])(observer(AccountsTable)));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/index.js
@ -34,6 +34,12 @@ const SelectUsersStep = ({
    setSearchValue("");
  };

+  const filteredAccounts = dataPortion.filter(
+    (data) =>
+      data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
+      data.email.toLowerCase().startsWith(searchValue.toLowerCase())
+  );
+
  return (
    <>
      <SaveCancelButtons
@ -63,7 +69,7 @@ const SelectUsersStep = ({
        onClearSearch={onClearSearchInput}
      />

-      <AccountsTable t={t} accountsData={dataPortion} />
+      <AccountsTable t={t} accountsData={filteredAccounts} />

      {users.length > 25 && (
        <AccountsPaging
@ -73,16 +79,18 @@ const SelectUsersStep = ({
        />
      )}

-      <SaveCancelButtons
-        className="save-cancel-buttons"
-        onSaveClick={onNextStep}
-        onCancelClick={onPrevStep}
-        showReminder={showReminder}
-        saveButtonLabel={t("Settings:NextStep")}
-        cancelButtonLabel={t("Common:Back")}
-        displaySettings={true}
-        saveButtonDisabled={numberOfCheckedAccounts > LICENSE_LIMIT}
-      />
+      {filteredAccounts.length > 0 && (
+        <SaveCancelButtons
+          className="save-cancel-buttons"
+          onSaveClick={onNextStep}
+          onCancelClick={onPrevStep}
+          showReminder={showReminder}
+          saveButtonLabel={t("Settings:NextStep")}
+          cancelButtonLabel={t("Common:Back")}
+          displaySettings={true}
+          saveButtonDisabled={numberOfCheckedAccounts > LICENSE_LIMIT}
+        />
+      )}
    </>
  );
 };
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
@ -6,11 +6,17 @@ import styled from "styled-components";

 import UsersTypeRow from "./UsersTypeRow";

+import EmptyScreenContainer from "@docspace/components/empty-screen-container";
+import IconButton from "@docspace/components/icon-button";
+import Link from "@docspace/components/link";
+import Box from "@docspace/components/box";
 import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
 import RowContainer from "@docspace/components/row-container";
 import Row from "@docspace/components/row";
 import Text from "@docspace/components/text";
 import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
+import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
+import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";

 const StyledRowContainer = styled(RowContainer)`
  margin: 0 0 20px;
@ -47,6 +53,14 @@ const StyledRowContainer = styled(RowContainer)`
  .table-container_header {
    position: absolute;
  }
+
+  .clear-icon {
+    margin-right: 8px;
+  }
+
+  .ec-desc {
+    max-width: 348px;
+  }
 `;

 const StyledRow = styled(Row)`
@ -78,7 +92,7 @@ const RowView = ({
  toggleAccount,
  isAccountChecked,
  onCheckAccounts,
-  searchValue,
+  setSearchValue,
 }) => {
  const rowRef = useRef(null);

@ -86,6 +100,10 @@ const RowView = ({
    onCheckAccounts(checked, users);
  };

+  const onClearFilter = () => {
+    setSearchValue("");
+  };
+
  const isIndeterminate =
    checkedAccounts.length > 0 && checkedAccounts.length !== users.length;

@ -105,19 +123,12 @@ const RowView = ({
      key: "change-type",
      label: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
      disabled: false,
-      onClick: () => console.log("open-menu"),
      withDropDown: true,
      options: typeOptions,
      iconUrl: ChangeTypeReactSvgUrl,
    },
  ];

-  const filteredAccounts = accountsData.filter(
-    (data) =>
-      data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
-      data.email.toLowerCase().startsWith(searchValue.toLowerCase())
-  );
-
  return (
    <StyledRowContainer forwardedRef={rowRef} useReactWindow={false}>
      {checkedAccounts.length > 0 && (
@ -133,21 +144,50 @@ const RowView = ({
          />
        </div>
      )}
+      {accountsData.length > 0 ? (
+        <>
+          <StyledRow key="Name" sectionWidth={sectionWidth} onClick={toggleAll}>
+            <Text className="row-header-title">{t("Common:Name")}</Text>
+          </StyledRow>

-      <StyledRow key="Name" sectionWidth={sectionWidth} onClick={toggleAll}>
-        <Text className="row-header-title">{t("Common:Name")}</Text>
-      </StyledRow>
-
-      {filteredAccounts.map((data) => (
-        <UsersTypeRow
-          key={data.key}
-          data={data}
-          sectionWidth={sectionWidth}
-          typeOptions={typeOptions}
-          isChecked={isAccountChecked(data.key)}
-          toggleAccount={() => toggleAccount(data.key)}
+          {accountsData.map((data) => (
+            <UsersTypeRow
+              key={data.key}
+              data={data}
+              sectionWidth={sectionWidth}
+              typeOptions={typeOptions}
+              isChecked={isAccountChecked(data.key)}
+              toggleAccount={() => toggleAccount(data.key)}
+            />
+          ))}
+        </>
+      ) : (
+        <EmptyScreenContainer
+          imageSrc={EmptyScreenUserReactSvgUrl}
+          imageAlt="Empty Screen user image"
+          headerText={t("People:NotFoundUsers")}
+          descriptionText={t("People:NotFoundUsersDesc")}
+          buttons={
+            <Box displayProp="flex" alignItems="center">
+              <IconButton
+                className="clear-icon"
+                isFill
+                size="12"
+                onClick={onClearFilter}
+                iconName={ClearEmptyFilterSvgUrl}
+              />
+              <Link
+                type="action"
+                isHovered={true}
+                fontWeight="600"
+                onClick={onClearFilter}
+              >
+                {t("Common:ClearFilter")}
+              </Link>
+            </Box>
+          }
        />
-      ))}
+      )}
    </StyledRowContainer>
  );
 };
@ -161,7 +201,7 @@ export default inject(({ setup, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    onCheckAccounts,
-    searchValue,
+    setSearchValue,
  } = importAccountsStore;

  return {
@ -173,6 +213,6 @@ export default inject(({ setup, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    onCheckAccounts,
-    searchValue,
+    setSearchValue,
  };
 })(observer(RowView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
@ -3,14 +3,19 @@ import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 import { Base } from "@docspace/components/themes";
 import styled from "styled-components";
-
 import UsersTypeTableHeader from "./UsersTypeTableHeader";
 import UsersTypeTableRow from "./UsersTypeTableRow";

+import EmptyScreenContainer from "@docspace/components/empty-screen-container";
+import IconButton from "@docspace/components/icon-button";
+import Link from "@docspace/components/link";
+import Box from "@docspace/components/box";
 import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
 import TableContainer from "@docspace/components/table-container/TableContainer";
 import TableBody from "@docspace/components/table-container/TableBody";
 import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
+import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
+import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";

 const StyledTableContainer = styled(TableContainer)`
  margin: 0 0 20px;
@ -57,6 +62,15 @@ const StyledTableContainer = styled(TableContainer)`
        props.theme.client.settings.migration.tableRowHoverColor};
    }
  }
+
+  .clear-icon {
+    margin-right: 8px;
+    margin-top: 2px;
+  }
+
+  .ec-desc {
+    max-width: 618px;
+  }
 `;

 StyledTableContainer.defaultProps = { theme: Base };
@ -78,7 +92,7 @@ const TableView = ({
  toggleAccount,
  onCheckAccounts,
  isAccountChecked,
-  searchValue,
+  setSearchValue,
 }) => {
  const tableRef = useRef(null);
  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
@ -96,6 +110,10 @@ const TableView = ({
    toggleAccount(id);
  };

+  const onClearFilter = () => {
+    setSearchValue("");
+  };
+
  useEffect(() => {
    if (!sectionWidth) return;
    if (sectionWidth < 1025 || isMobile) {
@ -111,19 +129,12 @@ const TableView = ({
      key: "change-type",
      label: t("ChangeUserTypeDialog:ChangeUserTypeButton"),
      disabled: false,
-      onClick: () => console.log("open-menu"),
      withDropDown: true,
      options: typeOptions,
      iconUrl: ChangeTypeReactSvgUrl,
    },
  ];

-  const filteredAccounts = accountsData.filter(
-    (data) =>
-      data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
-      data.email.toLowerCase().startsWith(searchValue.toLowerCase())
-  );
-
  return (
    <StyledTableContainer forwardedRef={tableRef} useReactWindow>
      {checkedAccounts.length > 0 && (
@ -139,39 +150,70 @@ const TableView = ({
          />
        </div>
      )}
-      <UsersTypeTableHeader
-        t={t}
-        sectionWidth={sectionWidth}
-        tableRef={tableRef}
-        columnStorageName={columnStorageName}
-        columnInfoPanelStorageName={columnInfoPanelStorageName}
-        isIndeterminate={isIndeterminate}
-        isChecked={checkedAccounts.length === users.length}
-        toggleAll={toggleAll}
-      />
-      <TableBody
-        itemHeight={49}
-        useReactWindow
-        infoPanelVisible={false}
-        columnStorageName={columnStorageName}
-        columnInfoPanelStorageName={columnInfoPanelStorageName}
-        filesLength={accountsData.length}
-        hasMoreFiles={false}
-        itemCount={accountsData.length}
-      >
-        {filteredAccounts.map((data) => (
-          <UsersTypeTableRow
-            key={data.key}
-            id={data.key}
-            type={data.userType}
-            displayName={data.displayName}
-            email={data.email}
-            typeOptions={typeOptions}
-            isChecked={isAccountChecked(data.key)}
-            toggleAccount={(e) => handleToggle(e, data.key)}
+
+      {accountsData.length > 0 ? (
+        <>
+          <UsersTypeTableHeader
+            t={t}
+            sectionWidth={sectionWidth}
+            tableRef={tableRef}
+            columnStorageName={columnStorageName}
+            columnInfoPanelStorageName={columnInfoPanelStorageName}
+            isIndeterminate={isIndeterminate}
+            isChecked={checkedAccounts.length === users.length}
+            toggleAll={toggleAll}
          />
-        ))}
-      </TableBody>
+          <TableBody
+            itemHeight={49}
+            useReactWindow
+            infoPanelVisible={false}
+            columnStorageName={columnStorageName}
+            columnInfoPanelStorageName={columnInfoPanelStorageName}
+            filesLength={accountsData.length}
+            hasMoreFiles={false}
+            itemCount={accountsData.length}
+          >
+            {accountsData.map((data) => (
+              <UsersTypeTableRow
+                key={data.key}
+                id={data.key}
+                type={data.userType}
+                displayName={data.displayName}
+                email={data.email}
+                typeOptions={typeOptions}
+                isChecked={isAccountChecked(data.key)}
+                toggleAccount={(e) => handleToggle(e, data.key)}
+              />
+            ))}
+          </TableBody>
+        </>
+      ) : (
+        <EmptyScreenContainer
+          imageSrc={EmptyScreenUserReactSvgUrl}
+          imageAlt="Empty Screen user image"
+          headerText={t("People:NotFoundUsers")}
+          descriptionText={t("People:NotFoundUsersDesc")}
+          buttons={
+            <Box displayProp="flex" alignItems="center">
+              <IconButton
+                className="clear-icon"
+                isFill
+                size="12"
+                onClick={onClearFilter}
+                iconName={ClearEmptyFilterSvgUrl}
+              />
+              <Link
+                type="action"
+                isHovered={true}
+                fontWeight="600"
+                onClick={onClearFilter}
+              >
+                {t("Common:ClearFilter")}
+              </Link>
+            </Box>
+          }
+        />
+      )}
    </StyledTableContainer>
  );
 };
@ -186,7 +228,7 @@ export default inject(({ setup, auth, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    onCheckAccounts,
-    searchValue,
+    setSearchValue,
  } = importAccountsStore;

  return {
@ -199,6 +241,6 @@ export default inject(({ setup, auth, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    onCheckAccounts,
-    searchValue,
+    setSearchValue,
  };
 })(observer(TableView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js
@ -10,14 +10,17 @@ const AccountsTable = ({ t, viewAs, accountsData }) => {
    {
      key: "DocSpaceAdmin",
      label: t("Common:DocSpaceAdmin"),
+      onClick: (e) => console.log(e),
    },
    {
      key: "RoomAdmin",
      label: t("Common:RoomAdmin"),
+      onClick: (e) => console.log(e),
    },
    {
      key: "User",
      label: t("Common:PowerUser"),
+      onClick: (e) => console.log(e),
    },
  ];

@ -50,4 +53,6 @@ export default inject(({ setup }) => {
  return {
    viewAs,
  };
-})(withTranslation(["ChangeUserTypeDialog"])(observer(AccountsTable)));
+})(
+  withTranslation(["ChangeUserTypeDialog", "People"])(observer(AccountsTable))
+);
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js
@ -35,6 +35,12 @@ const SelectUsersTypeStep = ({
    setSearchValue("");
  };

+  const filteredAccounts = dataPortion.filter(
+    (data) =>
+      data.displayName.toLowerCase().startsWith(searchValue.toLowerCase()) ||
+      data.email.toLowerCase().startsWith(searchValue.toLowerCase())
+  );
+
  return (
    <>
      <SaveCancelButtons
@ -58,7 +64,7 @@ const SelectUsersTypeStep = ({
        />
      )}

-      <AccountsTable t={t} accountsData={dataPortion} />
+      <AccountsTable t={t} accountsData={filteredAccounts} />

      {users.length > 25 && (
        <AccountsPaging
@ -68,15 +74,17 @@ const SelectUsersTypeStep = ({
        />
      )}

-      <SaveCancelButtons
-        className="save-cancel-buttons"
-        onSaveClick={onNextStep}
-        onCancelClick={onPrevStep}
-        showReminder={showReminder}
-        saveButtonLabel={t("Settings:NextStep")}
-        cancelButtonLabel={t("Common:Back")}
-        displaySettings={true}
-      />
+      {filteredAccounts.length > 0 && (
+        <SaveCancelButtons
+          className="save-cancel-buttons"
+          onSaveClick={onNextStep}
+          onCancelClick={onPrevStep}
+          showReminder={showReminder}
+          saveButtonLabel={t("Settings:NextStep")}
+          cancelButtonLabel={t("Common:Back")}
+          displaySettings={true}
+        />
+      )}
    </>
  );
 };
--- a/public/images/empty_screen_user.react.svg
+++ b/public/images/empty_screen_user.react.svg