From 6b52b7437b22c403322f112f2fa47ba6544063f0 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 29 Mar 2023 12:12:19 +0800
Subject: [PATCH 1/8] Midway implementing show view definition

---
 studio/components/grid/SupabaseGrid.tsx       | 27 ++++++----
 studio/components/grid/types/grid.ts          | 12 ++++-
 .../TableGridEditor/TableGridEditor.tsx       | 24 +++++++--
 .../TableGridEditor/ViewDefinition.tsx        | 53 +++++++++++++++++++
 studio/data/database/view-definition-query.ts |  0
 5 files changed, 102 insertions(+), 14 deletions(-)
 create mode 100644 studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
 create mode 100644 studio/data/database/view-definition-query.ts

diff --git a/studio/components/grid/SupabaseGrid.tsx b/studio/components/grid/SupabaseGrid.tsx
index cf57c55dace..c579f2f5a2d 100644
--- a/studio/components/grid/SupabaseGrid.tsx
+++ b/studio/components/grid/SupabaseGrid.tsx
@@ -58,7 +58,7 @@ export const SupabaseGrid = forwardRef<SupabaseGridRef, SupabaseGridProps>((prop
 })
 
 const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props, ref) => {
-  const { editable, storageRef, gridProps, headerActions } = props
+  const { editable, storageRef, gridProps, headerActions, showCustomChildren, children } = props
   const dispatch = useDispatch()
   const state = useTrackedState()
 
@@ -198,15 +198,22 @@ const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props
         onAddColumn={editable ? props.onAddColumn : undefined}
         headerActions={headerActions}
       />
-      <Grid
-        ref={gridRef}
-        {...gridProps}
-        rows={data?.rows ?? []}
-        updateRow={props.updateTableRow}
-        onEditForeignKeyColumnValue={props.onEditForeignKeyColumnValue}
-      />
-      <Footer isLoading={isLoading || isRefetching} />
-      <Shortcuts gridRef={gridRef} />
+      {showCustomChildren && children !== undefined ? (
+        <>{children}</>
+      ) : (
+        <>
+          <Grid
+            ref={gridRef}
+            {...gridProps}
+            rows={data?.rows ?? []}
+            updateRow={props.updateTableRow}
+            onEditForeignKeyColumnValue={props.onEditForeignKeyColumnValue}
+          />
+          <Footer isLoading={isLoading || isRefetching} />
+          <Shortcuts gridRef={gridRef} />
+        </>
+      )}
+
       {mounted &&
         createPortal(<RowContextMenu table={table} rows={data?.rows ?? []} />, document.body)}
     </div>
diff --git a/studio/components/grid/types/grid.ts b/studio/components/grid/types/grid.ts
index 28981c8f556..918229e565e 100644
--- a/studio/components/grid/types/grid.ts
+++ b/studio/components/grid/types/grid.ts
@@ -1,5 +1,5 @@
 import { ForeignRowSelectorProps } from 'components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector'
-import React from 'react'
+import React, { ReactNode } from 'react'
 import { Dictionary } from './base'
 import { SupaRow, SupaTable } from './table'
 
@@ -81,6 +81,16 @@ export interface SupabaseGridProps {
     row: any
     column: any
   }) => void
