From 15c6dfcd211385441fa233c78585de3aacfbe4f5 Mon Sep 17 00:00:00 2001 From: Sync Fork Date: Wed, 24 Jan 2024 00:04:20 +0000 Subject: [PATCH] Merge upstream changes --- .npmrc | 3 +- audit-ci.jsonc | 6 + dashboard/CHANGELOG.md | 10 + dashboard/Dockerfile | 4 +- dashboard/e2e/account/pat/manage-pat.test.ts | 2 +- dashboard/e2e/database/create-table.test.ts | 19 +- dashboard/e2e/database/delete-table.test.ts | 16 +- dashboard/e2e/overview/overview.test.ts | 2 +- dashboard/e2e/utils.ts | 3 +- dashboard/package.json | 211 +- .../src/components/common/NavLink/NavLink.tsx | 2 +- .../common/ThemeSwitcher/ThemeSwitcher.tsx | 2 +- .../UpgradeToProBanner/UpgradeToProBanner.tsx | 7 +- .../dataGrid/DataGridCell/DataGridCell.tsx | 4 +- .../ui/v2/Autocomplete/Autocomplete.tsx | 8 +- dashboard/src/components/ui/v2/Box/Box.tsx | 6 +- dashboard/src/components/ui/v2/Chip/Chip.tsx | 2 +- .../ui/v2/HelperText/HelperText.tsx | 2 +- .../src/components/ui/v2/Option/Option.tsx | 23 +- .../ui/v2/OptionGroup/OptionGroup.tsx | 10 +- .../src/components/ui/v2/Select/Select.tsx | 23 +- .../components/ui/v2/Select/ToggleButton.tsx | 9 +- .../src/components/ui/v2/Switch/Switch.tsx | 39 +- .../ai/DevAssistant/state/projectMessages.ts | 5 +- .../components/EditUserForm/EditUserForm.tsx | 45 +- .../users/components/UsersBody/UsersBody.tsx | 25 +- .../BaseColumnForm/BaseColumnForm.tsx | 14 +- .../BaseForeignKeyForm/BaseForeignKeyForm.tsx | 6 +- .../ColumnAutocomplete/ColumnAutocomplete.tsx | 8 +- .../CreateColumnForm/CreateColumnForm.tsx | 5 +- .../CreateForeignKeyForm.tsx | 6 +- .../CreateTableForm/CreateTableForm.tsx | 5 +- .../DataBrowserSidebar/DataBrowserSidebar.tsx | 24 +- .../EditColumnForm/EditColumnForm.tsx | 5 +- .../EditForeignKeyForm/EditForeignKeyForm.tsx | 6 +- .../EditTableForm/EditTableForm.tsx | 5 +- .../DatabaseStorageCapacity.tsx | 2 +- .../WorkspaceAndProjectList.tsx | 9 +- .../WorkspaceSidebar/WorkspaceSidebar.tsx | 10 +- .../components/AuthDomain/AuthDomain.tsx | 2 +- .../components/HasuraDomain/HasuraDomain.tsx | 2 +- .../RunServicePortDomain.tsx | 2 +- .../ServerlessFunctionsDomain.tsx | 2 +- .../WorkspaceApps/WorkspaceApps.tsx | 13 +- .../components/ServiceForm/ServiceForm.tsx | 79 +- .../ServiceForm/ServiceFormTypes.ts | 67 + .../ComputeFormSection/ComputeFormSection.tsx | 2 +- .../EnvironmentFormSection.tsx | 2 +- .../PortsFormSection/PortsFormSection.tsx | 6 +- .../PortsFormSection/PortsFormSectionTypes.ts | 5 + .../components/PortsFormSection/index.ts | 1 - .../ReplicasFormSection.tsx | 2 +- .../ServiceConfirmationDialog.tsx | 2 +- .../StorageFormSection/StorageFormSection.tsx | 7 +- .../services/components/ServiceForm/index.ts | 1 - .../components/ServicesList/ServicesList.tsx | 6 +- .../[workspaceSlug]/[appSlug]/graphql.tsx | 2 +- .../[appSlug]/services/index.tsx | 6 +- dashboard/src/pages/new.tsx | 35 +- dashboard/src/tests/mocks.ts | 1 + dashboard/src/tests/testUtils.tsx | 2 +- examples/cli/CHANGELOG.md | 8 + examples/cli/package.json | 12 +- examples/codegen-react-apollo/CHANGELOG.md | 9 + examples/codegen-react-apollo/package.json | 36 +- examples/codegen-react-query/CHANGELOG.md | 8 + examples/codegen-react-query/package.json | 38 +- examples/codegen-react-urql/CHANGELOG.md | 9 + examples/codegen-react-urql/package.json | 36 +- examples/docker-compose/CHANGELOG.md | 6 + examples/docker-compose/package.json | 7 +- .../multi-tenant-one-to-many/CHANGELOG.md | 8 + .../multi-tenant-one-to-many/package.json | 10 +- examples/nextjs/CHANGELOG.md | 10 + examples/nextjs/package.json | 30 +- examples/node-storage/CHANGELOG.md | 8 + examples/node-storage/package.json | 16 +- .../nextjs-server-components/CHANGELOG.md | 8 + .../nextjs-server-components/next.config.js | 3 - .../nextjs-server-components/package.json | 18 +- .../src/app/auth/sign-in/magick-link/page.tsx | 2 +- .../src/app/auth/sign-in/webauthn/page.tsx | 2 +- .../src/app/auth/sign-up/webauthn/page.tsx | 2 +- .../src/components/input.tsx | 4 +- .../src/components/submit-button.tsx | 12 +- .../nextjs-server-components/tsconfig.json | 2 + examples/quickstarts/sveltekit/CHANGELOG.md | 5 + examples/quickstarts/sveltekit/package.json | 47 +- examples/quickstarts/sveltekit/pnpm-lock.yaml | 26 +- examples/react-apollo/CHANGELOG.md | 9 + examples/react-apollo/package.json | 32 +- examples/react-gqty/CHANGELOG.md | 8 + examples/react-gqty/package.json | 24 +- examples/serverless-functions/CHANGELOG.md | 8 + examples/serverless-functions/package.json | 18 +- examples/vue-apollo/CHANGELOG.md | 10 + examples/vue-apollo/package.json | 34 +- .../components/VerificationEmailDialog.vue | 13 +- examples/vue-quickstart/CHANGELOG.md | 9 + examples/vue-quickstart/auto-imports.d.ts | 3 + examples/vue-quickstart/components.d.ts | 12 +- examples/vue-quickstart/package.json | 32 +- flake.lock | 18 +- integrations/apollo/CHANGELOG.md | 8 + integrations/apollo/package.json | 8 +- integrations/google-translation/CHANGELOG.md | 6 + integrations/google-translation/package.json | 16 +- integrations/react-apollo/CHANGELOG.md | 9 + integrations/react-apollo/package.json | 8 +- integrations/react-urql/CHANGELOG.md | 8 + integrations/react-urql/package.json | 12 +- integrations/stripe-graphql-js/CHANGELOG.md | 6 + integrations/stripe-graphql-js/package.json | 22 +- nix/mintlify/node-packages.nix | 1588 +- nix/mintlify/package.json | 6 +- nix/overlay.nix | 3 + package.json | 92 +- packages/docgen/CHANGELOG.md | 6 + packages/docgen/package.json | 20 +- packages/graphql-js/CHANGELOG.md | 6 + packages/graphql-js/package.json | 6 +- packages/hasura-auth-js/CHANGELOG.md | 6 + packages/hasura-auth-js/package.json | 14 +- packages/hasura-storage-js/CHANGELOG.md | 6 + packages/hasura-storage-js/package.json | 9 +- packages/nextjs/CHANGELOG.md | 8 + packages/nextjs/package.json | 11 +- packages/nhost-js/CHANGELOG.md | 10 + packages/nhost-js/package.json | 4 +- packages/react/CHANGELOG.md | 8 + packages/react/package.json | 9 +- packages/sync-versions/CHANGELOG.md | 6 + packages/sync-versions/package.json | 18 +- packages/vue/CHANGELOG.md | 8 + packages/vue/package.json | 14 +- pnpm-lock.yaml | 22494 ++++++---------- 136 files changed, 10652 insertions(+), 15255 deletions(-) create mode 100644 audit-ci.jsonc create mode 100644 dashboard/src/features/services/components/ServiceForm/ServiceFormTypes.ts create mode 100644 dashboard/src/features/services/components/ServiceForm/components/PortsFormSection/PortsFormSectionTypes.ts diff --git a/.npmrc b/.npmrc index 7e3eaab644..c52b4021d4 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,2 @@ -prefer-workspace-packages = true \ No newline at end of file +prefer-workspace-packages = true +auto-install-peers = false \ No newline at end of file diff --git a/audit-ci.jsonc b/audit-ci.jsonc new file mode 100644 index 0000000000..ae8536715a --- /dev/null +++ b/audit-ci.jsonc @@ -0,0 +1,6 @@ +{ + // $schema provides code completion hints to IDEs. + "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json", + "moderate": true, + "allowlist": ["trim-newlines"] +} diff --git a/dashboard/CHANGELOG.md b/dashboard/CHANGELOG.md index 52efa95277..03c866ba91 100644 --- a/dashboard/CHANGELOG.md +++ b/dashboard/CHANGELOG.md @@ -1,5 +1,15 @@ # @nhost/dashboard +## 1.6.1 + +### Patch Changes + +- 8d91f71: chore: update deps and enable pnpm audit +- 3b8473b: chore: update turbo to `1.11.3` and pnpm to `8.10.5` in Dockerfile +- Updated dependencies [8d91f71] + - @nhost/react-apollo@7.0.2 + - @nhost/nextjs@2.0.2 + ## 1.6.0 ### Minor Changes diff --git a/dashboard/Dockerfile b/dashboard/Dockerfile index b035c084b5..7de1b73459 100644 --- a/dashboard/Dockerfile +++ b/dashboard/Dockerfile @@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat RUN apk update WORKDIR /app -RUN yarn global add turbo@1.10.11 +RUN yarn global add turbo@1.11.3 COPY . . RUN turbo prune --scope="@nhost/dashboard" --docker @@ -29,7 +29,7 @@ ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL_ ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__ ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__ -RUN yarn global add pnpm@8.6.2 +RUN yarn global add pnpm@8.10.5 COPY .gitignore .gitignore COPY --from=pruner /app/out/json/ . COPY --from=pruner /app/out/pnpm-*.yaml . diff --git a/dashboard/e2e/account/pat/manage-pat.test.ts b/dashboard/e2e/account/pat/manage-pat.test.ts index 8af5a1e269..76985c4812 100644 --- a/dashboard/e2e/account/pat/manage-pat.test.ts +++ b/dashboard/e2e/account/pat/manage-pat.test.ts @@ -27,7 +27,7 @@ test('should be able to create then delete a personal access token', async () => const patName = faker.lorem.slug(3); await page.getByRole('textbox', { name: /name/i }).fill(patName); - await page.getByRole('button', { name: /expiration/i }).click(); + await page.getByLabel('Expiration').click(); await page.getByRole('option', { name: /7 days/i }).click(); await page.getByRole('button', { name: /create/i }).click(); diff --git a/dashboard/e2e/database/create-table.test.ts b/dashboard/e2e/database/create-table.test.ts index d8ba9fbca0..65aaf2fabe 100644 --- a/dashboard/e2e/database/create-table.test.ts +++ b/dashboard/e2e/database/create-table.test.ts @@ -138,7 +138,8 @@ test('should create a table with an identity column', async () => { ], }); - await page.getByRole('button', { name: /identity/i }).click(); + // await page.getByRole('button', { name: /identity/i }).click(); + await page.getByLabel('Identity').click(); await page.getByRole('option', { name: /id/i }).click(); // create table @@ -194,26 +195,18 @@ test('should create table with foreign key constraint', async () => { await page.getByRole('button', { name: /add foreign key/i }).click(); - // select column in current table - await page - .getByRole('button', { name: /column/i }) - .first() - .click(); + await page.locator('#columnName').click(); await page.getByRole('option', { name: /author_id/i }).click(); // select reference schema - await page.getByRole('button', { name: /schema/i }).click(); + await page.getByLabel('Schema').click(); await page.getByRole('option', { name: /public/i }).click(); // select reference table - await page.getByRole('button', { name: /table/i }).click(); + await page.getByLabel('Table').click(); await page.getByRole('option', { name: firstTableName, exact: true }).click(); - // select reference column - await page - .getByRole('button', { name: /column/i }) - .nth(1) - .click(); + await page.locator('#referencedColumn').click(); await page.getByRole('option', { name: /id/i }).click(); await page.getByRole('button', { name: /add/i }).click(); diff --git a/dashboard/e2e/database/delete-table.test.ts b/dashboard/e2e/database/delete-table.test.ts index 008ca12e37..fdc1d1ac0e 100644 --- a/dashboard/e2e/database/delete-table.test.ts +++ b/dashboard/e2e/database/delete-table.test.ts @@ -113,27 +113,21 @@ test('should not be able to delete a table if other tables have foreign keys ref await page.getByRole('button', { name: /add foreign key/i }).click(); // select column in current table - await page - .getByRole('button', { name: /column/i }) - .first() - .click(); + await page.locator('#columnName').click(); + await page.getByRole('option', { name: /author_id/i }).click(); // select reference schema - await page.getByRole('button', { name: /schema/i }).click(); + await page.getByLabel('Schema').click(); await page.getByRole('option', { name: /public/i }).click(); // select reference table - await page.getByRole('button', { name: /table/i }).click(); + await page.getByLabel('Table').click(); await page.getByRole('option', { name: firstTableName, exact: true }).click(); // select reference column - await page - .getByRole('button', { name: /column/i }) - .nth(1) - .click(); + await page.locator('#referencedColumn').click(); await page.getByRole('option', { name: /id/i }).click(); - await page.getByRole('button', { name: /add/i }).click(); await expect( diff --git a/dashboard/e2e/overview/overview.test.ts b/dashboard/e2e/overview/overview.test.ts index eb34e45c56..252aa751e2 100644 --- a/dashboard/e2e/overview/overview.test.ts +++ b/dashboard/e2e/overview/overview.test.ts @@ -93,7 +93,7 @@ test("should show the project's region and subdomain", async () => { test('should not have a GitHub repository connected', async () => { await expect( - page.getByRole('button', { name: /connect to github/i }), + page.getByRole('button', { name: /connect to github/i }).first(), ).toBeVisible(); }); diff --git a/dashboard/e2e/utils.ts b/dashboard/e2e/utils.ts index ef455286aa..bdd79ef1b0 100644 --- a/dashboard/e2e/utils.ts +++ b/dashboard/e2e/utils.ts @@ -116,7 +116,8 @@ export async function prepareTable({ ); // select the first column as primary key - await page.getByRole('button', { name: /primary key/i }).click(); + // await page.getByRole('button', { name: /primary key/i }).click(); + await page.getByLabel('Primary Key').click(); await page.getByRole('option', { name: primaryKey, exact: true }).click(); } diff --git a/dashboard/package.json b/dashboard/package.json index a1fbad68ad..35c90780f1 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -1,6 +1,6 @@ { "name": "@nhost/dashboard", - "version": "1.6.0", + "version": "1.6.1", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", @@ -15,62 +15,61 @@ "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.", "storybook": "start-storybook -p 6006 -s public", "build-storybook": "build-storybook", - "install-browsers": "pnpm dlx playwright@1.31.0 install --with-deps", - "e2e": "pnpm install-browsers && pnpm dlx playwright@1.31.0 test" + "install-browsers": "pnpm playwright install && pnpm playwright install-deps", + "e2e": "pnpm install-browsers && pnpm playwright test" }, "dependencies": { - "@apollo/client": "^3.7.10", - "@codemirror/lang-sql": "^6.5.4", - "@emotion/cache": "^11.10.5", - "@emotion/react": "^11.10.5", - "@emotion/server": "^11.4.0", - "@emotion/styled": "^11.10.5", - "@fontsource/inter": "^5.0.0", - "@fontsource/roboto-mono": "^5.0.0", - "@graphiql/react": "^0.18.0", - "@graphiql/toolkit": "^0.8.2", - "@headlessui/react": "^1.6.5", + "@apollo/client": "^3.8.9", + "@codemirror/lang-sql": "^6.5.5", + "@emotion/cache": "^11.11.0", + "@emotion/react": "^11.11.3", + "@emotion/server": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@fontsource/inter": "^5.0.16", + "@fontsource/roboto-mono": "^5.0.16", + "@graphiql/react": "^0.20.2", + "@graphiql/toolkit": "^0.9.1", + "@headlessui/react": "^1.7.18", "@heroicons/react": "^1.0.6", - "@hookform/resolvers": "^3.0.0", - "@mui/base": "^5.0.0-alpha.106", - "@mui/material": "^5.10.14", - "@mui/system": "^5.10.14", - "@mui/x-date-pickers": "^5.0.8", + "@hookform/resolvers": "^3.3.4", + "@mui/base": "5.0.0-beta.31", + "@mui/material": "^5.15.4", + "@mui/system": "^5.15.4", + "@mui/x-date-pickers": "^5.0.20", "@nhost/nextjs": "workspace:*", "@nhost/react-apollo": "workspace:*", - "@segment/snippet": "^4.15.3", - "@stripe/react-stripe-js": "^2.0.0", - "@stripe/stripe-js": "^1.35.0", - "@tailwindcss/forms": "^0.5.3", - "@tanstack/react-query": "^4.16.1", - "@tanstack/react-table": "^8.5.30", - "@tanstack/react-virtual": "^3.0.0-beta.23", - "@uiw/codemirror-theme-github": "^4.21.20", - "@uiw/react-codemirror": "^4.21.20", + "@segment/snippet": "^4.16.2", + "@stripe/react-stripe-js": "^2.4.0", + "@stripe/stripe-js": "^1.54.2", + "@tailwindcss/forms": "^0.5.7", + "@tanstack/react-query": "^4.36.1", + "@tanstack/react-table": "^8.11.6", + "@tanstack/react-virtual": "^3.0.1", + "@uiw/codemirror-theme-github": "^4.21.21", + "@uiw/react-codemirror": "^4.21.21", "analytics-node": "^6.2.0", "bcryptjs": "^2.4.3", "clsx": "^1.2.1", - "date-fns": "^2.29.3", - "generate-password": "^1.7.0", - "graphiql": "^3.0.0", - "graphql": "^16.6.0", - "graphql-request": "^6.0.0", + "date-fns": "^2.30.0", + "generate-password": "^1.7.1", + "graphiql": "^3.1.0", + "graphql": "16.8.1", + "graphql-request": "^6.1.0", "graphql-tag": "^2.12.6", - "graphql-ws": "^5.11.2", - "hypertune": "^1.4.4", - "just-kebab-case": "^4.1.1", + "graphql-ws": "^5.14.3", + "just-kebab-case": "^4.2.0", "lodash.debounce": "^4.0.8", - "next": "^12.3.1", - "next-seo": "^6.0.0", + "next": "^14.0.4", + "next-seo": "^6.4.0", "node-pg-format": "^1.3.5", "pluralize": "^8.0.0", "react": "18.2.0", - "react-children-utilities": "^2.9.0", + "react-children-utilities": "^2.10.0", "react-dom": "18.2.0", - "react-error-boundary": "^4.0.0", - "react-hook-form": "^7.42.1", - "react-hot-toast": "^2.4.0", - "react-intersection-observer": "^9.5.2", + "react-error-boundary": "^4.0.12", + "react-hook-form": "^7.49.3", + "react-hot-toast": "^2.4.1", + "react-intersection-observer": "^9.5.3", "react-is": "18.2.0", "react-loading-skeleton": "^2.2.0", "react-markdown": "^9.0.1", @@ -82,87 +81,87 @@ "rehype-highlight": "^7.0.0", "remark-gfm": "^4.0.0", "shell-quote": "^1.8.1", - "slugify": "^1.6.5", + "slugify": "^1.6.6", "stripe": "^10.17.0", - "tailwind-merge": "^1.8.0", + "tailwind-merge": "^1.14.0", "utility-types": "^3.10.0", - "validator": "^13.7.0", - "yup": "^1.0.2", + "validator": "^13.11.0", + "yup": "^1.3.3", "yup-password": "^0.2.2" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.23.7", "@faker-js/faker": "^7.6.0", - "@graphql-codegen/cli": "^3.0.0", - "@graphql-codegen/typescript": "^3.0.0", - "@graphql-codegen/typescript-operations": "^3.0.0", - "@graphql-codegen/typescript-react-apollo": "^3.3.1", - "@next/bundle-analyzer": "^12.3.1", - "@playwright/test": "1.31.0", - "@storybook/addon-actions": "^6.5.14", - "@storybook/addon-essentials": "^6.5.14", - "@storybook/addon-interactions": "^6.5.14", - "@storybook/addon-links": "^6.5.14", + "@graphql-codegen/cli": "^3.3.1", + "@graphql-codegen/typescript": "^3.0.4", + "@graphql-codegen/typescript-operations": "^3.0.4", + "@graphql-codegen/typescript-react-apollo": "^3.3.7", + "@next/bundle-analyzer": "^12.3.4", + "@playwright/test": "1.41.0", + "@storybook/addon-actions": "^6.5.16", + "@storybook/addon-essentials": "^6.5.16", + "@storybook/addon-interactions": "^6.5.16", + "@storybook/addon-links": "^6.5.16", "@storybook/addon-postcss": "^2.0.0", - "@storybook/builder-webpack5": "^6.5.14", - "@storybook/manager-webpack5": "^6.5.14", - "@storybook/react": "^6.5.14", - "@storybook/testing-library": "^0.2.0", + "@storybook/builder-webpack5": "^6.5.16", + "@storybook/manager-webpack5": "^6.5.16", + "@storybook/react": "^6.5.16", + "@storybook/testing-library": "^0.2.2", "@tailwindcss/typography": "^0.5.10", - "@testing-library/dom": "^9.0.0", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^14.0.0", - "@testing-library/user-event": "^14.4.3", + "@testing-library/dom": "^9.3.4", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.1.2", + "@testing-library/user-event": "^14.5.2", "@types/ace": "^0.0.48", - "@types/bcryptjs": "^2.4.2", - "@types/jest": "^29.5.3", - "@types/lodash.debounce": "^4.0.7", - "@types/node": "^16.11.7", + "@types/bcryptjs": "^2.4.6", + "@types/jest": "^29.5.11", + "@types/lodash.debounce": "^4.0.9", + "@types/node": "^16.18.70", "@types/pluralize": "^0.0.30", - "@types/react": "^18.2.14", - "@types/react-dom": "^18.2.6", - "@types/react-table": "^7.7.12", - "@types/shell-quote": "^1.7.1", - "@types/testing-library__jest-dom": "^5.14.5", - "@types/validator": "^13.7.10", - "@typescript-eslint/eslint-plugin": "^6.15.0", - "@typescript-eslint/parser": "^6.15.0", - "@vitejs/plugin-react": "^4.0.0", - "@vitest/coverage-v8": "^0.32.0", - "autoprefixer": "^10.4.13", + "@types/react": "^18.2.47", + "@types/react-dom": "^18.2.18", + "@types/react-table": "^7.7.19", + "@types/shell-quote": "^1.7.5", + "@types/testing-library__jest-dom": "^5.14.9", + "@types/validator": "^13.11.8", + "@typescript-eslint/eslint-plugin": "^6.18.1", + "@typescript-eslint/parser": "^6.18.1", + "@vitejs/plugin-react": "^4.2.1", + "@vitest/coverage-v8": "^0.32.4", + "autoprefixer": "^10.4.16", "babel-loader": "^8.3.0", "babel-plugin-transform-remove-console": "^6.9.4", - "csstype": "^3.0.10", - "dotenv": "^16.0.3", + "csstype": "^3.1.3", + "dotenv": "^16.3.1", "encoding": "^0.1.13", - "eslint": "^8.28.0", + "eslint": "^8.56.0", "eslint-config-airbnb": "19.0.4", - "eslint-config-airbnb-typescript": "^17.0.0", - "eslint-config-next": "^13.0.2", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-import": "^2.26.0", - "eslint-plugin-jsx-a11y": "^6.6.1", - "eslint-plugin-react": "^7.31.11", + "eslint-config-airbnb-typescript": "^17.1.0", + "eslint-config-next": "^13.5.6", + "eslint-config-prettier": "^8.10.0", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "jsdom": "^22.0.0", - "lint-staged": ">=13", - "msw": "^1.0.1", - "msw-storybook-addon": "^1.6.3", - "node-fetch": "^3.3.0", - "postcss": "^8.4.19", - "prettier": "^2.7.1", - "prettier-plugin-organize-imports": "^3.2.0", - "prettier-plugin-tailwindcss": "^0.4.0", + "jsdom": "^22.1.0", + "lint-staged": "^15.2.0", + "msw": "^1.3.2", + "msw-storybook-addon": "^1.10.0", + "node-fetch": "^3.3.2", + "postcss": "^8.4.33", + "prettier": "^2.8.8", + "prettier-plugin-organize-imports": "^3.2.4", + "prettier-plugin-tailwindcss": "^0.4.1", "react-date-fns-hooks": "^0.9.4", "require-from-string": "^2.0.2", "snake-case": "^3.0.4", - "storybook-addon-next-router": "^4.0.1", - "tailwindcss": "^3.1.2", - "ts-node": "^10.9.1", - "tsconfig-paths-webpack-plugin": "^4.0.0", - "vite": "^4.0.2", - "vite-tsconfig-paths": "^4.0.3", - "vitest": "^0.32.0" + "storybook-addon-next-router": "^4.0.2", + "tailwindcss": "^3.4.1", + "ts-node": "^10.9.2", + "tsconfig-paths-webpack-plugin": "^4.1.0", + "vite": "^5.0.12", + "vite-tsconfig-paths": "^4.2.3", + "vitest": "^0.32.4" }, "browserslist": { "production": [ diff --git a/dashboard/src/components/common/NavLink/NavLink.tsx b/dashboard/src/components/common/NavLink/NavLink.tsx index ca83249c13..c8c0958eea 100644 --- a/dashboard/src/components/common/NavLink/NavLink.tsx +++ b/dashboard/src/components/common/NavLink/NavLink.tsx @@ -17,7 +17,7 @@ function NavLink( ref: ForwardedRef, ) { return ( - + {children} diff --git a/dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx b/dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx index 2532c0efdd..d9947880a9 100644 --- a/dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx +++ b/dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx @@ -26,7 +26,7 @@ export default function ThemeSwitcher({ listbox: { className: 'min-w-0 w-full' }, popper: { disablePortal: false, - className: 'z-[10000] w-[270px] w-full', + className: 'z-[10000] w-[270px]', }, }} > diff --git a/dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx b/dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx index ccef18c726..dd3e20cf24 100644 --- a/dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx +++ b/dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx @@ -26,7 +26,7 @@ export default function UpgradeToProBanner({ return (
@@ -81,13 +81,13 @@ export default function UpgradeToProBanner({ target="_blank" rel="noopener noreferrer" underline="hover" - className="text-center font-medium" + className="font-medium text-center" sx={{ color: 'text.secondary', }} > See all features - +
@@ -97,6 +97,7 @@ export default function UpgradeToProBanner({ width={300} height={140} objectFit="contain" + alt='Upgrade to Pro illustration' /> ); diff --git a/dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx b/dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx index 9f6b2cc4d8..e71cd9cac7 100644 --- a/dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx +++ b/dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx @@ -8,7 +8,7 @@ import type { DataBrowserGridCellProps, } from '@/features/database/dataGrid/types/dataBrowser'; import { triggerToast } from '@/utils/toast'; -import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react'; +import type { FocusEvent, JSXElementConstructor, KeyboardEvent, MouseEvent, ReactElement, ReactNode, ReactPortal } from 'react'; import { Children, cloneElement, @@ -320,7 +320,7 @@ function DataGridCellContent({ sx={{ backgroundColor: 'transparent' }} {...props} > - {Children.map(children, (child) => { + {Children.map(children, (child: ReactNode | ReactPortal | ReactElement>) => { if (!isValidElement(child)) { return null; } diff --git a/dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx b/dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx index 83b18d5365..22e61fb751 100644 --- a/dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx +++ b/dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx @@ -8,9 +8,9 @@ import { Input, inputClasses } from '@/components/ui/v2/Input'; import { OptionBase } from '@/components/ui/v2/Option'; import { OptionGroupBase } from '@/components/ui/v2/OptionGroup'; import type { StyledComponent } from '@emotion/styled'; -import type { UseAutocompleteProps } from '@mui/base/AutocompleteUnstyled'; -import { createFilterOptions } from '@mui/base/AutocompleteUnstyled'; -import PopperUnstyled from '@mui/base/PopperUnstyled'; +import type { UseAutocompleteProps } from '@mui/base/useAutocomplete'; +import { createFilterOptions } from '@mui/base/useAutocomplete'; +import { Popper } from '@mui/base' import { styled } from '@mui/material'; import type { AutocompleteProps as MaterialAutocompleteProps } from '@mui/material/Autocomplete'; import MaterialAutocomplete, { @@ -142,7 +142,7 @@ const StyledOptionBase = styled(OptionBase)(({ theme }) => ({ gap: theme.spacing(0.5), })); -export const AutocompletePopper = styled(PopperUnstyled)(({ theme }) => ({ +export const AutocompletePopper = styled(Popper)(({ theme }) => ({ zIndex: theme.zIndex.modal + 1, boxShadow: 'none', minWidth: 320, diff --git a/dashboard/src/components/ui/v2/Box/Box.tsx b/dashboard/src/components/ui/v2/Box/Box.tsx index 8d068fdf17..56c77ee8c3 100644 --- a/dashboard/src/components/ui/v2/Box/Box.tsx +++ b/dashboard/src/components/ui/v2/Box/Box.tsx @@ -1,9 +1,7 @@ import { styled } from '@mui/material'; -import type { - BoxProps as MaterialBoxProps, - BoxTypeMap, -} from '@mui/material/Box'; +import type { BoxProps as MaterialBoxProps } from '@mui/material/Box'; import MaterialBox from '@mui/material/Box'; +import { type BoxTypeMap } from '@mui/system'; import type { ForwardedRef, PropsWithoutRef } from 'react'; import { forwardRef } from 'react'; diff --git a/dashboard/src/components/ui/v2/Chip/Chip.tsx b/dashboard/src/components/ui/v2/Chip/Chip.tsx index 1132f82c5b..e49c9ebe14 100644 --- a/dashboard/src/components/ui/v2/Chip/Chip.tsx +++ b/dashboard/src/components/ui/v2/Chip/Chip.tsx @@ -10,7 +10,7 @@ export interface ChipProps extends MaterialChipProps { /** * Custom component for the root node. */ - component?: string | ElementType; + component?: ElementType; } const Chip = styled(MaterialChip)(({ theme }) => ({ diff --git a/dashboard/src/components/ui/v2/HelperText/HelperText.tsx b/dashboard/src/components/ui/v2/HelperText/HelperText.tsx index 96ebe43d2f..ae893afc84 100644 --- a/dashboard/src/components/ui/v2/HelperText/HelperText.tsx +++ b/dashboard/src/components/ui/v2/HelperText/HelperText.tsx @@ -7,7 +7,7 @@ export interface HelperTextProps extends MaterialFormHelperTextProps { /** * Custom component for the root node. */ - component?: string | ElementType; + component?: ElementType; } const HelperText = styled(MaterialFormHelperText)({ diff --git a/dashboard/src/components/ui/v2/Option/Option.tsx b/dashboard/src/components/ui/v2/Option/Option.tsx index f289234acd..bac674bda3 100644 --- a/dashboard/src/components/ui/v2/Option/Option.tsx +++ b/dashboard/src/components/ui/v2/Option/Option.tsx @@ -1,41 +1,42 @@ -import type { OptionUnstyledProps } from '@mui/base/OptionUnstyled'; -import OptionUnstyled, { - optionUnstyledClasses, -} from '@mui/base/OptionUnstyled'; +import { + Option as BaseOption, + optionClasses as baseOptionClasses, + type OptionProps as BaseOptionProps, +} from '@mui/base'; import { darken, styled } from '@mui/material'; import type { ForwardedRef } from 'react'; import { forwardRef } from 'react'; import OptionBase from './OptionBase'; export interface OptionProps - extends OptionUnstyledProps {} + extends BaseOptionProps {} -const StyledOption = styled(OptionUnstyled)(({ theme }) => ({ +const StyledOption = styled(BaseOption)(({ theme }) => ({ transition: theme.transitions.create(['background-color']), color: theme.palette.text.primary, - [`&.${optionUnstyledClasses.selected}`]: { + [`&.${baseOptionClasses.selected}`]: { backgroundColor: theme.palette.mode === 'dark' ? `${darken(theme.palette.action.hover, 0.1)} !important` : `${darken(theme.palette.action.hover, 0.05)} !important`, }, - [`&.${optionUnstyledClasses.selected}:hover, &.${optionUnstyledClasses.selected}.${optionUnstyledClasses.highlighted}`]: + [`&.${baseOptionClasses.selected}:hover, &.${baseOptionClasses.selected}.${baseOptionClasses.highlighted}`]: { backgroundColor: theme.palette.mode === 'dark' ? `${darken(theme.palette.action.hover, 0.25)} !important` : `${darken(theme.palette.action.hover, 0.075)} !important`, }, - [`&.${optionUnstyledClasses.highlighted}, &:hover`]: { + [`&.${baseOptionClasses.highlighted}, &:hover`]: { backgroundColor: theme.palette.mode === 'dark' ? `${darken(theme.palette.action.hover, 0.15)} !important` : `${theme.palette.action.hover} !important`, }, - [`&.${optionUnstyledClasses.disabled}`]: { + [`&.${baseOptionClasses.disabled}`]: { color: theme.palette.text.disabled, }, - [`&.${optionUnstyledClasses.disabled}:hover`]: { + [`&.${baseOptionClasses.disabled}:hover`]: { backgroundColor: 'transparent !important', }, })); diff --git a/dashboard/src/components/ui/v2/OptionGroup/OptionGroup.tsx b/dashboard/src/components/ui/v2/OptionGroup/OptionGroup.tsx index 929fa3ad40..dcad935405 100644 --- a/dashboard/src/components/ui/v2/OptionGroup/OptionGroup.tsx +++ b/dashboard/src/components/ui/v2/OptionGroup/OptionGroup.tsx @@ -1,11 +1,13 @@ -import type { OptionGroupUnstyledProps } from '@mui/base/OptionGroupUnstyled'; -import OptionGroupUnstyled from '@mui/base/OptionGroupUnstyled'; +import { + OptionGroup as BaseOptionGroup, + type OptionGroupProps as BaseOptionGroupProps, +} from '@mui/base'; import { styled } from '@mui/material'; import type { ForwardedRef } from 'react'; import { forwardRef } from 'react'; import OptionGroupBase from './OptionGroupBase'; -export interface OptionGroupProps extends OptionGroupUnstyledProps {} +export interface OptionGroupProps extends BaseOptionGroupProps {} const StyledGroupRoot = styled('li')(({ theme }) => ({ listStyle: 'none', @@ -25,7 +27,7 @@ function OptionGroup( ...externalSlots, }; - return ; + return ; } OptionGroup.displayName = 'NhostOptionGroup'; diff --git a/dashboard/src/components/ui/v2/Select/Select.tsx b/dashboard/src/components/ui/v2/Select/Select.tsx index 165b4effe8..903d273ec5 100644 --- a/dashboard/src/components/ui/v2/Select/Select.tsx +++ b/dashboard/src/components/ui/v2/Select/Select.tsx @@ -1,9 +1,9 @@ import type { FormControlProps } from '@/components/ui/v2/FormControl'; import { FormControl } from '@/components/ui/v2/FormControl'; -import PopperUnstyled from '@mui/base/PopperUnstyled'; -import type { SelectUnstyledProps } from '@mui/base/SelectUnstyled'; -import SelectUnstyled from '@mui/base/SelectUnstyled'; -import { styled } from '@mui/material'; +import { Popper as BasePopper } from '@mui/base/Popper'; +import type { SelectProps as BaseSelectProps } from '@mui/base/Select'; +import { Select as BaseSelect } from '@mui/base/Select'; +import { styled } from '@mui/system'; import clsx from 'clsx'; import type { ForwardedRef, PropsWithoutRef } from 'react'; import { forwardRef } from 'react'; @@ -11,7 +11,7 @@ import type { ToggleButtonProps } from './ToggleButton'; import ToggleButton from './ToggleButton'; export interface SelectProps - extends SelectUnstyledProps, + extends BaseSelectProps, Pick< FormControlProps, | 'fullWidth' @@ -25,7 +25,7 @@ export interface SelectProps /** * Props for component slots. */ - slotProps?: SelectUnstyledProps['slotProps'] & { + slotProps?: BaseSelectProps['slotProps'] & { root?: Partial>; label?: Partial; formControl?: Partial; @@ -59,8 +59,8 @@ const StyledListbox = styled('ul')(({ theme }) => ({ }, })); -const StyledPopper = styled(PopperUnstyled)` - z-index: 10; +const StyledPopper = styled(BasePopper)` + z-index: 9999; `; function Select( @@ -80,7 +80,7 @@ function Select( }: SelectProps, ref: ForwardedRef, ) { - const slots: SelectUnstyledProps['slots'] = { + const slots: BaseSelectProps['slots'] = { root: ToggleButton, popper: StyledPopper, listbox: StyledListbox, @@ -107,7 +107,7 @@ function Select( htmlFor: props.id, }} > - ( ...slotProps, root: { ...slotProps?.root, - placeholder, }, listbox: { ...slotProps?.listbox, @@ -132,7 +131,7 @@ function Select( placeholder={placeholder} > {children} - + ); } diff --git a/dashboard/src/components/ui/v2/Select/ToggleButton.tsx b/dashboard/src/components/ui/v2/Select/ToggleButton.tsx index 3e3618624b..6eb6a3f619 100644 --- a/dashboard/src/components/ui/v2/Select/ToggleButton.tsx +++ b/dashboard/src/components/ui/v2/Select/ToggleButton.tsx @@ -1,8 +1,10 @@ import { ChevronDownIcon } from '@/components/ui/v2/icons/ChevronDownIcon'; import { ChevronUpIcon } from '@/components/ui/v2/icons/ChevronUpIcon'; -import type { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled'; -import ButtonUnstyled from '@mui/base/ButtonUnstyled'; -import { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import { + Button as ButtonUnstyled, + type ButtonProps as ButtonUnstyledProps, +} from '@mui/base'; +import { selectClasses as selectUnstyledClasses } from '@mui/base/Select'; import type { SxProps } from '@mui/material'; import { styled } from '@mui/material'; import type { Theme } from '@mui/system'; @@ -24,6 +26,7 @@ export interface ToggleButtonProps Omit, HTMLSpanElement>, 'as'> >; }; + placeholder?: string; } const StyledButton = styled(ButtonUnstyled)(({ theme }) => ({ diff --git a/dashboard/src/components/ui/v2/Switch/Switch.tsx b/dashboard/src/components/ui/v2/Switch/Switch.tsx index 69912534fa..bce798af40 100644 --- a/dashboard/src/components/ui/v2/Switch/Switch.tsx +++ b/dashboard/src/components/ui/v2/Switch/Switch.tsx @@ -1,14 +1,15 @@ import type { FormControlLabelProps } from '@/components/ui/v2/FormControlLabel'; import { FormControlLabel } from '@/components/ui/v2/FormControlLabel'; -import SwitchUnstyled, { - switchUnstyledClasses, -} from '@mui/base/SwitchUnstyled'; -import type { SwitchUnstyledProps } from '@mui/base/SwitchUnstyled/SwitchUnstyled.types'; +import { + Switch as BaseSwitch, + switchClasses as baseSwitchClasses, +} from '@mui/base'; +import type { SwitchProps as BaseSwitchProps } from '@mui/base/Switch'; import { styled } from '@mui/material'; import type { ForwardedRef, PropsWithoutRef } from 'react'; import { forwardRef } from 'react'; -export interface SwitchProps extends SwitchUnstyledProps { +export interface SwitchProps extends BaseSwitchProps { /** * Label to be displayed next to the checkbox. */ @@ -16,11 +17,11 @@ export interface SwitchProps extends SwitchUnstyledProps { /** * Props to be passed to the internal components. */ - slotProps?: SwitchUnstyledProps['slotProps'] & { + slotProps?: BaseSwitchProps['slotProps'] & { /** * Props to be passed to the `Switch` component. */ - root?: Partial; + root?: Partial; /** * Props to be passed to the `FormControlLabel` component. */ @@ -35,23 +36,23 @@ const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({ justifyContent: 'start', })); -const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({ +const StyledSwitch = styled(BaseSwitch)(({ theme }) => ({ position: 'relative', display: 'inline-block', width: '40px', height: '24px', cursor: 'pointer', - [`&.${switchUnstyledClasses.disabled}`]: { + [`&.${baseSwitchClasses.disabled}`]: { cursor: 'not-allowed', - [`& .${switchUnstyledClasses.track}`]: { + [`& .${baseSwitchClasses.track}`]: { backgroundColor: theme.palette.grey[200], color: theme.palette.grey[200], }, }, - [`& .${switchUnstyledClasses.track}`]: { + [`& .${baseSwitchClasses.track}`]: { backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[500] @@ -63,7 +64,7 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({ position: 'absolute', }, - [` & .${switchUnstyledClasses.thumb}`]: { + [` & .${baseSwitchClasses.thumb}`]: { display: 'block', width: '18px', height: '18px', @@ -77,24 +78,24 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({ transitionDuration: '120ms', }, - [`&.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb}`]: { + [`&.${baseSwitchClasses.focusVisible} .${baseSwitchClasses.thumb}`]: { backgroundColor: theme.palette.action.focus, boxShadow: '0 0 1px 8px rgba(0, 0, 0, 0.25)', }, - [`&.${switchUnstyledClasses.checked}`]: { - [`.${switchUnstyledClasses.thumb}`]: { + [`&.${baseSwitchClasses.checked}`]: { + [`.${baseSwitchClasses.thumb}`]: { left: '19px', top: '3px', backgroundColor: theme.palette.common.white, }, - [`.${switchUnstyledClasses.track}`]: { + [`.${baseSwitchClasses.track}`]: { backgroundColor: theme.palette.primary.main, }, - [`&.${switchUnstyledClasses.disabled}`]: { - [`.${switchUnstyledClasses.track}`]: { + [`&.${baseSwitchClasses.disabled}`]: { + [`.${baseSwitchClasses.track}`]: { opacity: 0.5, backgroundColor: theme.palette.mode === 'dark' @@ -104,7 +105,7 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({ }, }, - [`& .${switchUnstyledClasses.input}`]: { + [`& .${baseSwitchClasses.input}`]: { cursor: 'inherit', position: 'absolute', width: '100%', diff --git a/dashboard/src/features/ai/DevAssistant/state/projectMessages.ts b/dashboard/src/features/ai/DevAssistant/state/projectMessages.ts index 748622b069..b4baa1cb18 100644 --- a/dashboard/src/features/ai/DevAssistant/state/projectMessages.ts +++ b/dashboard/src/features/ai/DevAssistant/state/projectMessages.ts @@ -1,7 +1,6 @@ -import { - messagesState, +import messagesState, { type ProjectMessage, -} from '@/features/ai/DevAssistant/state'; +} from '@/features/ai/DevAssistant/state/messages'; import { selectorFamily } from 'recoil'; const projectMessagesState = selectorFamily({ diff --git a/dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx b/dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx index e3e37907b3..87c508fe0c 100644 --- a/dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx +++ b/dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx @@ -196,14 +196,14 @@ export default function EditUserForm({ className="flex flex-col overflow-hidden border-t-1 lg:flex-auto lg:content-between" onSubmit={onSubmit} > - + -
- -
+
+ +
{user.displayName} {user.email} @@ -225,7 +225,7 @@ export default function EditUserForm({ Actions - + - + User ID -
- {user.id} +
+ {user.id} - +
- + Created At {format(new Date(user.createdAt), 'yyyy-MM-dd HH:mm:ss')} - + Last Seen @@ -336,14 +336,14 @@ export default function EditUserForm({ autoComplete="off" /> -
+
Password
diff --git a/dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx b/dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx index 9c7e87c566..62d2a31afe 100644 --- a/dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx +++ b/dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx @@ -14,8 +14,8 @@ import { Text } from '@/components/ui/v2/Text'; import { useMetadataQuery } from '@/features/database/dataGrid/hooks/useMetadataQuery'; import { useTableQuery } from '@/features/database/dataGrid/hooks/useTableQuery'; import { getTruncatedText } from '@/utils/getTruncatedText'; -import type { AutocompleteGroupedOption } from '@mui/base/AutocompleteUnstyled'; -import { useAutocomplete } from '@mui/base/AutocompleteUnstyled'; +import type { AutocompleteGroupedOption } from '@mui/base/useAutocomplete'; +import { useAutocomplete } from '@mui/base/useAutocomplete'; import type { AutocompleteRenderGroupParams } from '@mui/material/Autocomplete'; import { autocompleteClasses } from '@mui/material/Autocomplete'; import type { @@ -366,11 +366,11 @@ function ColumnAutocomplete( ); }} > - + )} - + {defaultTable} diff --git a/dashboard/src/features/database/dataGrid/components/CreateColumnForm/CreateColumnForm.tsx b/dashboard/src/features/database/dataGrid/components/CreateColumnForm/CreateColumnForm.tsx index 5a84b45ab9..39f4eb659d 100644 --- a/dashboard/src/features/database/dataGrid/components/CreateColumnForm/CreateColumnForm.tsx +++ b/dashboard/src/features/database/dataGrid/components/CreateColumnForm/CreateColumnForm.tsx @@ -14,6 +14,7 @@ import { triggerToast } from '@/utils/toast'; import { yupResolver } from '@hookform/resolvers/yup'; import { useRouter } from 'next/router'; import { FormProvider, useForm } from 'react-hook-form'; +import type * as Yup from 'yup'; export interface CreateColumnFormProps extends Pick { @@ -50,7 +51,9 @@ export default function CreateColumnForm({ resetForeignKeyError(); } - const form = useForm({ + const form = useForm< + BaseColumnFormValues | Yup.InferType + >({ defaultValues: { name: '', type: null, diff --git a/dashboard/src/features/database/dataGrid/components/CreateForeignKeyForm/CreateForeignKeyForm.tsx b/dashboard/src/features/database/dataGrid/components/CreateForeignKeyForm/CreateForeignKeyForm.tsx index 94c167558d..5c4d2e4ffa 100644 --- a/dashboard/src/features/database/dataGrid/components/CreateForeignKeyForm/CreateForeignKeyForm.tsx +++ b/dashboard/src/features/database/dataGrid/components/CreateForeignKeyForm/CreateForeignKeyForm.tsx @@ -11,6 +11,7 @@ import { import { yupResolver } from '@hookform/resolvers/yup'; import { useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import type * as Yup from 'yup'; export interface CreateForeignKeyFormProps extends Pick< @@ -34,7 +35,10 @@ export default function CreateForeignKeyForm({ }: CreateForeignKeyFormProps) { const [error, setError] = useState(null); - const form = useForm({ + const form = useForm< + | BaseForeignKeyFormValues + | Yup.InferType + >({ defaultValues: { id: null, name: '', diff --git a/dashboard/src/features/database/dataGrid/components/CreateTableForm/CreateTableForm.tsx b/dashboard/src/features/database/dataGrid/components/CreateTableForm/CreateTableForm.tsx index b90bef5b7d..4413bcf6a3 100644 --- a/dashboard/src/features/database/dataGrid/components/CreateTableForm/CreateTableForm.tsx +++ b/dashboard/src/features/database/dataGrid/components/CreateTableForm/CreateTableForm.tsx @@ -16,6 +16,7 @@ import { triggerToast } from '@/utils/toast'; import { yupResolver } from '@hookform/resolvers/yup'; import { useRouter } from 'next/router'; import { FormProvider, useForm } from 'react-hook-form'; +import type * as Yup from 'yup'; export interface CreateTableFormProps extends Pick { @@ -53,7 +54,9 @@ export default function CreateTableForm({ const error = createTableError || trackTableError || foreignKeyError; - const form = useForm({ + const form = useForm< + BaseTableFormValues | Yup.InferType + >({ defaultValues: { columns: [ { diff --git a/dashboard/src/features/database/dataGrid/components/DataBrowserSidebar/DataBrowserSidebar.tsx b/dashboard/src/features/database/dataGrid/components/DataBrowserSidebar/DataBrowserSidebar.tsx index d121b3fde6..6578e213b0 100644 --- a/dashboard/src/features/database/dataGrid/components/DataBrowserSidebar/DataBrowserSidebar.tsx +++ b/dashboard/src/features/database/dataGrid/components/DataBrowserSidebar/DataBrowserSidebar.tsx @@ -241,7 +241,7 @@ function DataBrowserSidebarContent({ ) { openDrawer({ title: ( - + Permissions {table} @@ -263,12 +263,12 @@ function DataBrowserSidebarContent({ } return ( - + {schemas && schemas.length > 0 && ( +
{ - const [flag, , country] = (option?.label as any[]) || []; - - return ( - - {flag} - - {isValidElement(country) - ? cloneElement(country, { - ...country.props, - variant: 'body1', - }) - : null} + renderValue={() => ( +
+ + {`${selectedRegion.name} - ); - }} + + + {selectedRegion.name} + +
+ )} > {regionOptions.map((option) => (