marcel/argo-cd
1
0
Fork 0
mirror of https://github.com/argoproj/argo-cd.git synced 2026-02-20 01:28:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): Migrate to keyhook helpers in argo-ui, update keybindings accordingly (#6953)

Browse Source 
Signed-off-by: Remington Breeze <remington@breeze.software>
This commit is contained in:
Remington Breeze
2021-08-13 14:26:11 -07:00
committed by GitHub
parent d842e8333a
commit 3887289090
6 changed files with 66 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/.gitignore vendored
View File

@@ -3,3 +3,5 @@ node_modules
junit.xml
coverage
/yarn-error.log
.yalc
yalc.lock

1
ui/package.json
View File

@@ -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",

32
ui/src/app/applications/components/applications-list/applications-list.tsx
View File

@@ -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 (

15
ui/src/app/applications/components/applications-list/applications-table.tsx
View File

@@ -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 (

56
ui/src/app/applications/components/applications-list/applications-tiles.tsx
View File

@@ -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) {
useKeybinding({
keys: Key.ESCAPE,
action: () => {
if (selectedApp > -1) {
reset();
return true;
}
return false;
}
});
useKeybinding({
keys: Object.values(NumKey) as NumKey[],
action: n => {
reset();
return true;
return navApp(NumKeyToNumber(n));
}
return false;
});
useKeybinding(Object.values(NumKey) as NumKey[], 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 (

20
ui/yarn.lock
View File

@@ -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"