[dashboard] Add autofocus to some modal

components/dashboard/src/settings/Account.tsx

@@ -42,7 +42,7 @@ export default function Account() {
                 <li className="ml-5">Your subscription will be cancelled. If you obtained a Gitpod subscription through the GitHub marketplace, you need to cancel your plan there.</li>
             </ol>
             <p className="pt-4 pb-2 text-gray-600 dark:text-gray-400 text-base font-semibold">Type your email to confirm</p>
-            <input className="w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>
+            <input autoFocus className="w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>
         </ConfirmationModal>
 
         <PageWithSubMenu subMenu={settingsMenu}  title='Account' subtitle='Manage account and git configuration.'>

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -59,7 +59,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
             </div> : null}
             <div>
                 <h4>Name</h4>
-                <input className="w-full" type="text" value={ev.name} onChange={(v) => { update({name: v.target.value}) }} />
+                <input autoFocus className="w-full" type="text" value={ev.name} onChange={(v) => { update({name: v.target.value}) }} />
             </div>
             <div className="mt-4">
                 <h4>Value</h4>

components/dashboard/src/teams/NewTeam.tsx

@@ -37,7 +37,7 @@ export default function () {
             <div className="border rounded-xl p-6 border-gray-100 dark:border-gray-800">
                 <h3 className="text-center text-xl mb-6">What's your team's name?</h3>
                 <h4>Team Name</h4>
-                <input className={`w-full${!!creationError ? ' error' : ''}`} type="text" onChange={event => name = event.target.value} />
+                <input autoFocus className={`w-full${!!creationError ? ' error' : ''}`} type="text" onChange={event => name = event.target.value} />
                 {!!creationError && <p className="text-gitpod-red">{creationError.message.replace(/Request \w+ failed with message: /, '')}</p>}
             </div>
             <div className="flex flex-row-reverse space-x-2 space-x-reverse mt-2">

components/dashboard/src/teams/TeamSettings.tsx

@@ -74,7 +74,7 @@ export default function TeamSettings() {
                 <li className="ml-5">All <b>members</b> of this team will lose access to this team, associated projects and workspaces.</li>
             </ol>
             <p className="pt-4 pb-2 text-gray-600 dark:text-gray-400 text-base font-semibold">Type <CodeText>{team?.slug}</CodeText> to confirm</p>
-            <input className="w-full" type="text" onChange={e => setTeamSlug(e.target.value)}></input>
+            <input autoFocus className="w-full" type="text" onChange={e => setTeamSlug(e.target.value)}></input>
         </ConfirmationModal>
     </>
 }

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -175,7 +175,7 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                         {errorMessage}
                     </div>
                     : null}
-                <input className="w-full truncate" type="text" defaultValue={workspaceDescription} ref={renameInputRef} />
+                <input autoFocus className="w-full truncate" type="text" defaultValue={workspaceDescription} ref={renameInputRef} />
                 <div className="mt-1">
                     <p className="text-gray-500">Change the description to make it easier to go back to a workspace.</p>
                     <p className="text-gray-500">Workspace URLs and endpoints will remain the same.</p>