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: 8.4.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/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

dashboard/.eslintrc.js

@@ -25,13 +25,9 @@ module.exports = {
       'error',
       { allowArrowFunctions: true, allowFunctions: true },
     ],
-    'import/no-named-as-default': 'off',
     'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-    // TODO: Temporarily disable this rule because of a WIP refactoring
-    'import/no-named-as-default': 'off',
     curly: ['error', 'all'],
-    'no-restricted-exports': 'off',
     'no-undef': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': [
@@ -70,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,16 @@
 # @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

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.9.8
+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@8.4.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -11,7 +11,7 @@
     "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",
@@ -104,7 +104,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.2.6",
+    "@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",

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/FeedbackForm/FeedbackForm.tsx

@@ -1,8 +1,8 @@
+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 { Avatar } from '@/ui/v2/Avatar';
-import { Button } from '@/ui/v2/Button';
-import { Input } from '@/ui/v2/Input';
-import { Text } from '@/ui/v2/Text';
 import { useInsertFeedbackOneMutation } from '@/utils/__generated__/graphql';
 import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';

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 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/InviteNotification/InviteNotification.tsx

@@ -1,3 +1,6 @@
+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,
@@ -5,9 +8,6 @@ import {
   useGetWorkspaceMemberInvitesToManageQuery,
 } from '@/generated/graphql';
 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 { useApolloClient } from '@apollo/client';

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/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/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> {}
 

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

@@ -4,10 +4,10 @@ import { DataGridConfigProvider } from '@/components/dataGrid/DataGridConfigProv
 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 { ActivityIndicator } from '@/ui/v2/ActivityIndicator';
