Web: Accounts: added hotkeys support

packages/client/src/pages/Home/Hooks/index.js

@@ -32,3 +32,4 @@ export { default as useGroups } from "./useGroups";
 export { default as useSettings } from "./useSettings";
 export { default as usePublic } from "./usePublic";
 export { default as useInsideGroup } from "./useInsideGroup";
+export { default as useAccountsHotkeys } from "./useAccountsHotkeys";

packages/client/src/pages/Home/Hooks/useAccountsHotkeys.ts

@@ -0,0 +1,109 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// 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 { useEffect, useState, useCallback } from "react";
+import { useHotkeys, Options } from "react-hotkeys-hook";
+import throttle from "lodash/throttle";
+import { checkDialogsOpen } from "@docspace/shared/utils/checkDialogsOpen";
+
+interface AccountsHotkeysProps {
+  enabledHotkeys: boolean;
+  accountsIsIsLoading: boolean;
+
+  selectBottom: () => void;
+  selectUpper: () => void;
+  activateHotkeys: (e: KeyboardEvent) => void;
+}
+
+const useAccountsHotkeys = ({
+  enabledHotkeys,
+  accountsIsIsLoading,
+  selectBottom,
+  selectUpper,
+  activateHotkeys,
+}: AccountsHotkeysProps) => {
+  const [isEnabled, setIsEnabled] = useState(true);
+
+  const hotkeysFilter = {
+    filter: (ev) => {
+      const eElement = ev.target as HTMLElement;
+      const eInputElement = ev.target as HTMLInputElement;
+      return (
+        eInputElement?.type === "checkbox" || eElement?.tagName !== "INPUT"
+      );
+    },
+    filterPreventDefault: false,
+    enableOnTags: ["INPUT"],
+    enabled: enabledHotkeys && !accountsIsIsLoading && isEnabled,
+  } as Options;
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const someDialogIsOpen = checkDialogsOpen();
+      setIsEnabled(!someDialogIsOpen);
+
+      activateHotkeys(e);
+    },
+    [activateHotkeys],
+  );
+
+  useEffect(() => {
+    const throttledKeyDownEvent = throttle(onKeyDown, 300);
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keypress", throttledKeyDownEvent);
+    };
+  }, [onKeyDown]);
+
+  useHotkeys(
+    "*",
+    (e) => {
+      const someDialogIsOpen = checkDialogsOpen();
+
+      if (e.shiftKey || e.ctrlKey || someDialogIsOpen) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+        case "j": {
+          return selectBottom();
+        }
+
+        case "ArrowUp":
+        case "k": {
+          return selectUpper();
+        }
+
+        default:
+          break;
+      }
+    },
+    hotkeysFilter,
+  );
+};
+
+export default useAccountsHotkeys;

packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/GroupsRow.js

@@ -84,7 +84,7 @@ const GroupsRow = ({
       isActive={isActive}
       className={`group-item row-wrapper ${
         isChecked || isActive ? "row-selected" : ""
-      }`}
+      } ${item.id}`}
       value={item.id}
     >
       <div className={"group-item"}>

packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js

@@ -90,7 +90,7 @@ const GroupsTableItem = ({
     <Styled.GroupsRowWrapper
       className={`group-item ${
         (isChecked || isActive) && "table-row-selected"
-      }`}
+      } ${item.id}`}
       value={value}
     >
       <Styled.GroupsRow

packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js

@@ -146,7 +146,7 @@ const SimpleUserRow = (props) => {
     <StyledWrapper
       className={`user-item row-wrapper ${
         isChecked || isActive ? "row-selected" : ""
-      }`}
+      } ${item.id}`}
       value={value}
       checked={isChecked}
       isActive={isActive}

packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js

@@ -469,7 +469,7 @@ const InsideGroupTableRow = (props) => {
     <StyledWrapper
       className={`user-item ${
         isChecked || isActive ? "table-row-selected" : ""
-      }`}
+      } ${item.id}`}
       value={value}
     >
       <StyledPeopleRow

packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js

@@ -146,7 +146,7 @@ const SimpleUserRow = (props) => {
     <StyledWrapper
       className={`user-item row-wrapper ${
         isChecked || isActive ? "row-selected" : ""
-      }`}
+      } ${item.id}`}
       value={value}
       checked={isChecked}
       isActive={isActive}

packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js

@@ -472,7 +472,7 @@ const PeopleTableRow = (props) => {
     <StyledWrapper
       className={`user-item ${
         isChecked || isActive ? "table-row-selected" : ""
-      }`}
+      } ${item.id}`}
       value={value}
     >
       <StyledPeopleRow

packages/client/src/pages/Home/Section/AccountsBody/index.js

@@ -35,6 +35,7 @@ import InsideGroup from "./InsideGroup";
 import { withTranslation } from "react-i18next";
 import { Consumer } from "@docspace/shared/utils";
 import withLoader from "SRC_DIR/HOCs/withLoader";
+import { useAccountsHotkeys } from "../../Hooks";
 
 const SectionBodyContent = (props) => {
   const {
@@ -47,11 +48,26 @@ const SectionBodyContent = (props) => {
     setGroupsBufferSelection,
     setChangeOwnerDialogVisible,
     selectUser,
+    enabledHotkeys,
+    accountsIsIsLoading,
+    selectBottom,
+    selectUpper,
+    activateHotkeys,
+    setHotkeyCaretStart,
+    setHotkeyCaret,
   } = props;
 
   const location = useLocation();
   const { groupId } = useParams();
 
+  useAccountsHotkeys({
+    enabledHotkeys,
+    accountsIsIsLoading,
+    selectBottom,
+    selectUpper,
+    activateHotkeys,
+  });
+
   useEffect(() => {
     window.addEventListener("mousedown", onMouseDown);
 
@@ -85,6 +101,8 @@ const SectionBodyContent = (props) => {
       setPeopleBufferSelection(null);
       setGroupsBufferSelection(null);
       window?.getSelection()?.removeAllRanges();
+      setHotkeyCaretStart(null);
+      setHotkeyCaret(null);
     }
   };
 
@@ -110,7 +128,12 @@ const SectionBodyContent = (props) => {
 };
 
 export default inject(({ peopleStore }) => {
-  const { viewAs: accountsViewAs, filterStore } = peopleStore;
+  const {
+    viewAs: accountsViewAs,
+    filterStore,
+    enabledHotkeys,
+    setEnabledHotkeys,
+  } = peopleStore;
   const { isFiltered } = filterStore;
 
   const {
@@ -125,6 +148,15 @@ export default inject(({ peopleStore }) => {
   } = peopleStore.groupsStore;
 
   const { setChangeOwnerDialogVisible } = peopleStore.dialogStore;
+  const { accountsIsIsLoading } = peopleStore.usersStore;
+
+  const {
+    selectBottom,
+    selectUpper,
+    activateHotkeys,
+    setHotkeyCaretStart,
+    setHotkeyCaret,
+  } = peopleStore.accountsHotkeysStore;
 
   return {
     accountsViewAs,
@@ -135,6 +167,15 @@ export default inject(({ peopleStore }) => {
     setGroupsBufferSelection,
     setChangeOwnerDialogVisible,
     selectUser,
+    enabledHotkeys,
+    accountsIsIsLoading,
+
+    selectBottom,
+    selectUpper,
+    activateHotkeys,
+    setEnabledHotkeys,
+    setHotkeyCaretStart,
+    setHotkeyCaret,
   };
 })(
   withTranslation(["People", "Common", "PeopleTranslations"])(