chore(webapp): adds shortcut key for admin area (#2570)

* Allow shortcuts hook to work if undefined

* Conditionally show shortcut button if only 1 result

* LinkButton can accept conditionally shown shortcuts

Author: samejr

apps/webapp/app/components/primitives/Buttons.tsx

@@ -298,19 +298,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
     const innerRef = useRef<HTMLButtonElement>(null);
     useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);
 
-    if (props.shortcut) {
-      useShortcutKeys({
-        shortcut: props.shortcut,
-        action: (e) => {
-          if (innerRef.current) {
-            innerRef.current.click();
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        },
-        disabled,
-      });
-    }
+    useShortcutKeys({
+      shortcut: props.shortcut,
+      action: (e) => {
+        if (innerRef.current) {
+          innerRef.current.click();
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      disabled: disabled || !props.shortcut,
+    });
 
     return (
       <button
@@ -345,16 +343,16 @@ export const LinkButton = ({
   ...props
 }: LinkPropsType) => {
   const innerRef = useRef<HTMLAnchorElement>(null);
-  if (props.shortcut) {
-    useShortcutKeys({
-      shortcut: props.shortcut,
-      action: () => {
-        if (innerRef.current) {
-          innerRef.current.click();
-        }
-      },
-    });
-  }
+  
+  useShortcutKeys({
+    shortcut: props.shortcut,
+    action: () => {
+      if (innerRef.current) {
+        innerRef.current.click();
+      }
+    },
+    disabled: disabled || !props.shortcut,
+  });
 
   if (disabled) {
     return (

apps/webapp/app/routes/admin._index.tsx

@@ -138,13 +138,17 @@ export default function AdminDashboardRoute() {
                     <TableCell isSticky={true}>
                       <Form method="post" reloadDocument>
                         <input type="hidden" name="id" value={user.id} />
-
                         <Button
                           type="submit"
                           name="action"
                           value="impersonate"
                           className="mr-2"
                           variant="tertiary/small"
+                          shortcut={
+                            users.length === 1
+                              ? { modifiers: ["mod"], key: "enter", enabledOnInputElements: true }
+                              : undefined
+                          }
                         >
                           Impersonate
                         </Button>

apps/webapp/app/routes/admin.orgs.tsx

@@ -117,6 +117,11 @@ export default function AdminDashboardRoute() {
                         to={`/@/orgs/${org.slug}`}
                         className="mr-2"
                         variant="tertiary/small"
+                        shortcut={
+                          organizations.length === 1
+                            ? { modifiers: ["mod"], key: "enter", enabledOnInputElements: true }
+                            : undefined
+                        }
                       >
                         Impersonate
                       </LinkButton>