diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx index f426a7557b8..c1e72a07888 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx @@ -48,7 +48,8 @@ import { } from './TableEditor.utils' import { TableTemplateSelector } from './TableQuickstart/TableTemplateSelector' import { QuickstartVariant } from './TableQuickstart/types' -import { STORAGE_KEYS } from './TableQuickstart/constants' +import { LOCAL_STORAGE_KEYS } from 'common' +import { useLocalStorage } from 'hooks/misc/useLocalStorage' export interface TableEditorProps { table?: PostgresTable @@ -104,19 +105,14 @@ export const TableEditor = ({ }) const publicTables = (tables ?? []).filter((table) => table.schema === 'public') const hasTables = publicTables.length > 0 - const [quickstartDismissed, setQuickstartDismissed] = useState(() => { - if (typeof window !== 'undefined') { - return localStorage.getItem(STORAGE_KEYS.TABLE_QUICKSTART_DISMISSED) === 'true' - } - return false - }) + const [quickstartDismissed, setQuickstartDismissed] = useLocalStorage( + LOCAL_STORAGE_KEYS.TABLE_QUICKSTART_DISMISSED, + false + ) const handleQuickstartDismiss = useCallback(() => { setQuickstartDismissed(true) - if (typeof window !== 'undefined') { - localStorage.setItem(STORAGE_KEYS.TABLE_QUICKSTART_DISMISSED, 'true') - } - }, []) + }, [setQuickstartDismissed]) const [params, setParams] = useUrlState() useEffect(() => { diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/constants.ts b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/constants.ts index a5ac78c1269..506a4e7d0cb 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/constants.ts +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/constants.ts @@ -1,7 +1,3 @@ -export const STORAGE_KEYS = { - TABLE_QUICKSTART_DISMISSED: 'tableQuickstartDismissed', -} as const - export const LIMITS = { MAX_PROMPT_LENGTH: 500, MAX_TABLES_TO_GENERATE: 3, diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/templates.ts b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/templates.ts index 43a5f82f764..45deae97862 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/templates.ts +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/templates.ts @@ -20,7 +20,7 @@ export const tableTemplates: Record = { isForeign: true, references: 'auth.users(id)', }, - { name: 'username', type: 'varchar', nullable: true, unique: true }, + { name: 'username', type: 'text', nullable: true, unique: true }, { name: 'display_name', type: 'text', nullable: true }, { name: 'avatar_url', type: 'text', nullable: true }, { name: 'bio', type: 'text', nullable: true }, @@ -100,14 +100,14 @@ export const tableTemplates: Record = { isPrimary: true, default: 'gen_random_uuid()', }, - { name: 'name', type: 'varchar', nullable: false }, - { name: 'slug', type: 'varchar', nullable: false, unique: true }, + { name: 'name', type: 'text', nullable: false }, + { name: 'slug', type: 'text', nullable: false, unique: true }, { name: 'description', type: 'text', nullable: true }, { name: 'price', type: 'numeric', nullable: false }, { name: 'compare_at_price', type: 'numeric', nullable: true }, { name: 'cost', type: 'numeric', nullable: true }, - { name: 'sku', type: 'varchar', nullable: true, unique: true }, - { name: 'barcode', type: 'varchar', nullable: true }, + { name: 'sku', type: 'text', nullable: true, unique: true }, + { name: 'barcode', type: 'text', nullable: true }, { name: 'stock_quantity', type: 'int4', nullable: false, default: '0' }, { name: 'weight', type: 'numeric', nullable: true }, { name: 'published', type: 'bool', nullable: false, default: 'false' }, @@ -127,7 +127,7 @@ export const tableTemplates: Record = { isPrimary: true, default: 'gen_random_uuid()', }, - { name: 'order_number', type: 'varchar', nullable: false, unique: true }, + { name: 'order_number', type: 'text', nullable: false, unique: true }, { name: 'customer_id', type: 'uuid', @@ -135,7 +135,7 @@ export const tableTemplates: Record = { isForeign: true, references: 'profiles(id)', }, - { name: 'status', type: 'varchar', nullable: false, default: "'pending'" }, + { name: 'status', type: 'text', nullable: false, default: "'pending'" }, { name: 'subtotal', type: 'numeric', nullable: false }, { name: 'tax', type: 'numeric', nullable: false, default: '0' }, { name: 'shipping', type: 'numeric', nullable: false, default: '0' }, @@ -189,8 +189,8 @@ export const tableTemplates: Record = { isPrimary: true, default: 'gen_random_uuid()', }, - { name: 'title', type: 'varchar', nullable: false }, - { name: 'slug', type: 'varchar', nullable: false, unique: true }, + { name: 'title', type: 'text', nullable: false }, + { name: 'slug', type: 'text', nullable: false, unique: true }, { name: 'content', type: 'text', nullable: true }, { name: 'excerpt', type: 'text', nullable: true }, { name: 'cover_image', type: 'text', nullable: true }, @@ -201,7 +201,7 @@ export const tableTemplates: Record = { isForeign: true, references: 'profiles(id)', }, - { name: 'status', type: 'varchar', nullable: false, default: "'draft'" }, + { name: 'status', type: 'text', nullable: false, default: "'draft'" }, { name: 'published_at', type: 'timestamptz', nullable: true }, { name: 'created_at', type: 'timestamptz', nullable: false, default: 'now()' }, { name: 'updated_at', type: 'timestamptz', nullable: false, default: 'now()' }, @@ -219,10 +219,10 @@ export const tableTemplates: Record = { isPrimary: true, default: 'gen_random_uuid()', }, - { name: 'name', type: 'varchar', nullable: false }, - { name: 'slug', type: 'varchar', nullable: false, unique: true }, + { name: 'name', type: 'text', nullable: false }, + { name: 'slug', type: 'text', nullable: false, unique: true }, { name: 'description', type: 'text', nullable: true }, - { name: 'color', type: 'varchar', nullable: true }, + { name: 'color', type: 'text', nullable: true }, { name: 'created_at', type: 'timestamptz', nullable: false, default: 'now()' }, ], rationale: 'Article categories and tags', @@ -245,8 +245,8 @@ export const tableTemplates: Record = { isForeign: true, references: 'articles(id)', }, - { name: 'author_name', type: 'varchar', nullable: false }, - { name: 'author_email', type: 'varchar', nullable: false }, + { name: 'author_name', type: 'text', nullable: false }, + { name: 'author_email', type: 'text', nullable: false }, { name: 'content', type: 'text', nullable: false }, { name: 'approved', type: 'bool', nullable: false, default: 'false' }, { name: 'created_at', type: 'timestamptz', nullable: false, default: 'now()' }, @@ -266,10 +266,10 @@ export const tableTemplates: Record = { isPrimary: true, default: 'gen_random_uuid()', }, - { name: 'title', type: 'varchar', nullable: false }, + { name: 'title', type: 'text', nullable: false }, { name: 'description', type: 'text', nullable: true }, { name: 'completed', type: 'bool', nullable: false, default: 'false' }, - { name: 'priority', type: 'varchar', nullable: true, default: "'medium'" }, + { name: 'priority', type: 'text', nullable: true, default: "'medium'" }, { name: 'due_date', type: 'date', nullable: true }, { name: 'user_id', @@ -295,10 +295,10 @@ export const tableTemplates: Record = { isPrimary: true, default: 'gen_random_uuid()', }, - { name: 'name', type: 'varchar', nullable: false }, + { name: 'name', type: 'text', nullable: false }, { name: 'description', type: 'text', nullable: true }, - { name: 'color', type: 'varchar', nullable: true }, - { name: 'icon', type: 'varchar', nullable: true }, + { name: 'color', type: 'text', nullable: true }, + { name: 'icon', type: 'text', nullable: true }, { name: 'user_id', type: 'uuid', @@ -329,7 +329,7 @@ export const tableTemplates: Record = { isForeign: true, references: 'tasks(id)', }, - { name: 'title', type: 'varchar', nullable: false }, + { name: 'title', type: 'text', nullable: false }, { name: 'completed', type: 'bool', nullable: false, default: 'false' }, { name: 'position', type: 'int4', nullable: false, default: '0' }, { name: 'created_at', type: 'timestamptz', nullable: false, default: 'now()' }, @@ -356,11 +356,11 @@ export const tableTemplates: Record = { isForeign: true, references: 'profiles(id)', }, - { name: 'session_id', type: 'varchar', nullable: true }, - { name: 'event_type', type: 'varchar', nullable: false }, + { name: 'session_id', type: 'text', nullable: true }, + { name: 'event_type', type: 'text', nullable: false }, { name: 'properties', type: 'jsonb', nullable: true }, { name: 'user_agent', type: 'text', nullable: true }, - { name: 'ip_address', type: 'varchar', nullable: true }, + { name: 'ip_address', type: 'text', nullable: true }, { name: 'created_at', type: 'timestamptz', nullable: false, default: 'now()' }, ], rationale: 'Event tracking for analytics', @@ -383,8 +383,8 @@ export const tableTemplates: Record = { isForeign: true, references: 'profiles(id)', }, - { name: 'session_id', type: 'varchar', nullable: true }, - { name: 'path', type: 'varchar', nullable: false }, + { name: 'session_id', type: 'text', nullable: true }, + { name: 'path', type: 'text', nullable: false }, { name: 'referrer', type: 'text', nullable: true }, { name: 'duration', type: 'int4', nullable: true }, { name: 'created_at', type: 'timestamptz', nullable: false, default: 'now()' }, @@ -402,11 +402,11 @@ export const tableTemplates: Record = { isPrimary: true, default: 'gen_random_uuid()', }, - { name: 'metric_name', type: 'varchar', nullable: false }, + { name: 'metric_name', type: 'text', nullable: false }, { name: 'value', type: 'numeric', nullable: false }, { name: 'tags', type: 'jsonb', nullable: true }, { name: 'timestamp', type: 'timestamptz', nullable: false, default: 'now()' }, - { name: 'aggregation_period', type: 'varchar', nullable: true }, + { name: 'aggregation_period', type: 'text', nullable: true }, { name: 'created_at', type: 'timestamptz', nullable: false, default: 'now()' }, ], rationale: 'Custom metrics and KPI tracking', diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts index 0ac015cb730..c6a13084208 100644 --- a/packages/common/constants/local-storage.ts +++ b/packages/common/constants/local-storage.ts @@ -90,6 +90,9 @@ export const LOCAL_STORAGE_KEYS = { * WWW */ BLOG_VIEW: 'supabase-blog-view', + + // Used to track if user has dismissed table editor quickstart prompt + TABLE_QUICKSTART_DISMISSED: 'table-quickstart-dismissed', } as const export type LocalStorageKey = (typeof LOCAL_STORAGE_KEYS)[keyof typeof LOCAL_STORAGE_KEYS] @@ -111,6 +114,7 @@ const LOCAL_STORAGE_KEYS_ALLOWLIST = [ LOCAL_STORAGE_KEYS.AI_ASSISTANT_MCP_OPT_IN, LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0, LOCAL_STORAGE_KEYS.LINTER_SHOW_FOOTER, + LOCAL_STORAGE_KEYS.TABLE_QUICKSTART_DISMISSED, ] export function clearLocalStorage() {