-import { Box } from '@/ui/v2/Box';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';

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/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 { 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 { DetailedHTMLProps, HTMLProps, KeyboardEvent } from 'react';
 import { Fragment, useMemo, useRef } from 'react';
 import type { Row } from 'react-table';

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

@@ -1,7 +1,7 @@
-import { ReadOnlyToggle } from '@/components/common/ReadOnlyToggle';
 import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
 import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
-import { Dropdown } from '@/ui/v2/Dropdown';
+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';
 

dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx

@@ -1,12 +1,12 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { Tooltip, useTooltip } from '@/components/ui/v2/Tooltip';
 import type {
   ColumnType,
   DataBrowserGridCell,
   DataBrowserGridCellProps,
 } from '@/features/database/dataGrid/types/dataBrowser';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
-import { Tooltip, useTooltip } from '@/ui/v2/Tooltip';
 import { triggerToast } from '@/utils/toast';
 import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import {

dashboard/src/components/dataGrid/DataGridDateCell/DataGridDateCell.tsx

@@ -1,9 +1,9 @@
 import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
 import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
-import { Input, inputClasses } from '@/ui/v2/Input';
-import type { TextProps } from '@/ui/v2/Text';
-import { Text } from '@/ui/v2/Text';
-import { getDateComponents } from '@/utils/formatDate';
+import { Input, inputClasses } from '@/components/ui/v2/Input';
+import type { TextProps } from '@/components/ui/v2/Text';
+import { Text } from '@/components/ui/v2/Text';
+import { getDateComponents } from '@/utils/getDateComponents';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { twMerge } from 'tailwind-merge';
 

dashboard/src/components/dataGrid/DataGridHeader/DataGridHeader.tsx

@@ -1,15 +1,15 @@
 import type { DataGridProps } from '@/components/dataGrid/DataGrid';
 import { useDataGridConfig } from '@/components/dataGrid/DataGridConfigProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { ArrowDownIcon } from '@/components/ui/v2/icons/ArrowDownIcon';
+import { ArrowUpIcon } from '@/components/ui/v2/icons/ArrowUpIcon';
+import { PencilIcon } from '@/components/ui/v2/icons/PencilIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
 import type { DataBrowserGridColumn } from '@/features/database/dataGrid/types/dataBrowser';
-import { Box } from '@/ui/v2/Box';
-import { Button } from '@/ui/v2/Button';
-import { Divider } from '@/ui/v2/Divider';
-import { Dropdown } from '@/ui/v2/Dropdown';
-import { ArrowDownIcon } from '@/ui/v2/icons/ArrowDownIcon';
-import { ArrowUpIcon } from '@/ui/v2/icons/ArrowUpIcon';
-import { PencilIcon } from '@/ui/v2/icons/PencilIcon';
-import { PlusIcon } from '@/ui/v2/icons/PlusIcon';
-import { TrashIcon } from '@/ui/v2/icons/TrashIcon';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 

dashboard/src/components/dataGrid/DataGridNumericCell/DataGridNumericCell.tsx

@@ -1,7 +1,7 @@
 import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
 import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
-import { Input, inputClasses } from '@/ui/v2/Input';
-import { Text } from '@/ui/v2/Text';
+import { Input, inputClasses } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 
 export type DataGridNumericCellProps<TData extends object> =

dashboard/src/components/dataGrid/DataGridPagination/DataGridPagination.tsx

@@ -1,10 +1,10 @@
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
-import type { IconButtonProps } from '@/ui/v2/IconButton';
-import { IconButton } from '@/ui/v2/IconButton';
-import { ChevronLeftIcon } from '@/ui/v2/icons/ChevronLeftIcon';
-import { ChevronRightIcon } from '@/ui/v2/icons/ChevronRightIcon';
-import { Text } from '@/ui/v2/Text';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import type { IconButtonProps } from '@/components/ui/v2/IconButton';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { ChevronLeftIcon } from '@/components/ui/v2/icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '@/components/ui/v2/icons/ChevronRightIcon';
+import { Text } from '@/components/ui/v2/Text';
 import clsx from 'clsx';
 
 export interface DataGridPaginationProps extends BoxProps {

dashboard/src/components/dataGrid/DataGridPreviewCell/DataGridPreviewCell.tsx

@@ -1,14 +1,14 @@
+import { Modal } from '@/components/ui/v1/Modal';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { AudioPreviewIcon } from '@/components/ui/v2/icons/AudioPreviewIcon';
+import { FilePreviewIcon } from '@/components/ui/v2/icons/FilePreviewIcon';
+import { PDFPreviewIcon } from '@/components/ui/v2/icons/PDFPreviewIcon';
+import { VideoPreviewIcon } from '@/components/ui/v2/icons/VideoPreviewIcon';
+import { XIcon } from '@/components/ui/v2/icons/XIcon';
 import { useAppClient } from '@/features/projects/common/hooks/useAppClient';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { Modal } from '@/ui/v1/Modal';
-import { ActivityIndicator } from '@/ui/v2/ActivityIndicator';
-import { Box } from '@/ui/v2/Box';
-import { IconButton } from '@/ui/v2/IconButton';
-import { AudioPreviewIcon } from '@/ui/v2/icons/AudioPreviewIcon';
-import { FilePreviewIcon } from '@/ui/v2/icons/FilePreviewIcon';
-import { PDFPreviewIcon } from '@/ui/v2/icons/PDFPreviewIcon';
-import { VideoPreviewIcon } from '@/ui/v2/icons/VideoPreviewIcon';
-import { XIcon } from '@/ui/v2/icons/XIcon';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import { useEffect, useReducer, useState } from 'react';

dashboard/src/components/dataGrid/DataGridTextCell/DataGridTextCell.tsx

@@ -1,10 +1,10 @@
 import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
 import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
-import { Button } from '@/ui/v2/Button';
-import { CopyIcon } from '@/ui/v2/icons/CopyIcon';
-import { Input, inputClasses } from '@/ui/v2/Input';
-import { Text } from '@/ui/v2/Text';
-import { copy } from '@/utils/common/copy';
+import { Button } from '@/components/ui/v2/Button';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { Input, inputClasses } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { copy } from '@/utils/copy';
 import type { ChangeEvent, KeyboardEvent, Ref } from 'react';
 import { useEffect } from 'react';
 

dashboard/src/components/form/ControlledAutocomplete/ControlledAutocomplete.tsx

@@ -1,9 +1,9 @@
 import type {
   AutocompleteOption,
   AutocompleteProps,
-} from '@/ui/v2/Autocomplete';
-import { Autocomplete } from '@/ui/v2/Autocomplete';
-import { callAll } from '@/utils/common/callAll';
+} from '@/components/ui/v2/Autocomplete';
+import { Autocomplete } from '@/components/ui/v2/Autocomplete';
+import { callAll } from '@/utils/callAll';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import type { FieldValues, UseControllerProps } from 'react-hook-form';

dashboard/src/components/form/ControlledCheckbox/ControlledCheckbox.tsx

@@ -1,6 +1,6 @@
-import type { CheckboxProps } from '@/ui/v2/Checkbox';
-import { Checkbox } from '@/ui/v2/Checkbox';
-import { callAll } from '@/utils/common/callAll';
+import type { CheckboxProps } from '@/components/ui/v2/Checkbox';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
+import { callAll } from '@/utils/callAll';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import type { FieldValues, UseControllerProps } from 'react-hook-form';

dashboard/src/components/form/ControlledSelect/ControlledSelect.tsx

@@ -1,5 +1,5 @@
-import type { SelectProps } from '@/ui/v2/Select';
-import { Select } from '@/ui/v2/Select';
+import type { SelectProps } from '@/components/ui/v2/Select';
+import { Select } from '@/components/ui/v2/Select';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import type { FieldValues, UseControllerProps } from 'react-hook-form';

dashboard/src/components/form/ControlledSwitch/ControlledSwitch.tsx

@@ -1,5 +1,5 @@
-import type { SwitchProps } from '@/ui/v2/Switch';
-import { Switch } from '@/ui/v2/Switch';
+import type { SwitchProps } from '@/components/ui/v2/Switch';
+import { Switch } from '@/components/ui/v2/Switch';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import { useController, useFormContext } from 'react-hook-form';

dashboard/src/components/form/CountrySelector/CountrySelector.tsx

@@ -1,5 +1,5 @@
-import { Option } from '@/ui/v2/Option';
-import { Select } from '@/ui/v2/Select';
+import { Option } from '@/components/ui/v2/Option';
+import { Select } from '@/components/ui/v2/Select';
 import { useGetCountriesQuery } from '@/utils/__generated__/graphql';
 
 export type CountrySelectorProps = {

dashboard/src/components/form/Form/Form.tsx

@@ -1,5 +1,5 @@
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import type { KeyboardEvent } from 'react';
 import { useRef } from 'react';
 import { useFormContext } from 'react-hook-form';

dashboard/src/components/form/FormActivityIndicator/FormActivityIndicator.tsx

@@ -1,6 +1,6 @@
-import { ActivityIndicator } from '@/ui/v2/ActivityIndicator';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export interface FormActivityIndicatorProps extends BoxProps {}

dashboard/src/components/home/Resource/index.ts

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

dashboard/src/components/home/Sidebar/index.ts

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

dashboard/src/components/layout/AccountMenu/AccountMenu.tsx

@@ -1,11 +1,11 @@
 import { NavLink } from '@/components/common/NavLink';
 import { ThemeSwitcher } from '@/components/common/ThemeSwitcher';
-import { Avatar } from '@/ui/v2/Avatar';
-import { Box } from '@/ui/v2/Box';
-import { Button } from '@/ui/v2/Button';
-import { Divider } from '@/ui/v2/Divider';
-import { Dropdown, useDropdown } from '@/ui/v2/Dropdown';
-import { Text } from '@/ui/v2/Text';
+import { Avatar } from '@/components/ui/v2/Avatar';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Dropdown, useDropdown } from '@/components/ui/v2/Dropdown';
+import { Text } from '@/components/ui/v2/Text';
 import { useApolloClient } from '@apollo/client';
 import { useSignOut, useUserData } from '@nhost/nextjs';
 import getConfig from 'next/config';

dashboard/src/components/layout/AuthenticatedLayout/AuthenticatedLayout.tsx

@@ -1,15 +1,15 @@
-import { Header } from '@/components/common/Header';
-import { HighlightedText } from '@/components/common/HighlightedText';
 import { InviteNotification } from '@/components/common/InviteNotification';
-import { RetryableErrorBoundary } from '@/components/common/RetryableErrorBoundary';
 import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
 import { BaseLayout } from '@/components/layout/BaseLayout';
 import { Container } from '@/components/layout/Container';
+import { Header } from '@/components/layout/Header';
+import { HighlightedText } from '@/components/presentational/HighlightedText';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
 import { useIsHealthy } from '@/features/projects/common/hooks/useIsHealthy';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
-import { ActivityIndicator } from '@/ui/v2/ActivityIndicator';
-import { Link } from '@/ui/v2/Link';
-import { Text } from '@/ui/v2/Text';
 import { useAuthenticationStatus } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useRouter } from 'next/router';

dashboard/src/components/layout/BaseLayout/BaseLayout.tsx

@@ -1,5 +1,5 @@
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { useTheme } from '@mui/material';
 import type { NextSeoProps } from 'next-seo';
 import { NextSeo } from 'next-seo';

dashboard/src/components/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -1,9 +1,9 @@
 import { NavLink } from '@/components/common/NavLink';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { Text } from '@/components/ui/v2/Text';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
-import { Text } from '@/ui/v2/Text';
 import { twMerge } from 'tailwind-merge';
 
 export interface BreadcrumbsProps extends BoxProps {}

dashboard/src/components/layout/Container/Container.tsx

@@ -1,5 +1,5 @@
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export interface ContainerProps extends BoxProps {

dashboard/src/components/layout/DesktopNav/DesktopNav.tsx

@@ -1,9 +1,9 @@
 import type { IconLinkProps } from '@/components/common/IconLink';
 import { IconLink } from '@/components/common/IconLink';
-import { Nav } from '@/components/common/Nav';
+import { Nav } from '@/components/presentational/Nav';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
 import { useRouter } from 'next/router';
 import { twMerge } from 'tailwind-merge';
 

dashboard/src/components/layout/Header/Header.tsx

@@ -1,16 +1,16 @@
-import { AccountMenu } from '@/components/common/AccountMenu';
-import { Breadcrumbs } from '@/components/common/Breadcrumbs';
 import { FeedbackForm } from '@/components/common/FeedbackForm';
-import { LocalAccountMenu } from '@/components/common/LocalAccountMenu';
-import { Logo } from '@/components/common/Logo';
-import { MobileNav } from '@/components/common/MobileNav';
 import { NavLink } from '@/components/common/NavLink';
+import { AccountMenu } from '@/components/layout/AccountMenu';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { LocalAccountMenu } from '@/components/layout/LocalAccountMenu';
+import { MobileNav } from '@/components/layout/MobileNav';
+import { Logo } from '@/components/presentational/Logo';
+import { Box } from '@/components/ui/v2/Box';
+import { Chip } from '@/components/ui/v2/Chip';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { ApplicationStatus } from '@/types/application';
-import { Box } from '@/ui/v2/Box';
-import { Chip } from '@/ui/v2/Chip';
-import { Dropdown } from '@/ui/v2/Dropdown';
 import { useRouter } from 'next/router';
 import type { DetailedHTMLProps, HTMLProps, PropsWithoutRef } from 'react';
 import { useEffect } from 'react';

dashboard/src/components/layout/LocalAccountMenu/LocalAccountMenu.tsx

@@ -1,11 +1,11 @@
 import { ThemeSwitcher } from '@/components/common/ThemeSwitcher';
-import { Avatar } from '@/ui/v2/Avatar';
-import { Box } from '@/ui/v2/Box';
-import { Divider } from '@/ui/v2/Divider';
-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 { Avatar } from '@/components/ui/v2/Avatar';
+import { Box } from '@/components/ui/v2/Box';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Text } from '@/components/ui/v2/Text';
 import getConfig from 'next/config';
 
 export default function LocalAccountMenu() {

dashboard/src/components/layout/MobileNav/MobileNav.tsx

@@ -1,21 +1,21 @@
 import { FeedbackForm } from '@/components/common/FeedbackForm';
-import { Nav } from '@/components/common/Nav';
 import { NavLink } from '@/components/common/NavLink';
 import { ThemeSwitcher } from '@/components/common/ThemeSwitcher';
+import { Nav } from '@/components/presentational/Nav';
+import type { ButtonProps } from '@/components/ui/v2/Button';
+import { Button } from '@/components/ui/v2/Button';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Drawer } from '@/components/ui/v2/Drawer';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { MenuIcon } from '@/components/ui/v2/icons/MenuIcon';
+import { XIcon } from '@/components/ui/v2/icons/XIcon';
+import { List } from '@/components/ui/v2/List';
+import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
 import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
-import type { ButtonProps } from '@/ui/v2/Button';
-import { Button } from '@/ui/v2/Button';
-import { Divider } from '@/ui/v2/Divider';
-import { Drawer } from '@/ui/v2/Drawer';
-import { Dropdown } from '@/ui/v2/Dropdown';
-import { MenuIcon } from '@/ui/v2/icons/MenuIcon';
-import { XIcon } from '@/ui/v2/icons/XIcon';
-import { List } from '@/ui/v2/List';
-import type { ListItemButtonProps } from '@/ui/v2/ListItem';
-import { ListItem } from '@/ui/v2/ListItem';
-import { Text } from '@/ui/v2/Text';
 import { useApolloClient } from '@apollo/client';
 import { useSignOut } from '@nhost/nextjs';
 import getConfig from 'next/config';

dashboard/src/components/layout/ProjectLayout/ProjectLayout.tsx

@@ -1,14 +1,14 @@
-import { DesktopNav } from '@/components/common/DesktopNav';
-import { LoadingScreen } from '@/components/common/LoadingScreen';
 import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
 import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
+import { DesktopNav } from '@/components/layout/DesktopNav';
+import { LoadingScreen } from '@/components/presentational/LoadingScreen';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
 import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoundRedirect';
 import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';

dashboard/src/components/layout/SettingsContainer/SettingsContainer.tsx

@@ -1,13 +1,13 @@
-import { ControlledSwitch } from '@/components/common/ControlledSwitch';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
-import type { ButtonProps } from '@/ui/v2/Button';
-import { Button } from '@/ui/v2/Button';
-import { ArrowSquareOutIcon } from '@/ui/v2/icons/ArrowSquareOutIcon';
-import { Link } from '@/ui/v2/Link';
-import type { SwitchProps } from '@/ui/v2/Switch';
-import { Switch } from '@/ui/v2/Switch';
-import { Text } from '@/ui/v2/Text';
+import { ControlledSwitch } from '@/components/form/ControlledSwitch';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import type { ButtonProps } from '@/components/ui/v2/Button';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { Link } from '@/components/ui/v2/Link';
+import type { SwitchProps } from '@/components/ui/v2/Switch';
+import { Switch } from '@/components/ui/v2/Switch';
+import { Text } from '@/components/ui/v2/Text';
 import Image from 'next/image';
 import type { DetailedHTMLProps, HTMLProps, ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -1,9 +1,9 @@
-import { RetryableErrorBoundary } from '@/components/common/RetryableErrorBoundary';
 import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
-import type { SettingsSidebarProps } from '@/components/settings/SettingsSidebar';
-import { SettingsSidebar } from '@/components/settings/SettingsSidebar';
-import { Box } from '@/ui/v2/Box';
+import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
+import { SettingsSidebar } from '@/components/layout/SettingsSidebar';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export interface SettingsLayoutProps extends ProjectLayoutProps {

dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx

@@ -1,12 +1,12 @@
 import { NavLink } from '@/components/common/NavLink';
+import { Backdrop } from '@/components/ui/v2/Backdrop';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { List } from '@/components/ui/v2/List';
+import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
+import { ListItem } from '@/components/ui/v2/ListItem';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { Backdrop } from '@/ui/v2/Backdrop';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
-import { IconButton } from '@/ui/v2/IconButton';
-import { List } from '@/ui/v2/List';
-import type { ListItemButtonProps } from '@/ui/v2/ListItem';
-import { ListItem } from '@/ui/v2/ListItem';
 import { isK8SPostgresEnabledInCurrentEnvironment } from '@/utils/helpers';
 import Image from 'next/image';
 import { useRouter } from 'next/router';

dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx

@@ -1,11 +1,11 @@
-import { LoadingScreen } from '@/components/common/LoadingScreen';
-import { RetryableErrorBoundary } from '@/components/common/RetryableErrorBoundary';
 import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
 import { BaseLayout } from '@/components/layout/BaseLayout';
 import { Container } from '@/components/layout/Container';
+import { LoadingScreen } from '@/components/presentational/LoadingScreen';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { Box } from '@/components/ui/v2/Box';
+import { ThemeProvider } from '@/components/ui/v2/ThemeProvider';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
-import { Box } from '@/ui/v2/Box';
-import { ThemeProvider } from '@/ui/v2/ThemeProvider';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { useAuthenticationStatus } from '@nhost/nextjs';
 import Image from 'next/image';

dashboard/src/components/presentational/ErrorMessage/ErrorMessage.tsx

@@ -1,7 +1,7 @@
-import type { AlertProps } from '@/ui/v2/Alert';
-import { Alert } from '@/ui/v2/Alert';
-import type { ButtonProps } from '@/ui/v2/Button';
-import { Button } from '@/ui/v2/Button';
+import type { AlertProps } from '@/components/ui/v2/Alert';
+import { Alert } from '@/components/ui/v2/Alert';
+import type { ButtonProps } from '@/components/ui/v2/Button';
+import { Button } from '@/components/ui/v2/Button';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 

dashboard/src/components/presentational/HighlightedText/HighlightedText.tsx

@@ -1,5 +1,5 @@
-import type { InlineCodeProps } from '@/components/common/InlineCode';
-import { InlineCode } from '@/components/common/InlineCode';
+import type { InlineCodeProps } from '@/components/presentational/InlineCode';
+import { InlineCode } from '@/components/presentational/InlineCode';
 import { twMerge } from 'tailwind-merge';
 
 export default function HighlightedText({

dashboard/src/components/presentational/InlineCode/InlineCode.tsx

@@ -1,5 +1,5 @@
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export interface InlineCodeProps extends BoxProps {}

dashboard/src/components/presentational/LoadingScreen/LoadingScreen.tsx

@@ -1,7 +1,7 @@
-import type { ActivityIndicatorProps } from '@/ui/v2/ActivityIndicator';
-import { ActivityIndicator } from '@/ui/v2/ActivityIndicator';
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import type { ActivityIndicatorProps } from '@/components/ui/v2/ActivityIndicator';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export interface LoadingScreenProps extends BoxProps {

dashboard/src/components/presentational/MaintenanceAlert/MaintenanceAlert.tsx

@@ -1,5 +1,5 @@
 import { useUI } from '@/components/common/UIProvider';
-import { Alert } from '@/ui/v2/Alert';
+import { Alert } from '@/components/ui/v2/Alert';
 
 export default function MaintenanceAlert() {
   const { maintenanceActive, maintenanceEndDate } = useUI();

dashboard/src/components/presentational/ReadOnlyToggle/ReadOnlyToggle.tsx

@@ -1,6 +1,6 @@
-import { Box } from '@/ui/v2/Box';
-import type { TextProps } from '@/ui/v2/Text';
-import { Text } from '@/ui/v2/Text';
+import { Box } from '@/components/ui/v2/Box';
+import type { TextProps } from '@/components/ui/v2/Text';
+import { Text } from '@/components/ui/v2/Text';
 import type { DetailedHTMLProps, ForwardedRef, HTMLProps } from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';

dashboard/src/components/presentational/RetryableErrorBoundary/RetryableErrorBoundary.tsx

@@ -1,5 +1,5 @@
-import type { ErrorMessageProps } from '@/components/common/ErrorMessage';
-import { ErrorMessage } from '@/components/common/ErrorMessage';
+import type { ErrorMessageProps } from '@/components/presentational/ErrorMessage';
+import { ErrorMessage } from '@/components/presentational/ErrorMessage';
 import type { PropsWithChildren } from 'react';
 import type {
   ErrorBoundaryPropsWithRender,

dashboard/src/components/presentational/StateBadge/StateBadge.tsx

@@ -1,5 +1,5 @@
+import { Chip } from '@/components/ui/v2/Chip';
 import { ApplicationStatus } from '@/types/application';
-import { Chip } from '@/ui/v2/Chip';
 
 export interface StateBadgeProps {
   /**

dashboard/src/components/presentational/StatusCircle/StatusCircle.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export type DeploymentStatus =

dashboard/src/components/ui/README.md

@@ -0,0 +1,13 @@
+# UI components
+
+This directory contains all the low-level UI components that are used in the
+dashboard. These components are only responsible for rendering the UI and
+should not contain any business logic.
+
+## Versioning
+
+- `v1`: This folder contains old UI components that are still used in the
+  dashboard. These components are deprecated and should not be used in new
+  code.
+
+- `v2`: This folder contains new UI components that are used in the dashboard. These are built on top of the [Material UI](https://mui.com/) library and shouldn't contain any Tailwind CSS classes.

dashboard/src/components/ui/v1/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export type AvatarProps = Pick<BoxProps, 'component'> & {

dashboard/src/components/ui/v1/Modal/Modal.tsx

@@ -1,5 +1,5 @@
-import { ClientOnlyPortal } from '@/ui/v1/ClientOnlyPortal';
-import { Box } from '@/ui/v2/Box';
+import { ClientOnlyPortal } from '@/components/ui/v1/ClientOnlyPortal';
+import { Box } from '@/components/ui/v2/Box';
 import { Dialog, Transition } from '@headlessui/react';
 import { alpha, useTheme } from '@mui/material';
 import clsx from 'clsx';
@@ -21,6 +21,9 @@ export interface ModalProps {
   dialogStyle?: CSSProperties;
 }
 
+/**
+ * @deprecated Use the `useDialog()` hook instead.
+ */
 export default function Modal({
   children,
   Component,

dashboard/src/components/ui/v2/ActivityIndicator/ActivityIndicator.tsx

@@ -1,5 +1,5 @@
-import type { IconProps } from '@/ui/v2/icons';
-import { CircularProgress } from '@/ui/v2/icons/CircularProgress';
+import type { IconProps } from '@/components/ui/v2/icons';
+import { CircularProgress } from '@/components/ui/v2/icons/CircularProgress';
 import { styled } from '@mui/material';
 import type { BoxProps } from '@mui/material/Box';
 import Box from '@mui/material/Box';

dashboard/src/components/ui/v2/Alert/Alert.tsx

@@ -1,5 +1,5 @@
-import type { BoxProps } from '@/ui/v2/Box';
-import { Box } from '@/ui/v2/Box';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
 import { twMerge } from 'tailwind-merge';
 
 export interface AlertProps extends BoxProps {

dashboard/src/components/ui/v2/AlertDialog/AlertDialog.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@/ui/v2/Button';
-import type { CommonDialogProps } from '@/ui/v2/Dialog';
-import { Dialog } from '@/ui/v2/Dialog';
+import { Button } from '@/components/ui/v2/Button';
+import type { CommonDialogProps } from '@/components/ui/v2/Dialog';
+import { Dialog } from '@/components/ui/v2/Dialog';
 
 export interface AlertDialogProps extends CommonDialogProps {
   /**

dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx

@@ -1,11 +1,11 @@
-import { Chip } from '@/ui/v2/Chip';
-import type { FormControlProps } from '@/ui/v2/FormControl';
-import { ChevronDownIcon } from '@/ui/v2/icons/ChevronDownIcon';
-import { XIcon } from '@/ui/v2/icons/XIcon';
-import type { InputProps } from '@/ui/v2/Input';
-import { Input, inputClasses } from '@/ui/v2/Input';
-import { OptionBase } from '@/ui/v2/Option';
-import { OptionGroupBase } from '@/ui/v2/OptionGroup';
+import { Chip } from '@/components/ui/v2/Chip';
+import type { FormControlProps } from '@/components/ui/v2/FormControl';
+import { ChevronDownIcon } from '@/components/ui/v2/icons/ChevronDownIcon';
+import { XIcon } from '@/components/ui/v2/icons/XIcon';
+import type { InputProps } from '@/components/ui/v2/Input';
+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';

dashboard/src/components/ui/v2/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
-import { PlusCircleIcon } from '@/ui/v2/icons/PlusCircleIcon';
-import { PlusIcon } from '@/ui/v2/icons/PlusIcon';
+import { PlusCircleIcon } from '@/components/ui/v2/icons/PlusCircleIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import type { ButtonProps } from './Button';
 import Button from './Button';