+
+  /**
+   * Show custom component passed as children instead of the grid editor
+   */
+  showCustomChildren?: boolean
+
+  /**
+   * Custom component passed as children
+   */
+  children?: ReactNode
 }
 
 export interface SupabaseGridRef {
diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
index 5cd00a26d62..f595551f68c 100644
--- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
@@ -36,6 +36,8 @@ import {
 } from 'data/database/foreign-key-constraints-query'
 import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
 import { ForeignRowSelectorProps } from './SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector'
+import TwoOptionToggle from 'components/ui/TwoOptionToggle'
+import ViewDefinition from './ViewDefinition'
 
 export interface TableGridEditorProps {
   /** Theme for the editor */
@@ -120,6 +122,9 @@ const TableGridEditor = ({
   const [selectedLang, setSelectedLang] = useState<any>('js')
   const [showApiKey, setShowApiKey] = useState<any>(DEFAULT_KEY)
 
+  // When rendering a view in the grid
+  const [selectedView, setSelectedView] = useState<'data' | 'definition'>('data')
+
   const isReadOnly =
     !checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables') &&
     !checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'columns')
@@ -372,19 +377,30 @@ const TableGridEditor = ({
         theme={theme}
         gridProps={{ height: '100%' }}
         storageRef={projectRef}
+        showCustomChildren={isViewSelected && selectedView === 'definition'}
         editable={!isReadOnly && canUpdateTables && canEditViaTableEditor}
         schema={selectedTable.schema}
         table={gridTable}
         refreshDocs={refreshDocs}
         headerActions={
-          canEditViaTableEditor && (
+          isViewSelected ? (
+            <div>
+              <TwoOptionToggle
+                width={80}
+                options={['definition', 'data']}
+                activeOption={selectedView}
+                borderOverride="border-gray-500"
+                onClickOption={setSelectedView}
+              />
+            </div>
+          ) : canEditViaTableEditor ? (
             <GridHeaderActions
               table={selectedTable as PostgresTable}
               apiPreviewPanelOpen={apiPreviewPanelOpen}
               setApiPreviewPanelOpen={setApiPreviewPanelOpen}
               refreshDocs={refreshDocs}
             />
-          )
+          ) : null
         }
         onAddColumn={onAddColumn}
         onEditColumn={onSelectEditColumn}
@@ -396,7 +412,9 @@ const TableGridEditor = ({
         onSqlQuery={onSqlQuery}
         onExpandJSONEditor={onExpandJSONEditor}
         onEditForeignKeyColumnValue={onEditForeignKeyColumnValue}
-      />
+      >
+        <ViewDefinition />
+      </SupabaseGrid>
       {!isUndefined(selectedSchema) && (
         <SidePanelEditor
           selectedSchema={selectedSchema}
diff --git a/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx b/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
new file mode 100644
index 00000000000..c3bec258a71
--- /dev/null
+++ b/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
@@ -0,0 +1,53 @@
+import { useRef } from 'react'
+import Editor from '@monaco-editor/react'
+import { timeout } from 'lib/helpers'
+import { useStore } from 'hooks'
+
+const ViewDefinition = () => {
+  const editorRef = useRef(null)
+  const monacoRef = useRef(null)
+
+  const { ui } = useStore()
+  const { isDarkTheme } = ui
+
+  const handleEditorOnMount = async (editor: any, monaco: any) => {
+    editorRef.current = editor
+    monacoRef.current = monaco
+
+    // add margin above first line
+    editor.changeViewZones((accessor: any) => {
+      accessor.addZone({
+        afterLineNumber: 0,
+        heightInPx: 4,
+        domNode: document.createElement('div'),
+      })
+    })
+
+    // when editor did mount, it will need a delay before focus() works properly
+    await timeout(500)
+    editor?.focus()
+  }
+
+  return (
+    <div className="flex-grow overflow-y-auto border-t border-scale-400">
+      <Editor
+        className="monaco-editor"
+        theme={isDarkTheme ? 'vs-dark' : 'vs'}
+        onMount={handleEditorOnMount}
+        defaultLanguage="pgsql"
+        defaultValue={'Hello'}
+        path={''}
+        options={{
+          domReadOnly: true,
+          tabSize: 2,
+          fontSize: 13,
+          minimap: { enabled: false },
+          wordWrap: 'on',
+          fixedOverflowWidgets: true,
+        }}
+      />
+    </div>
+  )
+}
+
+export default ViewDefinition
diff --git a/studio/data/database/view-definition-query.ts b/studio/data/database/view-definition-query.ts
new file mode 100644
index 00000000000..e69de29bb2d

From 4a73accf43a389e8c168b498bbeb5882e07a9a34 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 29 Mar 2023 14:30:14 +0800
Subject: [PATCH 2/8] Implement showing view definition and refactor API
 documentation side panel into a separate component

---
 studio/components/grid/SupabaseGrid.tsx       |   1 +
 .../grid/components/header/Header.tsx         |  23 ++-
 .../TableGridEditor/APIDocumentationPanel.tsx | 142 ++++++++++++++++++
 .../TableGridEditor/TableGridEditor.tsx       | 141 ++---------------
 .../TableGridEditor/ViewDefinition.tsx        |  27 +++-
 studio/data/database/view-definition-query.ts |  71 +++++++++
 6 files changed, 267 insertions(+), 138 deletions(-)
 create mode 100644 studio/components/interfaces/TableGridEditor/APIDocumentationPanel.tsx

diff --git a/studio/components/grid/SupabaseGrid.tsx b/studio/components/grid/SupabaseGrid.tsx
index c579f2f5a2d..d24242229c9 100644
--- a/studio/components/grid/SupabaseGrid.tsx
+++ b/studio/components/grid/SupabaseGrid.tsx
@@ -197,6 +197,7 @@ const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props
         onAddRow={editable ? props.onAddRow : undefined}
         onAddColumn={editable ? props.onAddColumn : undefined}
         headerActions={headerActions}
+        showCustomChildren={showCustomChildren}
       />
       {showCustomChildren && children !== undefined ? (
         <>{children}</>
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index b5709eafc5c..34c09278692 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -31,19 +31,34 @@ export type HeaderProps = {
   onAddColumn?: () => void
   onAddRow?: () => void
   headerActions?: ReactNode
+  showCustomChildren?: boolean
 }
 
-const Header = ({ table, sorts, filters, onAddColumn, onAddRow, headerActions }: HeaderProps) => {
+const Header = ({
+  table,
+  sorts,
+  filters,
+  onAddColumn,
+  onAddRow,
+  headerActions,
+  showCustomChildren,
+}: HeaderProps) => {
   const state = useTrackedState()
   const { selectedRows } = state
 
   return (
     <div>
       <div className="flex h-10 items-center justify-between bg-scale-100 px-5 py-1.5 dark:bg-scale-300">
-        {selectedRows.size > 0 ? (
-          <RowHeader table={table} sorts={sorts} filters={filters} />
+        {!showCustomChildren ? (
+          <>
+            {selectedRows.size > 0 ? (
+              <RowHeader table={table} sorts={sorts} filters={filters} />
+            ) : (
+              <DefaultHeader table={table} onAddColumn={onAddColumn} onAddRow={onAddRow} />
+            )}
+          </>
         ) : (
-          <DefaultHeader table={table} onAddColumn={onAddColumn} onAddRow={onAddRow} />
+          <div></div>
         )}
         <div className="sb-grid-header__inner">{headerActions}</div>
       </div>
diff --git a/studio/components/interfaces/TableGridEditor/APIDocumentationPanel.tsx b/studio/components/interfaces/TableGridEditor/APIDocumentationPanel.tsx
new file mode 100644
index 00000000000..0557b5e4d02
--- /dev/null
+++ b/studio/components/interfaces/TableGridEditor/APIDocumentationPanel.tsx
@@ -0,0 +1,142 @@
+import { useState } from 'react'
+import { SidePanel, IconBookOpen } from 'ui'
+
+import { useParams, useStore } from 'hooks'
+import { GeneralContent, ResourceContent } from '../Docs'
+import LangSelector from '../Docs/LangSelector'
+import GeneratingTypes from '../Docs/GeneratingTypes'
+import ActionBar from './SidePanelEditor/ActionBar'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
+import { snakeToCamel } from 'lib/helpers'
+
+interface APIDocumentationPanelProps {
+  visible: boolean
+  onClose: () => void
+}
+
+const APIDocumentationPanel = ({ visible, onClose }: APIDocumentationPanelProps) => {
+  const { meta } = useStore()
+  const { ref, page, id } = useParams()
+  const {
+    data: jsonSchema,
+    error: jsonSchemaError,
+    refetch,
+  } = useProjectJsonSchemaQuery({ projectRef: ref })
+  const { data: settings } = useProjectApiQuery({ projectRef: ref })
+
+  const DEFAULT_KEY = { name: 'hide', key: 'SUPABASE_KEY' }
+  const [selectedLang, setSelectedLang] = useState<any>('js')
+  const [showApiKey, setShowApiKey] = useState<any>(DEFAULT_KEY)
+
+  const tables = meta.tables.list()
+  const autoApiService = {
+    ...settings?.autoApiService,
+    endpoint: `${settings?.autoApiService.protocol ?? 'https'}://${
+      settings?.autoApiService.endpoint ?? '-'
+    }`,
+  }
+  const apiService = settings?.autoApiService
+  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key')
+    ? apiService.defaultApiKey
+    : undefined
+  const resources = getResourcesFromJsonSchema(jsonSchema)
+
+  function getResourcesFromJsonSchema(value: any) {
+    const { paths } = value || {}
+    const functionPath = 'rpc/'
+    let resources: any = {}
+
+    Object.entries(paths || []).forEach(([name, val]) => {
+      let trimmed = name.slice(1)
+      let id = trimmed.replace(functionPath, '')
+      let displayName = id.replace(/_/g, ' ')
+      let camelCase = snakeToCamel(id)
+      let enriched = { id, displayName, camelCase }
+      if (!trimmed.length) return
+      else resources[id] = enriched
+    })
+
+    return resources
+  }
+
+  return (
+    <SidePanel
+      key="WrapperTableEditor"
+      size="xxlarge"
+      visible={visible}
+      onCancel={() => onClose()}
+      header={
+        <span className="flex items-center gap-2">
+          <IconBookOpen size="tiny" />
+          API
+        </span>
+      }
+      customFooter={
+        <ActionBar
+          backButtonLabel="Close"
+          hideApply={true}
+          formId="wrapper-table-editor-form"
+          closePanel={() => onClose()}
+        />
+      }
+    >
+      <div className="Docs Docs--table-editor">
+        <SidePanel.Content>
+          {jsonSchemaError ? (
+            <div className="p-6 mx-auto text-center sm:w-full md:w-3/4">
+              <div className="text-scale-1000">
+                <p>Error connecting to API</p>
+                <p>{`${jsonSchemaError}`}</p>
+              </div>
+            </div>
+          ) : (
+            <>
+              {jsonSchema ? (
+                <>
+                  <div className="sticky top-0 z-10 bg-scale-100 dark:bg-scale-300">
+                    <LangSelector
+                      selectedLang={selectedLang}
+                      setSelectedLang={setSelectedLang}
+                      showApiKey={showApiKey}
+                      setShowApiKey={setShowApiKey}
+                      apiKey={anonKey}
+                      autoApiService={autoApiService}
+                    />
+                  </div>
+                  <GeneralContent
+                    autoApiService={autoApiService}
+                    selectedLang={selectedLang}
+                    showApiKey={true}
+                    page={page}
+                  />
+
+                  <GeneratingTypes selectedLang={selectedLang} />
+
+                  {jsonSchema?.definitions && (
+                    <ResourceContent
+                      autoApiService={autoApiService}
+                      selectedLang={selectedLang}
+                      resourceId={tables.find((table) => table.id === Number(id))?.name}
+                      resources={resources}
+                      definitions={jsonSchema.definitions}
+                      paths={jsonSchema.paths}
+                      showApiKey={showApiKey.key}
+                      refreshDocs={async () => await refetch()}
+                    />
+                  )}
+                </>
+              ) : (
+                <div className="p-6 mx-auto text-center sm:w-full md:w-3/4">
+                  <h3 className="text-lg">Building docs ...</h3>
+                </div>
+              )}
+            </>
+          )}
+        </SidePanel.Content>
+      </div>
+    </SidePanel>
+  )
+}
+
+export default APIDocumentationPanel
diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
index f595551f68c..2e4776cfb0f 100644
--- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
@@ -18,17 +18,10 @@ import {
   SupabaseGridRef,
   SupaTable,
 } from 'components/grid'
-import { IconBookOpen, SidePanel } from 'ui'
-import ActionBar from './SidePanelEditor/ActionBar'
-import { GeneralContent, ResourceContent } from '../Docs'
 import { sqlKeys } from 'data/sql/keys'
-import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
 import { useTableRowUpdateMutation } from 'data/table-rows/table-row-update-mutation'
-import { snakeToCamel } from 'lib/helpers'
 import { JsonEditValue } from './SidePanelEditor/RowEditor/RowEditor.types'
-import LangSelector from '../Docs/LangSelector'
-import GeneratingTypes from '../Docs/GeneratingTypes'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import {
   ForeignKeyConstraint,
@@ -38,6 +31,7 @@ import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-consta
 import { ForeignRowSelectorProps } from './SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector'
 import TwoOptionToggle from 'components/ui/TwoOptionToggle'
 import ViewDefinition from './ViewDefinition'
+import APIDocumentationPanel from './APIDocumentationPanel'
 
 export interface TableGridEditorProps {
   /** Theme for the editor */
@@ -97,31 +91,16 @@ const TableGridEditor = ({
   onEditForeignKeyColumnValue = noop,
   onClosePanel = noop,
 }: TableGridEditorProps) => {
-  const { project } = useProjectContext()
   const { meta, ui, vault } = useStore()
   const router = useRouter()
-  const { ref: projectRef, page, id } = useParams()
+  const { ref: projectRef, id } = useParams()
   const gridRef = useRef<SupabaseGridRef>(null)
 
-  const tables = meta.tables.list()
-
-  const { data: settings } = useProjectApiQuery({ projectRef: projectRef })
-
-  const autoApiService = {
-    ...settings?.autoApiService,
-    endpoint: `${settings?.autoApiService.protocol ?? 'https'}://${
-      settings?.autoApiService.endpoint ?? '-'
-    }`,
-  }
-  const DEFAULT_KEY = { name: 'hide', key: 'SUPABASE_KEY' }
-
+  const { project } = useProjectContext()
   const isVaultEnabled = useFlag('vaultExtension')
   const [encryptedColumns, setEncryptedColumns] = useState([])
   const [apiPreviewPanelOpen, setApiPreviewPanelOpen] = useState(false)
 
-  const [selectedLang, setSelectedLang] = useState<any>('js')
-  const [showApiKey, setShowApiKey] = useState<any>(DEFAULT_KEY)
-
   // When rendering a view in the grid
   const [selectedView, setSelectedView] = useState<'data' | 'definition'>('data')
 
@@ -193,37 +172,7 @@ const TableGridEditor = ({
     },
   })
 
-  function getResourcesFromJsonSchema(value: any) {
-    const { paths } = value || {}
-    const functionPath = 'rpc/'
-    let resources: any = {}
-
-    Object.entries(paths || []).forEach(([name, val]) => {
-      let trimmed = name.slice(1)
-      let id = trimmed.replace(functionPath, '')
-      let displayName = id.replace(/_/g, ' ')
-      let camelCase = snakeToCamel(id)
-      let enriched = { id, displayName, camelCase }
-      if (!trimmed.length) return
-      else resources[id] = enriched
-    })
-
-    return resources
-  }
-
-  const apiService = settings?.autoApiService
-  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key')
-    ? apiService.defaultApiKey
-    : undefined
-
-  const {
-    data: jsonSchema,
-    error: jsonSchemaError,
-    refetch,
-  } = useProjectJsonSchemaQuery({ projectRef })
-  if (jsonSchemaError) console.error('jsonSchemaError', jsonSchemaError)
-
-  const resources = getResourcesFromJsonSchema(jsonSchema)
+  const { refetch } = useProjectJsonSchemaQuery({ projectRef })
   const refreshDocs = async () => await refetch()
 
   const { data } = useForeignKeyConstraintsQuery({
@@ -377,7 +326,6 @@ const TableGridEditor = ({
         theme={theme}
         gridProps={{ height: '100%' }}
         storageRef={projectRef}
-        showCustomChildren={isViewSelected && selectedView === 'definition'}
         editable={!isReadOnly && canUpdateTables && canEditViaTableEditor}
         schema={selectedTable.schema}
         table={gridTable}
@@ -412,9 +360,11 @@ const TableGridEditor = ({
         onSqlQuery={onSqlQuery}
         onExpandJSONEditor={onExpandJSONEditor}
         onEditForeignKeyColumnValue={onEditForeignKeyColumnValue}
+        showCustomChildren={isViewSelected && selectedView === 'definition'}
       >
-        <ViewDefinition />
+        {isViewSelected && <ViewDefinition name={selectedTable.name} />}
       </SupabaseGrid>
+
       {!isUndefined(selectedSchema) && (
         <SidePanelEditor
           selectedSchema={selectedSchema}
@@ -434,81 +384,10 @@ const TableGridEditor = ({
         />
       )}
 
-      <SidePanel
-        key="WrapperTableEditor"
-        size="xxlarge"
+      <APIDocumentationPanel
         visible={apiPreviewPanelOpen}
-        onCancel={() => setApiPreviewPanelOpen(false)}
-        header={
-          <span className="flex items-center gap-2">
-            <IconBookOpen size="tiny" />
-            API
-          </span>
-        }
-        customFooter={
-          <ActionBar
-            backButtonLabel="Close"
-            hideApply={true}
-            formId="wrapper-table-editor-form"
-            closePanel={() => setApiPreviewPanelOpen(false)}
-          />
-        }
-      >
-        <div className="Docs Docs--table-editor">
-          <SidePanel.Content>
-            {jsonSchemaError ? (
-              <div className="p-6 mx-auto text-center sm:w-full md:w-3/4">
-                <div className="text-scale-1000">
-                  <p>Error connecting to API</p>
-                  <p>{`${jsonSchemaError}`}</p>
-                </div>
-              </div>
-            ) : (
-              <>
-                {jsonSchema ? (
-                  <>
-                    <div className="sticky top-0 z-10 bg-scale-100 dark:bg-scale-300">
-                      <LangSelector
-                        selectedLang={selectedLang}
-                        setSelectedLang={setSelectedLang}
-                        showApiKey={showApiKey}
-                        setShowApiKey={setShowApiKey}
-                        apiKey={anonKey}
-                        autoApiService={autoApiService}
-                      />
-                    </div>
-                    <GeneralContent
-                      autoApiService={autoApiService}
-                      selectedLang={selectedLang}
-                      showApiKey={true}
-                      page={page}
-                    />
-
-                    <GeneratingTypes selectedLang={selectedLang} />
-
-                    {jsonSchema?.definitions && (
-                      <ResourceContent
-                        autoApiService={autoApiService}
-                        selectedLang={selectedLang}
-                        resourceId={tables.find((table) => table.id === Number(id))?.name}
-                        resources={resources}
-                        definitions={jsonSchema.definitions}
-                        paths={jsonSchema.paths}
-                        showApiKey={showApiKey.key}
-                        refreshDocs={refreshDocs}
-                      />
-                    )}
-                  </>
-                ) : (
-                  <div className="p-6 mx-auto text-center sm:w-full md:w-3/4">
-                    <h3 className="text-lg">Building docs ...</h3>
-                  </div>
-                )}
-              </>
-            )}
-          </SidePanel.Content>
-        </div>
-      </SidePanel>
+        onClose={() => setApiPreviewPanelOpen(false)}
+      />
     </>
   )
 }
diff --git a/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx b/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
index c3bec258a71..60bf2e111f3 100644
--- a/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
+++ b/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
@@ -2,14 +2,28 @@ import { useRef } from 'react'
 import Editor from '@monaco-editor/react'
 import { timeout } from 'lib/helpers'
 import { useStore } from 'hooks'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useViewDefinitionQuery } from 'data/database/view-definition-query'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 
-const ViewDefinition = () => {
+export interface ViewDefinitionProps {
+  name: string
+}
+
+const ViewDefinition = ({ name }: ViewDefinitionProps) => {
   const editorRef = useRef(null)
   const monacoRef = useRef(null)
 
   const { ui } = useStore()
   const { isDarkTheme } = ui
 
+  const { project } = useProjectContext()
+  const { data: definition, isLoading } = useViewDefinitionQuery({
+    name,
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+
   const handleEditorOnMount = async (editor: any, monaco: any) => {
     editorRef.current = editor
     monacoRef.current = monaco
@@ -28,17 +42,24 @@ const ViewDefinition = () => {
     editor?.focus()
   }
 
-  return (
+  return isLoading ? (
+    <div className="py-4 space-y-2">
+      <ShimmeringLoader />
+      <ShimmeringLoader className="w-3/4" />
+      <ShimmeringLoader className="w-1/2" />
+    </div>
+  ) : (
     <div className="flex-grow overflow-y-auto border-t border-scale-400">
       <Editor
         className="monaco-editor"
         theme={isDarkTheme ? 'vs-dark' : 'vs'}
         onMount={handleEditorOnMount}
         defaultLanguage="pgsql"
-        defaultValue={'Hello'}
+        defaultValue={definition}
         path={''}
         options={{
           domReadOnly: true,
+          readOnly: true,
           tabSize: 2,
           fontSize: 13,
           minimap: { enabled: false },
diff --git a/studio/data/database/view-definition-query.ts b/studio/data/database/view-definition-query.ts
index e69de29bb2d..c9f6cb1c2de 100644
--- a/studio/data/database/view-definition-query.ts
+++ b/studio/data/database/view-definition-query.ts
@@ -0,0 +1,71 @@
+import { UseQueryOptions } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { ExecuteSqlData, useExecuteSqlPrefetch, useExecuteSqlQuery } from '../sql/execute-sql-query'
+
+type getViewDefinition = {
+  name?: string
+}
+
+type ViewDefinition = {
+  id: number
+  constraint_name: string
+  deletion_action: string
+  source_id: string
+  source_schema: string
+  source_table: string
+  source_columns: string
+  target_id: string
+  target_schema: string
+  target_table: string
+  target_columns: string
+}
+
+export const getViewDefinitionQuery = ({ name }: getViewDefinition) => {
+  const sql = /* SQL */ `
+select pg_get_viewdef('${name}', true) as definition
+`.trim()
+  return sql
+}
+
+export type ViewDefinitionVariables = getViewDefinition & {
+  projectRef?: string
+  connectionString?: string
+}
+
+export type ViewDefinitionData = any
+export type ViewDefinitionError = unknown
+
+export const useViewDefinitionQuery = <TData extends ViewDefinitionData = ViewDefinitionData>(
+  { projectRef, connectionString, name }: ViewDefinitionVariables,
+  options: UseQueryOptions<ExecuteSqlData, ViewDefinitionError, TData> = {}
+) => {
+  return useExecuteSqlQuery(
+    {
+      projectRef,
+      connectionString,
+      sql: getViewDefinitionQuery({ name }),
+      queryKey: [`view-definition-${name}`],
+    },
+    {
+      select(data) {
+        return data.result[0].definition.trim()
+      },
+      ...options,
+    }
+  )
+}
+
+export const useViewDefinitionQueryPrefetch = () => {
+  const prefetch = useExecuteSqlPrefetch()
+
+  return useCallback(
+    ({ projectRef, connectionString, name }: ViewDefinitionVariables) =>
+      prefetch({
+        projectRef,
+        connectionString,
+        sql: getViewDefinitionQuery({ name }),
+        queryKey: [`view-definition-${name}`],
+      }),
+    [prefetch]
+  )
+}

From 027eeb00e67d8b40332a9ef7b1d0d125c3dd0f78 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 29 Mar 2023 14:38:59 +0800
Subject: [PATCH 3/8] Show custom header when viewing view definition

---
 studio/components/grid/SupabaseGrid.tsx           | 12 ++++++++++--
 .../components/grid/components/header/Header.tsx  | 10 +++++-----
 studio/components/grid/types/grid.ts              |  5 +++++
 .../TableGridEditor/TableGridEditor.tsx           | 15 +++++++++++++++
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/studio/components/grid/SupabaseGrid.tsx b/studio/components/grid/SupabaseGrid.tsx
index d24242229c9..42c63015358 100644
--- a/studio/components/grid/SupabaseGrid.tsx
+++ b/studio/components/grid/SupabaseGrid.tsx
@@ -58,7 +58,15 @@ export const SupabaseGrid = forwardRef<SupabaseGridRef, SupabaseGridProps>((prop
 })
 
 const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props, ref) => {
-  const { editable, storageRef, gridProps, headerActions, showCustomChildren, children } = props
+  const {
+    editable,
+    storageRef,
+    gridProps,
+    headerActions,
+    showCustomChildren,
+    customHeader,
+    children,
+  } = props
   const dispatch = useDispatch()
   const state = useTrackedState()
 
@@ -197,7 +205,7 @@ const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props
         onAddRow={editable ? props.onAddRow : undefined}
         onAddColumn={editable ? props.onAddColumn : undefined}
         headerActions={headerActions}
-        showCustomChildren={showCustomChildren}
+        customHeader={customHeader}
       />
       {showCustomChildren && children !== undefined ? (
         <>{children}</>
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 34c09278692..cd18a1ff7f0 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -31,7 +31,7 @@ export type HeaderProps = {
   onAddColumn?: () => void
   onAddRow?: () => void
   headerActions?: ReactNode
-  showCustomChildren?: boolean
+  customHeader: ReactNode
 }
 
 const Header = ({
@@ -41,7 +41,7 @@ const Header = ({
   onAddColumn,
   onAddRow,
   headerActions,
-  showCustomChildren,
+  customHeader,
 }: HeaderProps) => {
   const state = useTrackedState()
   const { selectedRows } = state
@@ -49,7 +49,9 @@ const Header = ({
   return (
     <div>
       <div className="flex h-10 items-center justify-between bg-scale-100 px-5 py-1.5 dark:bg-scale-300">
-        {!showCustomChildren ? (
+        {customHeader ? (
+          <>{customHeader}</>
+        ) : (
           <>
             {selectedRows.size > 0 ? (
               <RowHeader table={table} sorts={sorts} filters={filters} />
@@ -57,8 +59,6 @@ const Header = ({
               <DefaultHeader table={table} onAddColumn={onAddColumn} onAddRow={onAddRow} />
             )}
           </>
-        ) : (
-          <div></div>
         )}
         <div className="sb-grid-header__inner">{headerActions}</div>
       </div>
diff --git a/studio/components/grid/types/grid.ts b/studio/components/grid/types/grid.ts
index 918229e565e..491285cb995 100644
--- a/studio/components/grid/types/grid.ts
+++ b/studio/components/grid/types/grid.ts
@@ -87,6 +87,11 @@ export interface SupabaseGridProps {
    */
   showCustomChildren?: boolean
 
+  /**
+   * Custom header left most actions component
+   */
+  customHeader?: ReactNode
+
   /**
    * Custom component passed as children
    */
diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
index 2e4776cfb0f..8e7ae2a6a26 100644
--- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
@@ -318,6 +318,11 @@ const TableGridEditor = ({
     })
   }
 
+  /** [Joshen] We're going to need to refactor SupabaseGrid eventually to make the code here more readable
+   * For context we previously built the SupabaseGrid as a reusable npm component, but eventually decided
+   * to just integrate it directly into the dashboard. The header, and body (+footer) should be decoupled.
+   */
+
   return (
     <>
       <SupabaseGrid
@@ -361,6 +366,16 @@ const TableGridEditor = ({
         onExpandJSONEditor={onExpandJSONEditor}
         onEditForeignKeyColumnValue={onEditForeignKeyColumnValue}
         showCustomChildren={isViewSelected && selectedView === 'definition'}
+        customHeader={
+          isViewSelected && selectedView === 'definition' ? (
+            <div className="flex items-center space-x-2">
+              <p>
+                SQL Definition of <code className="text-sm">{selectedTable.name}</code>{' '}
+              </p>
+              <p className="text-scale-1000 text-sm">(Read only)</p>
+            </div>
+          ) : null
+        }
       >
         {isViewSelected && <ViewDefinition name={selectedTable.name} />}
       </SupabaseGrid>

From 688b6939bcce6941561dc9a6acf4e4ecd59ba7a4 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 29 Mar 2023 22:11:39 +0800
Subject: [PATCH 4/8] Fix FolderContextMenu

---
 .../StorageExplorer/FolderContextMenu.tsx        | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx
index aedfa8e5c55..a396c81f47a 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx
@@ -28,15 +28,13 @@ const FolderContextMenu: FC<Props> = ({ id = '' }) => {
         <IconDownload size="tiny" />
         <span className="ml-2 text-xs">Download</span>
       </Item>
-      {canUpdateFiles && (
-        <>
-          <Separator />
-          <Item onClick={({ props }) => setSelectedItemsToDelete([props.item])}>
-            <IconTrash2 size="tiny" />
-            <span className="ml-2 text-xs">Delete</span>
-          </Item>
-        </>
-      )}
+      {canUpdateFiles && [
+        <Separator />,
+        <Item onClick={({ props }) => setSelectedItemsToDelete([props.item])}>
+          <IconTrash2 size="tiny" />
+          <span className="ml-2 text-xs">Delete</span>
+        </Item>,
+      ]}
     </Menu>
   )
 }

From 0020652b0ccd1f76caad22f43738a43ff09fccc9 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 30 Mar 2023 11:06:56 +0800
Subject: [PATCH 5/8] Address feedback

---
 .../TableGridEditor/TableGridEditor.tsx        |  2 +-
 .../TableGridEditor/ViewDefinition.tsx         | 18 +++++++++++-------
 studio/components/ui/TwoOptionToggle.tsx       |  2 +-
 studio/data/database/view-definition-query.ts  |  4 ++--
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
index 8e7ae2a6a26..7014e0fe8e4 100644
--- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
@@ -339,7 +339,7 @@ const TableGridEditor = ({
           isViewSelected ? (
             <div>
               <TwoOptionToggle
-                width={80}
+                width={75}
                 options={['definition', 'data']}
                 activeOption={selectedView}
                 borderOverride="border-gray-500"
diff --git a/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx b/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
index 60bf2e111f3..6df9807aa53 100644
--- a/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
+++ b/studio/components/interfaces/TableGridEditor/ViewDefinition.tsx
@@ -42,13 +42,17 @@ const ViewDefinition = ({ name }: ViewDefinitionProps) => {
     editor?.focus()
   }
 
-  return isLoading ? (
-    <div className="py-4 space-y-2">
-      <ShimmeringLoader />
-      <ShimmeringLoader className="w-3/4" />
-      <ShimmeringLoader className="w-1/2" />
-    </div>
-  ) : (
+  if (isLoading) {
+    return (
+      <div className="py-4 space-y-2">
+        <ShimmeringLoader />
+        <ShimmeringLoader className="w-3/4" />
+        <ShimmeringLoader className="w-1/2" />
+      </div>
+    )
+  }
+
+  return (
     <div className="flex-grow overflow-y-auto border-t border-scale-400">
       <Editor
         className="monaco-editor"
diff --git a/studio/components/ui/TwoOptionToggle.tsx b/studio/components/ui/TwoOptionToggle.tsx
index 24292b0ad8e..d1255788b68 100644
--- a/studio/components/ui/TwoOptionToggle.tsx
+++ b/studio/components/ui/TwoOptionToggle.tsx
@@ -26,7 +26,7 @@ const TwoOptionToggle: FC<Props> = ({
 
   return (
     <div
-      className={`relative border ${borderOverride} rounded-md h-8`}
+      className={`relative border ${borderOverride} rounded-md h-7`}
       style={{ padding: 1, width: (width + 1) * 2 }}
     >
       <span
diff --git a/studio/data/database/view-definition-query.ts b/studio/data/database/view-definition-query.ts
index c9f6cb1c2de..051b012aac3 100644
--- a/studio/data/database/view-definition-query.ts
+++ b/studio/data/database/view-definition-query.ts
@@ -44,7 +44,7 @@ export const useViewDefinitionQuery = <TData extends ViewDefinitionData = ViewDe
       projectRef,
       connectionString,
       sql: getViewDefinitionQuery({ name }),
-      queryKey: [`view-definition-${name}`],
+      queryKey: ['view-definition', name],
     },
     {
       select(data) {
@@ -64,7 +64,7 @@ export const useViewDefinitionQueryPrefetch = () => {
         projectRef,
         connectionString,
         sql: getViewDefinitionQuery({ name }),
-        queryKey: [`view-definition-${name}`],
+        queryKey: ['view-definition', name],
       }),
     [prefetch]
   )

From b9f03ad545290fff56156a42c92cbf8714f49d96 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 30 Mar 2023 12:45:43 +0800
Subject: [PATCH 6/8] Update refresh button

---
 studio/components/grid/SupabaseGrid.tsx            |  1 +
 .../components/grid/components/header/Header.tsx   | 14 +++++++++++---
 .../grid/components/header/RefreshButton.tsx       | 10 ++++------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/studio/components/grid/SupabaseGrid.tsx b/studio/components/grid/SupabaseGrid.tsx
index 42c63015358..5318d088f19 100644
--- a/studio/components/grid/SupabaseGrid.tsx
+++ b/studio/components/grid/SupabaseGrid.tsx
@@ -202,6 +202,7 @@ const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props
         table={table}
         sorts={sorts}
         filters={filters}
+        isRefetching={isRefetching}
         onAddRow={editable ? props.onAddRow : undefined}
         onAddColumn={editable ? props.onAddColumn : undefined}
         headerActions={headerActions}
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index cd18a1ff7f0..61efa5c7b37 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -28,6 +28,7 @@ export type HeaderProps = {
   table: SupaTable
   sorts: Sort[]
   filters: Filter[]
+  isRefetching: boolean
   onAddColumn?: () => void
   onAddRow?: () => void
   headerActions?: ReactNode
@@ -42,6 +43,7 @@ const Header = ({
   onAddRow,
   headerActions,
   customHeader,
+  isRefetching,
 }: HeaderProps) => {
   const state = useTrackedState()
   const { selectedRows } = state
@@ -56,7 +58,12 @@ const Header = ({
             {selectedRows.size > 0 ? (
               <RowHeader table={table} sorts={sorts} filters={filters} />
             ) : (
-              <DefaultHeader table={table} onAddColumn={onAddColumn} onAddRow={onAddRow} />
+              <DefaultHeader
+                table={table}
+                isRefetching={isRefetching}
+                onAddColumn={onAddColumn}
+                onAddRow={onAddRow}
+              />
             )}
           </>
         )}
@@ -71,10 +78,11 @@ export default Header
 
 type DefaultHeaderProps = {
   table: SupaTable
+  isRefetching: boolean
   onAddColumn?: () => void
   onAddRow?: () => void
 }
-const DefaultHeader = ({ table, onAddColumn, onAddRow }: DefaultHeaderProps) => {
+const DefaultHeader = ({ table, isRefetching, onAddColumn, onAddRow }: DefaultHeaderProps) => {
   const canAddNew = onAddRow !== undefined || onAddColumn !== undefined
 
   // [Joshen] Using this logic to block both column and row creation/update/delete
@@ -87,7 +95,7 @@ const DefaultHeader = ({ table, onAddColumn, onAddRow }: DefaultHeaderProps) =>
   return (
     <div className="flex items-center gap-4">
       <div className="flex items-center gap-2">
-        <RefreshButton table={table} />
+        <RefreshButton table={table} isRefetching={isRefetching} />
         <FilterDropdown table={table} filters={filters as string[]} setParams={setParams} />
         <SortPopover table={table} sorts={sorts as string[]} setParams={setParams} />
       </div>
diff --git a/studio/components/grid/components/header/RefreshButton.tsx b/studio/components/grid/components/header/RefreshButton.tsx
index dea181a3de8..77fb9080fea 100644
--- a/studio/components/grid/components/header/RefreshButton.tsx
+++ b/studio/components/grid/components/header/RefreshButton.tsx
@@ -1,4 +1,4 @@
-import { useQueryClient, useIsFetching } from '@tanstack/react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { SupaTable } from 'components/grid/types'
 import { sqlKeys } from 'data/sql/keys'
 import { useParams } from 'hooks'
@@ -8,16 +8,14 @@ import { SupabaseGridQueue } from '../../constants'
 
 export type RefreshButtonProps = {
   table: SupaTable
+  isRefetching: boolean
 }
 
-const RefreshButton = ({ table }: RefreshButtonProps) => {
+const RefreshButton = ({ table, isRefetching }: RefreshButtonProps) => {
   const { ref } = useParams()
   const queryClient = useQueryClient()
 
   const queryKey = sqlKeys.query(ref, [table.schema, table.name])
-
-  const loading = useIsFetching({ queryKey }) > 0
-
   const [status, setStatus] = useState<string>()
 
   useEffect(() => {
@@ -61,7 +59,7 @@ const RefreshButton = ({ table }: RefreshButtonProps) => {
       onClick={() => {
         if (!status) onClick()
       }}
-      loading={loading || status === 'saving'}
+      loading={isRefetching || status === 'saving'}
     >
       {!status ? 'Refresh' : status === 'saved' ? 'Changes saved' : 'Saving changes'}
     </Button>

From b365a42cc32ec27ff2c4fd0520b61ff504d79759 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 30 Mar 2023 12:48:23 +0800
Subject: [PATCH 7/8] Small fix

---
 .../interfaces/Auth/AuthProvidersForm/ProviderForm.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index f2909a7f4de..8c00d8229f5 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -163,7 +163,7 @@ const ProviderForm: FC<Props> = ({ provider }) => {
                         <Button
                           htmlType="submit"
                           loading={isSubmitting}
-                          disabled={!canUpdateConfig || noChanges}
+                          disabled={isSubmitting || !canUpdateConfig || noChanges}
                         >
                           Save
                         </Button>

From 637041fc426567d872c0d24b6e31a3eb90760a55 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 30 Mar 2023 12:53:30 +0800
Subject: [PATCH 8/8] fix

---
 .../RowEditor/ForeignRowSelector/ForeignRowSelector.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
index eb1cc36fdca..add2ac309c1 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
@@ -127,7 +127,7 @@ const ForeignRowSelector = ({
             <div className="h-full flex flex-col">
               <div className="flex items-center justify-between my-2 mx-3">
                 <div className="flex items-center">
-                  <RefreshButton table={supaTable} />
+                  <RefreshButton table={supaTable} isRefetching={isRefetching} />
                   <FilterPopover
                     table={supaTable}
                     filters={params.filter ?? []}