From dab07ae17a6195fdfdd1846ea5a9000b1d591cfc Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Mon, 10 Apr 2023 18:22:10 -0600
Subject: [PATCH 1/2] feat(sql-editor): ai generated sql button

---
 .../ui/src/components/Command/GenerateSQL.tsx |  9 +++
 packages/ui/src/components/Input/Input.tsx    |  2 +-
 .../layouts/SQLEditorLayout/SQLEditorMenu.tsx | 62 +++++++++++++++----
 3 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/Command/GenerateSQL.tsx b/packages/ui/src/components/Command/GenerateSQL.tsx
index d87821d6f8d..709aefe401c 100644
--- a/packages/ui/src/components/Command/GenerateSQL.tsx
+++ b/packages/ui/src/components/Command/GenerateSQL.tsx
@@ -286,6 +286,15 @@ const GenerateSQL = () => {
       </div>
       <div className="absolute bottom-0 w-full bg-scale-200 py-3">
         <Input
+          inputRef={(inputElement) => {
+            if (inputElement) {
+              // We need to delay the focus until the end of the call stack
+              // due to order of operations
+              setTimeout(() => {
+                inputElement.focus()
+              }, 0)
+            }
+          }}
           className="bg-scale-100 rounded mx-3"
           autoFocus
           placeholder={
diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx
index a78fade9330..7017131c166 100644
--- a/packages/ui/src/components/Input/Input.tsx
+++ b/packages/ui/src/components/Input/Input.tsx
@@ -15,7 +15,7 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
   disabled?: boolean
   error?: string
   icon?: any
-  inputRef?: string
+  inputRef?: React.LegacyRef<HTMLInputElement>
   label?: string | React.ReactNode
   afterLabel?: string
   beforeLabel?: string
diff --git a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index 6ba77a93994..32900db7a1d 100644
--- a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -1,7 +1,17 @@
 import { partition } from 'lodash'
 import { useState, useMemo } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Menu, Input, IconSearch, IconPlus, IconX } from 'ui'
+import {
+  Button,
+  Menu,
+  Input,
+  IconSearch,
+  IconPlus,
+  IconX,
+  Dropdown,
+  IconChevronDown,
+  useCommandMenu,
+} from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore } from 'hooks'
@@ -17,6 +27,7 @@ import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import QueryItem from './QueryItem'
 import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEditor.utils'
 import { useRouter } from 'next/router'
+import { COMMAND_ROUTES } from 'ui/src/components/Command/Command.constants'
 
 const SideBarContent = observer(() => {
   const { ui } = useStore()
@@ -24,6 +35,7 @@ const SideBarContent = observer(() => {
   const router = useRouter()
   const { data: profile } = useProfileQuery()
   const [filterString, setFilterString] = useState('')
+  const { setPages, setIsOpen } = useCommandMenu()
 
   const snap = useSqlEditorStateSnapshot()
   const { isLoading, isSuccess } = useSqlSnippetsQuery(ref, {
@@ -83,16 +95,44 @@ const SideBarContent = observer(() => {
       <Menu type="pills">
         {IS_PLATFORM && (
           <div className="my-4 mx-3 space-y-1 px-3">
-            <Button
-              block
-              icon={<IconPlus />}
-              type="default"
-              disabled={isLoading}
-              style={{ justifyContent: 'start' }}
-              onClick={() => handleNewQuery()}
-            >
-              New query
-            </Button>
+            <div className="flex items-center">
+              <Button
+                className="rounded-r-none px-3"
+                block
+                icon={<IconPlus />}
+                type="default"
+                disabled={isLoading}
+                style={{ justifyContent: 'start' }}
+                onClick={() => handleNewQuery()}
+              >
+                New query
+              </Button>
+              <Dropdown
+                align="end"
+                side="bottom"
+                overlay={[
+                  <Dropdown.Item
+                    onClick={() => {
+                      setIsOpen(true)
+                      setPages([COMMAND_ROUTES.GENERATE_SQL])
+                    }}
+                  >
+                    <div className="space-y-1">
+                      <p className="block text-scale-1200">New AI query</p>
+                      <p className="block text-scale-1100">
+                        Generate a SQL query using Supabase AI
+                      </p>
+                    </div>
+                  </Dropdown.Item>,
+                ]}
+              >
+                <Button
+                  type="default"
+                  className="rounded-l-none px-[4px] py-[5px]"
+                  icon={<IconChevronDown />}
+                />
+              </Dropdown>
+            </div>
             <Input
               size="tiny"
               icon={<IconSearch size="tiny" />}

From 7fcd72d5e79fd8324d5765855cd24b797b67df71 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Mon, 10 Apr 2023 18:39:35 -0600
Subject: [PATCH 2/2] fix(sql-editor): disable new query dropdown until loading
 complete

---
 studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index 32900db7a1d..ce0b1ed4db0 100644
--- a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -127,6 +127,7 @@ const SideBarContent = observer(() => {
                 ]}
               >
                 <Button
+                  disabled={isLoading}
                   type="default"
                   className="rounded-l-none px-[4px] py-[5px]"
                   icon={<IconChevronDown />}