Update Project Select (#3360)

Co-authored-by: Stefan McShane <stefanmcshane@users.noreply.github.com>

dashboard/src/components/porter/SearchBar.tsx

@@ -13,6 +13,7 @@ type Props = {
   type?: string;
   error?: string;
   children?: React.ReactNode;
+  autoFocus?: boolean;
 };
 
 const SearchBar: React.FC<Props> = ({
@@ -25,6 +26,7 @@ const SearchBar: React.FC<Props> = ({
   type,
   error,
   children,
+  autoFocus,
 }) => {
   return (
     <Block width={width}>
@@ -44,6 +46,7 @@ const SearchBar: React.FC<Props> = ({
           onChange={e => setValue(e.target.value)}
           placeholder={placeholder}
           type={type || "text"}
+          autoFocus={autoFocus}
         />
         {
           error && (

dashboard/src/main/home/sidebar/ProjectSelectionModal.tsx

@@ -1,6 +1,6 @@
 import { RouteComponentProps, withRouter } from "react-router";
 import styled from "styled-components";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 
 import Modal from "components/porter/Modal";
 import Text from "components/porter/Text";
@@ -52,6 +52,20 @@ const ProjectSelectionModal: React.FC<Props> = ({
 
     return sortedProjects;
   }, [projects, searchValue, currentProject]);
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Escape" || e.keyCode === 27) {
+          closeModal();
+        }
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [closeModal]);
 
   const updateClusterList = async (projectId: number) => {
     try {
@@ -82,9 +96,7 @@ const ProjectSelectionModal: React.FC<Props> = ({
           key={i}
           selected={project.id === currentProject.id}
           onClick={async () => {
-            // if (project.id !== currentProject.id) {
-            //   setCurrentCluster(null);
-            // }
+
             setCurrentProject(project);
 
             const clusters_list = await updateClusterList(project.id);
@@ -101,10 +113,7 @@ const ProjectSelectionModal: React.FC<Props> = ({
         >
           {/* <BlockIcon src={gradient} /> */}
           <BlockTitle>{project.name}</BlockTitle>
-          {/* <ProjectIcon>
-            <ProjectImage src={gradient} />
-            <Letter>{project.name[0].toUpperCase()}</Letter>
-          </ProjectIcon> */}
+
 
           <BlockDescription>
             Project Id: {project.id}
@@ -129,6 +138,7 @@ const ProjectSelectionModal: React.FC<Props> = ({
           }}
           placeholder="Search projects..."
           width="100%"
+          autoFocus={true}
         />
 
         <Spacer inline x={1} />