Improve shortcuts

InterplanetaryDevs · Nov 8, 2023 · 03c1fcc · 03c1fcc
1 parent ffa53aa
commit 03c1fcc
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 48 deletions.
diff --git a/.idea/runConfigurations/build.xml → .idea/runConfigurations/Run.xml b/.idea/runConfigurations/build.xml → .idea/runConfigurations/Run.xml
diff --git a/.idea/runConfigurations/start.xml → .idea/runConfigurations/Test.xml b/.idea/runConfigurations/start.xml → .idea/runConfigurations/Test.xml
diff --git a/webui/src/components/AppBar.tsx b/webui/src/components/AppBar.tsx
@@ -14,12 +14,13 @@ import MenuIcon from '@mui/icons-material/Menu';
 import {useIpfs} from '../context/IpfsContext';
 import {useToolBox} from '../context/ToolBoxContext';
 import {useIpfsCluster} from '../context/IpfsClusterContext';
-import React, {PropsWithoutRef} from 'react';
+import React, {PropsWithoutRef, useRef} from 'react';
 import InfoIcon from '@mui/icons-material/Info';
-import {IKeyBind} from '../services/ShortcutService';
+import {IKeyBind, IShortCut} from '../services/ShortcutService';
 import {INodeContext} from '../context/INodeContext';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
+import {useShortCut} from '../hooks/UseShortCut';
 
 interface IAppBarProps {
 }
