Skip to content

Commit 0aa5971

Browse files
samejrmatt-aitkencoderabbitai[bot]
authored
Shortcut improvements (#1573)
* Added shortcuts (with tooltip) to the pagination * WIP fixing the disabled hover state * Styled the tooltip * Added a shortcuts panel to the help menu * Adds new shortcut to list * Changes “meta” for “mod” * Adds more shortcuts to the list * Adding shortcut to open the shortcuts panel * tweak gap between shortcut letters * button component now has icon spacing adjustment (for lucide icons) * Fixed some ilegal markup * Pagination uses disabled prop rather than a disabled wrapper * Improved the Switch styles * Makes the shortcut modifier optional * Added new icon based shortcut keys for mac and win * Updated PC modifier shortcuts * Adds a new windows key icon * Allows variants and react nodes to be used as the modifier key * Adds more shortcuts to the storybook * Adds missing focus-visible styles to the pagination * Removed test modifier keys * number style is tabular * Update apps/webapp/app/components/primitives/ShortcutKey.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Tooltip now just 1 prop on the button component --------- Co-authored-by: Matt Aitken <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 34f8bd5 commit 0aa5971

27 files changed

+510
-118
lines changed

‎apps/webapp/app/assets/icons/KeyboardDownIcon.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardDownIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M12.8779 16.3905C12.4989 17.0854 11.5011 17.0854 11.1221 16.3905L6.80665 8.47885C6.44317 7.81248 6.92548 7 7.68454 7L16.3155 7C17.0745 7 17.5568 7.81248 17.1934 8.47885L12.8779 16.3905Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardLeftIcon.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardLeftIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M7.60947 12.8779C6.91461 12.4989 6.91461 11.5011 7.60947 11.1221L15.5211 6.80665C16.1875 6.44317 17 6.92548 17 7.68454L17 16.3155C17 17.0745 16.1875 17.5568 15.5211 17.1934L7.60947 12.8779Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardRightIcon.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardRightIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M16.3905 11.1221C17.0854 11.5011 17.0854 12.4989 16.3905 12.8779L8.47885 17.1934C7.81248 17.5568 7 17.0745 7 16.3155L7 7.68454C7 6.92548 7.81248 6.44317 8.47885 6.80665L16.3905 11.1221Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardUpIcon.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardUpIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M11.1221 6.60947C11.5011 5.91461 12.4989 5.91461 12.8779 6.60947L17.1934 14.5211C17.5568 15.1875 17.0745 16 16.3155 16L7.68454 16C6.92548 16 6.44317 15.1875 6.80665 14.5211L11.1221 6.60947Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardWindowsIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="12"
6+
height="16"
7+
viewBox="0 0 12 16"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<rect x="1.66666" y="3.66663" width="4" height="4" fill="currentColor" />
12+
<rect x="6.33334" y="3.66663" width="4" height="4" fill="currentColor" />
13+
<rect x="1.66666" y="8.33337" width="4" height="4" fill="currentColor" />
14+
<rect x="6.33334" y="8.33337" width="4" height="4" fill="currentColor" />
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/components/ErrorDisplay.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
4949
{message && <Paragraph>{message}</Paragraph>}
5050
<LinkButton
5151
to={button ? button.to : "/"}
52-
shortcut={{ modifiers: ["meta"], key: "g" }}
52+
shortcut={{ modifiers: ["mod"], key: "g" }}
5353
variant="primary/medium"
5454
LeadingIcon={HomeIcon}
5555
>

‎apps/webapp/app/components/ListPagination.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@ function NextButton({ cursor }: { cursor?: string }) {
3030
trailingIconClassName="text-text-dimmed"
3131
className={cn(
3232
"flex items-center",
33-
!path &&
34-
"cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
33+
!path && "cursor-not-allowed opacity-50 group-hover/button:bg-transparent"
3534
)}
3635
onClick={(e) => !path && e.preventDefault()}
36+
shortcut={{ key: "k" }}
37+
tooltip="Next"
38+
disabled={!path}
3739
>
3840
Next
3941
</LinkButton>
@@ -51,10 +53,12 @@ function PreviousButton({ cursor }: { cursor?: string }) {
5153
leadingIconClassName="text-text-dimmed"
5254
className={cn(
5355
"flex items-center",
54-
!path &&
55-
"cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
56+
!path && "cursor-not-allowed opacity-50 group-hover/button:bg-transparent"
5657
)}
5758
onClick={(e) => !path && e.preventDefault()}
59+
shortcut={{ key: "j" }}
60+
tooltip="Previous"
61+
disabled={!path}
5862
>
5963
Prev
6064
</LinkButton>

‎apps/webapp/app/components/Shortcuts.tsx

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { Keyboard } from "lucide-react";
2+
import { Header3 } from "./primitives/Headers";
3+
import { Paragraph } from "./primitives/Paragraph";
4+
import {
5+
Sheet,
6+
SheetContent,
7+
SheetDescription,
8+
SheetHeader,
9+
SheetTitle,
10+
SheetTrigger,
11+
} from "./primitives/SheetV3";
12+
import { ShortcutKey } from "./primitives/ShortcutKey";
13+
import { Button } from "./primitives/Buttons";
14+
15+
export function Shortcuts() {
16+
return (
17+
<Sheet>
18+
<SheetTrigger asChild>
19+
<Button
20+
variant="small-menu-item"
21+
LeadingIcon={Keyboard}
22+
leadingIconClassName="text-blue-500"
23+
data-action="shortcuts"
24+
fullWidth
25+
textAlignLeft
26+
shortcut={{ modifiers: ["shift"], key: "?" }}
27+
className="gap-x-0 pl-0.5"
28+
iconSpacing="gap-x-0.5"
29+
>
30+
Shortcuts
31+
</Button>
32+
</SheetTrigger>
33+
<SheetContent>
34+
<SheetHeader>
35+
<SheetTitle>
36+
<div className="flex items-center gap-x-2">
37+
<Keyboard className="size-5 text-indigo-500" />
38+
<span className="font-sans text-base font-medium text-text-bright">
39+
Keyboard shortcuts
40+
</span>
41+
</div>
42+
</SheetTitle>
43+
<div className="space-y-6 px-4 pb-4 pt-2">
44+
<div className="space-y-3">
45+
<Header3>General</Header3>
46+
<Shortcut name="Close">
47+
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
48+
</Shortcut>
49+
<Shortcut name="Confirm">
50+
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
51+
<ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
52+
</Shortcut>
53+
<Shortcut name="Filter">
54+
<ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
55+
</Shortcut>
56+
<Shortcut name="Select filter">
57+
<ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
58+
<Paragraph variant="small" className="ml-1.5">
59+
to
60+
</Paragraph>
61+
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
62+
</Shortcut>
63+
<Shortcut name="Previous page">
64+
<ShortcutKey shortcut={{ key: "j" }} variant="medium/bright" />
65+
</Shortcut>
66+
<Shortcut name="Next page">
67+
<ShortcutKey shortcut={{ key: "k" }} variant="medium/bright" />
68+
</Shortcut>
69+
<Shortcut name="Help & Feedback">
70+
<ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
71+
</Shortcut>
72+
</div>
73+
<div className="space-y-3">
74+
<Header3>Runs page</Header3>
75+
<Shortcut name="Bulk action: Cancel runs">
76+
<ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
77+
</Shortcut>
78+
<Shortcut name="Bulk action: Replay runs">
79+
<ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
80+
</Shortcut>
81+
<Shortcut name="Bulk action: Clear selection">
82+
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
83+
</Shortcut>
84+
</div>
85+
<div className="space-y-3">
86+
<Header3>Run page</Header3>
87+
<Shortcut name="Replay run">
88+
<ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
89+
</Shortcut>
90+
<Shortcut name="Overview">
91+
<ShortcutKey shortcut={{ key: "o" }} variant="medium/bright" />
92+
</Shortcut>
93+
<Shortcut name="Details">
94+
<ShortcutKey shortcut={{ key: "d" }} variant="medium/bright" />
95+
</Shortcut>
96+
<Shortcut name="Context">
97+
<ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
98+
</Shortcut>
99+
<Shortcut name="Metadata">
100+
<ShortcutKey shortcut={{ key: "m" }} variant="medium/bright" />
101+
</Shortcut>
102+
<Shortcut name="Navigate">
103+
<ShortcutKey shortcut={{ key: "arrowup" }} variant="medium/bright" />
104+
<ShortcutKey shortcut={{ key: "arrowdown" }} variant="medium/bright" />
105+
<ShortcutKey shortcut={{ key: "arrowleft" }} variant="medium/bright" />
106+
<ShortcutKey shortcut={{ key: "arrowright" }} variant="medium/bright" />
107+
</Shortcut>
108+
<Shortcut name="Expand all">
109+
<ShortcutKey shortcut={{ key: "e" }} variant="medium/bright" />
110+
</Shortcut>
111+
<Shortcut name="Collapse all">
112+
<ShortcutKey shortcut={{ key: "w" }} variant="medium/bright" />
113+
</Shortcut>
114+
<Shortcut name="Toggle level">
115+
<ShortcutKey shortcut={{ key: "0" }} variant="medium/bright" />
116+
<Paragraph variant="small" className="ml-1.5">
117+
to
118+
</Paragraph>
119+
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
120+
</Shortcut>
121+
</div>
122+
<div className="space-y-3">
123+
<Header3>Schedules page</Header3>
124+
<Shortcut name="New schedule">
125+
<ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
126+
</Shortcut>
127+
</div>
128+
<div className="space-y-3">
129+
<Header3>Alerts page</Header3>
130+
<Shortcut name="New alert">
131+
<ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
132+
</Shortcut>
133+
</div>
134+
</div>
135+
</SheetHeader>
136+
</SheetContent>
137+
</Sheet>
138+
);
139+
}
140+
141+
function Shortcut({ children, name }: { children: React.ReactNode; name: string }) {
142+
return (
143+
<div className="flex items-center justify-between gap-x-2">
144+
<span className="text-sm text-text-dimmed">{name}</span>
145+
<span className="flex items-center gap-x-0.5">{children}</span>
146+
</div>
147+
);
148+
}

‎apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Paragraph } from "../primitives/Paragraph";
1919
import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover";
2020
import { StepNumber } from "../primitives/StepNumber";
2121
import { MenuCount, SideMenuItem } from "./SideMenuItem";
22-
22+
import { Shortcuts } from "../Shortcuts";
2323
export function HelpAndFeedback() {
2424
const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
2525
const currentPlan = useCurrentPlan();
@@ -84,6 +84,7 @@ export function HelpAndFeedback() {
8484
data-action="changelog"
8585
target="_blank"
8686
/>
87+
<Shortcuts />
8788
</div>
8889
<div className="flex flex-col gap-1 p-1">
8990
<Paragraph className="pb-1 pl-1.5 pt-1.5 text-xs">Need help?</Paragraph>

0 commit comments

Comments
 (0)