feat: Analytic storage bucket (supabase#37003)

* Migrate the CreateBucketModal to use RHF.

* Minor fixes for the create bucket modal.

* Use the bucket type from the API everywhere.

* Improve the types on some functions. Add "skip" mode to FDWCreateMutation.

* Expand the CreateBucketModal to explain what will happen when creating an iceberg bucket.

* Add a page for iceberg buckets.

* Add error states to the iceberg explorer.

* Fix the names for the FDWs.

* Add a dialog for setting up namespace.

* Restructure the new files.

* Add a download env button.

* Add warning to install the wrappers extension when creating an iceberg bucket.

* Add failover details when the FDW is not setup.

* Fix a lint error.

* Fix a type error.

* Minor fixes.

* Fix the server name.

* Add an icon for iceberg buckets.

* Fix the import foreign schema dialog.

* Make the setup wrapper button functional.

* Fix a bad useMemo dependency.

* Small changes to the iceberg bucket page.

* Minor fix for the edit wrapper sheet.

* Rename the files from kebab-case to PascalCase.

* Rename the files again to include Analytic instead of Iceberg.

* Rename Iceberg type to Analytic.

* Add a switch for creating namespace in the import foreign schema dialog.

* Fix the CreateBucketModal.

* Fix the delete modal feature.

* Fix the S3 keys in the FDW.

* Only create a namespace if the switch is true.

* Regenerate and fix the types.

* Fix the FDW create mutation to handle numbers in the FDW names.

* Make the icon smaller.

* Check whether the namespace exists, if it doesn't create it.

* Hide action from the analytic bucket which don't work.

* Invalidate namespaces when creating them.

* Add small explanation for the creation of namespaces.

* Minor fixes.

* Tons of changes to make the namespace feature work.

* Fix type errors.

* Fix bad import.

* Minor copy fixes.

* Replace the multiple cards with a table of namespaces.

* update copy icon

* tiny copy update

* Fix the empty state for foreign tables.

* Hide the analytics bucket option for self-hosted.

* Minor copy fixes.

* Expand the CTA on no namespaces state.

* More minor fixes.

* More small fixes.

---------

Co-authored-by: Alaister Young <[email protected]>

Author: ivasilov

apps/studio/components/grid/components/grid/Grid.tsx

@@ -6,12 +6,13 @@ import { formatForeignKeys } from 'components/interfaces/TableGridEditor/SidePan
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AlertError from 'components/ui/AlertError'
 import { useForeignKeyConstraintsQuery } from 'data/database/foreign-key-constraints-query'
+import { ENTITY_TYPE } from 'data/entity-types/entity-type-constants'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import { Button, cn } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import type { Filter, GridProps, SupaRow } from '../../types'
 import { useOnRowsChange } from './Grid.utils'
 import RowRenderer from './RowRenderer'
@@ -67,6 +68,7 @@ export const Grid = memo(
       }
 
       const table = snap.table
+      const tableEntityType = snap.originalTable?.entity_type
 
       const { mutate: sendEvent } = useSendEventMutation()
       const org = useSelectedOrganization()
@@ -82,13 +84,13 @@ export const Grid = memo(
           table?.columns.find((x) => x.name == columnName)?.foreignKey ?? {}
 
         const fk = data?.find(
-          (key: any) =>
+          (key) =>
             key.source_schema === table?.schema &&
             key.source_table === table?.name &&
             key.source_columns.includes(columnName) &&
             key.target_schema === targetTableSchema &&
             key.target_table === targetTableName &&
-            key.target_columns.includes(targetColumnName)
+            key.target_columns.includes(targetColumnName ?? '')
         )
 
         return fk !== undefined ? formatForeignKeys([fk])[0] : undefined
@@ -141,11 +143,15 @@ export const Grid = memo(
                   {(filters ?? []).length === 0 ? (
                     <div className="flex flex-col items-center justify-center col-span-full h-full">
                       <p className="text-sm text-light">This table is empty</p>
-                      <p className="text-sm text-light mt-1">
-                        Add rows to your table to get started.
-                      </p>
-                      <div className="flex items-center space-x-2 mt-4">
-                        {
+                      {tableEntityType === ENTITY_TYPE.FOREIGN_TABLE ? (
+                        <div className="flex items-center space-x-2 mt-4">
+                          <p className="text-sm text-light">
+                            This table is a foreign table. Add data to the connected source to get
+                            started.
+                          </p>
+                        </div>
+                      ) : (
+                        <div className="flex items-center space-x-2 mt-4">
                           <Button
                             type="default"
                             className="pointer-events-auto"
@@ -163,8 +169,8 @@ export const Grid = memo(
                           >
                             Import data from CSV
                           </Button>
-                        }
-                      </div>
+                        </div>
+                      )}
                     </div>
                   ) : (
                     <div className="flex flex-col items-center justify-center col-span-full">

apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx

@@ -58,7 +58,9 @@ export const EditWrapperSheet = ({
     },
   })
 
-  const [wrapperTables, setWrapperTables] = useState(formatWrapperTables(wrapper, wrapperMeta))
+  const [wrapperTables, setWrapperTables] = useState(() =>
+    formatWrapperTables(wrapper, wrapperMeta)
+  )
   const [isEditingTable, setIsEditingTable] = useState(false)
   const [selectedTableToEdit, setSelectedTableToEdit] = useState<FormattedWrapperTable | undefined>(
     undefined
@@ -93,7 +95,8 @@ export const EditWrapperSheet = ({
 
     const { wrapper_name } = values
     if (wrapper_name.length === 0) errors.name = 'Please provide a name for your wrapper'
-    if (wrapperTables.length === 0) errors.tables = 'Please add at least one table'
+    if (!wrapperMeta.canTargetSchema && wrapperTables.length === 0)
+      errors.tables = 'Please add at least one table'
     if (!isEmpty(errors)) return setFormErrors(errors)
 
     updateFDW({

apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.utils.ts

@@ -109,7 +109,7 @@ export const formatWrapperTables = (
   })
 }
 
-export const convertKVStringArrayToJson = (values: string[]) => {
+export const convertKVStringArrayToJson = (values: string[]): Record<string, string> => {
   return Object.fromEntries(values.map((value) => value.split('=')))
 }