@@ -48,6 +49,7 @@ export function AppBar(props: IAppBarProps) {
 
 	const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
 	const open = Boolean(anchorEl);
+	const anchorRef = useRef<HTMLButtonElement | null>(null);
 
 	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 		setAnchorEl(event.currentTarget);
@@ -57,6 +59,18 @@ export function AppBar(props: IAppBarProps) {
 		setAnchorEl(null);
 	};
 
+	useShortCut({
+		name: 'Help',
+		category: 'Global',
+		keyBind: {
+			key: 'h',
+			ctrl: true,
+		},
+		action: () => {
+			setAnchorEl(anchorRef.current);
+		}
+	});
+
 
 	return <Box sx={{
 		bgcolor: 'primary.light',
@@ -78,7 +92,7 @@ export function AppBar(props: IAppBarProps) {
 			<Stack spacing={2} direction={'row'}>
 				<ConnectionStatusButton label={'IPFS'} context={ipfs}/>
 				<ConnectionStatusButton label={'IPFS Cluster'} context={ipfsCluster}/>
-				<IconButton onClick={handleClick}>
+				<IconButton onClick={handleClick} ref={el => anchorRef.current = el}>
 					<InfoIcon/>
 				</IconButton>
 				<Popover
@@ -90,13 +104,25 @@ export function AppBar(props: IAppBarProps) {
 						horizontal: 'right',
 					}}
 				>
-					<Stack>
-						{shortcutService.getShortcuts().map((v, i) => <div style={{display: 'flex'}}>
-							<div style={{flexGrow: 1}}>{v.name}</div>
-							<ShortcutDisplay keyBind={v.keyBind}/></div>)}
+					<Stack spacing={1} sx={{width: 300, padding: 2}}>
+						{Object.entries(shortcutService.getShortcuts()
+							.reduce((group, product) => {
+								const category = product.category ?? 'unknown';
+								group[category] = group[category] ?? [];
+								group[category].push(product);
+								return group;
+							}, {} as { [key: string]: IShortCut[] }))
+							.map(([category, shortcuts]) => <Stack>
+								<Typography variant={'caption'}>{category}</Typography>
+								{shortcuts.map((v, i) => (<Box
+									sx={{display: 'flex', borderBottomWidth: 1, borderBottomColor: 'primary.dark'}}>
+									<div style={{flexGrow: 1}}>{v.name}</div>
+									<ShortcutDisplay keyBind={v.keyBind}/>
+								</Box>))}
+							</Stack>)}
 					</Stack>
 				</Popover>
 			</Stack>
 		</Toolbar>
 	</Box>;
-}
+};
diff --git a/webui/src/components/ConnectionChecker.tsx b/webui/src/components/ConnectionChecker.tsx
@@ -19,7 +19,7 @@ export function ConnectionChecker({context, children}: ConnectionCheckerProps) {
             <CardActions>
 								{context.checking && <Alert severity={'warning'}>Retrying...</Alert>}
                 <Box sx={{flexGrow: 1}}/>
-                <Button startIcon={<ReplayIcon/>}>Retry</Button>
+                <Button startIcon={<ReplayIcon/>} onClick={() => context.runCheck()}>Retry</Button>
             </CardActions>
         </Card>
     </Centered>;

diff --git a/webui/src/context/ToolBoxContext.tsx b/webui/src/context/ToolBoxContext.tsx
@@ -42,57 +42,44 @@ export function ToolBoxContextProvider(props: PropsWithChildren) {
 		const symbols = [
 			shortcutService.registerShortcut(
 				{
+					category: 'Global',
 					name: 'Search',
-					keyBind: {
-						key: ' ', ctrl: true, shift: false, alt: false
-					},
-					action: () => {
-						setSearchOpen(true);
-					}
+					keyBind: {key: ' ', ctrl: true},
+					action: () => setSearchOpen(true)
 				}),
 			shortcutService.registerShortcut(
 				{
+					category: 'Global',
 					hidden: true,
 					name: '',
-					keyBind: {
-						key: 'Escape', ctrl: false, shift: false, alt: false
-					},
+					keyBind: {key: 'Escape'},
 					action: () => {
 						setSearchOpen(false);
 						setMenuOpen(false);
 					}
 				}),
 			shortcutService.registerShortcut(
 				{
+					category: 'Global',
 					name: 'Dashboard',
 					description: 'Go to Dashboard',
-					keyBind: {
-						key: 'd', ctrl: true, shift: false, alt: false
-					},
-					action: () => {
-						setTool(DashboardDefinition);
-					}
+					keyBind: {key: 'd', ctrl: true},
+					action: () => setTool(DashboardDefinition)
 				}),
 			shortcutService.registerShortcut(
 				{
+					category: 'Global',
 					name: 'Configuration',
 					description: 'Go to Configuration',
-					keyBind: {
-						key: ',', ctrl: true, shift: false, alt: false
-					},
-					action: () => {
-						setTool(ConfigurationDefinition);
-					}
+					keyBind: {key: ',', ctrl: true},
+					action: () => setTool(ConfigurationDefinition)
 				}),
 			shortcutService.registerShortcut(
 				{
+					category: 'Global',
 					name: 'Menu',
-					keyBind: {
-						key: 'm', ctrl: true, shift: false, alt: false
-					},
-					action: () => {
-						setMenuOpen(v => !v);
-					}
+					keyBind: {key: 'm', ctrl: true},
+					action: () => setMenuOpen(v => !v)
 				}),
 		];
 

diff --git a/webui/src/hooks/UseShortCut.tsx b/webui/src/hooks/UseShortCut.tsx
@@ -0,0 +1,14 @@
+import {IShortCut} from '../services/ShortcutService';
+import {useToolBox} from '../context/ToolBoxContext';
+import {useEffect} from 'react';
+
+export function useShortCut(shortcut: IShortCut) {
+	const {shortcutService} = useToolBox();
+
+	useEffect(() => {
+		const sym = shortcutService.registerShortcut(shortcut);
+		return () => {
+			shortcutService.removeShortcut(sym);
+		};
+	}, []);
+}
diff --git a/webui/src/services/ShortcutService.ts b/webui/src/services/ShortcutService.ts
@@ -1,8 +1,8 @@
 export interface IKeyBind {
 	key: string;
-	ctrl: boolean;
-	alt: boolean;
-	shift: boolean;
+	ctrl?: boolean;
+	alt?: boolean;
+	shift?: boolean;
 }
 
 export interface IShortCut {
@@ -11,16 +11,17 @@ export interface IShortCut {
 	action: () => void;
 	description?: string;
 	hidden?: boolean;
+	category?: string;
 }
 
 export class ShortcutService {
 	private shortcuts = new Map<symbol, IShortCut>();
 
 	public handleKeyPress(event: KeyboardEvent) {
-		const active = this.getAllShortcuts().find(s => s.keyBind.key.toLowerCase() == event.key.toUpperCase()
-			&& s.keyBind.ctrl == event.ctrlKey
-			&& s.keyBind.shift == event.shiftKey
-			&& s.keyBind.alt == event.altKey
+		const active = this.getAllShortcuts().find(s => s.keyBind.key.toLowerCase() == event.key.toLowerCase()
+			&& Boolean(s.keyBind.ctrl) == event.ctrlKey
+			&& Boolean(s.keyBind.shift) == event.shiftKey
+			&& Boolean(s.keyBind.alt) == event.altKey
 		);
 
 		if (active) {

diff --git a/webui/src/tools/cluster/ClusterTool.tsx b/webui/src/tools/cluster/ClusterTool.tsx
@@ -1,4 +1,4 @@
-import {Container, Tab, Tabs} from '@mui/material';
+import {Tab, Tabs} from '@mui/material';
 import React, {useState} from 'react';
 import {useMenu} from '../../hooks/UseMenu';
 import {AddPinDialog} from './AddPinDialog';
@@ -8,11 +8,56 @@ import {PinList} from './PinList';
 import {useIpfsCluster} from '../../context/IpfsClusterContext';
 import {ConnectionChecker} from '../../components/ConnectionChecker';
 import {ToolContainer} from '../../components/ToolContainer';
+import {useShortCut} from '../../hooks/UseShortCut';
 
 export default function ClusterTool() {
 	const [tab, setTab] = useState(0);
+
+
 	const context = useIpfsCluster();
 
+	useShortCut({
+		category: 'Cluster',
+		name: 'Pins',
+		keyBind: {
+			key: '1',
+			alt: true,
+			ctrl: false,
+			shift: false,
+		},
+		action: () => {
+			setTab(0);
+		}
+	});
+
+	useShortCut({
+		category: 'Cluster',
+		name: 'Peers',
+		keyBind: {
+			key: '2',
+			alt: true,
+			ctrl: false,
+			shift: false,
+		},
+		action: () => {
+			setTab(1);
+		}
+	});
+
+	useShortCut({
+		category: 'Cluster',
+		name: 'Identity',
+		keyBind: {
+			key: '3',
+			alt: true,
+			ctrl: false,
+			shift: false,
+		},
+		action: () => {
+			setTab(2);
+		}
+	});
+
 	useMenu(<Tabs value={tab} onChange={(e, v) => setTab(v)}>
 		<Tab label={'Pins'}/>
 		<Tab label={'Peers'}/>