fix(ui): Migrate to keyhook helpers in argo-ui, update keybindings ac…

…cordingly (argoproj#6953) Signed-off-by: Remington Breeze <[email protected]>
jstewart612 · Aug 13, 2021 · 3887289 · 3887289
1 parent d842e83
commit 3887289
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 59 deletions.
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -3,3 +3,5 @@ node_modules
 junit.xml
 coverage
 /yarn-error.log
+.yalc
+yalc.lock
diff --git a/ui/package.json b/ui/package.json
@@ -56,7 +56,6 @@
     "react-ga": "^2.6.0",
     "react-helmet": "^5.2.0",
     "react-hot-loader": "^3.1.3",
-    "react-keyhooks": "^0.2.0",
     "react-moment": "^0.9.2",
     "react-paginate": "^6.2.1",
     "react-router": "^4.3.1",

diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -1,7 +1,7 @@
 import {Autocomplete, ErrorNotification, MockupList, NotificationType, SlidingPanel, Toolbar} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as React from 'react';
-import {Key, KeybindingContext, KeybindingProvider} from 'react-keyhooks';
+import {Key, KeybindingContext, KeybindingProvider} from 'argo-ui/v2';
 import {RouteComponentProps} from 'react-router';
 import {combineLatest, from, merge, Observable} from 'rxjs';
 import {bufferTime, delay, filter, map, mergeMap, repeat, retryWhen} from 'rxjs/operators';
@@ -168,22 +168,28 @@ const SearchBar = (props: {content: string; ctx: ContextApis; apps: models.Appli
     const {useKeybinding} = React.useContext(KeybindingContext);
     const [isFocused, setFocus] = React.useState(false);
 
-    useKeybinding(Key.SLASH, () => {
-        if (searchBar.current && !appInput) {
-            searchBar.current.querySelector('input').focus();
-            setFocus(true);
-            return true;
+    useKeybinding({
+        keys: Key.SLASH,
+        action: () => {
+            if (searchBar.current && !appInput) {
+                searchBar.current.querySelector('input').focus();
+                setFocus(true);
+                return true;
+            }
+            return false;
         }
-        return false;
     });
 
-    useKeybinding(Key.ESCAPE, () => {
-        if (searchBar.current && !appInput && isFocused) {
-            searchBar.current.querySelector('input').blur();
-            setFocus(false);
-            return true;
+    useKeybinding({
+        keys: Key.ESCAPE,
+        action: () => {
+            if (searchBar.current && !appInput && isFocused) {
+                searchBar.current.querySelector('input').blur();
+                setFocus(false);
+                return true;
+            }
+            return false;
         }
-        return false;
     });
 
     return (

diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -1,6 +1,6 @@
 import {DropDownMenu} from 'argo-ui';
 import * as React from 'react';
-import {Key, KeybindingContext, useNav} from 'react-keyhooks';
+import {Key, KeybindingContext, useNav} from 'argo-ui/v2';
 import {Cluster} from '../../../shared/components';
 import {Consumer} from '../../../shared/context';
 import * as models from '../../../shared/models';
@@ -19,11 +19,14 @@ export const ApplicationsTable = (props: {
 
     const {useKeybinding} = React.useContext(KeybindingContext);
 
-    useKeybinding(Key.DOWN, () => navApp(1));
-    useKeybinding(Key.UP, () => navApp(-1));
-    useKeybinding(Key.ESCAPE, () => {
-        reset();
-        return selectedApp > -1 ? true : false;
+    useKeybinding({keys: Key.DOWN, action: () => navApp(1)});
+    useKeybinding({keys: Key.UP, action: () => navApp(-1)});
+    useKeybinding({
+        keys: Key.ESCAPE,
+        action: () => {
+            reset();
+            return selectedApp > -1 ? true : false;
+        }
     });
 
     return (

diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -1,7 +1,7 @@
 import {Tooltip} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as React from 'react';
-import {Key, KeybindingContext, NumKey, NumKeyToNumber, NumPadKey, useNav} from 'react-keyhooks';
+import {Key, KeybindingContext, NumKey, NumKeyToNumber, NumPadKey, useNav} from 'argo-ui/v2';
 import {Cluster} from '../../../shared/components';
 import {Consumer, Context} from '../../../shared/context';
 import * as models from '../../../shared/models';
@@ -55,34 +55,46 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
 
     const {useKeybinding} = React.useContext(KeybindingContext);
 
-    useKeybinding(Key.RIGHT, () => navApp(1));
-    useKeybinding(Key.LEFT, () => navApp(-1));
-    useKeybinding(Key.DOWN, () => navApp(appsPerRow));
-    useKeybinding(Key.UP, () => navApp(-1 * appsPerRow));
+    useKeybinding({keys: Key.RIGHT, action: () => navApp(1)});
+    useKeybinding({keys: Key.LEFT, action: () => navApp(-1)});
+    useKeybinding({keys: Key.DOWN, action: () => navApp(appsPerRow)});
+    useKeybinding({keys: Key.UP, action: () => navApp(-1 * appsPerRow)});
 
-    useKeybinding(Key.ENTER, () => {
-        if (selectedApp > -1) {
-            ctxh.navigation.goto(`/applications/${applications[selectedApp].metadata.name}`);
-            return true;
+    useKeybinding({
+        keys: Key.ENTER,
+        action: () => {
+            if (selectedApp > -1) {
+                ctxh.navigation.goto(`/applications/${applications[selectedApp].metadata.name}`);
+                return true;
+            }
+            return false;
         }
-        return false;
     });
 
-    useKeybinding(Key.ESCAPE, () => {
-        if (selectedApp > -1) {
-            reset();
-            return true;
+    useKeybinding({
+        keys: Key.ESCAPE,
+        action: () => {
+            if (selectedApp > -1) {
+                reset();
+                return true;
+            }
+            return false;
         }
-        return false;
     });
 
-    useKeybinding(Object.values(NumKey) as NumKey[], n => {
-        reset();
-        return navApp(NumKeyToNumber(n));
+    useKeybinding({
+        keys: Object.values(NumKey) as NumKey[],
+        action: n => {
+            reset();
+            return navApp(NumKeyToNumber(n));
+        }
     });
-    useKeybinding(Object.values(NumPadKey) as NumPadKey[], n => {
-        reset();
-        return navApp(NumKeyToNumber(n));
+    useKeybinding({
+        keys: Object.values(NumPadKey) as NumPadKey[],
+        action: n => {
+            reset();
+            return navApp(NumKeyToNumber(n));
+        }
     });
 
     return (

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1227,7 +1227,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/[email protected]", "@types/react@^17.0.2":
+"@types/react@*", "@types/[email protected]":
   version "16.9.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.3.tgz#6d13251e441a3e67fb60d719d1fc8785b984a2ec"
   integrity sha512-Ogb2nSn+2qQv5opoCv7Ls5yFxtyrdUYxp5G+SWTrlGk7dmFKw331GiezCgEZj9U7QeXJi1CDtws9pdXU1zUL4g==
@@ -1669,7 +1669,7 @@ are-we-there-yet@~1.1.2:
 
 "argo-ui@git+https://github.com/argoproj/argo-ui.git":
   version "1.0.0"
-  resolved "git+https://github.com/argoproj/argo-ui.git#e81faeb971180151796ab5aeca8e8740ed4a3578"
+  resolved "git+https://github.com/argoproj/argo-ui.git#a2152a377067f83a7074d2e031673806b427b011"
   dependencies:
     "@fortawesome/fontawesome-free" "^5.8.1"
     "@tippy.js/react" "^2.1.2"
@@ -7307,14 +7307,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-keyhooks@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/react-keyhooks/-/react-keyhooks-0.2.0.tgz#0cd4103aa2de8fc855e8b76420a2d96c11978d74"
-  integrity sha512-gOyhXwhBqF+9Slvd/uGMTQ7nf0gfSqSuh0wpjLFhbd75wyqLyE4YCSs/SX4NvD/aSKMuJIStNmP+DjF8d4EmAA==
-  dependencies:
-    "@types/react" "^17.0.2"
-    react "^17.0.1"
-
 react-lifecycles-compat@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -7441,14 +7433,6 @@ react@^16.9.3:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-react@^17.0.1:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 read-pkg-up@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"