-
- {table.schema_name}.{table.table_name}
-
-
- Columns:{' '}
- {table.columns.map((column: any) => column.name).join(', ')}
+
+
+
+
+
+
+
+ {wrapperMeta.label} Configuration
+
+
+
+
+ {wrapperMeta.server.options
+ .filter((option) => !option.hidden)
+ .map((option) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ Data target
+
+
+
+ (
+
+
+
+
+
+
+
+ Create foreign tables to query data from {wrapperMeta.label}.
-
- }
- onClick={() => {
- setIsEditingTable(true)
- setSelectedTableToEdit({ ...table, tableIndex: i })
- }}
- />
- }
- onClick={() => {
- setNewTables((prev) => prev.filter((_, j) => j !== i))
- }}
- />
+
+ {wrapperMeta.tables.length === 0 ? (
+
+
+
+ This wrapper doesn't support using foreign tables.
+
+
+ ) : null}
+
+
+
+
+
+ Create all foreign tables from {wrapperMeta.label} in a
+ specified schema.
+
+
+
+ This feature requires the{' '}
+ wrappers extension to be
+ of minimum version of 0.5.0.
+
+
+ )
+ ) : (
+
+
+
+ This wrapper doesn't support using a foreign schema.
+
+
+ )}
+
+
+
+
+ )}
+ />
+
+
+ {mode === 'tables' && (
+
+
+
+ Foreign Tables
+
+ You can query your data from these foreign tables after the wrapper is
+ created
+
+
+
+
+ {tablesField.map((t, tableIndex) => {
+ // FIXME: make inference work
+ const table = t as unknown as FormattedWrapperTable
+ return (
+
+
+
+ {table.schema_name}.{table.table_name}
+
+
+ Columns: {table.columns.map((column: any) => column.name).join(', ')}
+
- )}
- {newTables.length > 0 && (
-
-
+
+ }
+ onClick={() => {
+ setSelectedTableToEdit(table)
+ }}
+ />
+ }
+ onClick={() => {
+ removeTable(tableIndex)
+ }}
+ />
- )}
- {newTables.length === 0 && formErrors.tables && (
-
{formErrors.tables}
- )}
-
-
- )}
- {selectedMode === 'schema' && (
-
- Foreign Schema
-
- You can query your data from the foreign tables in the specified schema
- after the wrapper is created.
-
-
- }
- >
-
- {wrapperMeta.sourceSchemaOption &&
- !wrapperMeta.sourceSchemaOption?.readOnly && (
- // Hide the field if the source schema is read-only
-
-
-
- {wrapperMeta.sourceSchemaOption.description}
-
-
-
-
- A new schema will be created. For security purposes, the wrapper tables
- from the foreign schema cannot be created within an existing schema.
-
- )}
-
+ )
+ })}
-
-
-
-
-
- )
- }}
-
+
+
+
+ {tablesField.length === 0 && errors.tables && (
+
+ {errors.tables.message?.toString()}
+
+ )}
+
+
+ )}
+ {mode === 'schema' && (
+
+
+
+ Foreign Schema
+
+ You can query your data from the foreign tables in the specified schema
+ after the wrapper is created.
+
+
+
+
+ {wrapperMeta.sourceSchemaOption &&
+ !wrapperMeta.sourceSchemaOption?.readOnly && (
+ // Hide the field if the source schema is read-only
+
+ )}
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
{option.label}
- {option.urlHelper !== undefined && (
-
-
-
+ labelOptional={!option.required ? 'Optional' : undefined}
+ description={option.description}
+ >
+
+ {loading ? (
+
+ Fetching value from Vault...
+
+ ) : option.isTextArea ? (
+
+ ) : option.secureEntry ? (
+
+ ) : (
+
)}
-
- } />
-
- ) : option.secureEntry ? (
-
- : }
- onClick={() => setShowHidden(!showHidden)}
- />
-
- ) : null
- }
- />
- )
- }
+
+
+ )}
+ />
+ )
}
export default InputField
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx
deleted file mode 100644
index a3c6868bd88..00000000000
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { X } from 'lucide-react'
-import { useEffect, useReducer } from 'react'
-import { Button, Input } from 'ui'
-
-import ColumnType from '@/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType'
-import useLatest from '@/hooks/misc/useLatest'
-
-export type SimpleColumn = {
- id: number
- name: string
- type: string
-}
-
-export type WrapperDynamicColumnsProps = {
- initialColumns?: Pick[]
- onChange?: (columns: SimpleColumn[]) => void
- errors?: any
-}
-
-const DEFAULT_INITIAL_COLUMNS: WrapperDynamicColumnsProps['initialColumns'] = [
- { name: '', type: 'text' },
-]
-
-type State = {
- columns: {
- [key: number]: SimpleColumn
- }
- nextId: number
-}
-
-type Action =
- | {
- type: 'ADD_COLUMN'
- }
- | {
- type: 'REMOVE_COLUMN'
- payload: {
- id: number
- }
- }
- | {
- type: 'UPDATE_COLUMN'
- payload: {
- id: number
- key: keyof SimpleColumn
- value: string
- }
- }
-
-const WrapperDynamicColumns = ({
- initialColumns = DEFAULT_INITIAL_COLUMNS,
- onChange,
- errors = {},
-}: WrapperDynamicColumnsProps) => {
- const [state, dispatch] = useReducer(
- (state: State, action: Action) => {
- switch (action.type) {
- case 'ADD_COLUMN':
- return {
- ...state,
- columns: {
- ...state.columns,
- [state.nextId]: { id: state.nextId, name: '', type: 'text' },
- },
- nextId: state.nextId + 1,
- }
- case 'REMOVE_COLUMN':
- return {
- ...state,
- columns: Object.fromEntries(
- Object.entries(state.columns).filter(([key]) => Number(key) !== action.payload.id)
- ),
- }
- case 'UPDATE_COLUMN':
- return {
- ...state,
- columns: {
- ...state.columns,
- [action.payload.id]: {
- ...state.columns[action.payload.id],
- [action.payload.key]: action.payload.value,
- },
- },
- }
- default:
- return state
- }
- },
- {
- columns: Object.fromEntries(
- initialColumns.map((column, index) => [index, { ...column, id: index }])
- ),
- nextId: initialColumns.length,
- }
- )
-
- const onChangeRef = useLatest(onChange)
- useEffect(() => {
- onChangeRef.current?.(getColumns(state.columns))
- }, [state.columns])
-
- const onAddColumn = () => {
- dispatch({ type: 'ADD_COLUMN' })
- }
-
- const onRemoveColumn = (id: number) => {
- dispatch({ type: 'REMOVE_COLUMN', payload: { id } })
- }
-
- const onUpdateValue = (id: number, key: keyof SimpleColumn, value: string) => {
- dispatch({ type: 'UPDATE_COLUMN', payload: { id, key, value } })
- }
-
- const columns = getColumns(state.columns)
-
- return (
-
-
- {columns.map((column, idx) => (
-
-
-
onUpdateValue(column.id, 'name', e.target.value)}
- />
-
-
- onUpdateValue(column.id, 'type', value)}
- className="[&_label]:!p-0"
- />
-
-
-
}
- onClick={() => onRemoveColumn(column.id)}
- className="self-end -translate-y-1.5 px-1.5"
- />
-
-
- {errors[`columns.${idx}`] && (
-
{errors[`columns.${idx}`]}
- )}
-
- ))}
-
-
-
-