Merge pull request #1987 from nhost/changeset-release/main

chore: update versions

.github/actions/install-dependencies/action.yaml

@@ -14,7 +14,7 @@ runs:
   steps:
     - uses: pnpm/action-setup@v2.2.4
       with:
-        version: 7.17.0
+        version: 8.6.0
         run_install: false
     - name: Get pnpm cache directory
       id: pnpm-cache-dir

.github/actions/nhost-cli/action.yaml

@@ -49,21 +49,9 @@ runs:
       if: ${{ inputs.start == 'true' }}
       shell: bash
       working-directory: ${{ inputs.path }}
-      run: nhost dev --no-browser &
-    - name: Wait for the app to be ready
-      id: wait
-      if: ${{ inputs.start == 'true' && inputs.wait == 'true' }}
-      shell: bash
-      working-directory: ${{ inputs.path }}
-      continue-on-error: true
       run: |
-        curl -sSf --connect-timeout 3 \
-          --max-time 5 \
-          --retry 300 \
-          --retry-delay 1 \
-          --retry-max-time 300 \
-          --retry-connrefused \
-          'http://localhost:9695' > /dev/null
+        cp .secrets.example .secrets
+        nhost up
     - name: Log on failure
       if: steps.wait.outcome == 'failure'
       shell: bash

.github/stale.yml

@@ -0,0 +1,16 @@
+# Configuration for probot-stale - https://github.com/probot/stale
+
+daysUntilStale: 180
+daysUntilClose: 7
+limitPerRun: 30
+onlyLabels: []
+exemptLabels: []
+
+exemptProjects: false
+exemptMilestones: false
+exemptAssignees: false
+staleLabel: stale
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.

.github/workflows/ci.yaml

@@ -43,7 +43,7 @@ jobs:
           BUILD: 'all'
       - name: Check if the pnpm lockfile changed
         id: changed-lockfile
-        uses: tj-actions/changed-files@v35
+        uses: tj-actions/changed-files@v36
         with:
           files: pnpm-lock.yaml
       # * Determine a pnpm filter argument for packages that have been modified.

.github/workflows/test-nhost-cli-action.yaml

@@ -28,7 +28,7 @@ jobs:
           path: packages/nhost-js
           start: true
       - name: should be running
-        run: curl -sSf 'http://localhost:9695' > /dev/null
+        run: curl -sSf 'https://local.hasura.nhost.run' > /dev/null
 
   stop:
     runs-on: ubuntu-latest
@@ -48,28 +48,6 @@ jobs:
             exit 1
           fi
 
-  wait:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Install the Nhost CLI and start the application
-        uses: ./.github/actions/nhost-cli
-        with:
-          path: packages/nhost-js
-          start: true
-          wait: false
-      - name: should not be ready
-        run: curl -sSf -o /dev/null 'http://localhost:9695' > /dev/null && exit 1 || true
-      - name: should eventually be ready
-        run: |
-          curl -sSf --connect-timeout 3 \
-            --max-time 5 \
-            --retry 300 \
-            --retry-delay 1 \
-            --retry-max-time 300 \
-            --retry-connrefused \
-            'http://localhost:9695' > /dev/null
-
   config:
     runs-on: ubuntu-latest
     steps:
@@ -79,14 +57,10 @@ jobs:
         with:
           path: packages/nhost-js
           start: true
-          config: |
-            services:
-              auth:
-                image: nhost/hasura-auth:0.15.0
       - name: should find the injected hasura-auth version
         run: |
-          VERSION=$(curl -sSf 'http://localhost:1337/v1/auth/version')
-          EXPECTED_VERSION='{"version":"v0.15.0"}'
+          VERSION=$(curl -sSf 'https://local.auth.nhost.run/v1/version')
+          EXPECTED_VERSION='{"version":"v0.20.1"}'
           if [ "$VERSION" != "$EXPECTED_VERSION" ]; then
             echo "Expected version $EXPECTED_VERSION but got $VERSION"
             exit 1
@@ -99,6 +73,6 @@ jobs:
       - name: Install the Nhost CLI
         uses: ./.github/actions/nhost-cli
         with:
-          version: v0.8.10
+          version: v1.0.1
       - name: should find the correct version
-        run: nhost version | head -n 1 | grep v0.8.10 || exit 1
+        run: nhost --version | head -n 1 | grep v1.0.1 || exit 1

.gitignore

@@ -26,6 +26,7 @@ tmp/
 .pnpm-store
 .turbo
 .env
+.secrets
 out/
 
 # Custom

config/vite.lib.config.js

