Merge remote-tracking branch 'origin/chore/explorer-query-editor' into chore/explorer-query-tabs

apps/studio/components/interfaces/Explorer/QueryCell/index.tsx

@@ -19,8 +19,10 @@ export const QueryCell = ({ cell }: QueryCellProps) => {
   const snap = useNotebooksStateSnapshot()
   const currentNotebook = useCurrentNotebook()
   const cells = currentNotebook?.notebook.content?.cells ?? []
+
   const [sql, setSql] = useState<string>(cell.unchecked_sql)
   const [result, setResult] = useState<QueryResult>()
+
   const title = cell.title ?? 'Untitled snippet'
   const display: QueryDisplay = {
     view: cell.view ?? 'table',

apps/studio/components/interfaces/Explorer/QueryEditor.tsx

@@ -63,12 +63,16 @@ export const QueryEditor = ({
   onResultChange,
   onDisplayChange,
 }: QueryEditorProps) => {
-  const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery()
-  const [showQuery, setShowQuery] = useState(true)
   const sqlRef = useLatest(sql)
+  const onSqlCommitRef = useLatest(onSqlCommit)
+
+  const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery()
+
   const view = display?.view ?? 'table'
   const columns = Object.keys(result?.rows?.[0] ?? {})
 
+  const [showQuery, setShowQuery] = useState(true)
+
   const { mutate: executeSql, isPending: isExecuting } = useExecuteSqlMutation({
     onSuccess: (data) => onResultChange({ rows: data.result }),
     onError: (error) => onResultChange({ error }),
@@ -141,9 +145,7 @@ export const QueryEditor = ({
             options={{ minimap: { enabled: false }, padding: { top: 8 } }}
             onInputChange={(value) => onSqlChange(value ?? '')}
             onMount={(editor) => {
-              if (onSqlCommit) {
-                editor.onDidBlurEditorWidget(() => onSqlCommit(sqlRef.current))
-              }
+              editor.onDidBlurEditorWidget(() => onSqlCommitRef.current?.(sqlRef.current))
             }}
           />
         </ExplorerQueryEditor>