supabase/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx

import { FC, useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import {
  Button,
  Divider,
  Dropdown,
  Typography,
  Listbox,
  Menu,
  Input,
  IconCopy,
  IconChevronDown,
  IconEdit,
  IconTrash,
  IconSearch,
  IconPlus,
  IconDatabase,
  IconX,
  IconLoader,
  IconRefreshCw,
} from '@supabase/ui'
import { PostgresTable } from '@supabase/postgres-meta'

import Base64 from 'lib/base64'
import { useStore } from 'hooks'
import { SchemaView } from './TableEditorLayout.types'

interface Props {
  selectedSchema?: string
  onSelectSchema: (schema: string) => void
  onAddTable: () => void
  onEditTable: (table: PostgresTable) => void
  onDeleteTable: (table: PostgresTable) => void
  onDuplicateTable: (table: PostgresTable) => void
}

const TableEditorMenu: FC<Props> = ({
                                      selectedSchema,
                                      onSelectSchema = () => {},
                                      onAddTable = () => {},
                                      onEditTable = () => {},
                                      onDeleteTable = () => {},
                                      onDuplicateTable = () => {},
                                    }) => {
  const { meta, ui } = useStore()
  const router = useRouter()
  const { id } = router.query

  const projectRef = ui.selectedProject?.ref
  const [searchText, setSearchText] = useState<string>('')
  const [schemaViews, setSchemaViews] = useState<SchemaView[]>([])
  const [isRefreshing, setIsRefreshing] = useState<boolean>(false)

  // We may need to shift this to the schema store and do something like meta.schema.loadViews()
  // I don't need we need a separate store for views
  useEffect(() => {
    let cancel = false
    const fetchViews = async (selectedSchema: string) => {
      const views: SchemaView[] = await meta.schemas.getViews(selectedSchema)
      if (!cancel) setSchemaViews(views)
    }
    if (selectedSchema) {
      fetchViews(selectedSchema)
    }
    return () => {
      cancel = true
    }
  }, [selectedSchema])

  const refreshTables = async () => {
    setIsRefreshing(true)
    await meta.tables.load()
    setIsRefreshing(false)
  }

  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.toLowerCase().includes(searchText.toLowerCase())
      )

  const filteredSchemaViews =
    searchText.length === 0
      ? schemaViews
      : schemaViews.filter((view) => view.name.includes(searchText))

  // Temp fix - Ideally we'd just take up all the remaining space but
  // can't seem to figure that out immediately
  const maxScrollHeight = schemaViews.length > 0 ? 270 : 520

  return (
    <div className='my-6 flex flex-col flex-grow'>
      {/* Schema selection dropdown */}
      <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} />
            <Typography.Text small>Loading schemas...</Typography.Text>
          </div>
        ) : (
          <Listbox
            icon={<IconDatabase size={16} />}
            size='tiny'
            value={selectedSchema}
            onChange={(name: string) => {
              setSearchText('')
              setSchemaViews([])
              onSelectSchema(name)
            }}
          >
            {schemas.map((schema) => (
              <Listbox.Option key={schema.id} value={schema.name}
                              label={schema.name}>
                {schema.name}
              </Listbox.Option>
            ))}
          </Listbox>
        )}
      </div>

      <div className='mx-4 my-4 space-y-1'>
        {/* Add new table button */}
        {selectedSchema === 'public' && (
          <Button
            block
            icon={<IconPlus />}
            type='text'
            style={{ justifyContent: 'start' }}
            onClick={onAddTable}
          >
            New table
          </Button>
        )}

        {/* Table search input */}
        <Input
          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'
          actions={
            searchText && (
              <IconX
                size={'tiny'}
                className='cursor-pointer mx-1'
                onClick={() => setSearchText('')}
              />
            )
          }
        />
      </div>

      {/* 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>
              All tables
            </Typography.Text>
            <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 }}>
            {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'>
                    <Menu.Item rounded active={isActive}>
                      <div className='flex justify-between py-[2px]'>
                        <Typography.Text className='truncate flex items-center'>
                          {table.name}
                        </Typography.Text>
                        {isActive && (
                          <Dropdown
                            side='bottom'
                            align='start'
                            overlay={[
                              <Dropdown.Item
                                key='edit-table'
                                icon={<IconEdit size='tiny' />}
                                onClick={() => onEditTable(table)}
                              >
                                Edit Table
                              </Dropdown.Item>,
                              <Dropdown.Item
                                key='duplicate-table'
                                icon={<IconCopy size='tiny' />}
                                onClick={() => onDuplicateTable(table)}
                              >
                                Duplicate Table
                              </Dropdown.Item>,
                              <Divider key='divider' light />,
                              <Dropdown.Item
                                key='delete-table'
                                icon={<IconTrash size='tiny' />}
                                onClick={() => onDeleteTable(table)}
                              >
                                Delete Table
                              </Dropdown.Item>,
                            ]}
                          >
                            <Button
                              as='span'
                              type='text'
                              icon={<IconChevronDown />}
                              style={{ padding: '3px' }}
                            />
                          </Dropdown>
                        )}
                      </div>
                    </Menu.Item>
                  </a>
                </Link>
              )
            })}
          </div>
        </div>
      )}

      {/* 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>
              All Views
            </Typography.Text>
          </div>
          <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'>
                    <Menu.Item key={viewId} rounded active={isActive}>
                      <div className='flex justify-between'>
                        <Typography.Text
                          className='truncate'>{view.name}</Typography.Text>
                      </div>
                    </Menu.Item>
                  </div>
                </Link>
              )
            })}
          </div>
        </div>
      )}

      {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>
      )}

      {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>
      )}
    </div>
  )
}

export default TableEditorMenu