{organization.aws_marketplace ? ( - - - This organization is subscribed via AWS Marketplace, with a limit of{' '} - {organization.project_limit} projects and expiring on{' '} - {organization.aws_marketplace.Entitlements[0].ExpirationDate.slice(0, 10)}. - - - - - Manage AWS Marketplace subscription - - - + ) : ( <> - - - - - Billing Information - - These will be reflected in all invoices - - - } - onClick={() => redirectToPortal('/customer/update')} - > - Update - - - } - > - - - {city && } - - - - - - - - Tax IDs - - - {!taxIds ? ( - - - Retrieving tax information... - - ) : (taxIds?.data ?? []).length === 0 ? ( - None - ) : ( - <> - {taxIds.data.map((taxId: any) => ( - - ))} - - )} - - - - - - - Balance} - > - - {isCredit && You have credits available} - {isDebt && Outstanding payments} - - - - $ - - - {balance} - - {isCredit && / credits} - - - - - - Payment methods - } - onClick={() => redirectToPortal('/payment-methods')} - > - {(paymentMethods?.data ?? []).length >= 1 ? 'Add another' : 'Add new'} - - - } - > - - {paymentMethods && paymentMethods.data.length >= 1 ? ( - - {paymentMethods.data.map((paymentMethod: any) => { - return ( - - - - - {paymentMethod.card.brand}{' '} - ending in{' '} - {paymentMethod.card.last4} - - - - - - {paymentMethod.card.exp_month} - - / - - {paymentMethod.card.exp_year} - - - - } - onClick={() => redirectToPortal('/')} - > - Edit - - - ) - })} - - ) : ( - - - - - - - No payment methods - - - - )} - - - - - - - {projects.length === 0 ? ( - - - You have no projects in organization {orgName} yet - - - - Create a project - - - - ) : ( - Projects in organization - )} - - {projects.map((project) => { - return - })} - + + + + + + )} diff --git a/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx b/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx new file mode 100644 index 00000000000..a973f47ad6c --- /dev/null +++ b/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react' +import { Badge } from '@supabase/ui' + +interface Props { + balance: string | number + isCredit: boolean + isDebt: boolean +} + +const CreditBalance: FC = ({ balance, isCredit, isDebt }) => { + return ( + + + + Credit balance + {isCredit && You have credits available} + {isDebt && Outstanding payments} + + Charges will be deducted from your balance first + + + {isDebt && -} + $ + {balance} + {isCredit && /credits} + + + ) +} + +export default CreditBalance diff --git a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx new file mode 100644 index 00000000000..7f5016204e6 --- /dev/null +++ b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx @@ -0,0 +1,81 @@ +import { FC } from 'react' +import Panel from 'components/to-be-cleaned/Panel' +import { IconPlus, IconEdit2, IconCreditCard, Button, Input, IconLoader } from '@supabase/ui' + +interface Props { + loading: boolean + paymentMethods: any[] + redirectToPortal: (url: string) => void +} + +const PaymentMethods: FC = ({ loading, paymentMethods, redirectToPortal }) => { + return ( + + + Payment methods + Charges will be deducted from the default card + + + } + onClick={() => redirectToPortal('/payment-methods')} + > + Add new card + + + } + > + + {loading && paymentMethods.length === 0 ? ( + + + Retrieving payment methods + + ) : paymentMethods.length >= 1 ? ( + + {paymentMethods.map((paymentMethod: any) => ( + + + + + + {paymentMethod.card.exp_month}/{paymentMethod.card.exp_year} + + + } onClick={() => redirectToPortal('/')}> + Edit + + + ))} + + ) : ( + + + + + + No payment methods + + + )} + + + + ) +} + +export default PaymentMethods diff --git a/studio/components/interfaces/Organization/BillingSettings/ProjectSubscription.tsx b/studio/components/interfaces/Organization/BillingSettings/ProjectSubscription.tsx deleted file mode 100644 index c6c7d604b37..00000000000 --- a/studio/components/interfaces/Organization/BillingSettings/ProjectSubscription.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { FC, useState, useEffect } from 'react' -import dayjs from 'dayjs' -import { get as _get, maxBy } from 'lodash' -import utc from 'dayjs/plugin/utc' - -import { useStore, useSubscriptionStats } from 'hooks' -import { API_URL } from 'lib/constants' -import { Dictionary } from '@supabase/grid' -import { get, post } from 'lib/common/fetch' -import { DATE_FORMAT, STRIPE_PRODUCT_IDS } from 'lib/constants' -import { Subscription, StripeSubscription, chargeableProducts } from 'components/interfaces/Billing' - -dayjs.extend(utc) - -interface Props { - project: any -} - -const ProjectSubscription: FC = ({ project }) => { - const { ui } = useStore() - const subscriptionStats = useSubscriptionStats() - - const [loading, setLoading] = useState(true) - const [subscription, setSubscription] = useState() - const [paygStats, setPaygStats] = useState>() - - useEffect(() => { - getSubscription() - }, []) - - const getSubscription = async () => { - try { - setLoading(true) - const { data: subscription, error }: { data: StripeSubscription; error: any } = await post( - `${API_URL}/stripe/subscription`, - { - subscription_id: project.subscription_id, - } - ) - if (error) throw error - setSubscription(subscription) - - if (subscription.tier.prod_id === STRIPE_PRODUCT_IDS.PAYG) { - fetchPaygStatistics() - } - } catch (error: any) { - ui.setNotification({ - category: 'error', - message: `Failed to get project subscription: ${error.message}`, - }) - } finally { - setLoading(false) - } - } - - const fetchPaygStatistics = async () => { - const startDate = dayjs().utc().startOf('month').format(DATE_FORMAT) - const endDate = dayjs().utc().endOf('month').format(DATE_FORMAT) - const attributes = - 'total_db_size_bytes,total_db_egress_bytes,total_storage_size_bytes,total_storage_egress' - const url = `${API_URL}/projects/${ - project.ref - }/daily-stats?attribute=${attributes}&startDate=${encodeURIComponent( - startDate - )}&endDate=${encodeURIComponent(endDate)}&interval='1d'` - - const { data } = await get(url) - - const paygStats: any = {} - chargeableProducts.forEach((product: any) => { - product.features.forEach((feature: any) => { - paygStats[feature.attribute] = _get(maxBy(data, feature.attribute), feature.attribute) - }) - }) - setPaygStats(paygStats) - } - - return ( - - ) -} - -export default ProjectSubscription diff --git a/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx new file mode 100644 index 00000000000..1d2c2682435 --- /dev/null +++ b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx @@ -0,0 +1,116 @@ +import Link from 'next/link' +import dayjs from 'dayjs' +import utc from 'dayjs/plugin/utc' +import { FC, useState, useEffect } from 'react' +import { IconChevronRight, IconLoader } from '@supabase/ui' + +import { useStore } from 'hooks' +import { API_URL } from 'lib/constants' +import { post } from 'lib/common/fetch' +import Panel from 'components/to-be-cleaned/Panel' +import { StripeSubscription } from 'components/interfaces/Billing' + +dayjs.extend(utc) + +interface ProjectSummaryProps { + project: any +} + +const ProjectSummary: FC = ({ project }) => { + const { ui } = useStore() + + const [loading, setLoading] = useState(false) + const [subscription, setSubscription] = useState() + + const currentPeriodStart = subscription?.billing?.current_period_start ?? 0 + const currentPeriodEnd = subscription?.billing?.current_period_end ?? 0 + + useEffect(() => { + getSubscription() + }, []) + + const getSubscription = async () => { + try { + setLoading(true) + const { data: subscription, error }: { data: StripeSubscription; error: any } = await post( + `${API_URL}/stripe/subscription`, + { subscription_id: project.subscription_id } + ) + if (error) throw error + setSubscription(subscription) + } catch (error: any) { + ui.setNotification({ + category: 'error', + message: `Failed to get project subscription: ${error.message}`, + }) + } finally { + setLoading(false) + } + } + + return ( + + + {project.name} + + {loading ? ( + + + + ) : ( + <> + + {subscription?.tier.name ?? ''} + + + {dayjs.unix(currentPeriodStart).utc().format('MMM D, YYYY')} + - + {dayjs.unix(currentPeriodEnd).utc().format('MMM D, YYYY')} + + + + + View details + + + + + + )} + + ) +} + +interface ProjectsSummaryProps { + projects: any +} + +const ProjectsSummary: FC = ({ projects }) => { + return ( + + Projects at a glance + + + Name + + + Plan + + + Billing cycle + + + + } + > + {projects.map((project: any) => ( + + ))} + + + ) +} + +export default ProjectsSummary diff --git a/studio/components/interfaces/Organization/BillingSettings/TaxID.tsx b/studio/components/interfaces/Organization/BillingSettings/TaxID.tsx new file mode 100644 index 00000000000..ecd4fbe3a5c --- /dev/null +++ b/studio/components/interfaces/Organization/BillingSettings/TaxID.tsx @@ -0,0 +1,59 @@ +import { FC } from 'react' +import { Input, Button, IconLoader } from '@supabase/ui' +import Panel from 'components/to-be-cleaned/Panel' + +interface Props { + loading: boolean + taxIds: any[] + redirectToPortal: (url: string) => void +} + +const TaxID: FC = ({ loading, taxIds, redirectToPortal }) => { + return ( + + + Tax ID + + If you would like to include specific tax ID(s) to your invoices + + + + redirectToPortal('/customer/update')}> + Edit Tax IDs + + + } + > + + {loading && taxIds.length === 0 ? ( + + + Retrieving tax information + + ) : taxIds.length >= 1 ? ( + + {taxIds.map((taxId: any) => { + const taxIdType = taxId.type.replace('_', ' ').toUpperCase() + return ( + + {taxIdType} + + + ) + })} + + ) : ( + + No tax IDs + + )} + + + + ) +} + +export default TaxID diff --git a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx index c0990bad66f..6f37fc272c7 100644 --- a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx +++ b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx @@ -130,20 +130,20 @@ const InvoicesSettings: FC = ({ organization }) => { - + Showing {offset + 1} to {offset + invoices.length} out of {count} invoices - + } - type="secondary" + type="default" size="tiny" disabled={page === 1} onClick={async () => await fetchInvoices(page - 1)} /> } - type="secondary" + type="default" size="tiny" disabled={page * PAGE_LIMIT >= count} onClick={async () => await fetchInvoices(page + 1)} diff --git a/studio/components/interfaces/SQLEditor/ResultsPane.tsx b/studio/components/interfaces/SQLEditor/ResultsPane.tsx index 9e3f1dadf10..82a67e44ec2 100644 --- a/studio/components/interfaces/SQLEditor/ResultsPane.tsx +++ b/studio/components/interfaces/SQLEditor/ResultsPane.tsx @@ -29,8 +29,8 @@ const ResultsPane: FC = ({ results }) => { } const columnRender = (name: string) => { return ( - - {name} + + {name} ) } diff --git a/studio/components/interfaces/Settings/Logs/LogPanel.tsx b/studio/components/interfaces/Settings/Logs/LogPanel.tsx index aae46f4d679..88e96fcbf7a 100644 --- a/studio/components/interfaces/Settings/Logs/LogPanel.tsx +++ b/studio/components/interfaces/Settings/Logs/LogPanel.tsx @@ -96,14 +96,16 @@ const LogPanel: FC = ({ - {newCount} + + {newCount} + - - + + )} @@ -129,9 +131,7 @@ const LogPanel: FC = ({ - - Search logs via query - + Search logs via query @@ -188,9 +188,7 @@ const LogPanel: FC = ({ {!isCustomQuery && ( - - Show event chart - + Show event chart )} @@ -218,7 +216,7 @@ const LogPanel: FC = ({ /> ), - + , ]} diff --git a/studio/components/interfaces/Settings/Logs/LogTable.tsx b/studio/components/interfaces/Settings/Logs/LogTable.tsx index 4f61637ed34..9036e383825 100644 --- a/studio/components/interfaces/Settings/Logs/LogTable.tsx +++ b/studio/components/interfaces/Settings/Logs/LogTable.tsx @@ -45,7 +45,7 @@ const LogTable = ({ isCustomQuery, data = [] }: Props) => { className={[ 'block whitespace-wrap font-mono', `${hasLogDataFormat && row.id === focusedLog?.id ? 'font-bold' : ''}`, - `${hasLogDataFormat && v === 'timestamp' ? 'text-green-500' : ''}`, + `${hasLogDataFormat && v === 'timestamp' ? 'text-green-900' : ''}`, ].join(' ')} > {value} diff --git a/studio/components/interfaces/TableGridEditor/EmptyState.tsx b/studio/components/interfaces/TableGridEditor/EmptyState.tsx index a39629a8329..c245ca3d7f3 100644 --- a/studio/components/interfaces/TableGridEditor/EmptyState.tsx +++ b/studio/components/interfaces/TableGridEditor/EmptyState.tsx @@ -1,5 +1,5 @@ import { FC } from 'react' -import { Button, Typography } from '@supabase/ui' +import { Button } from '@supabase/ui' import { PostgresTable } from '@supabase/postgres-meta' import { useStore } from 'hooks' @@ -15,7 +15,7 @@ const EmptyState: FC = ({ selectedSchema, onAddTable }) => { const renderNoTablesCTA = () => { return ( - There are no tables available in this schema + There are no tables available in this schema {selectedSchema === 'public' && Create a new table} ) @@ -27,7 +27,7 @@ const EmptyState: FC = ({ selectedSchema, onAddTable }) => { renderNoTablesCTA() ) : ( - Select a table or create a new one + Select a table or create a new one Create a new table )} diff --git a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx index 4cb7e7ba1a8..96f1d3a6311 100644 --- a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx +++ b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' import Link from 'next/link' -import { Button, IconAlertCircle, Typography } from '@supabase/ui' +import { Badge, Button, IconAlertCircle, Typography } from '@supabase/ui' import { PostgresTable } from '@supabase/postgres-meta' import { useStore } from 'hooks' @@ -18,20 +18,9 @@ const GridHeaderActions: FC = ({ table }) => { {!table.rls_enabled && ( - - - - RLS not enabled - - + }> + RLS not enabled + )} {/* diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx index 0274a23d274..1169bc79744 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx @@ -29,17 +29,17 @@ const ActionBar: FC = ({ } return ( - - + + {backButtonLabel} {children} {applyFunction && ( {applyButtonLabel} diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx index 0ce938a7653..6b8b9e08842 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx @@ -128,13 +128,14 @@ const ColumnEditor: FC = ({ return ( } - onCancel={closePanel} onConfirm={(resolve: () => void) => onSaveChanges(resolve)} + // @ts-ignore + header={} + onCancel={closePanel} customFooter={ = ({ /> } > - - onUpdateField({ name: event.target.value })} - /> - onUpdateField({ comment: event.target.value })} - /> - {isNewRecord && !hasPrimaryKey && ( - - - onUpdateField({ isPrimaryKey: !columnFields?.isPrimaryKey })} - /> - - - )} - setIsEditingRelation(true)} - onSelectRemoveRelation={() => onUpdateField({ foreignKey: undefined })} - /> - - onUpdateField({ format, defaultValue: '' })} - /> - {isUndefined(columnFields.foreignKey) && ( - - {columnFields.format.includes('int') && ( - - { - const isIdentity = !columnFields.isIdentity - const isArray = isIdentity ? false : columnFields.isArray - onUpdateField({ isIdentity, isArray }) - }} - /> - - )} - {!columnFields.isPrimaryKey && ( - - { - const isArray = !columnFields.isArray - const isIdentity = isArray ? false : columnFields.isIdentity - onUpdateField({ isArray, isIdentity }) - }} - /> - - )} - - )} - - {!columnFields.isPrimaryKey && ( - <> + + + onUpdateField({ name: event.target.value })} + /> + onUpdateField({ comment: event.target.value })} + /> + + + + + + + + {isNewRecord && !hasPrimaryKey && ( onUpdateField({ isNullable: !columnFields.isNullable })} - /> - - - onUpdateField({ isUnique: !columnFields.isUnique })} + label={hasPrimaryKey ? 'Add to composite primary key' : 'Is Primary Key'} + description="A primary key indicates that a column or group of columns can be used as a unique identifier for rows in the table." + checked={columnFields?.isPrimaryKey ?? false} + onChange={() => onUpdateField({ isPrimaryKey: !columnFields?.isPrimaryKey })} /> - - )} - - setIsEditingRelation(false)} - saveChanges={saveColumnForeignKey} - /> + )} + setIsEditingRelation(true)} + onSelectRemoveRelation={() => onUpdateField({ foreignKey: undefined })} + /> + + + + + + onUpdateField({ format, defaultValue: '' })} + /> + {isUndefined(columnFields.foreignKey) && ( + + {columnFields.format.includes('int') && ( + + { + const isIdentity = !columnFields.isIdentity + const isArray = isIdentity ? false : columnFields.isArray + onUpdateField({ isIdentity, isArray }) + }} + /> + + )} + {!columnFields.isPrimaryKey && ( + + { + const isArray = !columnFields.isArray + const isIdentity = isArray ? false : columnFields.isIdentity + onUpdateField({ isArray, isIdentity }) + }} + /> + + )} + + )} + + {!columnFields.isPrimaryKey && ( + <> + + + onUpdateField({ isNullable: !columnFields.isNullable })} + /> + + + onUpdateField({ isUnique: !columnFields.isUnique })} + /> + + + + )} + + setIsEditingRelation(false)} + saveChanges={saveColumnForeignKey} + /> + + ) } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx index e36cfe5186f..6bf4daddea2 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx @@ -23,11 +23,9 @@ const ColumnForeignKey: FC = ({ const hasNoForeignKey = isUndefined(originalForeignKey) && isUndefined(column?.foreignKey) if (hasNoForeignKey) { return ( - - - Add foreign key relation - - + + Add foreign key relation + ) } @@ -90,18 +88,16 @@ const ColumnForeignKeyInformation: FC<{ block icon={} title={ - + - This column has the following foreign key relation: + This column has the following foreign key relation: - - {columnName} - + {columnName} - + {foreignKey?.target_table_schema}.{foreignKey?.target_table_name}. {foreignKey?.target_column_name} - + @@ -129,21 +125,19 @@ const ColumnForeignKeyAdded: FC<{ block icon={} title={ - + - + The following foreign key relation will be{' '} - added: - - - - {columnName} - + added: + + + {columnName} - + {foreignKey?.target_table_schema}.{foreignKey?.target_table_name}. {foreignKey?.target_column_name} - + @@ -174,7 +168,7 @@ const ColumnForeignKeyRemoved: FC<{ The following foreign key relation will be{' '} - removed from this column: + removed from this column: diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx index 4918a3d3b2c..601dd0a745a 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx @@ -34,19 +34,19 @@ const ColumnType: FC = ({ const inferIcon = (type: string) => { switch (type) { case 'number': - return + return case 'time': - return + return case 'text': - return + return case 'json': return ( - + {'{ }'} ) case 'bool': - return + return default: return } @@ -61,6 +61,7 @@ const ColumnType: FC = ({ error={error} className={`${className} ${disabled ? 'column-type-disabled' : ''}`} onChange={(value: string) => onOptionSelect(value)} + optionsWidth={480} > --- @@ -77,7 +78,7 @@ const ColumnType: FC = ({ value={enumType.name} label={enumType.name} addOnBefore={() => { - return + return }} > @@ -113,14 +114,8 @@ const ColumnType: FC = ({ addOnBefore={() => inferIcon(option.type)} > - - {option.name} - - - - {option.description} - - + {option.name} + {option.description} ))} diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx index 6437ecfbaa8..8e97f235a4e 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx @@ -6,9 +6,8 @@ // the component over to the UI library import { FC, useEffect, useRef, useState } from 'react' -import { Input, Typography } from '@supabase/ui' +import { Button, Dropdown, IconList, Input } from '@supabase/ui' import { Suggestion } from './ColumnEditor.types' -import { timeout } from 'lib/helpers' const MAX_SUGGESTIONS = 3 const DEFAULT_SUGGESTIONS_WIDTH = 400 @@ -45,21 +44,8 @@ const InputWithSuggestions: FC = ({ onSelectSuggestion = () => {}, }) => { const ref = useRef(null) - const [isFocused, setIsFocused] = useState(false) - const [derviedSuggestionsWidth, setDerivedSuggestionsWidth] = - useState(DEFAULT_SUGGESTIONS_WIDTH) const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions) - const showSuggestions = isFocused && filteredSuggestions.length > 0 - - useEffect(() => { - // This is super hacky but will go away when we bring it into the UI library - // It's mainly cause I can't pass a ref into Input - const parentInputFieldWidth = (ref?.current as any).children[0]?.children[0]?.children[ - layout === 'horizontal' ? 1 : 0 - ]?.offsetWidth - const width = suggestionsWidth || parentInputFieldWidth || DEFAULT_SUGGESTIONS_WIDTH - setDerivedSuggestionsWidth(width) - }, [ref.current]) + const showSuggestions = filteredSuggestions.length > 0 useEffect(() => { setFilteredSuggestions(suggestions.slice(0, MAX_SUGGESTIONS)) @@ -92,45 +78,34 @@ const InputWithSuggestions: FC = ({ className={className} type="text" value={value} - onFocus={() => setIsFocused(true)} - onBlur={async () => { - await timeout(100) - setIsFocused(false) - }} onChange={onInputChange} + actions={ + showSuggestions && ( + + Suggestions + + {filteredSuggestions.map((suggestion: Suggestion) => ( + onSelectSuggestion(suggestion)} + > + {suggestion.name} + {suggestion.description} + + ))} + + } + > + }> + + ) + } /> - {showSuggestions && ( - - - - - {suggestionsHeader} - - - - {filteredSuggestions.map((suggestion: Suggestion) => ( - onSelectSuggestion(suggestion)} - > - - {suggestion.name} - - - - {suggestion.description} - - - - ))} - - - - )} ) } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx index 7716ddf3b0a..d21b5db0d54 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx @@ -105,15 +105,16 @@ const ForeignKeySelector: FC = ({ return ( + header={ + Edit foreign key relation for{' '} - {get(column, ['name'], '')} - + {get(column, ['name'], '')} + } customFooter={ = ({ /> } > - - } - title="What are foreign keys?" - description={ - - Foreign keys help maintain referential integrity of your data by ensuring that no one - can insert rows into the table that do not have a matching entry to another table - - } - url="https://www.postgresql.org/docs/current/tutorial-fk.html" - urlLabel="Postgres Foreign Key Documentation" - /> + + + } + title="What are foreign keys?" + description={`Foreign keys help maintain referential integrity of your data by ensuring that no + one can insert rows into the table that do not have a matching entry to another + table.`} + url="https://www.postgresql.org/docs/current/tutorial-fk.html" + urlLabel="Postgres Foreign Key Documentation" + /> - updateSelectedTable(Number(value))} - > - - --- - - {sortBy(tables, ['schema']).map((table: PostgresTable) => { - return ( - - - {/* For aria searching to target the table name instead of schema */} - {table.name} - - {table.schema} - - {table.name} - - - ) - })} - - - {selectedForeignKey?.table && ( - Select a column from{' '} - {selectedForeignKey?.table} to reference to - - } - error={errors.column} - onChange={(value: string) => updateSelectedColumn(value)} + label="Select a table to reference to" + value={selectedTable?.id} + error={errors.table} + onChange={(value: string) => updateSelectedTable(Number(value))} > - {(selectedTable?.columns ?? []).map((column: PostgresColumn) => ( - - - {column.name} - - {column.format} - - - - ))} + + --- + + {sortBy(tables, ['schema']).map((table: PostgresTable) => { + return ( + + + {/* For aria searching to target the table name instead of schema */} + {table.name} + {table.schema} + {table.name} + + + ) + })} - )} - + + {selectedForeignKey?.table && ( + + Select a column from{' '} + {selectedForeignKey?.table} to reference + to + + } + error={errors.column} + onChange={(value: string) => updateSelectedColumn(value)} + > + {(selectedTable?.columns ?? []).map((column: PostgresColumn) => ( + + + {column.name} + {column.format} + + + ))} + + )} + + ) } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/HeaderTitle.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/HeaderTitle.tsx index 9797a89a723..e1032242a70 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/HeaderTitle.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/HeaderTitle.tsx @@ -12,7 +12,7 @@ const HeaderTitle: FC = ({ isNewRecord, tableName }) => { return ( <> {header} - {tableName && {tableName}} + {tableName && {tableName}} ) } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx index f6a7d14b6c7..d28d0ebecf1 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx @@ -50,11 +50,10 @@ const JsonEdit: FC = ({ column, jsonString, visible, closePanel, return ( } > = ({ visible, referenceRow, closePanel }) => return ( Viewing reference row from{' '} - + {foreignKey?.target_table_schema ?? ''}.{foreignKey?.target_table_name ?? ''} - + } hideFooter={false} onCancel={closePanel} customFooter={} > - {loading ? ( - - + + {loading ? ( + - - Loading reference row - - ) : !row ? ( - - + Loading reference row + + ) : !row ? ( + - - - Unable to find the corresponding row in {foreignKey?.target_table_schema}. - {foreignKey?.target_table_name} - - - ) : ( - - {rowFields.map((field: RowField) => { - return - })} - - )} + + Unable to find the corresponding row in {foreignKey?.target_table_schema}. + {foreignKey?.target_table_name} + + + ) : ( + + {rowFields.map((field: RowField) => { + return + })} + + )} + ) } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx index 046e219f4b8..854d3183364 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx @@ -1,6 +1,6 @@ import { FC, useEffect, useState } from 'react' import { isUndefined, partition, isEmpty } from 'lodash' -import { Divider, SidePanel, Space, Typography } from '@supabase/ui' +import { SidePanel } from '@supabase/ui' import { Dictionary, Query } from '@supabase/grid' import { PostgresTable } from '@supabase/postgres-meta' @@ -138,16 +138,14 @@ const RowEditor: FC = ({ return ( } + header={} className={`transition-all ease-in duration-100 ${ isEditingJson || isViewingReferenceRow ? ' mr-32' : '' }`} onCancel={closePanel} - onConfirm={(resolve: () => void) => onSaveChanges(resolve)} customFooter={ = ({ /> } > - - {requiredFields.map((field: RowField) => { - return ( - onViewForeignKey(field)} - /> - ) - })} - {optionalFields.length > 0 && ( - <> - - + + + {requiredFields.map((field: RowField) => { + return ( + onViewForeignKey(field)} + /> + ) + })} + + + {optionalFields.length > 0 && ( + <> + + + - Optional Fields + Optional Fields + + These are columns that do not need any value + - - These are columns that do not need any value - + {optionalFields.map((field: RowField) => { + return ( + onViewForeignKey(field)} + /> + ) + })} - - )} - {optionalFields.map((field: RowField) => { - return ( - onViewForeignKey(field)} - /> - ) - })} - + + + )} = ({ /> setIsClosingPanel(false)} onSelectConfirm={() => { @@ -267,6 +268,14 @@ const SidePanelEditor: FC = ({ setIsEdited(false) closePanel() }} + children={ + + + There are unsaved changes. Are you sure you want to close the panel? Your changes will + be lost. + + + } /> ) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx index 09531b487a2..390a1575586 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx @@ -9,13 +9,16 @@ import { Popover, IconLink, IconSettings, + Button, + Listbox, } from '@supabase/ui' -import { ColumnField, EnumType } from '../SidePanelEditor.types' +import { ColumnField, EnumType, PostgresDataTypeOption } from '../SidePanelEditor.types' import ColumnType from '../ColumnEditor/ColumnType' import InputWithSuggestions from '../ColumnEditor/InputWithSuggestions' import { Suggestion } from '../ColumnEditor/ColumnEditor.types' import { typeExpressionSuggestions } from '../ColumnEditor/ColumnEditor.constants' +import { POSTGRES_DATA_TYPE_OPTIONS } from '../SidePanelEditor.constants' /** * [Joshen] For context: @@ -58,6 +61,13 @@ const Column: FC = ({ }) => { const suggestions: Suggestion[] = typeExpressionSuggestions?.[column.format] ?? [] + let settingsCount = 0 + + column.isNullable ? (settingsCount += 1) : null + column.isIdentity ? (settingsCount += 1) : null + column.isUnique ? (settingsCount += 1) : null + column.isArray ? (settingsCount += 1) : null + return ( @@ -68,39 +78,60 @@ const Column: FC = ({ - + onEditRelation(column)} + > + + + } onChange={(event: any) => onUpdateColumn({ name: event.target.value })} /> - onEditRelation(column)} - > - - + {/* console.log('foo')} defaultValue={1} className="lg:gap-0 "> + {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption, i) => { + if (i > 8) return + + return ( + inferIcon(option.type)} + > + + + {option.name} + + + + {option.description} + + + + + ) + })} + */} { onUpdateColumn({ format, defaultValue: '' }) @@ -115,7 +146,7 @@ const Column: FC = ({ size="small" value={column.defaultValue} disabled={column.format.includes('int') && column.isIdentity} - className={`bg-white dark:bg-transparent rounded ${ + className={`bg-white dark:bg-transparent rounded lg:gap-0 ${ column.format.includes('int') && column.isIdentity ? 'opacity-50' : '' }`} suggestions={suggestions} @@ -138,58 +169,87 @@ const Column: FC = ({ {(!column.isPrimaryKey || column.format.includes('int')) && ( - - {!column.isPrimaryKey && ( - onUpdateColumn({ isNullable: !column.isNullable })} - /> + <> + + Extra options + + } + overlay={[ + + {!column.isPrimaryKey && ( + <> + onUpdateColumn({ isNullable: !column.isNullable })} + /> + + + )} + + {isNewRecord && ( + <> + onUpdateColumn({ isUnique: !column.isUnique })} + /> + + + )} + {column.format.includes('int') && ( + <> + { + const isIdentity = !column.isIdentity + const isArray = isIdentity ? false : column.isArray + onUpdateColumn({ isIdentity, isArray }) + }} + /> + + + )} + + {!column.isPrimaryKey && ( + { + const isArray = !column.isArray + const isIdentity = isArray ? false : column.isIdentity + onUpdateColumn({ isArray, isIdentity }) + }} + /> + )} + , + ]} + > + + {settingsCount > 0 && ( + + {settingsCount} + )} - {isNewRecord && ( - onUpdateColumn({ isUnique: !column.isUnique })} - /> - )} - {column.format.includes('int') && ( - { - const isIdentity = !column.isIdentity - const isArray = isIdentity ? false : column.isArray - onUpdateColumn({ isIdentity, isArray }) - }} - /> - )} - {!column.isPrimaryKey && ( - { - const isArray = !column.isArray - const isIdentity = isArray ? false : column.isIdentity - onUpdateColumn({ isArray, isIdentity }) - }} - /> - )} - , - ]} - > - - - - + + + + + + )} {!hasImportContent && ( diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx index cb5e070743e..c95f4e4aabf 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx @@ -17,6 +17,7 @@ import { DroppableProvided, DraggableProvided, } from 'react-beautiful-dnd' +import * as Tooltip from '@radix-ui/react-tooltip' import Column from './Column' import InformationBox from 'components/ui/InformationBox' @@ -143,7 +144,7 @@ const ColumnManagement: FC = ({ <> {hasImportContent ? ( - } onClick={onSelectImportData}> + } onClick={onSelectImportData}> Edit content } onClick={onClearImportContent}> @@ -151,7 +152,7 @@ const ColumnManagement: FC = ({ ) : ( - + Import data via spreadsheet )} @@ -192,21 +193,37 @@ const ColumnManagement: FC = ({ {/* Drag handle */} {isNewRecord && } - Name + Name - Type + Type - Default Value - - - - - + Default Value + + + + + + + + + + + + Can be either a value or a SQL expression + + + + - Primary + Primary {/* Empty space */} @@ -222,7 +239,7 @@ const ColumnManagement: FC = ({ {(droppableProvided: DroppableProvided) => ( @@ -291,7 +308,7 @@ const ColumnManagement: FC = ({ {!hasImportContent && ( - onAddColumn()}> + onAddColumn()}> Add column )} diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx index 319a1f68d3e..92e9f830473 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx @@ -32,20 +32,18 @@ const SpreadSheetFileUpload: FC = ({ } return ( - <> - - + + + Upload a CSV or TSV file. The first row should be the headers of the table, and your headers should not include any special characters other than hyphens ( - -) or underscores ( - _). + -) or underscores (_ + ). - - - Tip: Datetime columns should be formatted as YYYY-MM-DD HH:mm:ss - - - + + Tip: Datetime columns should be formatted as YYYY-MM-DD HH:mm:ss + + {!uploadedFile ? ( = ({ ) : ( - - {uploadedFile.name} + + {uploadedFile.name} {parseProgress === 100 ? ( @@ -87,7 +85,7 @@ const SpreadSheetFileUpload: FC = ({ )} - + ) } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx index 8c0bb6a1840..62ac20dc83b 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx @@ -1,5 +1,5 @@ import { FC } from 'react' -import { Typography } from '@supabase/ui' +import { Input, Typography } from '@supabase/ui' interface Props { input: string @@ -7,26 +7,27 @@ interface Props { } const SpreadSheetTextInput: FC = ({ input, onInputChange }) => ( - <> - - + + + Copy a table from a spreadsheet program such as Google Sheets or Excel and paste it in the field below. The first row should be the headers of the table, and your headers should not include any special characters other than hyphens (- ) or underscores (_). - + Tip: Datetime columns should be formatted as YYYY-MM-DD HH:mm:ss - - + <Input.TextArea + size="tiny" + className="font-mono" rows={15} style={{ resize: 'none' }} value={input} onChange={onInputChange} - > - + /> + ) export default SpreadSheetTextInput diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx index df36c3807b4..ea9618c96f1 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx @@ -123,15 +123,11 @@ const SpreadsheetImport: FC = ({ return ( { - // Only close if specifically hit the X button, this is to have the - // side panel work with toast messages (clicking on toast will close the panel) - if (event?.target) closePanel() - }} + header="Add content to new table" + onCancel={() => closePanel()} customFooter={ = ({ /> } > - - - {/* @ts-ignore */} - - - - {/* @ts-ignore */} - - - - - + + + + + + + + + + + - {spreadsheetData.headers.length > 0 && ( - - - - Content Preview - - Your table will have {spreadsheetData.rowCount.toLocaleString()} rows and the - following {spreadsheetData.headers.length} columns. - - - - - {errors.length > 0 && ( + {spreadsheetData.headers.length > 0 && ( + - Issues found in spreadsheet + Content Preview - Your table can still be created nonetheless despite issues in the following rows. + Your table will have {spreadsheetData.rowCount.toLocaleString()} rows and the + following {spreadsheetData.headers.length} columns. + + + {errors.length > 0 && ( - {errors.map((error: any, idx: number) => { - const key = `import-error-${idx}` - const isExpanded = expandedErrors.includes(key) - return ( - - -