Rename sandbox: Handle keyboard interactions + focus for editing (codesandbox#4024)

Author: siddharthkp

packages/app/src/app/pages/NewDashboard/Components/SandboxCard/Menu.tsx

@@ -4,7 +4,7 @@ import { Menu } from '@codesandbox/components';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { useHistory } from 'react-router-dom';
 
-export const MenuOptions = ({ sandbox, isTemplate, setEdit }) => {
+export const MenuOptions = ({ sandbox, isTemplate, onRename }) => {
   const { effects, actions } = useOvermind();
   const history = useHistory();
   const url = sandboxUrl({
@@ -68,7 +68,7 @@ export const MenuOptions = ({ sandbox, isTemplate, setEdit }) => {
         >
           Export {isTemplate ? 'template' : 'sandbox'}
         </Menu.Item>
-        <Menu.Item onSelect={() => setEdit(true)}>Rename sandbox</Menu.Item>
+        <Menu.Item onSelect={() => onRename()}>Rename sandbox</Menu.Item>
         {isTemplate ? (
           <Menu.Item
             onSelect={() => {

packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, KeyboardEvent, ChangeEvent, FormEvent } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useOvermind } from 'app/overmind';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
 import {
   Stack,
   Element,
@@ -26,8 +27,19 @@ export const SandboxCard = ({ sandbox, isTemplate = false, ...props }) => {
     alias: sandbox.alias,
   });
 
-  const editSandboxTitle = async e => {
-    e.preventDefault();
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setNewName(event.target.value);
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.keyCode === ESC) {
+      // Reset value and exit without saving
+      setNewName(sandboxTitle);
+      setEdit(false);
+    }
+  };
+
+  const onSubmit = async (event?: FormEvent<HTMLFormElement>) => {
+    if (event) event.preventDefault();
     await actions.dashboard.renameSandbox({
       id: sandbox.id,
       title: newName,
@@ -36,6 +48,20 @@ export const SandboxCard = ({ sandbox, isTemplate = false, ...props }) => {
     setEdit(false);
   };
 
+  const onBlur = () => {
+    // save value when you click outside or tab away
+    onSubmit();
+  };
+
+  const inputRef = React.useRef(null);
+  const enterEditing = () => {
+    setEdit(true);
+    // Menu defaults to sending focus back to Menu Button
+    // Send focus to input in the next tick
+    // after menu is done closing.
+    setTimeout(() => inputRef.current.focus());
+  };
+
   return (
     <Stack
       direction="vertical"
@@ -50,13 +76,13 @@ export const SandboxCard = ({ sandbox, isTemplate = false, ...props }) => {
         transition: 'all ease-in-out',
         transitionDuration: theme => theme.speeds[4],
         ':hover, :focus, :focus-within': {
-          cursor: 'pointer',
+          cursor: edit ? 'normal' : 'pointer',
           transform: 'scale(0.98)',
         },
       })}
       {...props}
       onClick={event => {
-        if (isMenuClicked(event)) return;
+        if (edit || isMenuClicked(event)) return;
         history.push(url);
       }}
     >
@@ -73,8 +99,14 @@ export const SandboxCard = ({ sandbox, isTemplate = false, ...props }) => {
       />
       <Stack justify="space-between" align="center" marginLeft={4}>
         {edit ? (
-          <form onSubmit={editSandboxTitle}>
-            <Input value={newName} onChange={e => setNewName(e.target.value)} />
+          <form onSubmit={onSubmit}>
+            <Input
+              value={newName}
+              ref={inputRef}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              onBlur={onBlur}
+            />
           </form>
         ) : (
           <Text size={3} weight="medium">
@@ -84,7 +116,7 @@ export const SandboxCard = ({ sandbox, isTemplate = false, ...props }) => {
         <MenuOptions
           sandbox={sandbox}
           isTemplate={isTemplate}
-          setEdit={setEdit}
+          onRename={enterEditing}
         />
       </Stack>
       <Stack marginX={4}>

packages/app/src/app/pages/NewDashboard/Content/routes/Search/index.tsx

@@ -4,9 +4,8 @@ import { useOvermind } from 'app/overmind';
 import { sandboxesTypes } from 'app/overmind/namespaces/dashboard/state';
 import { Loading } from 'app/pages/NewDashboard/Components/Loading';
 import { Header } from 'app/pages/NewDashboard/Components/Header';
-import { Grid } from '@codesandbox/components';
+import { SandboxGrid } from 'app/pages/NewDashboard/Components/SandboxGrid';
 import { Sandbox } from 'app/pages/NewDashboard/Components/Sandbox';
-import css from '@styled-system/css';
 import { getPossibleTemplates } from '../../utils';
 
 export const SearchComponent = ({ location }) => {
@@ -35,18 +34,11 @@ export const SearchComponent = ({ location }) => {
       />
       <section style={{ position: 'relative' }}>
         {sandboxes.SEARCH ? (
-          <Grid
-            rowGap={6}
-            columnGap={6}
-            marginBottom={8}
-            css={css({
-              gridTemplateColumns: 'repeat(auto-fit,minmax(220px,0.2fr))',
-            })}
-          >
+          <SandboxGrid>
             {sandboxes.SEARCH.map(sandbox => (
               <Sandbox key={sandbox.id} template sandbox={sandbox} />
             ))}
-          </Grid>
+          </SandboxGrid>
         ) : (
           <Loading />
         )}