mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Danny White
6cff728742
## What kind of change does this PR introduce? UI polish for the Connect sheet: clearer mode selection, wider sheet layout, and step/content chrome across Direct, Server, MCP, and shadcn flows. ## What is the current behavior? - Connect modes use a weak selected state and an awkward grid layout. - The sheet can jump width below the `lg` breakpoint when switching modes. - Direct connection chrome is noisy (reset in a footer, Title Case / mono pooler labels, mismatched copy-button sizes). - Several steps use admonitions or extra tips that repeat footer guidance. - Case-sensitive import of `InlineLink` breaks Linux/Vercel builds. ## What is the new behavior? ### Mode selector and sheet - Stronger selected/hover treatment; comfortable single row that wraps via `@container`. - Empty odd slots use a sunk placeholder cell. - Sheet uses `size="lg"` with `max-w-4xl` and `w-full min-w-0` so width stays stable when switching modes. ### Steps chrome - “Follow these steps” header with a copy-prompt action for coding agents. - Optional steps labelled `(optional)`. - Shared `CodeBlock` for install snippets; MCP feature groups preselect all except Storage. - Server / shadcn tips folded into footers; IPv4 add-on admonition is responsive with an inline Learn more link and a single Enable action. ### Direct connection - Connection string and connection parameters stay one step (same credentials, two formats). - Reset database password lives in the string card title row beside Shared/Dedicated pooler. - Card titles use sans + sentence case (`Shared pooler`, `Connection parameters`); `.env` stays mono. - Icon-only copy buttons match CodeBlock square sizing; row actions sit slightly closer to the right edge (`pr-2`). - Shared pooler toggle copy clarified. | Before | After | | --- | --- | | <img width="390" height="763" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/adca3cc5-94f8-47e5-a4a2-2831790f430a" /> | <img width="390" height="763" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/f03afe58-e654-435e-a821-835f6243ca95" /> | | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/79f08620-7e1e-4246-a70f-801606c0f499" /> | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/fb45e851-955e-46c2-90f1-afecb93d6ac4" /> | | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/eda36d21-bba7-46ab-ad48-134acf93b471" /> | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/b7b728c6-fc92-46a7-8e3f-2f182c56ece7" /> | ### Test plan - [ ] Open **Connect** and confirm mode cells select/hover clearly; narrow the sheet and confirm wrap + stable width. - [ ] Direct: switch Direct / Transaction / Session; confirm pooler title, reset in title row, parameters table, and percent-encode note. - [ ] Toggle IPv4 shared pooler on Transaction; confirm string updates and admonition/Learn more behaviour when on IPv4-only paths. - [ ] Server: `.env` Copy all / row copy sizing; install command copy. - [ ] MCP / shadcn / Framework: steps still resolve and copy prompt still builds a useful agent prompt. - [ ] Spot-check light/dark and a Linux/Vercel build (InlineLink import casing).
225 lines
8.2 KiB
JSON
225 lines
8.2 KiB
JSON
{
|
|
"name": "studio",
|
|
"version": "0.0.9",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"preinstall": "npx only-allow pnpm",
|
|
"predev": "node scripts/clean-turbopack-cache.mjs",
|
|
"dev": "node scripts/dispatch.js dev",
|
|
"build": "node scripts/dispatch.js build",
|
|
"start": "node scripts/dispatch.js start",
|
|
"preview": "vite preview --mode ${MODE:-production} --port 8082",
|
|
"dev:next": "next dev -p ${STUDIO_PORT:-8082}",
|
|
"build:next": "next build && if [ \"$SKIP_ASSET_UPLOAD\" != \"1\" ]; then ./../../scripts/upload-static-assets.sh; fi",
|
|
"start:next": "next start -p 8082",
|
|
"dev:tanstack": "NODE_OPTIONS=--max-old-space-size=8192 vite dev --port ${STUDIO_PORT:-8082}",
|
|
"build:tanstack": "vite build --mode ${MODE:-production} && pnpm smoke:tanstack",
|
|
"smoke:tanstack": "node scripts/smoke-server.mjs",
|
|
"start:tanstack": "node scripts/serve.js",
|
|
"lint": "eslint .",
|
|
"lint:ratchet": "tsx scripts/ratchet-eslint-rules.ts --rules-file scripts/ratchet-rules.json",
|
|
"clean": "rimraf .next .turbo tsconfig.tsbuildinfo",
|
|
"test": "vitest --run --coverage",
|
|
"test:watch": "vitest watch",
|
|
"test:ui": "vitest --ui",
|
|
"test:update": "vitest --run --update",
|
|
"test:ci": "vitest --run --coverage",
|
|
"test:report": "open coverage/lcov-report/index.html",
|
|
"deploy:staging": "VERCEL_ORG_ID=team_E6KJ1W561hMTjon1QSwOh0WO VERCEL_PROJECT_ID=QmcmhbiAtCMFTAHCuGgQscNbke4TzgWULECctNcKmxWCoT vercel --prod -A .vercel/staging.json",
|
|
"pretypecheck": "next typegen",
|
|
"typecheck": "tsc --noEmit",
|
|
"build:deno-types": "tsx scripts/deno-types.ts",
|
|
"build:graphql-types": "tsx scripts/download-graphql-schema.mts && pnpm graphql-codegen --config scripts/codegen.ts",
|
|
"build:graphql-types:watch": "pnpm graphql-codegen --config scripts/codegen.ts --watch",
|
|
"evals:setup": "cp node_modules/libpg-query/wasm/libpg-query.wasm evals/libpg-query.wasm",
|
|
"evals:preflight": "tsx evals/preflight.ts",
|
|
"evals:run": "braintrust eval --no-send-logs evals/assistant.eval.ts",
|
|
"evals:upload": "braintrust eval evals/assistant.eval.ts",
|
|
"scorers:deploy": "IS_BRAINTRUST_PUSH=true braintrust push evals/scorer-online.ts"
|
|
},
|
|
"dependencies": {
|
|
"@ai-sdk/amazon-bedrock": "^4.0.81",
|
|
"@ai-sdk/mcp": "^1.0.25",
|
|
"@ai-sdk/openai": "^3.0.41",
|
|
"@ai-sdk/provider": "^3.0.8",
|
|
"@ai-sdk/provider-utils": "^4.0.19",
|
|
"@ai-sdk/react": "^3.0.118",
|
|
"@aws-sdk/credential-providers": "^3.1041.0",
|
|
"@dagrejs/dagre": "^1.0.4",
|
|
"@dnd-kit/core": "^6.1.0",
|
|
"@dnd-kit/modifiers": "^9.0.0",
|
|
"@dnd-kit/sortable": "^8.0.0",
|
|
"@dnd-kit/utilities": "^3.2.2",
|
|
"@graphiql/react": "^0.37.3",
|
|
"@graphiql/toolkit": "^0.11.3",
|
|
"@hcaptcha/react-hcaptcha": "^1.12.0",
|
|
"@heroicons/react": "^2.1.3",
|
|
"@hookform/resolvers": "^3.1.1",
|
|
"@mjackson/multipart-parser": "^0.10.1",
|
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
"@monaco-editor/react": "catalog:",
|
|
"@next/bundle-analyzer": "16.2.3",
|
|
"@number-flow/react": "^0.3.2",
|
|
"@sentry/nextjs": "catalog:",
|
|
"@sentry/react": "^10.27.0",
|
|
"@sentry/tanstackstart-react": "catalog:",
|
|
"@std/path": "npm:@jsr/std__path@^1.0.8",
|
|
"@stripe/react-stripe-js": "6.1.0",
|
|
"@stripe/stripe-js": "9.1.0",
|
|
"@supabase/auth-js": "catalog:",
|
|
"@supabase/mcp-server-supabase": "^0.7.0",
|
|
"@supabase/pg-meta": "workspace:*",
|
|
"@supabase/realtime-js": "catalog:",
|
|
"@supabase/shared-types": "0.1.88",
|
|
"@supabase/supabase-js": "catalog:",
|
|
"@tanstack/react-devtools": "^0.10.3",
|
|
"@tanstack/react-hotkeys": "^0.10.0",
|
|
"@tanstack/react-query": "~5.83.0",
|
|
"@tanstack/react-query-devtools": "~5.90.2",
|
|
"@tanstack/react-router": "catalog:",
|
|
"@tanstack/react-router-devtools": "^1.166.13",
|
|
"@tanstack/react-router-ssr-query": "^1.166.12",
|
|
"@tanstack/react-start": "catalog:",
|
|
"@tanstack/react-table": "catalog:",
|
|
"@tanstack/react-virtual": "^3.13.24",
|
|
"@types/d3-geo": "^3.1.0",
|
|
"@uidotdev/usehooks": "^2.4.1",
|
|
"@vercel/functions": "^2.1.0",
|
|
"@xyflow/react": "^12.10.1",
|
|
"@zip.js/zip.js": "^2.7.29",
|
|
"ai": "^6.0.174",
|
|
"ai-commands": "workspace:*",
|
|
"awesome-debounce-promise": "^2.1.0",
|
|
"class-variance-authority": "^0.7.1",
|
|
"common": "workspace:*",
|
|
"common-tags": "^1.8.2",
|
|
"config": "workspace:*",
|
|
"cron-parser": "^4.9.0",
|
|
"cronstrue": "^2.50.0",
|
|
"crypto-js": "^4.2.0",
|
|
"d3-geo": "^3.1.1",
|
|
"dayjs": "^1.11.10",
|
|
"dev-tools": "workspace:*",
|
|
"file-saver": "^2.0.5",
|
|
"framer-motion": "^11.18.2",
|
|
"fuse.js": "^7.4.0",
|
|
"generate-password-browser": "^1.1.0",
|
|
"graphiql": "^5.2.2",
|
|
"html-to-image": "^1.11.13",
|
|
"http-status": "^2.1.0",
|
|
"icons": "workspace:*",
|
|
"idb": "^8.0.2",
|
|
"ip-num": "^1.5.1",
|
|
"json-logic-js": "^2.0.2",
|
|
"lodash": "catalog:",
|
|
"lodash-es": "catalog:",
|
|
"lucide-react": "^0.436.0",
|
|
"markdown-table": "^3.0.3",
|
|
"mime-db": "^1.53.0",
|
|
"monaco-editor": "catalog:",
|
|
"next": "catalog:",
|
|
"next-themes": "catalog:",
|
|
"nuqs": "2.7.1",
|
|
"openai": "^4.104.0",
|
|
"openapi-fetch": "0.12.4",
|
|
"papaparse": "^5.3.1",
|
|
"path-to-regexp": "^8.0.0",
|
|
"radix-ui": "catalog:",
|
|
"randombytes": "^2.1.0",
|
|
"react": "catalog:",
|
|
"react-data-grid": "7.0.0-beta.47",
|
|
"react-day-picker": "^9.11.1",
|
|
"react-dom": "catalog:",
|
|
"react-error-boundary": "^4.0.13",
|
|
"react-grid-layout": "^1.4.2",
|
|
"react-hook-form": "^7.71.2",
|
|
"react-inlinesvg": "^4.0.4",
|
|
"react-intersection-observer": "^9.5.3",
|
|
"react-markdown": "^10.1.0",
|
|
"react-resizable": "3.0.5",
|
|
"react-simple-maps": "4.0.0-beta.6",
|
|
"react-use": "^17.5.0",
|
|
"recharts": "catalog:",
|
|
"remark-gfm": "^4.0.0",
|
|
"shared-data": "workspace:*",
|
|
"sonner": "^1.5.0",
|
|
"sql-formatter": "^15.0.0",
|
|
"streamdown": "^1.3.0",
|
|
"@stripe/sync-engine": "1.0.32",
|
|
"swiper": "^12.1.2",
|
|
"tus-js-client": "^4.1.0",
|
|
"ui": "workspace:*",
|
|
"ui-patterns": "workspace:*",
|
|
"use-debounce": "^7.0.1",
|
|
"use-stick-to-bottom": "^1.1.1",
|
|
"uuid": "^14.0.0",
|
|
"valtio": "catalog:",
|
|
"zod": "catalog:",
|
|
"zxcvbn": "^4.4.2"
|
|
},
|
|
"devDependencies": {
|
|
"@babel/core": "*",
|
|
"@eslint/compat": "^2.1.0",
|
|
"@faker-js/faker": "^9.9.0",
|
|
"@graphql-codegen/cli": "5.0.5",
|
|
"@graphql-typed-document-node/core": "^3.2.0",
|
|
"@radix-ui/react-use-escape-keydown": "^1.1.1",
|
|
"@smithy/property-provider": "^4.0.4",
|
|
"@tailwindcss/vite": "4.2.4",
|
|
"@tanstack/devtools-vite": "^0.6.0",
|
|
"@testing-library/dom": "^10.0.0",
|
|
"@testing-library/jest-dom": "^6.6.0",
|
|
"@testing-library/react": "^16.0.0",
|
|
"@testing-library/user-event": "^14.0.0",
|
|
"@types/common-tags": "^1.8.1",
|
|
"@types/crypto-js": "^4.2.2",
|
|
"@types/file-saver": "^2.0.2",
|
|
"@types/json-logic-js": "^1.2.1",
|
|
"@types/lodash": "^4.14.172",
|
|
"@types/mime-db": "^1.43.5",
|
|
"@types/node": "catalog:",
|
|
"@types/papaparse": "^5.3.1",
|
|
"@types/randombytes": "^2.0.3",
|
|
"@types/react": "catalog:",
|
|
"@types/react-dom": "catalog:",
|
|
"@types/react-grid-layout": "^1.3.0",
|
|
"@types/react-simple-maps": "^3.0.1",
|
|
"@types/zxcvbn": "^4.4.1",
|
|
"@jridgewell/remapping": "^2.3.5",
|
|
"@vercel/config": "^0.2.1",
|
|
"@vitejs/plugin-react": "catalog:",
|
|
"@vitest/coverage-v8": "catalog:",
|
|
"@vitest/ui": "catalog:",
|
|
"api-types": "workspace:*",
|
|
"autoevals": "^0.0.132",
|
|
"braintrust": "^3.9.0",
|
|
"common": "workspace:*",
|
|
"config": "workspace:*",
|
|
"date-fns": "^2.30.0",
|
|
"eslint-config-supabase": "workspace:*",
|
|
"eslint-plugin-barrel-files": "^2.0.7",
|
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
"eslint-plugin-react-hook-form": "^0.3.1",
|
|
"eslint-plugin-valtio": "^0.8.0",
|
|
"graphql-ws": "5.14.1",
|
|
"import-in-the-middle": "^2.0.0",
|
|
"jsdom-testing-mocks": "^1.13.1",
|
|
"libpg-query": "17.6.0",
|
|
"magic-string": "^0.30.21",
|
|
"msw": "^2.3.0",
|
|
"next-router-mock": "^0.9.13",
|
|
"node-mocks-http": "^1.17.2",
|
|
"postcss": "catalog:",
|
|
"raw-loader": "^4.0.2",
|
|
"require-in-the-middle": "^8.0.0",
|
|
"tsconfig": "workspace:*",
|
|
"tsx": "catalog:",
|
|
"@typescript/native": "catalog:",
|
|
"typescript": "catalog:",
|
|
"vite": "catalog:",
|
|
"vite-tsconfig-paths": "catalog:",
|
|
"vitest": "catalog:"
|
|
}
|
|
}
|