feat: adds infinite scroll to tables list

trathailoi · Mar 23, 2023 · 289b053 · 289b053
1 parent ef3d2ba
commit 289b053
Show file tree

Hide file tree

Showing 9 changed files with 374 additions and 275 deletions.
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Space } from '../Space'
 import Typography from '../Typography'
 import { MenuContextProvider, useMenuContext } from './MenuContext'
 
@@ -8,11 +7,12 @@ import styleHandler from '../../lib/theme/styleHandler'
 interface MenuProps {
   children: React.ReactNode
   className?: string
+  ulClassName?: string
   style?: React.CSSProperties
   type?: 'text' | 'pills' | 'border'
 }
 
-function Menu({ children, className, style, type = 'text' }: MenuProps) {
+function Menu({ children, className, ulClassName, style, type = 'text' }: MenuProps) {
   return (
     <nav
       role="menu"
@@ -23,7 +23,7 @@ function Menu({ children, className, style, type = 'text' }: MenuProps) {
       style={style}
     >
       <MenuContextProvider type={type}>
-        <ul>{children}</ul>
+        <ul className={ulClassName}>{children}</ul>
       </MenuContextProvider>
     </nav>
   )
@@ -86,7 +86,7 @@ export function Item({
         onClick={onClick}
         aria-current={active ? 'page' : undefined}
       >
-        {icon && <span className={iconClasses.join(' ')}>{icon}</span>}
+        {icon && <div className={`${iconClasses.join(' ')} min-w-fit`}>{icon}</div>}
         <span className={contentClasses.join(' ')}>{children}</span>
       </a>
     </li>
@@ -103,9 +103,7 @@ export function Group({ children, icon, title }: GroupProps) {
   const __styles = styleHandler('menu')
   const { type } = useMenuContext()
   return (
-    <div
-      className={[__styles.group.base, __styles.group.variants[type]].join(' ')}
-    >
+    <div className={[__styles.group.base, __styles.group.variants[type]].join(' ')}>
       {icon && <span className={__styles.group.icon}>{icon}</span>}
       <span className={__styles.group.content}>{title}</span>
       {children}

diff --git a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
@@ -1,39 +1,35 @@
-import { FC, ReactNode, useState, useEffect } from 'react'
-import { isUndefined } from 'lodash'
+import { PropsWithChildren, useEffect } from 'react'
+import { isUndefined, noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
-import type { PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useParams, useStore } from 'hooks'
-import Error from 'components/ui/Error'
+import { Entity } from 'data/entity-types/entity-types-infinite-query'
 import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import TableEditorMenu from './TableEditorMenu'
 import NoPermission from 'components/ui/NoPermission'
 
-interface Props {
+export interface TableEditorLayoutProps {
   selectedSchema?: string
   onSelectSchema: (schema: string) => void
   onAddTable: () => void
-  onEditTable: (table: PostgresTable) => void
-  onDeleteTable: (table: PostgresTable) => void
-  onDuplicateTable: (table: PostgresTable) => void
-  children: ReactNode
+  onEditTable: (table: Entity) => void
+  onDeleteTable: (table: Entity) => void
+  onDuplicateTable: (table: Entity) => void
 }
 
-const TableEditorLayout: FC<Props> = ({
+const TableEditorLayout = ({
   selectedSchema,
-  onSelectSchema = () => {},
-  onAddTable = () => {},
-  onEditTable = () => {},
-  onDeleteTable = () => {},
-  onDuplicateTable = () => {},
+  onSelectSchema = noop,
+  onAddTable = noop,
+  onEditTable = noop,
+  onDeleteTable = noop,
+  onDuplicateTable = noop,
   children,
-}) => {
+}: PropsWithChildren<TableEditorLayoutProps>) => {
   const { vault, meta, ui } = useStore()
   const { id, type } = useParams()
-  const { isInitialized, isLoading, error } = meta.tables
 
-  const [loaded, setLoaded] = useState<boolean>(isInitialized)
   const canReadTables = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'tables')
 
   const vaultExtension = meta.extensions.byId('supabase_vault')
@@ -56,12 +52,12 @@ const TableEditorLayout: FC<Props> = ({
     }
   }, [ui.selectedProject?.ref])
 
-  useEffect(() => {
-    if (selectedSchema && ui.selectedProject?.ref) {
-      meta.tables.loadBySchema(selectedSchema)
-      meta.views.loadBySchema(selectedSchema)
-    }
-  }, [ui.selectedProject?.ref, selectedSchema])
+  // useEffect(() => {
+  //   if (selectedSchema && ui.selectedProject?.ref) {
+  //     meta.tables.loadBySchema(selectedSchema)
+  //     meta.views.loadBySchema(selectedSchema)
+  //   }
+  // }, [ui.selectedProject?.ref, selectedSchema])
 
   useEffect(() => {
     if (ui.selectedProject?.ref && id) {
@@ -79,16 +75,6 @@ const TableEditorLayout: FC<Props> = ({
     }
   }, [ui.selectedProject?.ref, isVaultEnabled])
 
-  useEffect(() => {
-    let cancel = false
-    if (!isLoading && !loaded) {
-      if (!cancel) setLoaded(true)
-    }
-    return () => {
-      cancel = true
-    }
-  }, [isLoading])
-
   if (!canReadTables) {
     return (
       <ProjectLayout>
@@ -97,17 +83,9 @@ const TableEditorLayout: FC<Props> = ({
     )
   }
 
-  if (error) {
-    return (
-      <ProjectLayout>
-        <Error error={error} />
-      </ProjectLayout>
-    )
-  }
-
   return (
     <ProjectLayout
-      isLoading={!loaded || isUndefined(selectedSchema)}
+      isLoading={isUndefined(selectedSchema)}
       product="Table editor"
       productMenu={
         <TableEditorMenu