@@ -36,6 +36,7 @@ export default defineConfig({
     }
   },
   build: {
+    target: 'es2019',
     sourcemap: true,
     lib: {
       entry,

dashboard/.eslintrc.js

@@ -28,7 +28,6 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     curly: ['error', 'all'],
-    'no-restricted-exports': 'off',
     'no-undef': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': [
@@ -67,17 +66,7 @@ module.exports = {
           {
             group: ['..*'],
             message:
-              'Please use absolute imports instead. (e.g: @/ui/, @/hooks/, etc.)',
-          },
-          {
-            group: ['@/components/ui', '@/components/ui/*'],
-            message:
-              'Please use shorthand imports instead. (e.g: @/ui/ActivityIndicator, @/ui/Button, etc.)',
-          },
-          {
-            group: ['@/components/ui/v2*'],
-            message:
-              'Please use shorthand imports instead. (e.g: @/ui/v2/ActivityIndicator, @/ui/v2/Button, etc.)',
+              'Please use absolute imports instead. (e.g: @/components/, @/hooks/, etc.)',
           },
           {
             group: ['@testing-library/react*'],

dashboard/CHANGELOG.md

@@ -1,5 +1,155 @@
 # @nhost/dashboard
 
+## 0.17.3
+
+### Patch Changes
+
+- 01eeef9de: chore(misc): under the hood improvements
+- 21e13db05: chore(deps): bump `@types/react` to `v18.2.7` and `turbo` to `v1.10.1`
+- f16433ae6: chore(secrets): allow empty secrets and environment variables
+- aa3c62989: chore(cli): bump Nhost CLI version to v1.0
+  - @nhost/react-apollo@5.0.24
+  - @nhost/nextjs@1.13.26
+
+## 0.17.2
+
+### Patch Changes
+
+- 88a4983f: chore(misc): under the hood improvements
+
+## 0.17.1
+
+### Patch Changes
+
+- 9b0d4dde: feat(secrets): enable secrets
+
+## 0.17.0
+
+### Minor Changes
+
+- 15d84a19: Add postgres 14.6-20230525
+
+## 0.16.14
+
+### Patch Changes
+
+- 4c626174: chore: updated import paths, improved directory structure
+- cc047b71: chore(deps): bump `@fontsource` monorepo to `v5.0.0`
+- 99edd012: feat(account): add support for personal access tokens
+
+## 0.16.13
+
+### Patch Changes
+
+- 78c7109c: feat(settings): allow selecting service versions
+
+## 0.16.12
+
+### Patch Changes
+
+- 399009d6: fix(gql): don't enter an infinite loop when fetching remote app data
+- 329e5a91: fix(deployments): use the same sorting of deployments everywhere
+- 6d559d6e: chore(settings): add under the hood improvements to the settings page
+- 12eb236c: chore(deps): bump `prettier-plugin-tailwindcss` to `v0.3.0`
+- f9b81a2a: chore(deps): bump `turbo` to `v1.9.8`
+- 1345741b: fix(projects): don't redirect to 404 on project creation
+- Updated dependencies [7fea29a8]
+  - @nhost/react-apollo@5.0.23
+  - @nhost/nextjs@1.13.25
+
+## 0.16.11
+
+### Patch Changes
+
+- 1230b722: fix(projects): don't redirect to 404 on when the project is renamed
+  - @nhost/react-apollo@5.0.22
+  - @nhost/nextjs@1.13.24
+
+## 0.16.10
+
+### Patch Changes
+
+- Updated dependencies [da03bf39]
+  - @nhost/react-apollo@5.0.21
+  - @nhost/nextjs@1.13.23
+
+## 0.16.9
+
+### Patch Changes
+
+- 349aac36: fix(settings): use region domain when constructing the postgres connection string
+
+## 0.16.8
+
+### Patch Changes
+
+- 20fb69fa: chore(projects): change the way how API URLs are constructed
+
+## 0.16.7
+
+### Patch Changes
+
+- 49f9b837: chore(docker): bump `pnpm` to `v8.4.0` and `turbo` to `v1.9.3`
+- 3f478a4e: chore(deps): bump `vitest` to `v0.31.0`, `@types/react` to `v18.2.6` and `@types/react-dom` to `v18.2.4`
+
+## 0.16.6
+
+### Patch Changes
+
+- d926f156: fix(projects): redirect to 404 when an invalid project is opened
+- 49b99728: fix(projects): disable features for non-owner members of workspaces
+
+## 0.16.5
+
+### Patch Changes
+
+- 12e2855f: chore(deps): bump `jsdom` to v22
+- e4972b83: feat(metrics): add Grafana page
+
+## 0.16.4
+
+### Patch Changes
+
+- 3f396a9e: fix(projects): unpause after upgrading a paused project to pro
+- 3f396a9e: fix(projects): don't redirect to 404 page after project creation
+
+## 0.16.3
+
+### Patch Changes
+
+- Updated dependencies [90c60311]
+  - @nhost/react-apollo@5.0.20
+  - @nhost/nextjs@1.13.22
+
+## 0.16.2
+
+### Patch Changes
+
+- 0f34f0c6: fix(projects): disallow downgrading to free plan
+- 8da291ad: chore(deps): bump `@types/react` to v18.2.0 and `@types/react-dom` to v18.2.1
+
+## 0.16.1
+
+### Patch Changes
+
+- adc828a5: fix(gql): don't enter an infinite loop when fetching remote app data
+
+## 0.16.0
+
+### Minor Changes
+
+- 2fb1145f: feat(compute): add support for replicas
+
+### Patch Changes
+
+- d8ceccec: chore(env): remove deprecated `NHOST_BACKEND_URL` environment variable
+
+## 0.15.2
+
+### Patch Changes
+
+- 84b84ab7: fix(projects): filter projects by workspace
+
 ## 0.15.1
 
 ### Patch Changes

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.8.6
+RUN yarn global add turbo@1.10.1
 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@7.17.0
+RUN yarn global add pnpm@8.6.0
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .

dashboard/README.md

@@ -13,7 +13,7 @@ pnpm install
 
 Depending on the environment you wish to target you can configure environment variables in `.env.<target_environment>.local`.
 
-- `.env.development`: This file is used if you run `nhost dev`
+- `.env.development`: This file is used if you run `nhost up`
 - `.env.development.local`: This file is used if you run `pnpm dev`. It takes precedence over `.env.local` if available.
 - `.env.production.local`: This file is used if you run `pnpm build`. It takes precedence over `.env.local` if available.
 - `.env.local`: This file is used if you run either `pnpm dev` or `pnpm build`.
@@ -27,7 +27,7 @@ You can connect the Nhost Dashboard to your **locally running** Nhost backend in
 First, you need to run the following command to start your backend locally:
 
 ```bash
-cd <your_nhost_project> && nhost dev
+cd <your_nhost_project> && nhost up
 ```
 
 You can connect the Nhost Dashboard to your locally running backend by setting the following environment variables in `.env.development.local`:
@@ -92,7 +92,7 @@ pnpm storybook
 | Name                                         | Description                                                                                                                                                  |
 | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `react/react-in-jsx-scope`                   | Disabled because we don't need to import `React` anymore.                                                                                                    |
-| `react/jsx-props-no-spreading`               | Disabled because we heavily rely on props spreading in our `@/ui/v2` components.                                                                             |
+| `react/jsx-props-no-spreading`               | Disabled because we heavily rely on props spreading in our `@/components/ui/v2` components.                                                                  |
 | `react/require-default-props`                | Disabled because we use TypeScript instead of PropTypes.                                                                                                     |
 | `react-hooks/exhaustive-deps`                | Because we already had several rule violations when proper ESLint rules were introduced, we changed this rule to a warning.                                  |
 | `import/extensions`                          | JS / TS files should be imported without file extensions.                                                                                                    |
@@ -101,7 +101,6 @@ pnpm storybook
 | `import/order`                               | Until we have a better auto-formatter, we disable this rule.                                                                                                 |
 | `import/no-extraneous-dependencies`          | `devDependencies` should be excluded from the list of disallowed imports.                                                                                    |
 | `curly`                                      | By default it only enforces curly braces for multi-line blocks, but it should be enforced for single-line blocks as well.                                    |
-| `no-restricted-exports`                      | `export { default } from './module'` is used heavily in `@/ui/v2` which is a restricted export by default.                                                   |
 | `@typescript-eslint/no-use-before-define`    | Order of type references should be ignored.                                                                                                                  |
 | `no-undef`                                   | [Official TypeScript ESLint packages](https://github.com/typescript-eslint/typescript-eslint/issues/4671#issuecomment-1065948494) are turning off this rule. |
 | `@typescript-eslint/no-shadow`               | TypeScript specific implementation of `no-shadow`.                                                                                                           |

dashboard/e2e/account/pat/manage-pat.test.ts

@@ -0,0 +1,51 @@
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to create then delete a personal access token', async () => {
+  await page.waitForLoadState('networkidle');
+  await page.getByRole('banner').getByRole('button').last().click();
+  await page.getByRole('link', { name: /account settings/i }).click();
+  await page
+    .getByRole('button', { name: /create personal access token/i })
+    .click();
+
+  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.getByRole('option', { name: /7 days/i }).click();
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByText(
+      /this token will not be shown again. make sure to copy it now./i,
+    ),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /close/i }).click();
+
+  await expect(page.getByText(patName)).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `More options for ${patName}`, exact: true })
+    .click();
+  await page.getByRole('menuitem', { name: /delete/i }).click();
+  await page.getByRole('button', { name: /delete/i }).click();
+
+  await expect(page.getByText(patName)).not.toBeVisible();
+});

dashboard/e2e/overview/overview.test.ts

@@ -30,7 +30,7 @@ test('should show a sidebar with menu items', async () => {
   const navLocator = page.getByRole('navigation', { name: /main navigation/i });
   await expect(navLocator).toBeVisible();
   await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
-    10,
+    11,
   );
   await expect(
     navLocator.getByRole('link', { name: /overview/i }),
@@ -53,6 +53,9 @@ test('should show a sidebar with menu items', async () => {
     navLocator.getByRole('link', { name: /backups/i }),
   ).toBeVisible();
   await expect(navLocator.getByRole('link', { name: /logs/i })).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /metrics/i }),
+  ).toBeVisible();
   await expect(
     navLocator.getByRole('link', { name: /settings/i }),
   ).toBeVisible();

