From c888bb754f4a61cd10423e400605839d4e7db69d Mon Sep 17 00:00:00 2001
From: Nikhil Nayak <nikhil.nixel@gmail.com>
Date: Tue, 7 Dec 2021 13:46:50 +0530
Subject: [PATCH] Bugfix [#4088]: Make table search case-insensitive

---
 .gitignore                                    |   1 +
 .../TableEditorLayout/TableEditorMenu.tsx     | 130 ++++++++++--------
 2 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4d7e8457010..e5840f62fad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -99,6 +99,7 @@ typings/
 .dynamodb/
 
 .vscode
+.idea
 .vercel
 
 #include template .env file for docker-compose
diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index c9d257d912d..3dbbda35fd9 100644
--- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -36,13 +36,13 @@ interface Props {
 }
 
 const TableEditorMenu: FC<Props> = ({
-  selectedSchema,
-  onSelectSchema = () => {},
-  onAddTable = () => {},
-  onEditTable = () => {},
-  onDeleteTable = () => {},
-  onDuplicateTable = () => {},
-}) => {
+                                      selectedSchema,
+                                      onSelectSchema = () => {},
+                                      onAddTable = () => {},
+                                      onEditTable = () => {},
+                                      onDeleteTable = () => {},
+                                      onDuplicateTable = () => {},
+                                    }) => {
   const { meta, ui } = useStore()
   const router = useRouter()
   const { id } = router.query
@@ -74,11 +74,15 @@ const TableEditorMenu: FC<Props> = ({
     setIsRefreshing(false)
   }
 
-  const schemas = meta.schemas.list()
-  const tables = meta.tables.list((table: PostgresTable) => table.schema === selectedSchema)
+  const schemas: any[] = meta.schemas.list()
+  const tables: any[] = meta.tables.list((table: PostgresTable) => table.schema === selectedSchema)
 
   const schemaTables =
-    searchText.length === 0 ? tables : tables.filter((table) => table.name.includes(searchText))
+    searchText.length === 0
+      ? tables
+      : tables.filter((table) =>
+        table.name.toLowerCase().includes(searchText.toLowerCase())
+      )
 
   const filteredSchemaViews =
     searchText.length === 0
@@ -90,18 +94,19 @@ const TableEditorMenu: FC<Props> = ({
   const maxScrollHeight = schemaViews.length > 0 ? 270 : 520
 
   return (
-    <div className="my-6 flex flex-col flex-grow">
+    <div className='my-6 flex flex-col flex-grow'>
       {/* Schema selection dropdown */}
-      <div className="mx-4">
+      <div className='mx-4'>
         {meta.schemas.isLoading ? (
-          <div className="h-[30px] border border-gray-500 px-3 rounded flex items-center space-x-3">
-            <IconLoader className="animate-spin" size={14} />
+          <div
+            className='h-[30px] border border-gray-500 px-3 rounded flex items-center space-x-3'>
+            <IconLoader className='animate-spin' size={14} />
             <Typography.Text small>Loading schemas...</Typography.Text>
           </div>
         ) : (
           <Listbox
             icon={<IconDatabase size={16} />}
-            size="tiny"
+            size='tiny'
             value={selectedSchema}
             onChange={(name: string) => {
               setSearchText('')
@@ -110,7 +115,8 @@ const TableEditorMenu: FC<Props> = ({
             }}
           >
             {schemas.map((schema) => (
-              <Listbox.Option key={schema.id} value={schema.name} label={schema.name}>
+              <Listbox.Option key={schema.id} value={schema.name}
+                              label={schema.name}>
                 {schema.name}
               </Listbox.Option>
             ))}
@@ -118,13 +124,13 @@ const TableEditorMenu: FC<Props> = ({
         )}
       </div>
 
-      <div className="mx-4 my-4 space-y-1">
+      <div className='mx-4 my-4 space-y-1'>
         {/* Add new table button */}
         {selectedSchema === 'public' && (
           <Button
             block
             icon={<IconPlus />}
-            type="text"
+            type='text'
             style={{ justifyContent: 'start' }}
             onClick={onAddTable}
           >
@@ -134,18 +140,18 @@ const TableEditorMenu: FC<Props> = ({
 
         {/* Table search input */}
         <Input
-          layout="vertical"
-          icon={<IconSearch size="tiny" />}
-          className="sbui-input-no-border"
-          placeholder="Search for a table"
+          layout='vertical'
+          icon={<IconSearch size='tiny' />}
+          className='sbui-input-no-border'
+          placeholder='Search for a table'
           onChange={(e) => setSearchText(e.target.value)}
           value={searchText}
-          size="tiny"
+          size='tiny'
           actions={
             searchText && (
               <IconX
                 size={'tiny'}
-                className="cursor-pointer mx-1"
+                className='cursor-pointer mx-1'
                 onClick={() => setSearchText('')}
               />
             )
@@ -155,51 +161,54 @@ const TableEditorMenu: FC<Props> = ({
 
       {/* List of tables belonging to selected schema */}
       {schemaTables.length > 0 && (
-        <div className="mx-2 mt-6 space-y-2">
-          <div className="px-4 w-full flex items-center justify-between">
-            <Typography.Text type="secondary" small>
+        <div className='mx-2 mt-6 space-y-2'>
+          <div className='px-4 w-full flex items-center justify-between'>
+            <Typography.Text type='secondary' small>
               All tables
             </Typography.Text>
-            <div className="cursor-pointer" onClick={refreshTables}>
-              <Typography.Text type="secondary">
-                <IconRefreshCw className={isRefreshing ? 'animate-spin' : ''} size={14} />
+            <div className='cursor-pointer' onClick={refreshTables}>
+              <Typography.Text type='secondary'>
+                <IconRefreshCw className={isRefreshing ? 'animate-spin' : ''}
+                               size={14} />
               </Typography.Text>
             </div>
           </div>
-          <div className="overflow-y-auto space-y-1" style={{ maxHeight: maxScrollHeight }}>
+          <div className='overflow-y-auto space-y-1'
+               style={{ maxHeight: maxScrollHeight }}>
             {schemaTables.map((table) => {
               const isActive = Number(id) === table.id
               return (
-                <Link key={table.name} href={`/project/${projectRef}/editor/${table.id}`}>
-                  <a className="block editor-product-menu">
+                <Link key={table.name}
+                      href={`/project/${projectRef}/editor/${table.id}`}>
+                  <a className='block editor-product-menu'>
                     <Menu.Item rounded active={isActive}>
-                      <div className="flex justify-between py-[2px]">
-                        <Typography.Text className="truncate flex items-center">
+                      <div className='flex justify-between py-[2px]'>
+                        <Typography.Text className='truncate flex items-center'>
                           {table.name}
                         </Typography.Text>
                         {isActive && (
                           <Dropdown
-                            side="bottom"
-                            align="start"
+                            side='bottom'
+                            align='start'
                             overlay={[
                               <Dropdown.Item
-                                key="edit-table"
-                                icon={<IconEdit size="tiny" />}
+                                key='edit-table'
+                                icon={<IconEdit size='tiny' />}
                                 onClick={() => onEditTable(table)}
                               >
                                 Edit Table
                               </Dropdown.Item>,
                               <Dropdown.Item
-                                key="duplicate-table"
-                                icon={<IconCopy size="tiny" />}
+                                key='duplicate-table'
+                                icon={<IconCopy size='tiny' />}
                                 onClick={() => onDuplicateTable(table)}
                               >
                                 Duplicate Table
                               </Dropdown.Item>,
-                              <Divider key="divider" light />,
+                              <Divider key='divider' light />,
                               <Dropdown.Item
-                                key="delete-table"
-                                icon={<IconTrash size="tiny" />}
+                                key='delete-table'
+                                icon={<IconTrash size='tiny' />}
                                 onClick={() => onDeleteTable(table)}
                               >
                                 Delete Table
@@ -207,8 +216,8 @@ const TableEditorMenu: FC<Props> = ({
                             ]}
                           >
                             <Button
-                              as="span"
-                              type="text"
+                              as='span'
+                              type='text'
                               icon={<IconChevronDown />}
                               style={{ padding: '3px' }}
                             />
@@ -226,22 +235,25 @@ const TableEditorMenu: FC<Props> = ({
 
       {/* List of views belonging to selected schema */}
       {filteredSchemaViews.length > 0 && (
-        <div className="mx-2 mt-6 space-y-2">
-          <div className="px-4 w-full flex items-center justify-between">
-            <Typography.Text type="secondary" small>
+        <div className='mx-2 mt-6 space-y-2'>
+          <div className='px-4 w-full flex items-center justify-between'>
+            <Typography.Text type='secondary' small>
               All Views
             </Typography.Text>
           </div>
-          <div className="overflow-y-auto space-y-1" style={{ maxHeight: maxScrollHeight }}>
+          <div className='overflow-y-auto space-y-1'
+               style={{ maxHeight: maxScrollHeight }}>
             {schemaViews.map((view: SchemaView) => {
               const viewId = Base64.encode(JSON.stringify(view))
               const isActive = id === viewId
               return (
-                <Link key={viewId} href={`/project/${projectRef}/editor/${viewId}`}>
-                  <div className="dash-product-menu">
+                <Link key={viewId}
+                      href={`/project/${projectRef}/editor/${viewId}`}>
+                  <div className='dash-product-menu'>
                     <Menu.Item key={viewId} rounded active={isActive}>
-                      <div className="flex justify-between">
-                        <Typography.Text className="truncate">{view.name}</Typography.Text>
+                      <div className='flex justify-between'>
+                        <Typography.Text
+                          className='truncate'>{view.name}</Typography.Text>
                       </div>
                     </Menu.Item>
                   </div>
@@ -253,14 +265,16 @@ const TableEditorMenu: FC<Props> = ({
       )}
 
       {searchText.length > 0 && schemaTables.length === 0 && filteredSchemaViews.length === 0 && (
-        <div className="my-2 mx-6">
-          <Typography.Text type="secondary">No tables or views found</Typography.Text>
+        <div className='my-2 mx-6'>
+          <Typography.Text type='secondary'>No tables or views
+            found</Typography.Text>
         </div>
       )}
 
       {searchText.length === 0 && schemaTables.length === 0 && filteredSchemaViews.length === 0 && (
-        <div className="my-2 mx-6">
-          <Typography.Text type="secondary">No tables available</Typography.Text>
+        <div className='my-2 mx-6'>
+          <Typography.Text type='secondary'>No tables
+            available</Typography.Text>
         </div>
       )}
     </div>