diff --git a/ui/.gitignore b/ui/.gitignore index 482d62bd43117..f23bcecfc2236 100644 --- 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 index 0d923beb1321c..422681f45aac8 100644 --- 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 index 627baf819a6d6..046507a3cd304 100644 --- 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 index f7b3c80257744..0cfd9dbd5f85d 100644 --- 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 index 23024540b221a..9e0cffb62db3f 100644 --- 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 index 9d7bfc6653357..a5c292b512c59 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1227,7 +1227,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@16.9.3", "@types/react@^17.0.2": +"@types/react@*", "@types/react@16.9.3": 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"