dashboard/global-teardown.ts

@@ -46,7 +46,7 @@ async function globalTeardown() {
   await hasuraPage.locator('a', { hasText: /data/i }).click();
   await hasuraPage.getByRole('link', { name: /sql/i }).click();
 
-  await hasuraPage.getByRole('textbox').fill(`
+  await hasuraPage.locator('#raw_sql > textarea').fill(`
 DO $$ DECLARE
   tablename text;
 BEGIN

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.15.1",
+  "version": "0.17.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -11,11 +11,11 @@
     "lint": "next lint --max-warnings 0",
     "test": "vitest",
     "codegen": "graphql-codegen --config graphql.config.yaml --errors-only",
-    "nhost:dev": "nhost dev -d",
+    "nhost:dev": "nhost up",
     "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
-    "e2e": "npx playwright@1.31.2 install --with-deps && playwright test"
+    "e2e": "npx playwright@1.34.0 install --with-deps && playwright test"
   },
   "dependencies": {
     "@apollo/client": "^3.7.10",
@@ -24,8 +24,8 @@
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.5",
-    "@fontsource/inter": "^4.5.14",
-    "@fontsource/roboto-mono": "^4.5.8",
+    "@fontsource/inter": "^5.0.0",
+    "@fontsource/roboto-mono": "^5.0.0",
     "@graphiql/react": "^0.17.0",
     "@graphiql/toolkit": "^0.8.2",
     "@headlessui/react": "^1.6.5",
@@ -84,11 +84,10 @@
     "@faker-js/faker": "^7.6.0",
     "@graphql-codegen/cli": "^3.0.0",
     "@graphql-codegen/typescript": "^3.0.0",
-    "@graphql-codegen/typescript-graphql-request": "^4.5.1",
     "@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.2",
+    "@playwright/test": "^1.34.0",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -105,15 +104,15 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.37",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.7",
+    "@types/react-dom": "18.2.4",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-c8": "^0.30.0",
+    "@vitest/coverage-c8": "^0.31.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -129,7 +128,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jsdom": "^21.0.0",
+    "jsdom": "^22.0.0",
     "lint-staged": ">=13",
     "msw": "^1.0.1",
     "msw-storybook-addon": "^1.6.3",
@@ -137,7 +136,7 @@
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.2.0",
-    "prettier-plugin-tailwindcss": "^0.2.0",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",
@@ -147,8 +146,7 @@
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "vite": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.30.0",
-    "webpack": "^5.75.0"
+    "vitest": "^0.31.0"
   },
   "browserslist": {
     "production": [

dashboard/src/components/applications/ChangePasswordModal.tsx

@@ -1,120 +0,0 @@
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
-import { nhost } from '@/utils/nhost';
-import { triggerToast } from '@/utils/toast';
-import React, { useState } from 'react';
-
-export function ChangePasswordModal({ close }: any) {
-  const [formState, setFormState] = useState<{
-    loading: boolean;
-    error: null | string;
-  }>({
-    loading: false,
-    error: null,
-  });
-
-  const [newPassword, setNewPassword] = useState('');
-  const [newPasswordConfirm, setNewPasswordConfirm] = useState('');
-
-  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    setFormState({
-      loading: true,
-      error: null,
-    });
-
-    if (newPassword !== newPasswordConfirm) {
-      setFormState({
-        loading: false,
-        error: 'Passwords do not match',
-      });
-
-      return;
-    }
-
-    const { error } = await nhost.auth.changePassword({ newPassword });
-
-    if (error) {
-      setFormState({
-        loading: false,
-        error: error.message,
-      });
-
-      return;
-    }
-
-    triggerToast(`Your password has been updated`);
-    close();
-  };
-
-  return (
-    <Box className="w-full max-w-md rounded-md px-6 py-6 text-left">
-      <form onSubmit={handleSubmit}>
-        <div className="grid grid-flow-row gap-4">
-          <div className="grid grid-flow-row gap-2">
-            <Text variant="h3">Choose New Password</Text>
-
-            <Text className="mt-2 font-normal">
-              Make sure to pick a strong password with at least 8 characters.
-            </Text>
-          </div>
-
-          <div className="grid grid-flow-row gap-2">
-            <Input
-              type="password"
-              id="newPassword"
-              name="newPassword"
-              label="New Password"
-              placeholder="New password"
-              autoFocus
-              value={newPassword}
-              onChange={(event) => setNewPassword(event.target.value)}
-              hideEmptyHelperText
-              fullWidth
-              required
-            />
-
-            <Input
-              type="password"
-              id="confirmNewPassword"
-              name="confirmNewPassword"
-              label="Confirm New Password"
-              placeholder="Confirm new password"
-              value={newPasswordConfirm}
-              onChange={(event) => setNewPasswordConfirm(event.target.value)}
-              hideEmptyHelperText
-              fullWidth
-              required
-            />
-          </div>
-
-          <div className="grid grid-flow-row gap-2">
-            {formState.error && (
-              <Text className="w-full px-4 text-center" color="error">
-                Error: {formState.error}
-              </Text>
-            )}
-
-            <Button type="submit" loading={formState.loading}>
-              Set New Password
-            </Button>
-
-            <Button
-              type="reset"
-              variant="outlined"
-              color="secondary"
-              onClick={close}
-            >
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </form>
-    </Box>
-  );
-}
-
-export default ChangePasswordModal;

dashboard/src/components/applications/StagingMetadata.tsx

@@ -1,19 +0,0 @@
-import Status, { StatusEnum } from '@/ui/Status';
-import Box from '@/ui/v2/Box';
-import { isDevOrStaging } from '@/utils/helpers';
-import type { PropsWithChildren } from 'react';
-
-export function StagingMetadata({ children }: PropsWithChildren<unknown>) {
-  return (
-    isDevOrStaging() && (
-      <div className="mx-auto mt-10 max-w-sm">
-        <Box className="mx-auto flex flex-col rounded-md border p-5 text-center">
-          <Status status={StatusEnum.Deploying}>Internal info</Status>
-          {children}
-        </Box>
-      </div>
-    )
-  );
-}
-
-export default StagingMetadata;

dashboard/src/components/applications/UnlockFeatureByUpgrading.tsx

@@ -1,45 +0,0 @@
-import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
-import { useDialog } from '@/components/common/DialogProvider';
-import { Alert } from '@/ui/Alert';
-import Button from '@/ui/v2/Button';
-import Text from '@/ui/v2/Text';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface UnlockFeatureByUpgradingProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {
-  /**
-   * Message to display in the alert.
-   */
-  message: string;
-}
-
-export function UnlockFeatureByUpgrading({
-  message,
-  className,
-  ...props
-}: UnlockFeatureByUpgradingProps) {
-  const { openDialog } = useDialog();
-
-  return (
-    <div className={twMerge('flex', className)} {...props}>
-      <Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
-        <Text className="text-left">{message}</Text>
-
-        <Button
-          variant="borderless"
-          onClick={() => {
-            openDialog({
-              component: <ChangePlanModal />,
-              props: {
-                PaperProps: { className: 'p-0 max-w-xl w-full' },
-              },
-            });
-          }}
-        >
-          Upgrade
-        </Button>
-      </Alert>
-    </div>
-  );
-}

dashboard/src/components/applications/github/CheckGithubConfiguration.tsx

@@ -1,23 +0,0 @@
-import Link from '@/ui/v2/Link';
-import Text from '@/ui/v2/Text';
-
-export function CheckGithubConfiguration() {
-  return (
-    <Text className="mt-2 text-center text-xs">
-      Do you miss a repository, or do you need to connect another GitHub
-      account?{' '}
-      <Link
-        href={process.env.NEXT_PUBLIC_GITHUB_APP_INSTALL_URL}
-        target="_blank"
-        rel="noreferrer noopener"
-        className="text-xs font-medium"
-        underline="hover"
-      >
-        Manage your GitHub configuration
-      </Link>
-      .
-    </Text>
-  );
-}
-
-export default CheckGithubConfiguration;

dashboard/src/components/applications/github/GitHubInstallNhostApplication.tsx

@@ -1,35 +0,0 @@
-import GithubIcon from '@/components/icons/GithubIcon';
-import Button from '@/ui/v2/Button';
-import ArrowSquareOutIcon from '@/ui/v2/icons/ArrowSquareOutIcon';
-import Text from '@/ui/v2/Text';
-
-export default function GitHubInstallNhostApplication() {
-  return (
-    <div className="grid grid-flow-row justify-center gap-2 p-0.5">
-      <GithubIcon className="mx-auto h-8 w-8" />
-
-      <div className="text-center">
-        <Text variant="h3" component="h2">
-          Install the Nhost GitHub Application
-        </Text>
-
-        <Text variant="subtitle2">
-          Install the Nhost application on your GitHub account and update
-          permissions to automatically track repositories.
-        </Text>
-      </div>
-
-      <Button
-        href={process.env.NEXT_PUBLIC_GITHUB_APP_INSTALL_URL}
-        // Both `target` and `rel` are available when `href` is set. This is
-        // a limitation of MUI.
-        // @ts-ignore
-        target="_blank"
-        rel="noreferrer noopener"
-        endIcon={<ArrowSquareOutIcon className="h-4 w-4" />}
-      >
-        Configure the Nhost application on GitHub
-      </Button>
-    </div>
-  );
-}

dashboard/src/components/applications/github/GitHubNoRepositoriesAdded.tsx

@@ -1,62 +0,0 @@
-import { Avatar } from '@/ui/Avatar';
-import Divider from '@/ui/v2/Divider';
-import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
-import Link from '@/ui/v2/Link';
-import List from '@/ui/v2/List';
-import { ListItem } from '@/ui/v2/ListItem';
-import Text from '@/ui/v2/Text';
-import { Fragment } from 'react';
-
-export function GitHubNoRepositoriesAdded({
-  filteredGitHubAppInstallations,
-}: any) {
-  return (
-    <div>
-      <Text className="mt-1 text-center text-lg font-medium">
-        No repositories found
-      </Text>
-
-      <Text className="text-center text-xs">
-        Check the Nhost app&apos;s settings on your GitHub account, or install
-        the app on a new account.
-      </Text>
-
-      <List className="my-2 border-y">
-        {filteredGitHubAppInstallations.map((githubApp, index) => (
-          <Fragment key={githubApp.id}>
-            <ListItem.Root
-              key={githubApp.id}
-              className="grid grid-flow-col gap-2 py-2.5 justify-start items-center"
-            >
-              <ListItem.Avatar>
-                <Avatar
-                  avatarUrl={githubApp.accountAvatarUrl as string}
-                  className="mr-1 h-5 w-5"
-                />
-              </ListItem.Avatar>
-
-              <ListItem.Text primary={githubApp.accountLogin} />
-            </ListItem.Root>
-
-            {index < filteredGitHubAppInstallations.length - 1 && (
-              <Divider component="li" />
-            )}
-          </Fragment>
-        ))}
-      </List>
-
-      <Link
-        href={process.env.NEXT_PUBLIC_GITHUB_APP_INSTALL_URL}
-        target="_blank"
-        rel="noreferrer noopener"
-        underline="hover"
-        className="grid grid-flow-col gap-1 items-center justify-start"
-      >
-        <PlusCircleIcon className="w-4 h-4" />
-        Configure the Nhost application on GitHub.
-      </Link>
-    </div>
-  );
-}
-
-export default GitHubNoRepositoriesAdded;

dashboard/src/components/common/Breadcrumbs/index.ts

@@ -1,2 +0,0 @@
-export * from './Breadcrumbs';
-export { default } from './Breadcrumbs';

dashboard/src/components/common/ControlledAutocomplete/index.ts

@@ -1,2 +0,0 @@
-export * from './ControlledAutocomplete';
-export { default } from './ControlledAutocomplete';

dashboard/src/components/common/ControlledCheckbox/index.ts

@@ -1,2 +0,0 @@
-export * from './ControlledCheckbox';
-export { default } from './ControlledCheckbox';

dashboard/src/components/common/ControlledSelect/index.ts

@@ -1,2 +0,0 @@
-export * from './ControlledSelect';
-export { default } from './ControlledSelect';

dashboard/src/components/common/ControlledSwitch/index.ts

@@ -1,2 +0,0 @@
-export * from './ControlledSwitch';
-export { default } from './ControlledSwitch';

dashboard/src/components/common/DataGrid/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGrid';
-export { default } from './DataGrid';

dashboard/src/components/common/DataGridBody/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridBody';
-export { default } from './DataGridBody';

dashboard/src/components/common/DataGridBooleanCell/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridBooleanCell';
-export { default } from './DataGridBooleanCell';

dashboard/src/components/common/DataGridDateCell/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridDateCell';
-export { default } from './DataGridDateCell';

dashboard/src/components/common/DataGridFrame/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridFrame';
-export { default } from './DataGridFrame';

dashboard/src/components/common/DataGridHeader/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridHeader';
-export { default } from './DataGridHeader';

dashboard/src/components/common/DataGridNumericCell/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridNumericCell';
-export { default } from './DataGridNumericCell';

dashboard/src/components/common/DataGridPagination/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridPagination';
-export { default } from './DataGridPagination';

dashboard/src/components/common/DataGridPreviewCell/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridPreviewCell';
-export { default } from './DataGridPreviewCell';

dashboard/src/components/common/DataGridTextCell/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGridTextCell';
-export { default } from './DataGridTextCell';

dashboard/src/components/common/DesktopNav/index.ts

@@ -1,2 +0,0 @@
-export * from './DesktopNav';
-export { default } from './DesktopNav';

dashboard/src/components/common/DialogProvider/DialogContext.ts

@@ -1,5 +1,5 @@
+import type { CommonDialogProps } from '@/components/ui/v2/Dialog';
 import type { DialogFormProps } from '@/types/common';
-import type { CommonDialogProps } from '@/ui/v2/Dialog';
 import type { ReactElement, ReactNode } from 'react';
 import { createContext } from 'react';
 

dashboard/src/components/common/DialogProvider/DialogProvider.tsx

@@ -1,7 +1,7 @@
-import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
-import AlertDialog from '@/ui/v2/AlertDialog';
-import { BaseDialog } from '@/ui/v2/Dialog';
-import Drawer from '@/ui/v2/Drawer';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { AlertDialog } from '@/components/ui/v2/AlertDialog';
+import { BaseDialog } from '@/components/ui/v2/Dialog';
+import { Drawer } from '@/components/ui/v2/Drawer';
 import { useRouter } from 'next/router';
 import type { BaseSyntheticEvent, PropsWithChildren } from 'react';
 import {

dashboard/src/components/common/DialogProvider/dialogReducers.ts

@@ -1,4 +1,4 @@
-import type { CommonDialogProps } from '@/ui/v2/Dialog';
+import type { CommonDialogProps } from '@/components/ui/v2/Dialog';
 import type { ReactElement, ReactNode } from 'react';
 import type { DialogConfig, OpenDialogOptions } from './DialogContext';
 

dashboard/src/components/common/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -1,11 +0,0 @@
-import ErrorMessage from '@/components/common/ErrorMessage';
-import type { FallbackProps } from 'react-error-boundary';
-
-export default function ErrorBoundaryFallback({
-  error,
-  resetErrorBoundary,
-}: FallbackProps) {
-  return (
-    <ErrorMessage onReset={resetErrorBoundary}>{error.message}</ErrorMessage>
-  );
-}

dashboard/src/components/common/ErrorBoundaryFallback/index.ts

@@ -1 +0,0 @@
-export { default } from './ErrorBoundaryFallback';

dashboard/src/components/common/ErrorMessage/index.ts

@@ -1,2 +0,0 @@
-export * from './ErrorMessage';
-export { default } from './ErrorMessage';

dashboard/src/components/common/FeedbackForm/FeedbackForm.tsx

@@ -1,5 +1,11 @@
-import { FeedbackReceived } from '@/components/home/FeedbackReceived';
-import { SendFeedback } from '@/components/home/SendFeedback';
+import { Avatar } from '@/components/ui/v2/Avatar';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useInsertFeedbackOneMutation } from '@/utils/__generated__/graphql';
+import { useUserData } from '@nhost/nextjs';
+import Image from 'next/image';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -7,25 +13,136 @@ import { twMerge } from 'tailwind-merge';
 export interface FeedbackFormProps
   extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
 
-// TODO: Use `react-hook-form` here instead of the custom solution
+// TODO: Use `react-hook-form` here instead of the custom form implementation
 export default function FeedbackForm({
   className,
   ...props
 }: FeedbackFormProps) {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [insertFeedback, { loading }] = useInsertFeedbackOneMutation();
+  const user = useUserData();
+
   const [feedback, setFeedback] = useState('');
   const [feedbackSent, setFeedbackSent] = useState(false);
 
-  return (
-    <div className={twMerge('max-w-md py-4 px-5', className)} {...props}>
-      {!feedbackSent ? (
-        <SendFeedback
-          setFeedbackSent={setFeedbackSent}
-          feedback={feedback}
-          setFeedback={setFeedback}
+  function handleClose() {
+    setTimeout(() => {
+      setFeedbackSent(false);
+    }, 500);
+  }
+
+  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const feedbackWithProjectInfo = [
+      currentProject && `Project ID: ${currentProject.id}`,
+      typeof window !== 'undefined' && `URL: ${window.location.href}`,
+      feedback,
+    ]
+      .filter(Boolean)
+      .join('\n\n');
+
+    try {
+      await insertFeedback({
+        variables: {
+          feedback: {
+            feedback: feedbackWithProjectInfo,
+          },
+        },
+      });
+      setFeedbackSent(true);
+      setFeedback('');
+    } catch (error) {
+      // TODO: Display error to user and use a logging solution
+    }
+  }
+
+  if (feedbackSent) {
+    return (
+      <div
+        className={twMerge(
+          'grid max-w-md grid-flow-row justify-center gap-4 py-4 px-5 text-center',
+          className,
+        )}
+        {...props}
+      >
+        <Image
+          src="/assets/FeedbackReceived.svg"
+          alt="Light bulb with a checkmark"
+          width={72}
+          height={72}
         />
-      ) : (
-        <FeedbackReceived setFeedbackSent={setFeedbackSent} close={() => {}} />
+
+        <div className="grid grid-flow-row gap-2">
+          <Text variant="h3" component="h2" className="text-center">
+            Feedback Received
+          </Text>
+
+          <Text>
+            Thanks for sending us your thoughts! Feel free to send more feedback
+            as you explore the beta, and stay tuned for updates.
+          </Text>
+        </div>
+
+        <Button
+          variant="outlined"
+          color="secondary"
+          className="mt-2 text-sm+ font-normal"
+          onClick={handleClose}
+        >
+          Go Back
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={twMerge(
+        'grid max-w-md grid-flow-row gap-2 py-4 px-5',
+        className,
       )}
+      {...props}
+    >
+      <Text variant="h3" component="h2">
+        Leave Feedback
+      </Text>
+
+      <Text>
+        Nhost is still in beta and not everything is in place yet, but we&apos;d
+        love to know what you think of it so far.
+      </Text>
+
+      <form onSubmit={handleSubmit} className="grid grid-flow-row gap-2">
+        <div className="grid grid-flow-col place-content-between gap-2">
+          <Text className="font-medium">
+            What do you think we should improve?
+          </Text>
+
+          <Avatar
+            className="h-6 w-6 rounded-full"
+            alt={user?.displayName}
+            src={user?.avatarUrl}
+          >
+            {user?.displayName}
+          </Avatar>
+        </div>
+
+        <Input
+          multiline
+          value={feedback}
+          onChange={(event) => setFeedback(event.target.value)}
+          placeholder="Your feedback"
+          rows={6}
+          required
+          fullWidth
+          hideEmptyHelperText
+        />
+
+        <Button type="submit" disabled={!feedback} loading={loading}>
+          Send Feedback
+        </Button>
+      </form>
     </div>
   );
 }

dashboard/src/components/common/FeedbackForm/index.ts

@@ -1,2 +1,2 @@
 export * from './FeedbackForm';
-export { default } from './FeedbackForm';
+export { default as FeedbackForm } from './FeedbackForm';

dashboard/src/components/common/Form/index.ts

@@ -1,2 +0,0 @@
-export * from './Form';
-export { default } from './Form';

dashboard/src/components/common/FormActivityIndicator/index.ts

@@ -1,2 +0,0 @@
-export * from './FormActivityIndicator';
-export { default } from './FormActivityIndicator';

dashboard/src/components/common/Header/index.ts

@@ -1,2 +0,0 @@
-export * from './Header';
-export { default } from './Header';

dashboard/src/components/common/HighlightedText/index.ts

@@ -1 +0,0 @@
-export { default } from './HighlightedText';

dashboard/src/components/common/IconLink/IconLink.tsx

@@ -1,6 +1,6 @@
 import type { NavLinkProps } from '@/components/common/NavLink';
-import NavLink from '@/components/common/NavLink';
-import type { SvgIconProps } from '@/ui/v2/icons/SvgIcon';
+import { NavLink } from '@/components/common/NavLink';
+import type { SvgIconProps } from '@/components/ui/v2/icons/SvgIcon';
 import type { ForwardedRef, PropsWithoutRef, ReactElement } from 'react';
 import { cloneElement, forwardRef, isValidElement } from 'react';
 import { twMerge } from 'tailwind-merge';

dashboard/src/components/common/IconLink/index.ts

@@ -1,2 +1,2 @@
 export * from './IconLink';
-export { default } from './IconLink';
+export { default as IconLink } from './IconLink';

dashboard/src/components/common/InlineCode/index.ts

@@ -1,2 +0,0 @@
-export * from './InlineCode';
-export { default } from './InlineCode';

dashboard/src/components/common/InviteNotification/InviteNotification.tsx

@@ -1,23 +1,22 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import {
   GetAllWorkspacesAndProjectsDocument,
   GetWorkspaceMemberInvitesToManageDocument,
   useGetWorkspaceMemberInvitesToManageQuery,
 } from '@/generated/graphql';
-import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useSubmitState } from '@/hooks/useSubmitState';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import Text from '@/ui/v2/Text';
 import { nhost } from '@/utils/nhost';
 import { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
 import { useApolloClient } from '@apollo/client';
 import { alpha } from '@mui/system';
 import { useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-export function InviteAnnounce() {
+export default function InviteNotification() {
   const user = useUserData();
 
   const isPlatform = useIsPlatform();
@@ -28,13 +27,18 @@ export function InviteAnnounce() {
     useSubmitState();
 
   // @FIX: We probably don't want to poll every ten seconds for possible invites. (We can change later depending on how it works in production.) Maybe just on the workspace page?
-  const { data, loading, error, refetch, startPolling } =
-    useGetWorkspaceMemberInvitesToManageQuery({
-      variables: {
-        userId: user?.id,
-      },
-      skip: !isPlatform || !user,
-    });
+  const {
+    data,
+    loading,
+    error,
+    refetch: refetchInvitations,
+    startPolling,
+  } = useGetWorkspaceMemberInvitesToManageQuery({
+    variables: {
+      userId: user?.id,
+    },
+    skip: !isPlatform || !user,
+  });
 
   useEffect(() => {
     startPolling(15000);
@@ -79,9 +83,14 @@ export function InviteAnnounce() {
       });
     }
 
-    await updateOwnCache(client);
+    await client.refetchQueries({
+      include: [
+        GetAllWorkspacesAndProjectsDocument,
+        GetWorkspaceMemberInvitesToManageDocument,
+      ],
+    });
     await router.push(`/${invite.workspace.slug}`);
-    await refetch();
+    await refetchInvitations();
     triggerToast('Workspace invite accepted');
     return setSubmitState({
       error: null,
@@ -189,5 +198,3 @@ export function InviteAnnounce() {
     </Box>
   );
 }
-
-export default InviteAnnounce;

dashboard/src/components/common/InviteNotification/index.ts

@@ -0,0 +1 @@
+export { default as InviteNotification } from './InviteNotification';

dashboard/src/components/common/LocalAccountMenu/LocalAccountMenu.tsx

@@ -1,39 +0,0 @@
-import ThemeSwitcher from '@/components/common/ThemeSwitcher';
-import { Dropdown } from '@/ui/v2/Dropdown';
-import IconButton from '@/ui/v2/IconButton';
-import UserIcon from '@/ui/v2/icons/UserIcon';
-import Text from '@/ui/v2/Text';
-import getConfig from 'next/config';
-
-export default function LocalAccountMenu() {
-  const { publicRuntimeConfig } = getConfig();
-
-  return (
-    <Dropdown.Root className="justify-self-center">
-      <Dropdown.Trigger hideChevron asChild>
-        <IconButton
-          variant="borderless"
-          color="secondary"
-          className="h-7 w-7 rounded-full"
-          sx={{
-            backgroundColor: (theme) => `${theme.palette.grey[300]} !important`,
-          }}
-        >
-          <UserIcon className="h-4 w-4" />
-        </IconButton>
-      </Dropdown.Trigger>
-
-      <Dropdown.Content
-        PaperProps={{
-          className: 'mt-1 p-6 grid grid-flow-row gap-4 w-full max-w-xs',
-        }}
-      >
-        <ThemeSwitcher label="Theme" />
-
-        <Text className="text-center text-xs" color="disabled">
-          Dashboard Version: {publicRuntimeConfig?.version || 'n/a'}
-        </Text>
-      </Dropdown.Content>
-    </Dropdown.Root>
-  );
-}

dashboard/src/components/common/LocalAccountMenu/index.ts

@@ -1 +0,0 @@
-export { default } from './LocalAccountMenu';

dashboard/src/components/common/MaintenanceAlert/index.ts

@@ -1 +0,0 @@
-export { default } from './MaintenanceAlert';

dashboard/src/components/common/MobileNav/index.ts

@@ -1,2 +0,0 @@
-export * from './MobileNav';
-export { default } from './MobileNav';

dashboard/src/components/common/NavLink/NavLink.tsx

@@ -1,5 +1,5 @@
-import type { LinkProps } from '@/ui/v2/Link';
-import Link from '@/ui/v2/Link';
+import type { LinkProps } from '@/components/ui/v2/Link';
+import { Link } from '@/components/ui/v2/Link';
 import NextLink from 'next/link';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';

dashboard/src/components/common/NavLink/index.ts

@@ -1,2 +1,2 @@
 export * from './NavLink';
-export { default } from './NavLink';
+export { default as NavLink } from './NavLink';

dashboard/src/components/common/Pagination/Pagination.tsx

@@ -1,9 +1,9 @@
-import type { ButtonProps } from '@/ui/v2/Button';
-import Button from '@/ui/v2/Button';
-import ChevronLeftIcon from '@/ui/v2/icons/ChevronLeftIcon';
-import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
+import type { ButtonProps } from '@/components/ui/v2/Button';
+import { Button } from '@/components/ui/v2/Button';
+import { ChevronLeftIcon } from '@/components/ui/v2/icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '@/components/ui/v2/icons/ChevronRightIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 

dashboard/src/components/common/Pagination/index.ts

@@ -1,3 +1,2 @@
 export * from './Pagination';
-export { default } from './Pagination';
-
+export { default as Pagination } from './Pagination';

dashboard/src/components/common/ReadOnlyToggle/index.ts

@@ -1 +0,0 @@
-export { default } from './ReadOnlyToggle';

dashboard/src/components/common/RetryableErrorBoundary/index.ts

@@ -1,2 +0,0 @@
-export * from './RetryableErrorBoundary';
-export { default } from './RetryableErrorBoundary';

dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx

@@ -1,7 +1,7 @@
-import Option from '@/ui/v2/Option';
-import type { SelectProps } from '@/ui/v2/Select';
-import Select from '@/ui/v2/Select';
-import useColorPreference from '@/ui/v2/useColorPreference';
+import { Option } from '@/components/ui/v2/Option';
+import type { SelectProps } from '@/components/ui/v2/Select';
+import { Select } from '@/components/ui/v2/Select';
+import { useColorPreference } from '@/components/ui/v2/useColorPreference';
 
 export interface ThemeSwitcherProps extends SelectProps<any> {}
 
@@ -22,6 +22,7 @@ export default function ThemeSwitcher({
         onChange?.(event, value);
       }}
       slotProps={{
+        ...props?.slotProps,
         listbox: { className: 'min-w-0 w-full' },
         popper: {
           disablePortal: false,

dashboard/src/components/common/ThemeSwitcher/index.ts

@@ -1,2 +1,2 @@
 export * from './ThemeSwitcher';
-export { default } from './ThemeSwitcher';
+export { default as ThemeSwitcher } from './ThemeSwitcher';

dashboard/src/components/common/UIProvider/UIContext.ts

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+export interface UIContextProps {
+  /**
+   * Determines whether or not the dashboard is in maintenance mode.
+   */
+  maintenanceActive: boolean;
+  /**
+   * The date and time when maintenance mode will end.
+   */
+  maintenanceEndDate: Date;
+}
+
+const UIContext = createContext<UIContextProps>({
+  maintenanceActive: false,
+  maintenanceEndDate: null,
+});
+
+export default UIContext;

dashboard/src/components/common/UIProvider/UIProvider.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from 'next/router';
+import type { PropsWithChildren } from 'react';
+import { useMemo } from 'react';
+import type { UIContextProps } from './UIContext';
+import UIContext from './UIContext';
+
+export default function UIProvider(props: PropsWithChildren<unknown>) {
+  const router = useRouter();
+
+  const maintenanceUnlocked =
+    process.env.NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET &&
+    process.env.NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET ===
+      router.query.maintenanceUnlockSecret;
+
+  const value: UIContextProps = useMemo(
+    () => ({
+      maintenanceActive: maintenanceUnlocked
+        ? false
+        : process.env.NEXT_PUBLIC_MAINTENANCE_ACTIVE === 'true',
+      maintenanceEndDate:
+        process.env.NEXT_PUBLIC_MAINTENANCE_END_DATE &&
+        !Number.isNaN(Date.parse(process.env.NEXT_PUBLIC_MAINTENANCE_END_DATE))
+          ? new Date(Date.parse(process.env.NEXT_PUBLIC_MAINTENANCE_END_DATE))
+          : null,
+    }),
+    [maintenanceUnlocked],
+  );
+
+  return <UIContext.Provider value={value} {...props} />;
+}

dashboard/src/components/common/UIProvider/index.ts

@@ -0,0 +1,4 @@
+export * from './UIContext';
+export { default as UIContext } from './UIContext';
+export { default as UIProvider } from './UIProvider';
+export { default as useUI } from './useUI';

dashboard/src/components/common/UIProvider/useUI.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import UIContext from './UIContext';
+
+export default function useUI() {
+  const context = useContext(UIContext);
+
+  if (!context) {
+    throw new Error('useUI must be used within a UIProvider');
+  }
+
+  return context;
+}

dashboard/src/components/dashboard/AccountMenu.tsx

@@ -1,119 +0,0 @@
-import { ChangePasswordModal } from '@/components/applications/ChangePasswordModal';
-import ThemeSwitcher from '@/components/common/ThemeSwitcher';
-import { Avatar } from '@/ui/Avatar';
-import { Modal } from '@/ui/Modal';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import { Dropdown, useDropdown } from '@/ui/v2/Dropdown';
-import PowerIcon from '@/ui/v2/icons/PowerIcon';
-import Text from '@/ui/v2/Text';
-import { useApolloClient } from '@apollo/client';
-import { useSignOut, useUserData } from '@nhost/nextjs';
-import getConfig from 'next/config';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-
-interface AccountMenuContentProps {
-  onChangePasswordClick: VoidFunction;
-}
-
-function AccountMenuContent({
-  onChangePasswordClick,
-}: AccountMenuContentProps) {
-  const user = useUserData();
-  const { signOut } = useSignOut();
-  const router = useRouter();
-  const apolloClient = useApolloClient();
-  const { handleClose } = useDropdown();
-  const { publicRuntimeConfig } = getConfig();
-
-  return (
-    <Box className="relative grid w-full grid-flow-row gap-5 p-6">
-      <div className="grid grid-flow-row justify-center">
-        <Avatar
-          className="mx-auto mb-2 h-16 w-16 rounded-full"
-          name={user?.displayName}
-          avatarUrl={user?.avatarUrl}
-        />
-
-        <Text variant="h3" component="h2" className="text-center">
-          {user?.displayName}
-        </Text>
-
-        <Text className="text-center font-medium">{user?.email}</Text>
-      </div>
-
-      <div className="grid grid-flow-row gap-2">
-        <Button
-          variant="outlined"
-          color="secondary"
-          onClick={() => {
-            onChangePasswordClick();
-            handleClose();
-          }}
-        >
-          Change Password
-        </Button>
-
-        <Button
-          variant="outlined"
-          color="secondary"
-          onClick={async () => {
-            await apolloClient.clearStore();
-            await signOut();
-            await router.push('/signin');
-          }}
-          endIcon={<PowerIcon className="mr-1 h-4 w-4" />}
-        >
-          Sign Out
-        </Button>
-      </div>
-
-      <ThemeSwitcher label="Theme" />
-
-      <Text className="text-center text-xs" color="disabled">
-        Dashboard Version: {publicRuntimeConfig?.version || 'n/a'}
-      </Text>
-    </Box>
-  );
-}
-
-export function AccountMenu() {
-  const user = useUserData();
-  const [changePasswordModal, setChangePasswordModal] = useState(false);
-
-  useEffect(() => {
-    if (window.location.hash.search('type=passwordReset') !== -1) {
-      setChangePasswordModal(true);
-    }
-  }, []);
-
-  return (
-    <>
-      <Modal
-        showModal={changePasswordModal}
-        close={() => setChangePasswordModal(false)}
-      >
-        <ChangePasswordModal close={() => setChangePasswordModal(false)} />
-      </Modal>
-
-      <Dropdown.Root>
-        <Dropdown.Trigger hideChevron className="rounded-full">
-          <Avatar
-            className="h-7 w-7 self-center rounded-full"
-            name={user?.displayName}
-            avatarUrl={user?.avatarUrl}
-          />
-        </Dropdown.Trigger>
-
-        <Dropdown.Content PaperProps={{ className: 'mt-1 max-w-xs w-full' }}>
-          <AccountMenuContent
-            onChangePasswordClick={() => setChangePasswordModal(true)}
-          />
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </>
-  );
-}
-
-export default AccountMenu;

dashboard/src/components/dataBrowser/BaseColumnForm/index.ts

@@ -1,2 +0,0 @@
-export * from './BaseColumnForm';
-export { default } from './BaseColumnForm';

dashboard/src/components/dataBrowser/BaseForeignKeyForm/index.ts

@@ -1,2 +0,0 @@
-export * from './BaseForeignKeyForm';
-export { BaseForeignKeyForm as default } from './BaseForeignKeyForm';

dashboard/src/components/dataBrowser/BaseRecordForm/index.ts

@@ -1,2 +0,0 @@
-export * from './BaseRecordForm';
-export { default } from './BaseRecordForm';

dashboard/src/components/dataBrowser/BaseTableForm/index.ts

@@ -1,2 +0,0 @@
-export * from './BaseTableForm';
-export { default } from './BaseTableForm';

dashboard/src/components/dataBrowser/ColumnAutocomplete/index.ts

@@ -1,2 +0,0 @@
-export * from './ColumnAutocomplete';
-export { default } from './ColumnAutocomplete';

dashboard/src/components/dataBrowser/CreateColumnForm/index.ts

@@ -1,2 +0,0 @@
-export * from './CreateColumnForm';
-export { default } from './CreateColumnForm';

dashboard/src/components/dataBrowser/CreateForeignKeyForm/index.ts

@@ -1,2 +0,0 @@
-export * from './CreateForeignKeyForm';
-export { default } from './CreateForeignKeyForm';

dashboard/src/components/dataBrowser/CreateRecordForm/index.ts

@@ -1,2 +0,0 @@
-export * from './CreateRecordForm';
-export { default } from './CreateRecordForm';

dashboard/src/components/dataBrowser/CreateTableForm/index.ts

@@ -1,2 +0,0 @@
-export * from './CreateTableForm';
-export { default } from './CreateTableForm';

dashboard/src/components/dataBrowser/DataBrowserEmptyState/index.ts

@@ -1,2 +0,0 @@
-export * from './DataBrowserEmptyState';
-export { default } from './DataBrowserEmptyState';

dashboard/src/components/dataBrowser/DataBrowserGrid/index.ts

@@ -1,2 +0,0 @@
-export * from './DataBrowserGrid';
-export { default } from './DataBrowserGrid';

dashboard/src/components/dataBrowser/DataBrowserGridControls/index.ts

@@ -1,2 +0,0 @@
-export * from './DataBrowserGridControls';
-export { default } from './DataBrowserGridControls';

dashboard/src/components/dataBrowser/DataBrowserLayout/index.ts

@@ -1,2 +0,0 @@
-export * from './DataBrowserLayout';
-export { default } from './DataBrowserLayout';

dashboard/src/components/dataBrowser/DataBrowserSidebar/index.ts

@@ -1,2 +0,0 @@
-export * from './DataBrowserSidebar';
-export { default } from './DataBrowserSidebar';

dashboard/src/components/dataBrowser/DatabaseRecordInputGroup/index.ts

@@ -1,2 +0,0 @@
-export * from './DatabaseRecordInputGroup';
-export { default } from './DatabaseRecordInputGroup';

dashboard/src/components/dataBrowser/EditColumnForm/index.ts

@@ -1,2 +0,0 @@
-export * from './EditColumnForm';
-export { default } from './EditColumnForm';

dashboard/src/components/dataBrowser/EditForeignKeyForm/index.ts

@@ -1,2 +0,0 @@
-export * from './EditForeignKeyForm';
-export { default } from './EditForeignKeyForm';

dashboard/src/components/dataBrowser/EditPermissionsForm/index.ts

@@ -1,2 +0,0 @@
-export * from './EditPermissionsForm';
-export { default } from './EditPermissionsForm';

dashboard/src/components/dataBrowser/EditTableForm/index.ts

@@ -1,2 +0,0 @@
-export * from './EditTableForm';
-export { default } from './EditTableForm';

dashboard/src/components/dataBrowser/RuleGroupEditor/index.ts

@@ -1,2 +0,0 @@
-export * from './RuleGroupEditor';
-export { default } from './RuleGroupEditor';

dashboard/src/components/dataGrid/DataGrid/DataGrid.tsx

@@ -1,19 +1,19 @@
-import DataGridBody from '@/components/common/DataGridBody';
-import DataGridFrame from '@/components/common/DataGridFrame';
-import type { DataGridHeaderProps } from '@/components/common/DataGridHeader';
-import DataGridHeader from '@/components/common/DataGridHeader';
-import DataBrowserEmptyState from '@/components/dataBrowser/DataBrowserEmptyState';
-import { DataGridProvider } from '@/context/DataGridContext';
-import type { UseDataGridOptions } from '@/hooks/useDataGrid';
-import useDataGrid from '@/hooks/useDataGrid';
-import type { DataBrowserGridColumn } from '@/types/dataBrowser';
-import ActivityIndicator from '@/ui/v2/ActivityIndicator';
-import Box from '@/ui/v2/Box';
+import type { UseDataGridOptions } from '@/components/dataGrid/DataGrid/useDataGrid';
+import { DataGridBody } from '@/components/dataGrid/DataGridBody';
+import { DataGridConfigProvider } from '@/components/dataGrid/DataGridConfigProvider';
+import { DataGridFrame } from '@/components/dataGrid/DataGridFrame';
+import type { DataGridHeaderProps } from '@/components/dataGrid/DataGridHeader';
+import { DataGridHeader } from '@/components/dataGrid/DataGridHeader';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { DataBrowserEmptyState } from '@/features/database/dataGrid/components/DataBrowserEmptyState';
+import type { DataBrowserGridColumn } from '@/features/database/dataGrid/types/dataBrowser';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import type { Column, Row, SortingRule, TableOptions } from 'react-table';
 import { twMerge } from 'tailwind-merge';
+import useDataGrid from './useDataGrid';
 
 export interface DataGridProps<TColumnData extends object>
   extends Omit<UseDataGridOptions<TColumnData>, 'tableRef'> {
@@ -130,7 +130,7 @@ function DataGrid<TColumnData extends object>(
   }, [allowSort, dataGridProps.state.sortBy, onSort, toggleAllRowsSelected]);
 
   return (
-    <DataGridProvider
+    <DataGridConfigProvider
       toggleAllRowsSelected={toggleAllRowsSelected}
       setSortBy={setSortBy}
       tableRef={tableRef}
@@ -176,7 +176,7 @@ function DataGrid<TColumnData extends object>(
 
         {loading && <ActivityIndicator delay={1000} className="my-4" />}
       </>
-    </DataGridProvider>
+    </DataGridConfigProvider>
   );
 }
 

dashboard/src/components/dataGrid/DataGrid/index.ts

@@ -0,0 +1,4 @@
+export * from './DataGrid';
+export { default as DataGrid } from './DataGrid';
+export * from './useDataGrid';
+export { default as useDataGrid } from './useDataGrid';

dashboard/src/components/dataGrid/DataGrid/useDataGrid.tsx

@@ -1,4 +1,4 @@
-import Checkbox from '@/ui/v2/Checkbox';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
 import type { MutableRefObject } from 'react';
 import { useMemo } from 'react';
 import type { PluginHook, TableInstance, TableOptions } from 'react-table';

dashboard/src/components/dataGrid/DataGridBody/DataGridBody.tsx

@@ -1,11 +1,11 @@
-import type { DataGridProps } from '@/components/common/DataGrid';
-import DataGridCell from '@/components/common/DataGridCell';
-import useDataGridConfig from '@/hooks/useDataGridConfig';
-import type { DataBrowserGridColumn } from '@/types/dataBrowser';
-import type { BoxProps } from '@/ui/v2/Box';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import PlusIcon from '@/ui/v2/icons/PlusIcon';
+import type { DataGridProps } from '@/components/dataGrid/DataGrid';
+import { DataGridCell } from '@/components/dataGrid/DataGridCell';
+import { useDataGridConfig } from '@/components/dataGrid/DataGridConfigProvider';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import type { DataBrowserGridColumn } from '@/features/database/dataGrid/types/dataBrowser';
 import type { DetailedHTMLProps, HTMLProps, KeyboardEvent } from 'react';
 import { Fragment, useMemo, useRef } from 'react';
 import type { Row } from 'react-table';

dashboard/src/components/dataGrid/DataGridBody/index.ts

@@ -0,0 +1,2 @@
+export * from './DataGridBody';
+export { default as DataGridBody } from './DataGridBody';

dashboard/src/components/dataGrid/DataGridBooleanCell/DataGridBooleanCell.tsx

@@ -1,7 +1,7 @@
-import type { CommonDataGridCellProps } from '@/components/common/DataGridCell';
-import { useDataGridCell } from '@/components/common/DataGridCell';
-import ReadOnlyToggle from '@/components/common/ReadOnlyToggle';
-import { Dropdown } from '@/ui/v2/Dropdown';
+import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
+import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
+import { ReadOnlyToggle } from '@/components/presentational/ReadOnlyToggle';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
 import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -70,7 +70,7 @@ export default function DataGridBooleanCell<TData extends object>({
       <Dropdown.Trigger
         id="boolean-trigger"
         className={twMerge(
-          'h-full w-full border-none outline-none p-0',
+          'h-full w-full border-none p-0 outline-none',
           isEditing && 'p-1.5',
         )}
         ref={inputRef}

dashboard/src/components/dataGrid/DataGridBooleanCell/index.ts

@@ -0,0 +1,2 @@
+export * from './DataGridBooleanCell';
+export { default as DataGridBooleanCell } from './DataGridBooleanCell';