chore: update versions (#3143)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @nhost/hasura-storage-js@2.7.0

### Minor Changes

-   5c6ff6e: fix: correct StorageErrorPayload TypeScript typing

## @nhost/apollo@8.0.4

### Patch Changes

-   @nhost/nhost-js@3.2.4

## @nhost/react-apollo@16.0.1

### Patch Changes

-   @nhost/apollo@8.0.4
-   @nhost/react@3.9.1

## @nhost/react-urql@13.0.1

### Patch Changes

-   @nhost/react@3.9.1

## @nhost/nextjs@2.2.2

### Patch Changes

-   @nhost/react@3.9.1

## @nhost/nhost-js@3.2.4

### Patch Changes

-   Updated dependencies [5c6ff6e]
    -   @nhost/hasura-storage-js@2.7.0

## @nhost/react@3.9.1

### Patch Changes

-   @nhost/nhost-js@3.2.4

## @nhost/vue@2.9.1

### Patch Changes

-   @nhost/nhost-js@3.2.4

## @nhost/dashboard@2.16.0

### Minor Changes

-   f8e6b61: fix: can add rule groups in table permissions
-   9e404c8: fix: not redirect to 404 page if using local Nhost backend
-   ac4aa01: fix: can delete column in database page
-   4385524: fix: update url to check service health in local dashboard

### Patch Changes

-   @nhost/react-apollo@16.0.1
-   @nhost/nextjs@2.2.2

## @nhost/docs@2.27.0

### Minor Changes

-   81cc9b3: chore: add missing images to permissions API

### Patch Changes

-   af34015: chore: add note about encryption at rest
-   1956ed2: chore: added pgmq extension to postgres docs
-   88919a3: chore: added support for nodejs22 to functions

## @nhost-examples/cli@0.3.17

### Patch Changes

-   @nhost/nhost-js@3.2.4

## @nhost-examples/codegen-react-apollo@0.4.18

### Patch Changes

-   @nhost/react@3.9.1
-   @nhost/react-apollo@16.0.1

## @nhost-examples/codegen-react-query@0.4.18

### Patch Changes

-   @nhost/react@3.9.1

## @nhost-examples/codegen-react-urql@0.3.18

### Patch Changes

-   @nhost/react@3.9.1
-   @nhost/react-urql@13.0.1

## @nhost-examples/multi-tenant-one-to-many@2.2.18

### Patch Changes

-   @nhost/nhost-js@3.2.4

## @nhost-examples/nextjs@0.4.2

### Patch Changes

-   @nhost/react@3.9.1
-   @nhost/react-apollo@16.0.1
-   @nhost/nextjs@2.2.2

## @nhost-examples/node-storage@0.2.17

### Patch Changes

-   @nhost/nhost-js@3.2.4

## @nhost-examples/nextjs-server-components@0.5.2

### Patch Changes

-   @nhost/nhost-js@3.2.4

## @nhost-examples/react-apollo@1.2.1

### Patch Changes

-   @nhost/react@3.9.1
-   @nhost/react-apollo@16.0.1

## @nhost-examples/react-gqty@1.2.18

### Patch Changes

-   @nhost/react@3.9.1

## @nhost-examples/react-native@0.1.3

### Patch Changes

-   @nhost/react@3.9.1
-   @nhost/react-apollo@16.0.1

## @nhost-examples/vue-apollo@0.8.1

### Patch Changes

-   @nhost/nhost-js@3.2.4
-   @nhost/apollo@8.0.4
-   @nhost/vue@2.9.1

## @nhost-examples/vue-quickstart@0.2.18

### Patch Changes

-   @nhost/apollo@8.0.4
-   @nhost/vue@2.9.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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

@@ -20,7 +20,7 @@ runs:
       id: pnpm-cache-dir
       shell: bash
       run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: pnpm-cache
       with:
         path: ${{ steps.pnpm-cache-dir.outputs.dir }}

.github/workflows/ci.yaml

@@ -163,7 +163,7 @@ jobs:
       # * Run this step only if the previous step failed, and Playwright generated a report
       - name: Upload Playwright Report
         if: ${{ failure() && hashFiles(format('{0}/playwright-report/**', matrix.package.path)) != ''}}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-${{ steps.file-name.outputs.fileName }}
           path: ${{format('{0}/playwright-report/**', matrix.package.path)}}

.github/workflows/gen_ai_review.yaml

@@ -16,7 +16,7 @@ jobs:
     steps:
       - name: PR Agent action step
         id: pragent
-        uses: Codium-ai/pr-agent@v0.24
+        uses: Codium-ai/pr-agent@v0.26
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           OPENAI_KEY: ${{ secrets.OPENAI_API_KEY }}

audit-ci.jsonc

@@ -2,5 +2,5 @@
   // $schema provides code completion hints to IDEs.
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "moderate": true,
-  "allowlist": ["vue-template-compiler", "micromatch", "path-to-regexp"]
+  "allowlist": ["vue-template-compiler"]
 }

dashboard/CHANGELOG.md

@@ -1,5 +1,78 @@
 # @nhost/dashboard
 
+## 2.16.0
+
+### Minor Changes
+
+- f8e6b61: fix: can add rule groups in table permissions
+- 9e404c8: fix: not redirect to 404 page if using local Nhost backend
+- ac4aa01: fix: can delete column in database page
+- 4385524: fix: update url to check service health in local dashboard
+
+### Patch Changes
+
+- @nhost/react-apollo@16.0.1
+- @nhost/nextjs@2.2.2
+
+## 2.15.0
+
+### Minor Changes
+
+- f1052a8: fix: improve stability of the dashboard when pausing projects
+- 30daa41: fix: update links to docs in overview page
+- 7537237: feat: add image preview toggle in storage
+
+## 2.14.0
+
+### Minor Changes
+
+- d43931e: fix: invalid organization slug/project subdomain doesn't open 404 page
+- 5df6fa2: feat: add unencrypted disk warning in storage capacity settings
+
+### Patch Changes
+
+- 44c1e17: chore: update `msw` to v1.3.5 to fix vulnerabilities
+  - @nhost/react-apollo@16.0.0
+  - @nhost/nextjs@2.2.1
+
+## 2.13.0
+
+### Minor Changes
+
+- 21e90da: chore: remove restrictions on SMTP sender so My Name <name@acme.com> can be added
+- 865dd93: fix: duplicate Run placeholders when there is an error in the backend
+- 6902a36: fix: can remove resources if postgres capacity is higher than 10
+- a535aa3: fix: fetch user roles locally in auth section
+- 0c50816: fix: allow decimal numbers in database row insert
+- aea6d18: chore: add warning when pausing a project about losing Run services persistent volume data
+- d3b4fc3: feat: allow to change postgres settings if project is paused
+- 29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities
+- c9dca09: feat: add reset password form
+- b3bcacb: fix: paused project banner cannot read null project name
+
+### Patch Changes
+
+- Updated dependencies [46fc520]
+- Updated dependencies [29d27e1]
+  - @nhost/nextjs@2.2.0
+  - @nhost/react-apollo@15.0.1
+
+## 2.12.0
+
+### Minor Changes
+
+- eb95562: fix: show all available permission variables in permission dropdown select
+
+### Patch Changes
+
+- 8b5c4a0: chore: cleanup layout and add disable duplicate atom key checking in development mode
+
+## 2.11.3
+
+### Patch Changes
+
+- 714dffa: fix: improve project polling logic and unify usage across components
+
 ## 2.11.2
 
 ### Patch Changes

dashboard/Dockerfile

@@ -1,13 +1,13 @@
-FROM node:18-alpine AS pruner
+FROM node:20-alpine AS pruner
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.11.3
+RUN yarn global add turbo@2.2.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 ARG TURBO_TOKEN
 ARG TURBO_TEAM
 
@@ -15,20 +15,20 @@ RUN apk add --no-cache libc6-compat python3 make g++
 RUN apk update
 WORKDIR /app
 
-ENV NEXT_TELEMETRY_DISABLED 1
-ENV NEXT_PUBLIC_ENV dev
-ENV NEXT_PUBLIC_NHOST_PLATFORM false
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_ENV=dev
+ENV NEXT_PUBLIC_NHOST_PLATFORM=false
 
 # placeholders for URLs, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET __NEXT_PUBLIC_NHOST_ADMIN_SECRET__
-ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
-ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
-ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__
-ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
-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__
-ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL __NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
+ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET=__NEXT_PUBLIC_NHOST_ADMIN_SECRET__
+ENV NEXT_PUBLIC_NHOST_AUTH_URL=__NEXT_PUBLIC_NHOST_AUTH_URL__
+ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL=__NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
+ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL=__NEXT_PUBLIC_NHOST_GRAPHQL_URL__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL=__NEXT_PUBLIC_NHOST_STORAGE_URL__
+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__
+ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL=__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
 
 RUN yarn global add pnpm@9.15.0
 COPY .gitignore .gitignore
@@ -41,7 +41,7 @@ COPY turbo.json turbo.json
 COPY config/ config/
 RUN pnpm build:dashboard
 
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs
@@ -58,4 +58,4 @@ COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/standalone/app ./
 COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/static ./dashboard/.next/static
 
 ENTRYPOINT ["./docker-entrypoint.sh"]
-CMD ["node", "dashboard/server.js"]
+CMD ["node", "dashboard/server.js"]

dashboard/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nhost/dashboard",
-  "version": "2.11.2",
+  "version": "2.16.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false next dev",
     "build": "next build --no-lint",
     "analyze": "ANALYZE=true pnpm build --no-lint",
     "start": "next start",
@@ -84,7 +84,7 @@
     "just-kebab-case": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.416.0",
-    "next": "^14.2.10",
+    "next": "^14.2.22",
     "next-nprogress-bar": "^2.3.13",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
@@ -177,7 +177,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.2.2",
-    "msw": "^1.3.3",
+    "msw": "^1.3.5",
     "msw-storybook-addon": "^1.10.0",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.38",

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

@@ -21,22 +21,9 @@ import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoun
 import { cn } from '@/lib/utils';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import {
-  useEffect,
-  useState,
-  type DetailedHTMLProps,
-  type HTMLProps,
-} from 'react';
+import { useEffect, useState } from 'react';
 
-export interface AuthenticatedLayoutProps extends BaseLayoutProps {
-  /**
-   * Props passed to the internal content container.
-   */
-  contentContainerProps?: DetailedHTMLProps<
-    HTMLProps<HTMLDivElement>,
-    HTMLDivElement
-  >;
-}
+export interface AuthenticatedLayoutProps extends BaseLayoutProps {}
 
 export default function AuthenticatedLayout({
   children,

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

@@ -21,23 +21,22 @@ export default function UnauthenticatedLayout({
   const router = useRouter();
   const isPlatform = useIsPlatform();
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const isOnResetPassword = router.route === '/password/reset';
 
   useEffect(() => {
     if (!isPlatform || (!isLoading && isAuthenticated)) {
-      router.push('/');
+      // we do not want to redirect if the user tries to reset their password
+      if (!isOnResetPassword) {
+        router.push('/');
+      }
     }
-  }, [isLoading, isAuthenticated, router, isPlatform]);
+  }, [isLoading, isAuthenticated, router, isPlatform, isOnResetPassword]);
 
-  if (!isPlatform || isLoading || isAuthenticated) {
+  if ((!isPlatform || isLoading || isAuthenticated) && !isOnResetPassword) {
     return (
       <BaseLayout {...props}>
         <LoadingScreen
           sx={{ backgroundColor: (theme) => theme.palette.background.default }}
-          slotProps={{
-            activityIndicator: {
-              className: 'text-white',
-            },
-          }}
         />
       </BaseLayout>
     );
@@ -59,19 +58,19 @@ export default function UnauthenticatedLayout({
 
         <RetryableErrorBoundary>
           <Box
-            className="flex items-center min-h-screen"
+            className="flex min-h-screen items-center"
             sx={{ backgroundColor: (theme) => theme.palette.common.black }}
           >
             <Container
               rootClassName="bg-transparent h-full"
-              className="grid items-center w-full h-full gap-12 pt-8 pb-12 bg-transparent justify-items-center lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
+              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pb-12 pt-8 lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
             >
               <div className="relative z-10 order-2 grid w-full max-w-[544px] grid-flow-row gap-12 lg:order-1">
                 {children}
               </div>
 
               <div className="relative z-0 order-1 flex h-full w-full items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none]">
-                <div className="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center w-full h-full max-w-xl mx-auto overflow-hidden opacity-70">
+                <div className="absolute bottom-0 left-0 right-0 top-0 mx-auto flex h-full w-full max-w-xl items-center justify-center overflow-hidden opacity-70">
                   <Image
                     priority
                     src="/assets/line-grid.svg"

dashboard/src/components/ui/v3/command.tsx

@@ -1,6 +1,6 @@
 import { type DialogProps } from '@radix-ui/react-dialog';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from 'lucide-react';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { PlusIcon, Search } from 'lucide-react';
 import * as React from 'react';
 
 import { Dialog, DialogContent } from '@/components/ui/v3/dialog';
@@ -26,7 +26,7 @@ interface CommandDialogProps extends DialogProps {}
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="p-0 overflow-hidden shadow-lg">
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
@@ -37,14 +37,22 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center px-3 border-b" cmdk-input-wrapper="">
-    <Search className="w-4 h-4 mr-2 opacity-50 shrink-0" />
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    prefix?: React.ReactNode;
+  }
+>(({ className, prefix, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    {prefix && (
+      <span className="pointer-events-none flex items-center text-muted-foreground">
+        {prefix}
+      </span>
+    )}
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
         'flex h-11 w-full rounded-md border-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
+        prefix && 'pl-0',
         className,
       )}
       {...props}
@@ -73,7 +81,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-sm text-center"
+    className="py-6 text-center text-sm"
     {...props}
   />
 ));
@@ -140,6 +148,25 @@ const CommandShortcut = ({
 };
 CommandShortcut.displayName = 'CommandShortcut';
 
+const CommandCreateItem = ({
+  onCreate,
+}: {
+  onCreate: (value: string) => void;
+}) => {
+  const query = useCommandState((state) => state.search);
+  if (!query || !onCreate) {
+    return null;
+  }
+
+  return (
+    <CommandItem forceMount value="create" onSelect={() => onCreate(query)}>
+      <PlusIcon className="mr-2" /> {query}
+    </CommandItem>
+  );
+};
+
+CommandCreateItem.displayName = 'CommandCreateItem';
+
 export {
   Command,
   CommandDialog,
@@ -150,4 +177,5 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
+  CommandCreateItem,
 };

dashboard/src/components/ui/v3/fancy-multi-select.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { X } from 'lucide-react';
+
+import { Badge } from '@/components/ui/v3/badge';
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import { cn } from '@/lib/utils';
+import { Command as CommandPrimitive } from 'cmdk';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react';
+
+type Option = Record<'value' | 'label', string>;
+
+interface FancyMultiSelectProps {
+  defaultValue?: Option[];
+  options?: Option[];
+  creatable?: boolean;
+  className?: string;
+  onChange?: (selected: Option[]) => void;
+}
+
+export function FancyMultiSelect({
+  defaultValue = [],
+  options = [],
+  creatable = false,
+  className,
+  onChange,
+}: FancyMultiSelectProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<Option[]>(defaultValue);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleUnselect = useCallback((option: Option) => {
+    setSelected((prev) => prev.filter((s) => s.value !== option.value));
+  }, []);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
+    const input = inputRef.current;
+    if (input) {
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        if (input.value === '') {
+          setSelected((prev) => {
+            const newSelected = [...prev];
+            newSelected.pop();
+            return newSelected;
+          });
+        }
+      }
+      // This is not a default behaviour of the <input /> field
+      if (e.key === 'Escape') {
+        input.blur();
+      }
+    }
+  }, []);
+
+  const handleSelect = useCallback(
+    (option: Option) => {
+      setInputValue('');
+      setSelected((prev) => {
+        const newSelected = [...prev, option];
+        onChange?.(newSelected);
+        return newSelected;
+      });
+    },
+    [onChange],
+  );
+
+  const selectables = useMemo(() => {
+    const filtered = options.filter(
+      (option) =>
+        !selected.map((s) => s.value).includes(option.value) &&
+        option.label.toLowerCase().includes(inputValue.toLowerCase()),
+    );
+
+    if (creatable && inputValue) {
+      return [
+        ...filtered,
+        {
+          value: inputValue.toLowerCase(),
+          label: inputValue,
+        },
+      ];
+    }
+
+    return filtered;
+  }, [options, selected, inputValue, creatable]);
+
+  return (
+    <Command
+      onKeyDown={handleKeyDown}
+      className="relative overflow-visible bg-transparent"
+    >
+      <div
+        className={cn(
+          'group flex min-h-10 flex-1 rounded-md border bg-background px-4 py-0 text-sm ring-offset-background hover:bg-accent',
+          className,
+        )}
+      >
+        <div className="flex flex-1 flex-wrap items-center gap-1 overflow-x-hidden py-1">
+          {selected.map((option) => {
+            return (
+              <Badge
+                className="h-7 overflow-x-hidden text-[12px] font-normal"
+                key={option.value}
+                variant="outline"
+              >
+                <span className="overflow-x-hidden text-ellipsis whitespace-nowrap break-words font-medium">
+                  {option.label}
+                </span>
+                <button
+                  type="button"
+                  aria-label={`Remove ${option.label}`}
+                  className="ml-1 rounded-full outline-none"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleUnselect(option);
+                    }
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  onClick={() => handleUnselect(option)}
+                >
+                  <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                </button>
+              </Badge>
+            );
+          })}
+          {/* Avoid having the "Search" Icon */}
+          <CommandPrimitive.Input
+            ref={inputRef}
+            value={inputValue}
+            onValueChange={setInputValue}
+            onBlur={() => setOpen(false)}
+            onFocus={() => setOpen(true)}
+            placeholder="Select options..."
+            className="flex flex-1 border-none bg-transparent px-0 py-1 text-sm font-medium outline-none !ring-0 !ring-offset-0 placeholder:text-sm placeholder:text-muted-foreground group-hover:text-accent-foreground"
+          />
+        </div>
+      </div>
+      <div className="relative">
+        <CommandList>
+          {open && selectables.length > 0 ? (
+            <div className="absolute top-2 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
+              <CommandGroup className="h-full overflow-auto">
+                {selectables.map((option) => {
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }}
+                      onSelect={() => handleSelect(option)}
+                      className="cursor-pointer"
+                    >
+                      {creatable &&
+                      !options.find((opt) => opt.value === option.value)
+                        ? `Create "${option.label}"`
+                        : option.label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </div>
+          ) : null}
+        </CommandList>
+      </div>
+    </Command>
+  );
+}

dashboard/src/features/orgs/components/common/TransferProjectDialog/TransferProjectDialog.tsx

@@ -8,6 +8,7 @@ import {
   DialogTitle,
 } from '@/components/ui/v3/dialog';
 
+import { LoadingScreen } from '@/components/presentational/LoadingScreen';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import {
   Form,
@@ -53,8 +54,8 @@ export default function TransferProjectDialog({
 }: TransferProjectDialogProps) {
   const { push } = useRouter();
   const currentUserId = useUserId();
-  const { project } = useProject();
-  const { orgs, currentOrg } = useOrgs();
+  const { project, loading: projectLoading } = useProject();
+  const { orgs, currentOrg, loading: orgsLoading } = useOrgs();
   const [transferProject] = useBillingTransferAppMutation();
 
   const form = useForm<z.infer<typeof transferProjectFormSchema>>({
@@ -96,6 +97,10 @@ export default function TransferProjectDialog({
         member.user.id === userId,
     );
 
+  if (projectLoading || orgsLoading) {
+    return <LoadingScreen />;
+  }
+
   return (
     <Dialog
       open={open}

dashboard/src/features/orgs/layout/ProjectLayout/ProjectLayout.tsx

@@ -12,7 +12,7 @@ import { ApplicationUnknown } from '@/features/orgs/projects/common/components/A
 import { ApplicationUnpausing } from '@/features/orgs/projects/common/components/ApplicationUnpausing';
 import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
-import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useProjectWithState } from '@/features/orgs/projects/hooks/useProjectWithState';
 import { ApplicationStatus } from '@/types/application';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
@@ -37,7 +37,7 @@ function ProjectLayoutContent({
 
   const { state } = useAppState();
   const isPlatform = useIsPlatform();
-  const { project, loading, error } = useProject({ poll: true });
+  const { project, loading, error } = useProjectWithState();
 
   const isOnOverviewPage = route === '/orgs/[orgSlug]/projects/[appSubdomain]';
 

dashboard/src/features/orgs/projects/ai/settings/components/AISettings.tsx

@@ -61,7 +61,7 @@ export default function AISettings() {
   const [updateConfig] = useUpdateConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
-  const { project } = useProject();
+  const { project, loading: loadingProject } = useProject();
 
   const [aiServiceEnabled, setAIServiceEnabled] = useState(true);
 
@@ -73,9 +73,10 @@ export default function AISettings() {
     error: errorGettingAiSettings,
   } = useGetAiSettingsQuery({
     variables: {
-      appId: project.id,
+      appId: project?.id,
     },
     ...(!isPlatform ? { client: localMimirClient } : {}),
+    skip: !project?.id,
   });
 
   const { data: graphiteVersionsData, loading: loadingGraphiteVersionsData } =
@@ -192,11 +193,11 @@ export default function AISettings() {
     }
   };
 
-  if (loadingAiSettings || loadingGraphiteVersionsData) {
+  if (loadingProject || loadingAiSettings || loadingGraphiteVersionsData) {
     return (
       <ActivityIndicator
         delay={1000}
-        label="Loading Postgres version..."
+        label="Loading AI settings..."
         className="justify-center"
       />
     );
@@ -269,7 +270,7 @@ export default function AISettings() {
 
   return (
     <Box className="space-y-4" sx={{ backgroundColor: 'background.default' }}>
-      <Box className="flex flex-row items-center justify-between p-4 rounded-lg border-1">
+      <Box className="flex flex-row items-center justify-between rounded-lg border-1 p-4">
         <Text className="text-lg font-semibold">Enable AI service</Text>
         <Switch
           checked={aiServiceEnabled}
@@ -298,7 +299,7 @@ export default function AISettings() {
                     <Tooltip title="Version of the service to use.">
                       <InfoIcon
                         aria-label="Info"
-                        className="w-4 h-4"
+                        className="h-4 w-4"
                         color="primary"
                       />
                     </Tooltip>
@@ -353,7 +354,7 @@ export default function AISettings() {
                     <Tooltip title="Used to validate requests between postgres and the AI service. The AI service will also include the header X-Graphite-Webhook-Secret with this value set when calling external webhooks so the source of the request can be validated.">
                       <InfoIcon
                         aria-label="Info"
-                        className="w-4 h-4"
+                        className="h-4 w-4"
                         color="primary"
                       />
                     </Tooltip>
@@ -377,7 +378,7 @@ export default function AISettings() {
                     <Tooltip title="Dedicated resources allocated for the service.">
                       <InfoIcon
                         aria-label="Info"
-                        className="w-4 h-4"
+                        className="h-4 w-4"
                         color="primary"
                       />
                     </Tooltip>
@@ -417,7 +418,7 @@ export default function AISettings() {
                         <Tooltip title="Key to use for authenticating API requests to OpenAI">
                           <InfoIcon
                             aria-label="Info"
-                            className="w-4 h-4"
+                            className="h-4 w-4"
                             color="primary"
                           />
                         </Tooltip>
@@ -440,7 +441,7 @@ export default function AISettings() {
                         <Tooltip title="Optional. OpenAI organization to use.">
                           <InfoIcon
                             aria-label="Info"
-                            className="w-4 h-4"
+                            className="h-4 w-4"
                             color="primary"
                           />
                         </Tooltip>
@@ -468,7 +469,7 @@ export default function AISettings() {
                         <Tooltip title="How often to run the job that keeps embeddings up to date.">
                           <InfoIcon
                             aria-label="Info"
-                            className="w-4 h-4"
+                            className="h-4 w-4"
                             color="primary"
                           />
                         </Tooltip>

dashboard/src/features/orgs/projects/authentication/settings/components/PostmarkSettings/PostmarkSettings.tsx

@@ -19,7 +19,7 @@ import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWith
 
 const validationSchema = yup
   .object({
-    sender: yup.string().label('SMTP Sender').email().required(),
+    sender: yup.string().label('SMTP Sender').required(),
     password: yup.string().label('Password').required(),
   })
   .required();

dashboard/src/features/orgs/projects/authentication/settings/components/SMTPSettings/SMTPSettings.tsx

@@ -30,7 +30,7 @@ const smtpValidationSchema = yup
     user: yup.string().label('Username').required(),
     password: yup.string().label('Password'),
     method: yup.string().required(),
-    sender: yup.string().label('SMTP Sender').email().required(),
+    sender: yup.string().label('SMTP Sender').required(),
   })
   .required();
 

dashboard/src/features/orgs/projects/authentication/users/components/EditUserForm/EditUserForm.tsx

@@ -16,18 +16,20 @@ import { Text } from '@/components/ui/v2/Text';
 import { useRemoteApplicationGQLClient } from '@/features/orgs/hooks/useRemoteApplicationGQLClient';
 import { EditUserPasswordForm } from '@/features/orgs/projects/authentication/users/components/EditUserPasswordForm';
 import { getReadableProviderName } from '@/features/orgs/projects/authentication/users/utils/getReadableProviderName';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import { getUserRoles } from '@/features/projects/roles/settings/utils/getUserRoles';
 import { type RemoteAppUser } from '@/pages/orgs/[orgSlug]/projects/[appSubdomain]/users';
 import type { DialogFormProps } from '@/types/common';
-import { copy } from '@/utils/copy';
 import {
   RemoteAppGetUsersDocument,
   useGetProjectLocalesQuery,
   useGetRolesPermissionsQuery,
   useUpdateRemoteAppUserMutation,
 } from '@/utils/__generated__/graphql';
+import { copy } from '@/utils/copy';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useTheme } from '@mui/material';
 import { format } from 'date-fns';
@@ -106,6 +108,8 @@ export default function EditUserForm({
   onDeleteUser,
   roles,
 }: EditUserFormProps) {
+  const isPlatform = useIsPlatform();
+  const localMimirClient = useLocalMimirClient();
   const theme = useTheme();
   const { onDirtyStateChange, openDialog } = useDialog();
   const { project } = useProject();
@@ -196,6 +200,7 @@ export default function EditUserForm({
 
   const { data: dataRoles } = useGetRolesPermissionsQuery({
     variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const allAvailableProjectRoles = getUserRoles(
@@ -206,6 +211,7 @@ export default function EditUserForm({
     variables: {
       appId: project?.id,
     },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const allowedLocales = data?.config?.auth?.user?.locale?.allowed || [];

dashboard/src/features/orgs/projects/authentication/users/components/UsersBody/UsersBody.tsx

@@ -15,6 +15,8 @@ import { Text } from '@/components/ui/v2/Text';
 import { useRemoteApplicationGQLClient } from '@/features/orgs/hooks/useRemoteApplicationGQLClient';
 import type { EditUserFormValues } from '@/features/orgs/projects/authentication/users/components/EditUserForm';
 import { getReadableProviderName } from '@/features/orgs/projects/authentication/users/utils/getReadableProviderName';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import { getUserRoles } from '@/features/projects/roles/settings/utils/getUserRoles';
@@ -61,6 +63,8 @@ export interface UsersBodyProps {
 
 export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
   const theme = useTheme();
+  const isPlatform = useIsPlatform();
+  const localMimirClient = useLocalMimirClient();
   const { openAlertDialog, openDrawer, closeDrawer } = useDialog();
   const { project } = useProject();
   const remoteProjectGQLClient = useRemoteApplicationGQLClient();
@@ -88,6 +92,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
    */
   const { data: dataRoles } = useGetRolesPermissionsQuery({
     variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const { allowed: allowedRoles } = dataRoles?.config?.auth?.user?.roles || {};

dashboard/src/features/orgs/projects/common/components/AppLoader/AppLoader.tsx

@@ -1,4 +1,5 @@
 import { ContactUs } from '@/components/common/ContactUs';
+import { LoadingScreen } from '@/components/presentational/LoadingScreen';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Button } from '@/components/ui/v2/Button';
 import { Dropdown } from '@/components/ui/v2/Dropdown';
@@ -6,7 +7,7 @@ import { Text } from '@/components/ui/v2/Text';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { useInterval } from '@/hooks/useInterval';
 import { getRelativeDateByApplicationState } from '@/utils/helpers';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export interface AppLoaderProps {
   /**
@@ -33,25 +34,31 @@ export default function AppLoader({
   date,
   restoring,
 }: AppLoaderProps) {
-  const { project } = useProject();
+  const { project, loading } = useProject();
+  const [timeElapsed, setTimeElapsed] = useState<number>(0);
 
-  let timeElapsedSinceEventCreation: number;
+  useEffect(() => {
+    if (!project || loading) {
+      return;
+    }
 
-  if (date) {
-    timeElapsedSinceEventCreation = getRelativeDateByApplicationState(date);
-  } else if (unpause) {
-    timeElapsedSinceEventCreation = getRelativeDateByApplicationState(
-      project.appStates[0].createdAt,
-    );
-  } else {
-    timeElapsedSinceEventCreation = getRelativeDateByApplicationState(
-      project.createdAt,
-    );
-  }
+    let timeElapsedSinceEventCreation: number;
 
-  const [timeElapsed, setTimeElapsed] = useState(timeElapsedSinceEventCreation);
+    if (date) {
+      timeElapsedSinceEventCreation = getRelativeDateByApplicationState(date);
+    } else if (unpause) {
+      timeElapsedSinceEventCreation = getRelativeDateByApplicationState(
+        project.appStates[0].createdAt,
+      );
+    } else {
+      timeElapsedSinceEventCreation = getRelativeDateByApplicationState(
+        project.createdAt,
+      );
+    }
+
+    setTimeElapsed(timeElapsedSinceEventCreation);
+  }, [project, date, unpause, loading]);
 
-  // Would be also valuable to check the appCreatedTime so this doesn't ever appear if not created under a time limit. @GC
   useInterval(
     () => {
       setTimeElapsed(timeElapsed + 1);
@@ -59,6 +66,10 @@ export default function AppLoader({
     startLoader ? 1000 : null,
   );
 
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
   return (
     <div className="grid grid-flow-row gap-2">
       <div className="grid grid-flow-row gap-1">
@@ -86,9 +97,9 @@ export default function AppLoader({
       <ActivityIndicator className="mx-auto" />
 
       {timeElapsed > 180 && (
-        <Dropdown.Root className="flex flex-col mx-auto">
+        <Dropdown.Root className="mx-auto flex flex-col">
           <Dropdown.Trigger
-            className="flex mx-auto font-medium"
+            className="mx-auto flex font-medium"
             hideChevron
             asChild
           >

dashboard/src/features/orgs/projects/common/components/ApplicationPaused/ApplicationPaused.tsx

@@ -36,8 +36,8 @@ export default function ApplicationPaused() {
       >
         <RemoveApplicationModal
           close={() => setShowDeletingModal(false)}
-          title={`Remove project ${project.name}?`}
-          description={`The project ${project.name} will be removed. All data will be lost and there will be no way to
+          title={`Remove project ${project?.name}?`}
+          description={`The project ${project?.name} will be removed. All data will be lost and there will be no way to
           recover the app once it has been deleted.`}
           className="z-50"
         />

dashboard/src/features/orgs/projects/common/hooks/useAppState/useAppState.ts

@@ -1,4 +1,4 @@
-import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useProjectWithState } from '@/features/orgs/projects/hooks/useProjectWithState';
 import { ApplicationStatus } from '@/types/application';
 
 /**
@@ -9,7 +9,7 @@ export default function useAppState(): {
   state: ApplicationStatus;
   message?: string;
 } {
-  const { project } = useProject({ poll: true });
+  const { project } = useProjectWithState();
   const noApplication = !project;
 
   if (noApplication) {

dashboard/src/features/orgs/projects/common/hooks/useIsHealthy/useIsHealthy.ts

@@ -13,12 +13,12 @@ export default function useIsHealthy() {
   const appUrl = generateAppServiceUrl(
     project?.subdomain,
     project?.region,
-    'auth',
+    'hasura',
   );
 
   const { failureCount, status } = useQuery(
-    ['/healthz'],
-    () => fetch(`${appUrl}/healthz`),
+    ['/v1/version'],
+    () => fetch(`${appUrl}/v1/version`),
     {
       enabled: !isPlatform && !!project,
       retry: true,

dashboard/src/features/orgs/projects/common/hooks/useProjectRedirectWhenReady/useProjectRedirectWhenReady.ts

@@ -24,7 +24,7 @@ export default function useProjectRedirectWhenReady(
   const { data, client, startPolling, ...rest } = useGetApplicationStateQuery({
     ...options,
     variables: { ...options.variables, appId: project?.id },
-    skip: !project.id,
+    skip: !project?.id,
   });
 
   useEffect(() => {

dashboard/src/features/orgs/projects/common/utils/generateAppServiceUrl/generateAppServiceUrl.ts

@@ -1,3 +1,4 @@
+import type { ProjectFragment } from '@/utils/__generated__/graphql';
 import {
   getAuthServiceUrl,
   getDatabaseServiceUrl,
@@ -7,7 +8,6 @@ import {
   getStorageServiceUrl,
   isPlatform,
 } from '@/utils/env';
-import type { ProjectFragment } from '@/utils/__generated__/graphql';
 
 export type NhostService =
   | 'auth'
@@ -18,21 +18,6 @@ export type NhostService =
   | 'hasura'
   | 'grafana';
 
-/**
- * The default slugs that are used when running the dashboard locally. These
- * values are used both in local mode and when running the dashboard locally
- * against the remote (either staging or production) backend.
- */
-export const defaultLocalBackendSlugs: Record<NhostService, string> = {
-  auth: '/v1/auth',
-  db: '',
-  graphql: '/v1/graphql',
-  functions: '/v1/functions',
-  storage: '/v1/files',
-  hasura: '',
-  grafana: '',
-};
-
 /**
  * The default slugs that are used when running the dashboard against the
  * remote (either staging or production) backend in a cloud environment.

dashboard/src/features/orgs/projects/custom-domains/settings/components/AuthDomain/AuthDomain.tsx

@@ -34,7 +34,11 @@ export default function AuthDomain() {
   const localMimirClient = useLocalMimirClient();
   const [isVerified, setIsVerified] = useState(false);
 
-  const { project, refetch: refetchProject } = useProject();
+  const {
+    project,
+    refetch: refetchProject,
+    loading: loadingProject,
+  } = useProject();
 
   const [updateConfig] = useUpdateConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
@@ -48,7 +52,7 @@ export default function AuthDomain() {
 
   const { data, loading, error } = useGetAuthenticationSettingsQuery({
     variables: {
-      appId: project.id,
+      appId: project?.id,
     },
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
@@ -62,7 +66,7 @@ export default function AuthDomain() {
     }
   }, [data, loading, form, initialValue]);
 
-  if (loading) {
+  if (loadingProject || loading) {
     return (
       <ActivityIndicator
         delay={1000}
@@ -147,7 +151,7 @@ export default function AuthDomain() {
               loading: formState.isSubmitting,
             },
           }}
-          className="grid grid-flow-row px-4 gap-x-4 gap-y-4 lg:grid-cols-5"
+          className="grid grid-flow-row gap-x-4 gap-y-4 px-4 lg:grid-cols-5"
         >
           <Input
             {...register('auth_fqdn')}

dashboard/src/features/orgs/projects/custom-domains/settings/components/DatabaseDomain/DatabaseDomain.tsx

@@ -14,10 +14,14 @@ const validationSchema = Yup.object({
 export type DatabaseDomainFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function DatabaseDomain() {
-  const { project } = useProject();
+  const { project, loading } = useProject();
 
   const [dbFQDN, setDbFQDN] = useState('');
 
+  if (loading) {
+    return null;
+  }
+
   const postgresHost = generateAppServiceUrl(
     project.subdomain,
     project.region,
@@ -36,7 +40,7 @@ export default function DatabaseDomain() {
           className: 'hidden',
         },
       }}
-      className="grid grid-flow-row px-4 gap-x-4 gap-y-4 lg:grid-cols-5"
+      className="grid grid-flow-row gap-x-4 gap-y-4 px-4 lg:grid-cols-5"
     >
       <Input
         id="database_fqdn"

dashboard/src/features/orgs/projects/custom-domains/settings/components/HasuraDomain/HasuraDomain.tsx

@@ -33,7 +33,11 @@ export default function HasuraDomain() {
   const localMimirClient = useLocalMimirClient();
   const [isVerified, setIsVerified] = useState(false);
 
-  const { project, refetch: refetchProject } = useProject();
+  const {
+    project,
+    refetch: refetchProject,
+    loading: loadingProject,
+  } = useProject();
 
   const [updateConfig] = useUpdateConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
@@ -47,7 +51,7 @@ export default function HasuraDomain() {
 
   const { data, loading, error } = useGetHasuraSettingsQuery({
     variables: {
-      appId: project.id,
+      appId: project?.id,
     },
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
@@ -61,7 +65,7 @@ export default function HasuraDomain() {
     }
   }, [data, loading, form, initialValue]);
 
-  if (loading) {
+  if (loadingProject || loading) {
     return (
       <ActivityIndicator
         delay={0}
@@ -148,7 +152,7 @@ export default function HasuraDomain() {
               loading: formState.isSubmitting,
             },
           }}
-          className="grid grid-flow-row px-4 gap-x-4 gap-y-4 lg:grid-cols-5"
+          className="grid grid-flow-row gap-x-4 gap-y-4 px-4 lg:grid-cols-5"
         >
           <Input
             {...register('hasura_fqdn')}

dashboard/src/features/orgs/projects/custom-domains/settings/components/ServerlessFunctionsDomain/ServerlessFunctionsDomain.tsx

@@ -35,7 +35,11 @@ export default function ServerlessFunctionsDomain() {
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
   const [isVerified, setIsVerified] = useState(false);
-  const { project, refetch: refetchProject } = useProject();
+  const {
+    project,
+    refetch: refetchProject,
+    loading: loadingProject,
+  } = useProject();
 
   const [updateConfig] = useUpdateConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
@@ -49,7 +53,7 @@ export default function ServerlessFunctionsDomain() {
 
   const { data, loading, error } = useGetServerlessFunctionsSettingsQuery({
     variables: {
-      appId: project.id,
+      appId: project?.id,
     },
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
@@ -63,7 +67,7 @@ export default function ServerlessFunctionsDomain() {
     }
   }, [data, loading, form, initialValue]);
 
-  if (loading) {
+  if (loadingProject || loading) {
     return (
       <ActivityIndicator
         delay={1000}
@@ -151,7 +155,7 @@ export default function ServerlessFunctionsDomain() {
               loading: formState.isSubmitting,
             },
           }}
-          className="grid grid-flow-row px-4 gap-x-4 gap-y-4 lg:grid-cols-5"
+          className="grid grid-flow-row gap-x-4 gap-y-4 px-4 lg:grid-cols-5"
         >
           <Input
             {...register('functions_fqdn')}

dashboard/src/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.stories.tsx

@@ -65,8 +65,7 @@ const Template: ComponentStory<typeof ColumnAutocomplete> = function Template(
           <ColumnAutocomplete
             {...args}
             name="firstReference"
-            label="First Reference"
-            onChange={(_event, newValue) =>
+            onChange={(newValue) =>
               form.setValue('firstReference', newValue.value, {
                 shouldDirty: true,
               })
@@ -80,8 +79,7 @@ const Template: ComponentStory<typeof ColumnAutocomplete> = function Template(
           <ColumnAutocomplete
             {...args}
             name="secondReference"
-            label="Second Reference"
-            onChange={(_event, newValue) =>
+            onChange={(newValue) =>
               form.setValue('secondReference', newValue.value, {
                 shouldDirty: true,
               })

dashboard/src/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.test.tsx

@@ -7,6 +7,10 @@ import { setupServer } from 'msw/node';
 import { afterAll, afterEach, beforeAll, test, vi } from 'vitest';
 import ColumnAutocomplete from './ColumnAutocomplete';
 
+vi.mock('@/lib/utils', () => ({
+  cn: (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' '),
+}));
+
 const server = setupServer(
   tableQuery,
   hasuraMetadataQuery,
@@ -21,17 +25,9 @@ afterAll(() => {
 });
 
 test('should render a combobox', () => {
-  render(
-    <ColumnAutocomplete
-      schema="public"
-      table="books"
-      label="Column Autocomplete"
-    />,
-  );
+  render(<ColumnAutocomplete schema="public" table="books" />);
 
-  expect(
-    screen.getByRole('combobox', { name: /column autocomplete/i }),
-  ).toBeInTheDocument();
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
 });
 
 // Note: Network requests don't go through in tests, so we can't test the

dashboard/src/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx

@@ -1,39 +1,33 @@
-import { InlineCode } from '@/components/presentational/InlineCode';
-import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import type { AutocompleteOption } from '@/components/ui/v2/Autocomplete';
-import { AutocompletePopper } from '@/components/ui/v2/Autocomplete';
-import { Box } from '@/components/ui/v2/Box';
-import { IconButton } from '@/components/ui/v2/IconButton';
-import { ArrowLeftIcon } from '@/components/ui/v2/icons/ArrowLeftIcon';
-import type { InputProps } from '@/components/ui/v2/Input';
-import { Input, inputClasses } from '@/components/ui/v2/Input';
-import { List } from '@/components/ui/v2/List';
-import { OptionBase } from '@/components/ui/v2/Option';
-import { OptionGroupBase } from '@/components/ui/v2/OptionGroup';
-import { Text } from '@/components/ui/v2/Text';
+import { Button, type ButtonProps } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
 import { useMetadataQuery } from '@/features/orgs/projects/database/dataGrid/hooks/useMetadataQuery';
 import { useTableQuery } from '@/features/orgs/projects/database/dataGrid/hooks/useTableQuery';
-import { getTruncatedText } from '@/utils/getTruncatedText';
-import type { AutocompleteGroupedOption } from '@mui/base/useAutocomplete';
-import { useAutocomplete } from '@mui/base/useAutocomplete';
-import type { AutocompleteRenderGroupParams } from '@mui/material/Autocomplete';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
-import type {
-  ChangeEvent,
-  ForwardedRef,
-  HTMLAttributes,
-  PropsWithoutRef,
-  SyntheticEvent,
-} from 'react';
+import { cn } from '@/lib/utils';
+import { Check, ChevronLeft, ChevronsUpDown } from 'lucide-react';
+
+import useRuleGroupEditor from '@/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/useRuleGroupEditor';
+import { CommandLoading } from 'cmdk';
+import type { ForwardedRef } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
 import type { UseAsyncValueOptions } from './useAsyncValue';
 import useAsyncValue from './useAsyncValue';
 import type { UseColumnGroupsOptions } from './useColumnGroups';
 import useColumnGroups from './useColumnGroups';
 
-export interface ColumnAutocompleteProps
-  extends Omit<PropsWithoutRef<InputProps>, 'onChange'> {
+export interface ColumnAutocompleteProps extends Omit<ButtonProps, 'onChange'> {
+  value?: string;
   /**
    * Schema where the `table` is located.
    */
@@ -45,70 +39,39 @@ export interface ColumnAutocompleteProps
   /**
    * Function to be called when the value changes.
    */
-  onChange?: (
-    event: SyntheticEvent,
-    value: {
-      value: string;
-      columnMetadata?: Record<string, any>;
-      disableReset?: boolean;
-    },
-  ) => void;
+  onChange?: (value: {
+    value: string;
+    columnMetadata?: Record<string, any>;
+    disableReset?: boolean;
+  }) => void;
   /**
    * Function to be called when the input is asynchronously initialized.
    */
   onInitialized?: UseAsyncValueOptions['onInitialized'];
-  /**
-   * Class name to be applied to the root element.
-   */
-  rootClassName?: string;
   /**
    * Determines if the autocomplete should allow relationships.
    */
   disableRelationships?: UseColumnGroupsOptions['disableRelationships'];
 }
 
-function renderGroup(params: AutocompleteRenderGroupParams) {
-  return (
-    <li key={params.key}>
-      <OptionGroupBase>{params.group}</OptionGroupBase>
-
-      <List>{params.children}</List>
-    </li>
-  );
-}
-
-function renderOption(
-  option: AutocompleteOption<string>,
-  optionProps: HTMLAttributes<HTMLLIElement>,
-) {
-  return (
-    <OptionBase
-      {...optionProps}
-      className="grid grid-flow-col items-baseline justify-start justify-items-start gap-1.5"
-    >
-      <Text component="span">{option.label}</Text>
-
-      {option.group === 'columns' && (
-        <InlineCode>{option.metadata?.udt_name || option.value}</InlineCode>
-      )}
-    </OptionBase>
-  );
-}
-
 function ColumnAutocomplete(
   {
-    rootClassName,
     schema: defaultSchema,
     table: defaultTable,
     value: externalValue,
     disableRelationships,
     onChange,
     onInitialized,
-    ...props
   }: ColumnAutocompleteProps,
-  ref: ForwardedRef<HTMLInputElement>,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) {
   const [open, setOpen] = useState(false);
+  const [value, setValue] = useState('');
+
+  const { disabled } = useRuleGroupEditor();
+
+  const [search, setSearch] = useState('');
+
   const [activeRelationship, setActiveRelationship] = useState<{
     schema: string;
     table: string;
@@ -120,7 +83,6 @@ function ColumnAutocomplete(
   const {
     data: tableData,
     status: tableStatus,
-    error: tableError,
     isFetching: isTableFetching,
   } = useTableQuery([`default.${selectedSchema}.${selectedTable}`], {
     schema: selectedSchema,
@@ -132,7 +94,6 @@ function ColumnAutocomplete(
   const {
     data: metadata,
     status: metadataStatus,
-    error: metadataError,
     isFetching: isMetadataFetching,
   } = useMetadataQuery([`default.metadata`], {
     queryOptions: { refetchOnWindowFocus: false },
@@ -140,8 +101,6 @@ function ColumnAutocomplete(
 
   const {
     initialized,
-    inputValue,
-    setInputValue,
     selectedColumn,
     setSelectedColumn,
     selectedRelationships,
@@ -159,57 +118,20 @@ function ColumnAutocomplete(
     onInitialized,
   });
 
+  const [pages, setPages] = useState<string[]>([]);
+
+  useEffect(() => {
+    setPages(
+      relationshipDotNotation ? [relationshipDotNotation?.split('.')[0]] : [],
+    );
+  }, [relationshipDotNotation]);
+
+  const activePage = pages[pages.length - 1];
+
   useEffect(() => {
     setActiveRelationship(asyncActiveRelationship);
   }, [asyncActiveRelationship]);
 
-  function isOptionEqualToValue(
-    option: AutocompleteOption,
-    value: NonNullable<string | AutocompleteOption>,
-  ) {
-    if (!value) {
-      return false;
-    }
-
-    if (typeof value === 'string') {
-      return option.value === value;
-    }
-
-    return option.value === value.value && option.custom === value.custom;
-  }
-
-  function handleChange(
-    event: SyntheticEvent,
-    value: NonNullable<string | AutocompleteOption>,
-  ) {
-    if (typeof value === 'string' || Array.isArray(value) || !value) {
-      return;
-    }
-
-    if ('group' in value && value.group === 'columns') {
-      setSelectedColumn(value);
-      setOpen(false);
-      setInputValue(value.value);
-
-      onChange?.(event, {
-        value:
-          selectedRelationships.length > 0
-            ? [relationshipDotNotation, value.value].join('.')
-            : value.value,
-        columnMetadata: value.metadata,
-      });
-
-      return;
-    }
-
-    setInputValue('');
-    setSelectedColumn(null);
-    setSelectedRelationships((currentRelationships) => [
-      ...currentRelationships,
-      value.metadata?.target,
-    ]);
-  }
-
   const options = useColumnGroups({
     selectedSchema,
     selectedTable,
@@ -218,246 +140,214 @@ function ColumnAutocomplete(
     disableRelationships,
   });
 
-  const {
-    popupOpen,
-    anchorEl,
-    setAnchorEl,
-    getRootProps,
-    getInputLabelProps,
-    getInputProps,
-    getListboxProps,
-    getOptionProps,
-    groupedOptions,
-  } = useAutocomplete({
-    open,
-    inputValue,
-    options,
-    id: props?.name,
-    openOnFocus: !props.disabled,
-    disableCloseOnSelect: true,
-    value: selectedColumn,
-    onClose: () => setOpen(false),
-    groupBy: (option) => option.group,
-    isOptionEqualToValue,
-    onChange: handleChange,
-  });
+  const handleChange = (newValue: string) => {
+    const selectedOption = options.find((option) => option.value === newValue);
 
-  function handleInputValueChange(
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    const { value } = event.target;
-    setInputValue(value);
+    if (!selectedOption) {
+      return;
+    }
 
-    setSelectedColumn({
-      value,
-      label: value,
-      metadata: selectedColumn?.metadata || {
-        table_schema: selectedSchema,
-        table_name: selectedTable,
-      },
-    });
+    setSelectedColumn(selectedOption);
+    setOpen(false);
+    setValue(newValue === value ? '' : newValue);
 
-    onChange?.(event, {
+    const valueObj = {
       value:
         selectedRelationships.length > 0
-          ? [relationshipDotNotation, value].join('.')
-          : value,
-      columnMetadata: {
-        table_schema: selectedSchema,
-        table_name: selectedTable,
-      },
-    });
-  }
+          ? [relationshipDotNotation, newValue].join('.')
+          : newValue,
+      columnMetadata: selectedOption.metadata,
+    };
+
+    onChange?.(valueObj);
+  };
+
+  const handleRelationshipChange = (newValue: string) => {
+    const selectedOption = options.find((option) => option.value === newValue);
+
+    if (!selectedOption) {
+      return;
+    }
+
+    setPages((p) => [...p, newValue]);
+    setSelectedColumn(null);
+    setSearch('');
+    setSelectedRelationships((currentRelationships) => [
+      ...currentRelationships,
+      selectedOption.metadata?.target,
+    ]);
+  };
+
+  const columns = options.filter((option) => option.group === 'columns');
+  const relationships = options.filter(
+    (option) => option.group === 'relationships',
+  );
+
+  const handleBackRelationship = () => {
+    setPages((p) => p.slice(0, -1));
+    setSelectedColumn(null);
+    setSelectedRelationships((activeRelationships) =>
+      activeRelationships.slice(0, -1),
+    );
+    setSearch('');
+  };
+
+  const buttonPrefix = relationshipDotNotation
+    ? `${selectedTable}.${relationshipDotNotation}`
+    : '';
 
   return (
-    <>
-      <div {...getRootProps()} className={rootClassName}>
-        <Input
-          {...props}
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
           ref={ref}
-          fullWidth
-          slotProps={{
-            ...(props.slotProps || {}),
-            label: getInputLabelProps(),
-            input: {
-              ...(props.slotProps?.input || {}),
-              ref: setAnchorEl,
-              sx: [
-                ...(Array.isArray(props.slotProps?.input?.sx)
-                  ? props.slotProps.input.sx
-                  : [props.slotProps?.input?.sx || {}]),
-                {
-                  [`& .${inputClasses.input}`]: {
-                    backgroundColor: 'transparent',
-                  },
-                },
-              ],
-            },
-            inputRoot: {
-              ...getInputProps(),
-              className: twMerge(
-                Boolean(selectedColumn) || Boolean(relationshipDotNotation)
-                  ? '!pl-0'
-                  : null,
-                props.slotProps?.inputRoot?.className,
-              ),
-            },
-          }}
-          onFocus={() => {
-            if (props.disabled) {
-              return;
-            }
-
-            setOpen(true);
-          }}
-          onClick={() => {
-            if (props.disabled) {
-              return;
-            }
-
-            setOpen(true);
-          }}
-          error={Boolean(tableError || metadataError) || props.error}
-          helperText={
-            String(tableError || metadataError || '') || props.helperText
-          }
-          onChange={handleInputValueChange}
-          value={inputValue}
-          startAdornment={
-            selectedColumn || relationshipDotNotation ? (
-              <Text
-                component="span"
-                sx={{
-                  color: props.disabled ? 'text.disabled' : 'text.primary',
-                }}
-                className="!ml-2 flex-shrink-0 truncate lg:max-w-[200px]"
-              >
-                <Text component="span" color="disabled">
-                  {selectedTable}
-                </Text>
-                .
-                {relationshipDotNotation && (
-                  <>
-                    <span className="hidden lg:inline">
-                      {getTruncatedText(relationshipDotNotation, 15, 'end')}.
-                    </span>
-
-                    <span className="inline lg:hidden">
-                      {getTruncatedText(relationshipDotNotation, 35, 'end')}.
-                    </span>
-                  </>
-                )}
-              </Text>
-            ) : null
-          }
-          endAdornment={
-            tableStatus === 'loading' ||
-            metadataStatus === 'loading' ||
-            !initialized ? (
-              <ActivityIndicator className="mr-2" delay={500} />
-            ) : null
-          }
-        />
-      </div>
-
-      <AutocompletePopper
-        onMouseDown={(event) => event.preventDefault()}
-        modifiers={[{ name: 'offset', options: { offset: [0, 10] } }]}
-        placement="bottom-start"
-        open={popupOpen}
-        anchorEl={anchorEl}
-        style={{ width: anchorEl?.parentElement?.clientWidth }}
+          disabled={disabled}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="justify-between"
+        >
+          {buttonPrefix ? (
+            <div className="flex flex-shrink-0 gap-0 truncate">
+              <span className="flex-shrink-0 truncate text-sm text-muted-foreground lg:max-w-[200px]">
+                {buttonPrefix}.
+              </span>
+              {selectedColumn?.label}
+            </div>
+          ) : (
+            selectedColumn?.label || 'Select a column'
+          )}
+          <ChevronsUpDown className="ml-2 h-5 w-5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="bottom"
+        align="start"
+        className="max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)] p-0"
       >
-        <Box
-          className={autocompleteClasses.paper}
-          sx={{
-            borderWidth: (theme) => (theme.palette.mode === 'dark' ? 1 : 0),
-            borderColor: (theme) =>
-              theme.palette.mode === 'dark' ? 'grey.400' : 'none',
+        <Command
+          onKeyDown={(e) => {
+            if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {
+              e.preventDefault();
+              setPages((p) => p.slice(0, -1));
+              setSelectedColumn(null);
+              setSelectedRelationships((activeRelationships) =>
+                activeRelationships.slice(0, -1),
+              );
+            }
           }}
         >
-          <Box
-            className="grid grid-flow-col items-center justify-start gap-2 border-b-1 px-3 py-2.5"
-            sx={{ backgroundColor: 'transparent' }}
-          >
-            {selectedRelationships.length > 0 && (
-              <IconButton
-                variant="borderless"
-                color="secondary"
-                onClick={(event) => {
-                  event.stopPropagation();
-
-                  setInputValue('');
-                  setSelectedColumn(null);
-                  setSelectedRelationships((activeRelationships) =>
-                    activeRelationships.slice(0, -1),
-                  );
-                }}
+          <CommandInput
+            value={search}
+            onValueChange={setSearch}
+            autoFocus
+            placeholder=""
+            prefix={
+              relationshipDotNotation
+                ? `
+              ${selectedTable}.${relationshipDotNotation}.`
+                : ``
+            }
+          />
+          {pages?.length > 0 ? (
+            <div className="flex flex-row items-center gap-2 px-2 py-1.5">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleBackRelationship}
               >
-                <ArrowLeftIcon className="h-4 w-4" />
-              </IconButton>
-            )}
-
-            <Text className="direction-rtl truncate text-left">
-              <Text component="span" color="disabled">
-                {defaultTable}
-              </Text>
-
-              {relationshipDotNotation && (
-                <>
-                  <span className="hidden lg:inline">
-                    .{getTruncatedText(relationshipDotNotation, 20, 'start')}
-                  </span>
-
-                  <span className="inline lg:hidden">
-                    .{relationshipDotNotation}
-                  </span>
-                </>
-              )}
-            </Text>
-          </Box>
-
-          {(tableStatus === 'loading' ||
-            metadataStatus === 'loading' ||
-            !initialized) && (
-            <div className="p-2">
-              <ActivityIndicator label="Loading..." />
+                <ChevronLeft className="h-5 w-5" />
+              </Button>
+              <span className="py-1.5 text-sm text-muted-foreground">
+                {defaultTable}.{pages.join('.')}
+              </span>
             </div>
-          )}
-
-          {groupedOptions.length > 0 && (
-            <List
-              {...getListboxProps()}
-              className={autocompleteClasses.listbox}
-            >
-              {(
-                groupedOptions as AutocompleteGroupedOption<
-                  (typeof options)[number]
-                >[]
-              ).map((optionGroup) =>
-                renderGroup({
-                  key: `${optionGroup.key}`,
-                  group: optionGroup.group,
-                  children: optionGroup.options.map((option, index) =>
-                    renderOption(
-                      option,
-                      getOptionProps({
-                        option,
-                        index: optionGroup.index + index,
-                      }),
-                    ),
-                  ),
-                }),
-              )}
-            </List>
-          )}
-
-          {groupedOptions.length === 0 && Boolean(anchorEl) && (
-            <Text className={autocompleteClasses.noOptions}>No options</Text>
-          )}
-        </Box>
-      </AutocompletePopper>
-    </>
+          ) : null}
+          <CommandList>
+            {!activePage && (
+              <>
+                <CommandEmpty>No options found.</CommandEmpty>
+                {tableStatus === 'loading' ||
+                  metadataStatus === 'loading' ||
+                  (!initialized && <CommandLoading>Loading...</CommandLoading>)}
+                <CommandGroup heading="columns">
+                  {columns.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      onSelect={handleChange}
+                      className="overflow-x-hidden"
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          value === option.value ? 'opacity-100' : 'opacity-0',
+                        )}
+                      />
+                      <div className="flex gap-3">
+                        <span className="line-clamp-2 break-all">
+                          {option.label}
+                        </span>
+                        <div className="flex items-center">
+                          <code className="relative rounded bg-primary px-[0.2rem] font-mono text-white">
+                            {option.metadata?.udt_name || option.value}
+                          </code>
+                        </div>
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+                {relationships.length > 0 && !disableRelationships && (
+                  <CommandGroup heading="relationships">
+                    {relationships.map((option) => (
+                      <CommandItem
+                        key={option.value}
+                        value={option.value}
+                        onSelect={handleRelationshipChange}
+                      >
+                        {option.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                )}
+              </>
+            )}
+            {activePage && (
+              <>
+                <CommandEmpty>No options found.</CommandEmpty>
+                <CommandGroup heading="columns">
+                  {columns.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      onSelect={handleChange}
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          value === option.value ? 'opacity-100' : 'opacity-0',
+                        )}
+                      />
+                      <div className="flex gap-3">
+                        <span className="line-clamp-2 break-all">
+                          {option.label}
+                        </span>
+                        <div className="flex items-center">
+                          <code className="relative rounded bg-primary px-[0.2rem] font-mono text-white">
+                            {option.metadata?.udt_name || option.value}
+                          </code>
+                        </div>
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }
 

dashboard/src/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete/useAsyncValue.ts

@@ -53,7 +53,6 @@ export default function useAsyncValue({
   onInitialized,
 }: UseAsyncValueOptions) {
   const currentTablePath = `${selectedSchema}.${selectedTable}`;
-  const [inputValue, setInputValue] = useState('');
   const [initialized, setInitialized] = useState(false);
   // We might not going to have the most up-to-date table data because the
   // relationship is loaded asynchronously, so we need to make sure we don't
@@ -131,7 +130,6 @@ export default function useAsyncValue({
       ),
     });
     setRemainingColumnPath((columnPath) => columnPath.slice(1));
-    setInputValue(activeColumn);
   }, [
     remainingColumnPath,
     isTableLoading,
@@ -287,8 +285,6 @@ export default function useAsyncValue({
 
   return {
     initialized,
-    inputValue,
-    setInputValue,
     activeRelationship,
     selectedRelationships: initialized ? selectedRelationships : [],
     selectedColumn: initialized ? selectedColumn : null,

dashboard/src/features/orgs/projects/database/dataGrid/components/DataBrowserGrid/DataBrowserGrid.tsx

@@ -1,10 +1,4 @@
 import { useDialog } from '@/components/common/DialogProvider';
-import type { DataGridProps } from '@/components/dataGrid/DataGrid';
-import { DataGrid } from '@/components/dataGrid/DataGrid';
-import { DataGridBooleanCell } from '@/components/dataGrid/DataGridBooleanCell';
-import { DataGridDateCell } from '@/components/dataGrid/DataGridDateCell';
-import { DataGridNumericCell } from '@/components/dataGrid/DataGridNumericCell';
-import { DataGridTextCell } from '@/components/dataGrid/DataGridTextCell';
 import { FormActivityIndicator } from '@/components/form/FormActivityIndicator';
 import { InlineCode } from '@/components/presentational/InlineCode';
 import { KeyIcon } from '@/components/ui/v2/icons/KeyIcon';
@@ -23,11 +17,19 @@ import { normalizeDefaultValue } from '@/features/orgs/projects/database/dataGri
 import {
   POSTGRESQL_CHARACTER_TYPES,
   POSTGRESQL_DATE_TIME_TYPES,
+  POSTGRESQL_DECIMAL_TYPES,
+  POSTGRESQL_INTEGER_TYPES,
   POSTGRESQL_JSON_TYPES,
-  POSTGRESQL_NUMERIC_TYPES,
 } from '@/features/orgs/projects/database/dataGrid/utils/postgresqlConstants';
 import { isSchemaLocked } from '@/features/orgs/projects/database/dataGrid/utils/schemaHelpers';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import type { DataGridProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid';
+import { DataGrid } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid';
+import { DataGridBooleanCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridBooleanCell';
+import { DataGridDateCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridDateCell';
+import { DataGridDecimalCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridDecimalCell';
+import { DataGridIntegerCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridIntegerCell';
+import { DataGridTextCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridTextCell';
 import { useQueryClient } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -68,10 +70,10 @@ export function createDataGridColumn(
 
   const defaultColumnConfiguration = {
     Header: () => (
-      <div className="grid items-center justify-start grid-flow-col gap-1 font-normal">
+      <div className="grid grid-flow-col items-center justify-start gap-1 font-normal">
         {column.is_primary && <KeyIcon className="text-sm" />}
 
-        <span className="font-bold truncate" title={column.column_name}>
+        <span className="truncate font-bold" title={column.column_name}>
           {column.column_name}
         </span>
 
@@ -104,12 +106,21 @@ export function createDataGridColumn(
     foreignKeyRelation: column.foreign_key_relation,
   };
 
-  if (POSTGRESQL_NUMERIC_TYPES.includes(column.data_type)) {
+  if (POSTGRESQL_INTEGER_TYPES.includes(column.data_type)) {
     return {
       ...defaultColumnConfiguration,
       type: 'number',
       width: 200,
-      Cell: DataGridNumericCell,
+      Cell: DataGridIntegerCell,
+    };
+  }
+
+  if (POSTGRESQL_DECIMAL_TYPES.includes(column.data_type)) {
+    return {
+      ...defaultColumnConfiguration,
+      type: 'text',
+      width: 200,
+      Cell: DataGridDecimalCell,
     };
   }
 

dashboard/src/features/orgs/projects/database/dataGrid/components/DataBrowserGridControls/DataBrowserGridControls.tsx

@@ -1,7 +1,4 @@
 import { useDialog } from '@/components/common/DialogProvider';
-import { useDataGridConfig } from '@/components/dataGrid/DataGridConfigProvider';
-import type { DataGridPaginationProps } from '@/components/dataGrid/DataGridPagination';
-import { DataGridPagination } from '@/components/dataGrid/DataGridPagination';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
@@ -13,6 +10,9 @@ import { RowIcon } from '@/components/ui/v2/icons/RowIcon';
 import { useDeleteRecordMutation } from '@/features/orgs/projects/database/dataGrid/hooks/useDeleteRecordMutation';
 import type { DataBrowserGridColumn } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useDataGridConfig } from '@/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider';
+import type { DataGridPaginationProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGridPagination';
+import { DataGridPagination } from '@/features/orgs/projects/storage/dataGrid/components/DataGridPagination';
 import { triggerToast } from '@/utils/toast';
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -120,7 +120,7 @@ export default function DataBrowserGridControls({
         )}
       >
         {numberOfSelectedRows > 0 && (
-          <div className="grid items-center grid-flow-col gap-2 place-content-start">
+          <div className="grid grid-flow-col place-content-start items-center gap-2">
             <Chip
               size="small"
               color="info"
@@ -161,7 +161,7 @@ export default function DataBrowserGridControls({
         )}
 
         {numberOfSelectedRows === 0 && (
-          <div className="grid items-center grid-flow-col col-span-6 gap-2">
+          <div className="col-span-6 grid grid-flow-col items-center gap-2">
             {columns.length > 0 && (
               <DataGridPagination
                 className={twMerge(
@@ -177,7 +177,7 @@ export default function DataBrowserGridControls({
               <Dropdown.Root>
                 <Dropdown.Trigger asChild hideChevron>
                   <Button
-                    startIcon={<PlusIcon className="w-4 h-4" />}
+                    startIcon={<PlusIcon className="h-4 w-4" />}
                     size="small"
                   >
                     Insert

dashboard/src/features/orgs/projects/database/dataGrid/components/DatabaseRecordInputGroup/DatabaseRecordInputGroup.tsx

@@ -209,7 +209,6 @@ export default function DatabaseRecordInputGroup({
                 autoFocus={index === 0 && autoFocusFirstInput}
                 slotProps={{
                   label: commonLabelProps,
-                  inputRoot: { step: 1 },
                 }}
               />
             );

dashboard/src/features/orgs/projects/database/dataGrid/components/EditPermissionsForm/RolePermissionEditorForm.tsx

@@ -326,10 +326,10 @@ export default function RolePermissionEditorForm({
   return (
     <FormProvider {...form}>
       {error && error instanceof Error && (
-        <div className="px-6 mb-4 -mt-3">
+        <div className="-mt-3 mb-4 px-6">
           <Alert
             severity="error"
-            className="grid items-center justify-between grid-flow-col px-4 py-3"
+            className="grid grid-flow-col items-center justify-between px-4 py-3"
           >
             <span className="text-left">
               <strong>Error:</strong> {error.message}
@@ -349,13 +349,13 @@ export default function RolePermissionEditorForm({
 
       <Form
         onSubmit={handleSubmit}
-        className="flex flex-col content-between flex-auto overflow-hidden border-t-1"
+        className="flex flex-auto flex-col content-between overflow-hidden border-t-1"
         sx={{ backgroundColor: 'background.default' }}
       >
-        <div className="grid content-start flex-auto grid-flow-row gap-6 py-4 overflow-auto">
+        <div className="grid flex-auto grid-flow-row content-start gap-6 overflow-auto py-4">
           <PermissionSettingsSection
             title="Selected role & action"
-            className="justify-between grid-flow-col"
+            className="grid-flow-col justify-between"
           >
             <div className="grid grid-flow-col gap-4">
               <Text>
@@ -408,7 +408,7 @@ export default function RolePermissionEditorForm({
           {action !== 'select' && <BackendOnlySection disabled={disabled} />}
         </div>
 
-        <Box className="grid flex-shrink-0 gap-2 p-2 border-t-1 sm:grid-flow-col sm:justify-between">
+        <Box className="grid flex-shrink-0 gap-2 border-t-1 p-2 sm:grid-flow-col sm:justify-between">
           <Button
             variant="borderless"
             color="secondary"

dashboard/src/features/orgs/projects/database/dataGrid/components/EditPermissionsForm/validationSchemas.ts

@@ -18,21 +18,7 @@ const ruleSchema = Yup.object().shape({
 });
 
 const ruleGroupSchema = Yup.object().shape({
-  operator: Yup.string().test(
-    'operator',
-    'Please select an operator.',
-    (selectedOperator, ctx) => {
-      // `from` is part of the Yup API, but it's not typed.
-      // @ts-ignore
-      const [, { value }] = ctx.from;
-
-      if (Object.keys(value.filter).length > 0 && !selectedOperator) {
-        return false;
-      }
-
-      return true;
-    },
-  ),
+  operator: Yup.string().required('Please select an operator.'),
   rules: Yup.array().of(ruleSchema),
   groups: Yup.array().of(Yup.lazy(() => ruleGroupSchema) as any),
 });

dashboard/src/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/OperatorComboBox.tsx

@@ -0,0 +1,135 @@
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import type { HasuraOperator } from '@/features/database/dataGrid/types/dataBrowser';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+const commonOperators: {
+  value: HasuraOperator;
+  label?: string;
+  helperText?: string;
+}[] = [
+  { value: '_eq', helperText: 'equal' },
+  { value: '_neq', helperText: 'not equal' },
+  { value: '_in', helperText: 'in (array)' },
+  { value: '_nin', helperText: 'not in (array)' },
+  { value: '_gt', helperText: 'greater than' },
+  { value: '_lt', helperText: 'lower than' },
+  { value: '_gte', helperText: 'greater than or equal' },
+  { value: '_lte', helperText: 'lower than or equal' },
+  { value: '_ceq', helperText: 'equal to column' },
+  { value: '_cne', helperText: 'not equal to column' },
+  { value: '_cgt', helperText: 'greater than column' },
+  { value: '_clt', helperText: 'lower than column' },
+  { value: '_cgte', helperText: 'greater than or equal to column' },
+  { value: '_clte', helperText: 'lower than or equal to column' },
+  { value: '_is_null', helperText: 'null' },
+];
+
+const textSpecificOperators: typeof commonOperators = [
+  { value: '_like', helperText: 'like' },
+  { value: '_nlike', helperText: 'not like' },
+  { value: '_ilike', helperText: 'like (case-insensitive)' },
+  { value: '_nilike', helperText: 'not like (case-insensitive)' },
+  { value: '_similar', helperText: 'similar' },
+  { value: '_nsimilar', helperText: 'not similar' },
+  { value: '_regex', helperText: 'matches regex' },
+  { value: '_nregex', helperText: `doesn't match regex` },
+  { value: '_iregex', helperText: 'matches case-insensitive regex' },
+  { value: '_niregex', helperText: `doesn't match case-insensitive regex` },
+];
+
+interface OperatorComboBoxProps {
+  name: string;
+  disabled?: boolean;
+  selectedColumnType?: string;
+}
+
+export default function OperatorComboBox({
+  name,
+  disabled,
+  selectedColumnType,
+}: OperatorComboBoxProps) {
+  const [open, setOpen] = useState(false);
+  const { watch, setValue } = useFormContext();
+
+  const operator = watch(`${name}.operator`);
+
+  const availableOperators = [
+    ...commonOperators,
+    ...(selectedColumnType === 'text' ? textSpecificOperators : []),
+  ];
+
+  const handleSelect = (value: string) => {
+    if (['_in', '_nin'].includes(value)) {
+      setValue(`${name}.value`, [], { shouldDirty: true });
+    }
+
+    setValue(`${name}.operator`, value, { shouldDirty: true });
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          disabled={disabled}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="justify-between"
+        >
+          {operator ?? 'Select operator...'}
+          <ChevronsUpDown className="h-5 w-5 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent side="bottom" align="start" className="p-0">
+        <Command>
+          <CommandInput placeholder="Search operator..." />
+          <CommandList>
+            <CommandEmpty>No operator found.</CommandEmpty>
+            <CommandGroup>
+              {availableOperators.map((op) => (
+                <CommandItem
+                  key={op.value}
+                  keywords={[op.helperText]}
+                  value={op.value}
+                  onSelect={handleSelect}
+                  className="flex flex-row justify-between"
+                >
+                  <div className="flex flex-row gap-2">
+                    <span className="min-w-[9ch]">{op.value}</span>
+                    <span className="text-muted-foreground">
+                      {op.helperText}
+                    </span>
+                  </div>
+                  <Check
+                    className={cn(
+                      'ml-auto',
+                      op.value === operator ? 'opacity-100' : 'opacity-0',
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

dashboard/src/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/RuleEditorRow.tsx

@@ -1,12 +1,9 @@
-import { ControlledSelect } from '@/components/form/ControlledSelect';
-import { Option } from '@/components/ui/v2/Option';
-import { Text } from '@/components/ui/v2/Text';
 import { ColumnAutocomplete } from '@/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete';
-import type { HasuraOperator } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { useState } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
+import OperatorComboBox from './OperatorComboBox';
 import RuleRemoveButton from './RuleRemoveButton';
 import RuleValueInput from './RuleValueInput';
 import useRuleGroupEditor from './useRuleGroupEditor';
@@ -25,69 +22,6 @@ export interface RuleEditorRowProps
    * Function to be called when the remove button is clicked.
    */
   onRemove?: VoidFunction;
-  /**
-   * List of operators to be disabled for the rule editor.
-   *
-   * @default []
-   */
-  disabledOperators?: HasuraOperator[];
-}
-
-const commonOperators: {
-  value: HasuraOperator;
-  label?: string;
-  helperText?: string;
-}[] = [
-  { value: '_eq', helperText: 'equal' },
-  { value: '_neq', helperText: 'not equal' },
-  { value: '_in_hasura', label: '_in', helperText: 'in (X-Hasura-)' },
-  { value: '_in', helperText: 'in (array)' },
-  { value: '_nin_hasura', label: '_nin', helperText: 'not in (X-Hasura-)' },
-  { value: '_nin', helperText: 'not in (array)' },
-  { value: '_gt', helperText: 'greater than' },
-  { value: '_lt', helperText: 'lower than' },
-  { value: '_gte', helperText: 'greater than or equal' },
-  { value: '_lte', helperText: 'lower than or equal' },
-  { value: '_ceq', helperText: 'equal to column' },
-  { value: '_cne', helperText: 'not equal to column' },
-  { value: '_cgt', helperText: 'greater than column' },
-  { value: '_clt', helperText: 'lower than column' },
-  { value: '_cgte', helperText: 'greater than or equal to column' },
-  { value: '_clte', helperText: 'lower than or equal to column' },
-  { value: '_is_null', helperText: 'null' },
-];
-
-const textSpecificOperators: typeof commonOperators = [
-  { value: '_like', helperText: 'like' },
-  { value: '_nlike', helperText: 'not like' },
-  { value: '_ilike', helperText: 'like (case-insensitive)' },
-  { value: '_nilike', helperText: 'not like (case-insensitive)' },
-  { value: '_similar', helperText: 'similar' },
-  { value: '_nsimilar', helperText: 'not similar' },
-  { value: '_regex', helperText: 'matches regex' },
-  { value: '_nregex', helperText: `doesn't match regex` },
-  { value: '_iregex', helperText: 'matches case-insensitive regex' },
-  { value: '_niregex', helperText: `doesn't match case-insensitive regex` },
-];
-
-function renderOption({
-  value,
-  label,
-  helperText,
-}: (typeof commonOperators)[number]) {
-  return (
-    <Option key={value} value={value} className="grid grid-flow-col gap-2">
-      <Text component="span" className="inline-block w-16">
-        {label || value}
-      </Text>
-
-      {helperText && (
-        <Text component="span" color="disabled">
-          {helperText}
-        </Text>
-      )}
-    </Option>
-  );
 }
 
 export default function RuleEditorRow({
@@ -95,17 +29,12 @@ export default function RuleEditorRow({
   index,
   onRemove,
   className,
-  disabledOperators = [],
   ...props
 }: RuleEditorRowProps) {
-  const { schema, table, disabled } = useRuleGroupEditor();
-  const { control, setValue, getFieldState } = useFormContext();
+  const { schema, table } = useRuleGroupEditor();
+  const { control, setValue } = useFormContext();
   const rowName = `${name}.rules.${index}`;
 
-  const columnState = getFieldState(`${rowName}.column`);
-  const operatorState = getFieldState(`${rowName}.operator`);
-  const valueState = getFieldState(`${rowName}.value`);
-
   const [selectedTablePath, setSelectedTablePath] = useState<string>('');
   const [selectedColumnType, setSelectedColumnType] = useState<string>('');
   const { field: autocompleteField } = useController({
@@ -113,48 +42,19 @@ export default function RuleEditorRow({
     control,
   });
 
-  const disabledOperatorMap = disabledOperators.reduce(
-    (map, currentOperator) => map.set(currentOperator, true),
-    new Map<string, boolean>(),
-  );
-
-  const availableOperators = [
-    ...commonOperators.filter(({ value }) => !disabledOperatorMap.has(value)),
-    ...(selectedColumnType === 'text'
-      ? textSpecificOperators.filter(
-          ({ value }) => !disabledOperatorMap.get(value),
-        )
-      : []),
-  ];
-
   return (
     <div
       className={twMerge(
-        'grid grid-flow-row space-y-1 lg:max-h-10 lg:grid-cols-[320px_140px_minmax(100px,_1fr)_40px] lg:space-y-0',
+        'flex flex-col gap-1 space-y-1 overflow-x-hidden pb-4 xl:grid xl:grid-flow-row xl:grid-cols-[320px_140px_minmax(100px,_1fr)_40px] xl:space-y-0 xl:overflow-x-visible',
         className,
       )}
       {...props}
     >
       <ColumnAutocomplete
         {...autocompleteField}
-        disabled={disabled}
         schema={schema}
         table={table}
-        rootClassName="h-10"
-        slotProps={{
-          input: {
-            className: 'lg:!rounded-r-none',
-            sx: !disabled
-              ? {
-                  backgroundColor: (theme) =>
-                    theme.palette.mode === 'dark' ? 'grey.300' : 'common.white',
-                }
-              : undefined,
-          },
-        }}
-        fullWidth
-        error={Boolean(columnState?.error?.message)}
-        onChange={(_event, { value, columnMetadata, disableReset }) => {
+        onChange={({ value, columnMetadata, disableReset }) => {
           setSelectedTablePath(
             `${columnMetadata.table_schema}.${columnMetadata.table_name}`,
           );
@@ -182,69 +82,21 @@ export default function RuleEditorRow({
           });
         }}
       />
-
-      <ControlledSelect
-        disabled={disabled}
-        name={`${rowName}.operator`}
-        className="h-10"
-        slotProps={{
-          root: {
-            className: 'lg:!rounded-none',
-            sx: !disabled
-              ? {
-                  backgroundColor: (theme) =>
-                    theme.palette.mode === 'dark'
-                      ? `${theme.palette.grey[300]} !important`
-                      : `${theme.palette.common.white} !important`,
-                }
-              : {},
-          },
-          listbox: { className: 'max-h-[300px]' },
-          popper: { disablePortal: false, className: 'z-[10000]' },
-        }}
-        fullWidth
-        error={Boolean(operatorState?.error?.message)}
-        onChange={(_event, value: HasuraOperator) => {
-          if (!['_in', '_nin', '_in_hasura', '_nin_hasura'].includes(value)) {
-            return;
-          }
-
-          if (value === '_in_hasura' || value === '_nin_hasura') {
-            setValue(`${rowName}.value`, null, {
-              shouldDirty: true,
-            });
-
-            return;
-          }
-
-          setValue(`${rowName}.value`, [], { shouldDirty: true });
-        }}
-        renderValue={(option) => {
-          if (!option?.value) {
-            return <span />;
-          }
-
-          if (option.value === '_in_hasura') {
-            return <span>_in</span>;
-          }
-
-          if (option.value === '_nin_hasura') {
-            return <span>_nin</span>;
-          }
-
-          return <span>{option.value}</span>;
-        }}
-      >
-        {availableOperators.map(renderOption)}
-      </ControlledSelect>
-
+      <OperatorComboBox
+        name={rowName}
+        selectedColumnType={selectedColumnType}
+      />
       <RuleValueInput
         selectedTablePath={selectedTablePath}
         name={rowName}
-        error={Boolean(valueState?.error?.message)}
+        className="min-h-10"
       />
 
-      <RuleRemoveButton onRemove={onRemove} name={name} disabled={disabled} />
+      <RuleRemoveButton
+        className="w-full xl:w-auto"
+        onRemove={onRemove}
+        name={name}
+      />
     </div>
   );
 }

dashboard/src/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/RuleGroupControls.tsx

@@ -1,9 +1,14 @@
-import { ControlledSelect } from '@/components/form/ControlledSelect';
-import { Option } from '@/components/ui/v2/Option';
 import { Text } from '@/components/ui/v2/Text';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/v3/select';
 import type { RuleGroup } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { useWatch } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import useRuleGroupEditor from './useRuleGroupEditor';
 
@@ -32,9 +37,11 @@ export default function RuleGroupControls({
   ...props
 }: RuleGroupControlsProps) {
   const { disabled } = useRuleGroupEditor();
+  const inputName = `${name}.operator`;
   const currentOperator: RuleGroup['operator'] = useWatch({
-    name: `${name}.operator`,
+    name: inputName,
   });
+  const { setValue } = useFormContext();
 
   return (
     <div
@@ -42,24 +49,26 @@ export default function RuleGroupControls({
       {...props}
     >
       {showSelect ? (
-        <ControlledSelect
+        <Select
           disabled={disabled}
-          name={`${name}.operator`}
-          slotProps={{
-            root: {
-              sx: {
-                backgroundColor: (theme) =>
-                  theme.palette.mode === 'dark'
-                    ? `${theme.palette.grey[300]} !important`
-                    : `${theme.palette.common.white} !important`,
-              },
-            },
+          name={inputName}
+          onValueChange={(newValue: string) => {
+            setValue(inputName, newValue, { shouldDirty: true });
           }}
-          fullWidth
+          defaultValue={currentOperator}
         >
-          <Option value="_and">and</Option>
-          <Option value="_or">or</Option>
-        </ControlledSelect>
+          <SelectTrigger className="border hover:bg-accent hover:text-accent-foreground focus:ring-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="_and">
+              <span className="font-medium">and</span>
+            </SelectItem>
+            <SelectItem value="_or">
+              <span className="font-medium">or</span>
+            </SelectItem>
+          </SelectContent>
+        </Select>
       ) : (
         <Text className="p-2 !font-medium">
           {operatorDictionary[currentOperator]}

dashboard/src/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/RuleGroupEditor.stories.tsx

@@ -89,9 +89,3 @@ const Template: ComponentStory<typeof RuleGroupEditor> = function Template(
 export const Default = Template.bind({});
 Default.args = {};
 Default.parameters = defaultParameters;
-
-export const DisabledOperators = Template.bind({});
-DisabledOperators.args = {
-  disabledOperators: ['_in_hasura', '_nin_hasura', '_is_null'],
-};
-DisabledOperators.parameters = defaultParameters;

dashboard/src/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/RuleGroupEditor.tsx

@@ -5,23 +5,20 @@ import { Button } from '@/components/ui/v2/Button';
 import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
+import { generateAppServiceUrl } from '@/features/orgs/projects/common/utils/generateAppServiceUrl';
 import type {
   Rule,
   RuleGroup,
 } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
-import type { RuleEditorRowProps } from './RuleEditorRow';
 import RuleEditorRow from './RuleEditorRow';
 import RuleGroupControls from './RuleGroupControls';
 import { RuleGroupEditorContext } from './useRuleGroupEditor';
 
-export interface RuleGroupEditorProps
-  extends BoxProps,
-    Pick<RuleEditorRowProps, 'disabledOperators'> {
+export interface RuleGroupEditorProps extends BoxProps {
   /**
    * Determines whether or not the rule group editor is disabled.
    */
@@ -63,7 +60,6 @@ export default function RuleGroupEditor({
   name,
   className,
   disableRemove,
-  disabledOperators = [],
   depth = 0,
   maxDepth,
   schema,
@@ -72,7 +68,7 @@ export default function RuleGroupEditor({
   sx,
   ...props
 }: RuleGroupEditorProps) {
-  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { project } = useProject();
   const form = useFormContext();
 
   const { control, getValues } = form;
@@ -115,7 +111,7 @@ export default function RuleGroupEditor({
       <Box
         {...props}
         className={twMerge(
-          'rounded-lg border border-r-8 border-transparent pl-2',
+          'flex min-h-44 flex-col justify-between rounded-lg border border-r-8 border-transparent pl-2',
           className,
         )}
         sx={[
@@ -147,7 +143,6 @@ export default function RuleGroupEditor({
                 name={name}
                 index={ruleIndex}
                 onRemove={() => removeRule(ruleIndex)}
-                disabledOperators={disabledOperators}
               />
             </div>
           ))}
@@ -177,7 +172,6 @@ export default function RuleGroupEditor({
                   table={table}
                   onRemove={() => removeGroup(ruleGroupIndex)}
                   disableRemove={rules.length === 0 && groups.length === 1}
-                  disabledOperators={disabledOperators}
                   name={`${name}.groups.${ruleGroupIndex}`}
                   depth={depth + 1}
                   disabled={disabled}
@@ -191,13 +185,13 @@ export default function RuleGroupEditor({
               <Text>
                 This rule group contains one or more objects (e.g: _exists) that
                 are not supported by our dashboard yet.{' '}
-                {currentProject && (
+                {project && (
                   <span>
                     Please{' '}
                     <Link
                       href={`${generateAppServiceUrl(
-                        currentProject.subdomain,
-                        currentProject.region,
+                        project.subdomain,
+                        project.region,
                         'hasura',
                       )}/console/data/default/schema/${schema}/tables/${table}/permissions`}
                       underline="hover"
@@ -247,7 +241,7 @@ export default function RuleGroupEditor({
             {onRemove && (
               <Button
                 variant="borderless"
-                color="secondary"
+                color="error"
                 onClick={onRemove}
                 disabled={disableRemove}
               >

dashboard/src/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/RuleRemoveButton.tsx

@@ -1,10 +1,9 @@
-import type { ButtonProps } from '@/components/ui/v2/Button';
-import { Button } from '@/components/ui/v2/Button';
-import { XIcon } from '@/components/ui/v2/icons/XIcon';
+import { Button, type ButtonProps } from '@/components/ui/v3/button';
 import type {
   Rule,
   RuleGroup,
 } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
+import { X } from 'lucide-react';
 import { useWatch } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 
@@ -34,9 +33,9 @@ function RuleRemoveButton({
 
   return (
     <Button
-      variant="outlined"
-      color="secondary"
-      className={twMerge('h-10 !min-w-0 lg:!rounded-l-none', className)}
+      variant="outline"
+      size="icon"
+      className={twMerge('h-10 !min-w-0', className)}
       disabled={
         disabled ||
         (rules.length === 1 && !groups?.length && !unsupported?.length)
@@ -44,18 +43,8 @@ function RuleRemoveButton({
       {...props}
       aria-label="Remove Rule"
       onClick={onRemove}
-      sx={
-        !disabled
-          ? {
-              backgroundColor: (theme) =>
-                theme.palette.mode === 'dark'
-                  ? `${theme.palette.grey[300]} !important`
-                  : `${theme.palette.common.white} !important`,
-            }
-          : undefined
-      }
     >
-      <XIcon className="!h-4 !w-4" />
+      <X className="h-4 w-4" />
     </Button>
   );
 }

dashboard/src/features/orgs/projects/database/dataGrid/components/RuleGroupEditor/RuleValueInput.tsx

@@ -1,17 +1,41 @@
-import { ControlledAutocomplete } from '@/components/form/ControlledAutocomplete';
-import { ControlledSelect } from '@/components/form/ControlledSelect';
-import { ReadOnlyToggle } from '@/components/presentational/ReadOnlyToggle';
-import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import type { AutocompleteOption } from '@/components/ui/v2/Autocomplete';
-import type { InputProps } from '@/components/ui/v2/Input';
-import { inputClasses } from '@/components/ui/v2/Input';
-import { Option } from '@/components/ui/v2/Option';
-import type { ColumnAutocompleteProps } from '@/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete';
-import { ColumnAutocomplete } from '@/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandCreateItem,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import { FancyMultiSelect } from '@/components/ui/v3/fancy-multi-select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/v3/select';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import {
+  ColumnAutocomplete,
+  type ColumnAutocompleteProps,
+} from '@/features/orgs/projects/database/dataGrid/components/ColumnAutocomplete';
 import type { HasuraOperator } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { getAllPermissionVariables } from '@/features/projects/permissions/settings/utils/getAllPermissionVariables';
+import { cn } from '@/lib/utils';
 import { useGetRolesPermissionsQuery } from '@/utils/__generated__/graphql';
+import { CommandLoading } from 'cmdk';
+import { useState } from 'react';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 import useRuleGroupEditor from './useRuleGroupEditor';
 
@@ -41,23 +65,7 @@ function ColumnSelectorInput({
       schema={schema}
       table={table}
       disableRelationships
-      slotProps={{
-        input: {
-          className: 'lg:!rounded-none !z-10',
-          sx: !disabled
-            ? {
-                backgroundColor: (theme) =>
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.grey[300]
-                    : theme.palette.common.white,
-                [`& .${inputClasses.input}`]: {
-                  backgroundColor: 'transparent',
-                },
-              }
-            : undefined,
-        },
-      }}
-      onChange={(_event, { value }) => {
+      onChange={({ value }) => {
         if (selectedTablePath === `${schema}.${table}`) {
           setValue(name, [value], { shouldDirty: true });
           return;
@@ -75,113 +83,92 @@ export interface RuleValueInputProps {
    * Name of the parent group editor.
    */
   name: string;
+  /**
+   * Class name to apply to the input wrapper.
+   */
+  className?: string;
   /**
    * Path of the table selected through the column input.
    */
   selectedTablePath?: string;
-  /**
-   * Whether the input should be marked as invalid.
-   */
-  error?: InputProps['error'];
-  /**
-   * Helper text to display below the input.
-   */
-  helperText?: InputProps['helperText'];
 }
 
 export default function RuleValueInput({
   name,
   selectedTablePath,
-  error,
-  helperText,
+  className,
 }: RuleValueInputProps) {
   const { schema, table, disabled } = useRuleGroupEditor();
-  const { currentProject } = useCurrentWorkspaceAndProject();
-  const { setValue } = useFormContext();
+  const { project } = useProject();
+  const { setValue, control } = useFormContext();
   const inputName = `${name}.value`;
-  const operator: HasuraOperator = useWatch({ name: `${name}.operator` });
-  const isHasuraInput = operator === '_in_hasura' || operator === '_nin_hasura';
-  const sharedInputSx: InputProps['sx'] = !disabled
-    ? {
-        backgroundColor: (theme) =>
-          theme.palette.mode === 'dark'
-            ? theme.palette.grey[300]
-            : theme.palette.common.white,
-        [`& .${inputClasses.input}`]: {
-          backgroundColor: 'transparent',
-        },
-      }
-    : undefined;
+  const { field } = useController({
+    name: inputName,
+    control,
+  });
 
-  const {
-    data,
-    loading,
-    error: customClaimsError,
-  } = useGetRolesPermissionsQuery({
-    variables: { appId: currentProject?.id },
-    skip: !isHasuraInput || !currentProject?.id,
+  const [open, setOpen] = useState(false);
+  const comboboxValue = useWatch({ name: inputName });
+  const operator: HasuraOperator = useWatch({ name: `${name}.operator` });
+
+  const isPlatform = useIsPlatform();
+  const localMimirClient = useLocalMimirClient();
+
+  const { data, loading } = useGetRolesPermissionsQuery({
+    variables: { appId: project?.id },
+    skip: !project?.id,
+    ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   if (operator === '_is_null') {
+    const defaultValue = !Array.isArray(comboboxValue) ? comboboxValue : null;
     return (
-      <ControlledSelect
+      <Select
         disabled={disabled}
         name={inputName}
-        fullWidth
-        slotProps={{
-          root: {
-            className: 'lg:!rounded-none h-10',
-            sx: !disabled
-              ? {
-                  backgroundColor: (theme) =>
-                    theme.palette.mode === 'dark'
-                      ? `${theme.palette.grey[300]} !important`
-                      : `${theme.palette.common.white} !important`,
-                }
-              : null,
-          },
-          popper: { disablePortal: false, className: 'z-[10000]' },
+        onValueChange={(newValue: string) => {
+          setValue(inputName, newValue, { shouldDirty: true });
         }}
-        error={error}
-        helperText={helperText}
+        defaultValue={defaultValue}
       >
-        <Option value="true">
-          <ReadOnlyToggle
-            checked
-            slotProps={{ label: { className: '!text-sm' } }}
-          />
-        </Option>
-
-        <Option value="false">
-          <ReadOnlyToggle
-            checked={false}
-            slotProps={{ label: { className: '!text-sm' } }}
-          />
-        </Option>
-      </ControlledSelect>
+        <SelectTrigger className="border hover:bg-accent hover:text-accent-foreground focus:ring-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <SelectValue placeholder="Is null?" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="true">
+            <span className="font-medium">true</span>
+          </SelectItem>
+          <SelectItem value="false">
+            <span className="font-medium">false</span>
+          </SelectItem>
+        </SelectContent>
+      </Select>
     );
   }
+  const availableHasuraPermissionVariables = getAllPermissionVariables(
+    data?.config?.auth?.session?.accessToken?.customClaims,
+  ).map(({ key }) => ({
+    value: `X-Hasura-${key}`,
+    label: `X-Hasura-${key}`,
+    group: 'Frequently used',
+  }));
 
   if (operator === '_in' || operator === '_nin') {
+    const defaultValue = Array.isArray(field.value) ? field.value : [];
+
     return (
-      <ControlledAutocomplete
-        disabled={disabled}
-        name={inputName}
-        multiple
-        freeSolo
-        limitTags={3}
-        slotProps={{
-          input: {
-            className: 'lg:!rounded-none !z-10',
-            sx: sharedInputSx,
-          },
-          paper: { className: 'hidden' },
+      <FancyMultiSelect
+        className={className}
+        options={availableHasuraPermissionVariables}
+        creatable
+        defaultValue={defaultValue.map((v) => ({ value: v, label: v }))}
+        onChange={(value) => {
+          setValue(
+            inputName,
+            value.map((v) => v.value),
+            { shouldDirty: true },
+          );
         }}
-        options={[]}
-        fullWidth
-        filterSelectedOptions
-        error={error}
-        helperText={helperText}
       />
     );
   }
@@ -194,71 +181,70 @@ export default function RuleValueInput({
         schema={schema}
         table={table}
         name={inputName}
-        error={error}
-        helperText={helperText}
       />
     );
   }
 
-  const availableHasuraPermissionVariables = getAllPermissionVariables(
-    data?.config?.auth?.session?.accessToken?.customClaims,
-  ).map(({ key }) => ({
-    value: `X-Hasura-${key}`,
-    label: `X-Hasura-${key}`,
-    group: 'Frequently used',
-  }));
+  const selectedVariable = availableHasuraPermissionVariables.find(
+    (variable) => variable.value === comboboxValue,
+  );
+  const comboboxLabel =
+    selectedVariable?.label || comboboxValue || 'Select variable...';
 
   return (
-    <ControlledAutocomplete
-      disabled={disabled}
-      freeSolo={!isHasuraInput}
-      autoHighlight={isHasuraInput}
-      isOptionEqualToValue={(
-        option,
-        value: string | number | AutocompleteOption<string>,
-      ) => {
-        if (typeof value !== 'object') {
-          return option.value.toLowerCase() === value?.toString().toLowerCase();
-        }
-
-        return option.value.toLowerCase() === value.value.toLowerCase();
-      }}
-      name={inputName}
-      groupBy={(option) => option.group}
-      slotProps={{
-        input: {
-          className: 'lg:!rounded-none',
-          sx: sharedInputSx,
-        },
-        formControl: { className: '!bg-transparent' },
-        paper: { className: 'empty:border-transparent' },
-      }}
-      fullWidth
-      loading={loading}
-      loadingText={<ActivityIndicator label="Loading..." />}
-      error={Boolean(customClaimsError) || error}
-      helperText={customClaimsError?.message || helperText}
-      options={
-        isHasuraInput
-          ? availableHasuraPermissionVariables
-          : [
-              {
-                value: 'X-Hasura-User-Id',
-                label: 'X-Hasura-User-Id',
-                group: 'Frequently used',
-              },
-            ]
-      }
-      onChange={(_event, _value, reason, details) => {
-        if (
-          reason !== 'selectOption' &&
-          details.option.value !== 'X-Hasura-User-Id'
-        ) {
-          return;
-        }
-
-        setValue(inputName, details.option.value, { shouldDirty: true });
-      }}
-    />
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="justify-between"
+        >
+          <span className="truncate">{comboboxLabel}</span>
+          <ChevronsUpDown className="h-5 min-h-5 w-5 min-w-5 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="bottom"
+        align="start"
+        className="max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)] p-0"
+      >
+        <Command>
+          <CommandInput placeholder="Choose variable..." />
+          <CommandList>
+            <CommandEmpty>No variable found.</CommandEmpty>
+            {loading && <CommandLoading>Loading...</CommandLoading>}
+            <CommandGroup>
+              {availableHasuraPermissionVariables.map((variable) => (
+                <CommandItem
+                  key={variable.value}
+                  value={variable.value}
+                  onSelect={(currentValue) => {
+                    setValue(inputName, currentValue, { shouldDirty: true });
+                    setOpen(false);
+                  }}
+                >
+                  {variable.label}
+                  <Check
+                    className={cn(
+                      'ml-auto',
+                      comboboxValue === variable.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandCreateItem
+              onCreate={(currentValue) => {
+                setValue(inputName, currentValue, { shouldDirty: true });
+                setOpen(false);
+              }}
+            />
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }

dashboard/src/features/orgs/projects/database/dataGrid/hooks/useDeleteColumnMutation/useDeleteColumnMutation.ts

@@ -1,5 +1,5 @@
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
 import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
@@ -39,10 +39,10 @@ export default function useDeleteColumnMutation({
   const {
     query: { dataSourceSlug, schemaSlug, tableSlug },
   } = useRouter();
-  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { project } = useProject();
   const appUrl = generateAppServiceUrl(
-    currentProject?.subdomain,
-    currentProject?.region,
+    project?.subdomain,
+    project?.region,
     'hasura',
   );
   const mutationFn = isPlatform ? deleteColumn : deleteColumnMigration;
@@ -55,7 +55,7 @@ export default function useDeleteColumnMutation({
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
             ? getHasuraAdminSecret()
-            : customAdminSecret || currentProject?.config?.hasura.adminSecret,
+            : customAdminSecret || project?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/features/orgs/projects/database/dataGrid/types/dataBrowser/dataBrowser.ts

@@ -544,9 +544,7 @@ export type HasuraOperator =
   | '_eq'
   | '_neq'
   | '_in'
-  | '_in_hasura'
   | '_nin'
-  | '_nin_hasura'
   | '_gt'
   | '_lt'
   | '_gte'

dashboard/src/features/orgs/projects/database/dataGrid/utils/convertToRuleGroup/convertToRuleGroup.test.ts

@@ -202,36 +202,6 @@ test('should convert a complex permission to a rule group', () => {
   });
 });
 
-test(`should convert an _in or _nin value that do not have an array as value to _in_hasura or _nin_hasura`, () => {
-  expect(
-    convertToRuleGroup({ title: { _in: ['X-Hasura-Allowed-Ids'] } }),
-  ).toMatchObject({
-    operator: '_and',
-    rules: [
-      {
-        column: 'title',
-        operator: '_in',
-        value: ['X-Hasura-Allowed-Ids'],
-      },
-    ],
-    groups: [],
-  });
-
-  expect(
-    convertToRuleGroup({ title: { _in: 'X-Hasura-Allowed-Ids' } }),
-  ).toMatchObject({
-    operator: '_and',
-    rules: [
-      {
-        column: 'title',
-        operator: '_in_hasura',
-        value: 'X-Hasura-Allowed-Ids',
-      },
-    ],
-    groups: [],
-  });
-});
-
 test('should transform operators and relations if the _not operator is being used', () => {
   expect(
     convertToRuleGroup({ _not: { title: { _eq: 'test' } } }),

dashboard/src/features/orgs/projects/database/dataGrid/utils/convertToRuleGroup/convertToRuleGroup.ts

@@ -52,8 +52,6 @@ const negatedValueOperatorPairs: Record<HasuraOperator, HasuraOperator> = {
   _cgte: '_clt',
   _clte: '_cgt',
   _is_null: '_is_null',
-  _in_hasura: '_nin_hasura',
-  _nin_hasura: '_in_hasura',
 };
 
 export default function convertToRuleGroup(
@@ -151,16 +149,14 @@ export default function convertToRuleGroup(
     (currentKey === '_in' || currentKey === '_nin') &&
     typeof value === 'string'
   ) {
-    const operator = currentKey === '_in' ? '_in_hasura' : '_nin_hasura';
-
     return {
       operator: '_and',
       rules: [
         {
           column: previousKey,
           operator: shouldNegate
-            ? negatedValueOperatorPairs[operator]
-            : operator,
+            ? negatedValueOperatorPairs[currentKey]
+            : currentKey,
           value,
         },
       ],

dashboard/src/features/orgs/projects/database/dataGrid/utils/postgresqlConstants/postgresqlConstants.ts

@@ -19,20 +19,23 @@ export const POSTGRESQL_ERROR_CODES = {
  *
  * @docs https://www.postgresql.org/docs/current/datatype-numeric.html
  */
-export const POSTGRESQL_NUMERIC_TYPES = [
+export const POSTGRESQL_INTEGER_TYPES = [
   'smallint',
   'integer',
   'bigint',
-  'decimal',
-  'numeric',
-  'real',
-  'double precision',
   'smallserial',
   'serial',
   'bigserial',
   'oid',
 ];
 
+export const POSTGRESQL_DECIMAL_TYPES = [
+  'decimal',
+  'numeric',
+  'real',
+  'double precision',
+];
+
 /**
  * Character data types in PostgreSQL.
  *

dashboard/src/features/orgs/projects/database/settings/components/DatabaseConnectionInfo/DatabaseConnectionInfo.tsx

@@ -118,8 +118,8 @@ export default function DatabaseConnectionInfo() {
   }
 
   const postgresHost = generateAppServiceUrl(
-    project.subdomain,
-    project.region,
+    project?.subdomain,
+    project?.region,
     'db',
   ).replace('https://', '');
 

dashboard/src/features/orgs/projects/database/settings/components/DatabaseServiceVersionSettings/DatabaseServiceVersionSettings.tsx

@@ -43,7 +43,8 @@ const validationSchema = Yup.object({
     value: Yup.string().required('Major version is a required field'),
   })
     .label('Postgres major version')
-    .required(),
+    .required()
+    .test('not-zero', 'Invalid major version', (value) => value?.value !== '0'),
   minorVersion: Yup.object({
     label: Yup.string().required(),
     value: Yup.string().required('Minor version is a required field'),
@@ -186,18 +187,29 @@ export default function DatabaseServiceVersionSettings() {
     shouldPoll: true,
   });
 
-  const showMigrateWarning =
-    Number(selectedMajor) > Number(currentPostgresMajor);
-
   const { state } = useAppState();
   const applicationUpdating =
     state === ApplicationStatus.Updating ||
     state === ApplicationStatus.Migrating;
+
+  const applicationLive = state === ApplicationStatus.Live;
+  const applicationPaused = state === ApplicationStatus.Paused;
+  const applicationPausing = state === ApplicationStatus.Pausing;
+
+  const showMigrateWarning =
+    !applicationPaused &&
+    !applicationPausing &&
+    Number(selectedMajor) > Number(currentPostgresMajor);
+
   const applicationUnhealthy =
-    state !== ApplicationStatus.Live && !applicationUpdating;
+    !applicationLive &&
+    !applicationPaused &&
+    !applicationPausing &&
+    !applicationUpdating;
   const isMajorVersionDirty = formState?.dirtyFields?.majorVersion;
   const isMinorVersionDirty = formState?.dirtyFields?.minorVersion;
   const isDirty = isMajorVersionDirty || isMinorVersionDirty;
+
   const versionFieldsDisabled =
     applicationUpdating || applicationUnhealthy || maintenanceActive;
   const saveDisabled = versionFieldsDisabled || !isDirty;
@@ -208,7 +220,7 @@ export default function DatabaseServiceVersionSettings() {
     const newVersion = `${formValues.majorVersion.value}.${formValues.minorVersion.value}`;
 
     // Major version change
-    if (isMajorVersionDirty) {
+    if (isMajorVersionDirty && applicationLive) {
       openDialog({
         title: 'Update Postgres MAJOR version',
         component: (
@@ -228,7 +240,7 @@ export default function DatabaseServiceVersionSettings() {
       return;
     }
 
-    // Minor version change
+    // Only minor version change or project is paused/pausing
     const updateConfigPromise = updateConfig({
       variables: {
         appId: project.id,
@@ -338,7 +350,6 @@ export default function DatabaseServiceVersionSettings() {
                 return option.value;
               }}
               showCustomOption="auto"
-              isOptionEqualToValue={() => false}
               filterOptions={(options, { inputValue }) => {
                 const inputValueLower = inputValue.toLowerCase();
                 const matched = [];
@@ -383,12 +394,13 @@ export default function DatabaseServiceVersionSettings() {
                   form.setValue('majorVersion', value);
                 }
               }}
+              clearOnBlur
               fullWidth
               className="lg:col-span-1"
               label="MAJOR"
               options={availableMajorVersions}
-              error={!!formState.errors?.majorVersion?.value?.message}
-              helperText={formState.errors?.majorVersion?.value?.message}
+              error={!!formState.errors?.majorVersion?.message}
+              helperText={formState.errors?.majorVersion?.message}
               customOptionLabel={(value) => `Use custom value: "${value}"`}
             />
             <ControlledAutocomplete
@@ -424,12 +436,13 @@ export default function DatabaseServiceVersionSettings() {
 
                 return result;
               }}
+              clearOnBlur
               fullWidth
               className="lg:col-span-2"
               label="MINOR"
               options={availableMinorVersions}
-              error={!!formState.errors?.minorVersion?.value?.message}
-              helperText={formState.errors?.minorVersion?.value?.message}
+              error={!!formState.errors?.minorVersion?.message}
+              helperText={formState.errors?.minorVersion?.message}
               showCustomOption="auto"
               customOptionLabel={(value) => `Use custom value: "${value}"`}
             />

dashboard/src/features/orgs/projects/database/settings/components/DatabaseStorageCapacity/DatabaseStorageCapacity.tsx

@@ -5,28 +5,41 @@ import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { Input } from '@/components/ui/v2/Input';
+import { InputAdornment } from '@/components/ui/v2/InputAdornment';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
 import { UpgradeNotification } from '@/features/orgs/projects/common/components/UpgradeNotification';
+import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { DatabaseStorageCapacityWarning } from '@/features/orgs/projects/database/settings/components/DatabaseStorageCapacityWarning';
 import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
 import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import {
+  useGetPersistentVolumesEncryptedQuery,
   useGetPostgresSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
+import { ApplicationStatus } from '@/types/application';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  capacity: Yup.number().required().min(10),
+  capacity: Yup.number()
+    .integer('Capacity must be an integer')
+    .typeError('You must specify a number')
+    .min(1, 'Capacity must be greater than 0')
+    .required('Capacity is required'),
 });
 
-export type AuthDomainFormValues = Yup.InferType<typeof validationSchema>;
+export type DatabaseStorageCapacityFormValues = Yup.InferType<
+  typeof validationSchema
+>;
 
-export default function AuthDomain() {
+export default function DatabaseStorageCapacity() {
   const isPlatform = useIsPlatform();
   const { org } = useCurrentOrg();
   const { maintenanceActive } = useUI();
@@ -48,6 +61,15 @@ export default function AuthDomain() {
       org?.plan?.featureMaxDbSize) ||
     0;
 
+  const { data: encryptedVolumesData } = useGetPersistentVolumesEncryptedQuery({
+    variables: { appId: project?.id },
+    skip: !isPlatform,
+  });
+
+  const showEncryptionWarning = encryptedVolumesData
+    ? !encryptedVolumesData?.systemConfig?.persistentVolumesEncrypted
+    : false;
+
   const [updateConfig] = useUpdateConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
@@ -58,8 +80,32 @@ export default function AuthDomain() {
     resolver: yupResolver(validationSchema),
   });
 
-  const { formState, register, reset } = form;
+  const { state } = useAppState();
+
+  const applicationPause =
+    state === ApplicationStatus.Paused || state === ApplicationStatus.Pausing;
+
+  const { formState, register, reset, watch } = form;
   const isDirty = Object.keys(formState.dirtyFields).length > 0;
+  const newCapacity = watch('capacity');
+
+  const decreasingSize = newCapacity < capacity;
+
+  const submitDisabled = useMemo(() => {
+    if (!isDirty) {
+      return true;
+    }
+
+    if (maintenanceActive) {
+      return true;
+    }
+
+    if (decreasingSize && !applicationPause) {
+      return true;
+    }
+
+    return false;
+  }, [isDirty, maintenanceActive, decreasingSize, applicationPause]);
 
   useEffect(() => {
     if (data && !loading) {
@@ -81,7 +127,7 @@ export default function AuthDomain() {
     throw error;
   }
 
-  async function handleSubmit(formValues: AuthDomainFormValues) {
+  async function handleSubmit(formValues: DatabaseStorageCapacityFormValues) {
     await execPromiseWithErrorToast(
       async () => {
         await updateConfig({
@@ -120,7 +166,7 @@ export default function AuthDomain() {
           description="Specify the storage capacity for your PostgreSQL database."
           slotProps={{
             submitButton: {
-              disabled: !isDirty || maintenanceActive,
+              disabled: submitDisabled,
               loading: formState.isSubmitting,
             },
           }}
@@ -134,26 +180,48 @@ export default function AuthDomain() {
               {...register('capacity')}
               id="capacity"
               name="capacity"
-              type="number"
+              type="text"
+              endAdornment={
+                <InputAdornment className="absolute right-2" position="end">
+                  GB
+                </InputAdornment>
+              }
               fullWidth
               disabled={project.legacyPlan?.isFree}
               className="lg:col-span-2"
               error={Boolean(formState.errors.capacity?.message)}
               helperText={formState.errors.capacity?.message}
-              slotProps={{
-                inputRoot: {
-                  min: capacity,
-                },
-              }}
             />
           </Box>
           {!project.legacyPlan?.isFree && (
-            <Alert severity="info" className="col-span-6 text-left">
-              Note that volumes can only be increased (not decreased). Also, due
-              to an AWS limitation, the same volume can only be increased once
-              every 6 hours.
-            </Alert>
+            <DatabaseStorageCapacityWarning
+              state={state}
+              decreasingSize={decreasingSize}
+              isDirty={isDirty}
+            />
           )}
+          {showEncryptionWarning ? (
+            <Alert severity="warning" className="flex flex-col gap-3 text-left">
+              <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
+                <Text className="flex items-start gap-1 font-semibold">
+                  Disk encryption is now available!
+                </Text>
+              </div>
+              <div>
+                <Text>
+                  To enable encryption in this project all you have to do is
+                  pause & unpause it in{' '}
+                  <Link
+                    href={`/orgs/${org?.slug}/projects/${project?.subdomain}/settings`}
+                    underline="hover"
+                  >
+                    General Settings
+                  </Link>
+                  .
+                </Text>
+              </div>
+            </Alert>
+          ) : null}
         </SettingsContainer>
       </Form>
     </FormProvider>

dashboard/src/features/orgs/projects/database/settings/components/DatabaseStorageCapacityWarning/DatabaseStorageCapacityWarning.tsx

@@ -0,0 +1,73 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { Text } from '@/components/ui/v2/Text';
+import { ApplicationStatus } from '@/types/application';
+
+interface DatabaseStorageCapacityWarningProps {
+  state: ApplicationStatus;
+  decreasingSize: boolean;
+  isDirty: boolean;
+}
+
+export default function DatabaseStorageCapacityWarning({
+  state,
+  decreasingSize,
+  isDirty,
+}: DatabaseStorageCapacityWarningProps) {
+  const applicationPause =
+    state === ApplicationStatus.Paused || state === ApplicationStatus.Pausing;
+
+  if (!isDirty) {
+    return null;
+  }
+
+  if (state === ApplicationStatus.Live && !decreasingSize) {
+    return (
+      <Alert severity="warning" className="flex flex-col gap-3 text-left">
+        <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
+          <Text className="flex items-start gap-1 font-semibold">
+            <span>⚠</span> Warning: Increasing disk size
+          </Text>
+        </div>
+        <div>
+          <Text>
+            Due to AWS limitations, disk size can only be modified once every 6
+            hours. Please ensure you increase capacity sufficiently to cover
+            your needs during this period.
+          </Text>
+        </div>
+      </Alert>
+    );
+  }
+  if (state === ApplicationStatus.Live && decreasingSize) {
+    return (
+      <Alert severity="warning" className="flex flex-col gap-3 text-left">
+        <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
+          <Text className="flex items-start gap-1 font-semibold">
+            <span>⚠</span> Warning: Decreasing disk size requires project to be
+            paused first.
+          </Text>
+        </div>
+      </Alert>
+    );
+  }
+  if (applicationPause && decreasingSize) {
+    return (
+      <Alert severity="warning" className="flex flex-col gap-3 text-left">
+        <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
+          <Text className="flex items-start gap-1 font-semibold">
+            <span>⚠</span> Warning: Ensure enough space before downsizing.
+          </Text>
+        </div>
+        <div>
+          <Text>
+            Before downsizing, ensure enough space for your database, WAL files,
+            and other supporting data to prevent issues when unpausing your
+            project.
+          </Text>
+        </div>
+      </Alert>
+    );
+  }
+
+  return null;
+}

dashboard/src/features/orgs/projects/database/settings/components/DatabaseStorageCapacityWarning/index.ts

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

dashboard/src/features/orgs/projects/database/settings/gql/getPersistentVolumesEncrypted.gql

@@ -0,0 +1,5 @@
+query GetPersistentVolumesEncrypted($appId: uuid!) {
+  systemConfig(appID: $appId) {
+    persistentVolumesEncrypted
+  }
+}

dashboard/src/features/orgs/projects/hooks/useProject/useProject.ts

@@ -12,10 +12,6 @@ import { useMemo } from 'react';
 
 type Project = GetProjectQuery['apps'][0];
 
-interface UseProjectOptions {
-  poll?: boolean;
-}
-
 export interface UseProjectReturnType {
   project: Project;
   loading?: boolean;
@@ -23,9 +19,7 @@ export interface UseProjectReturnType {
   refetch: (variables?: any) => Promise<any>;
 }
 
-export default function useProject({
-  poll = false,
-}: UseProjectOptions = {}): UseProjectReturnType {
+export default function useProject(): UseProjectReturnType {
   const {
     query: { appSubdomain },
     isReady: isRouterReady,
@@ -46,7 +40,7 @@ export default function useProject({
   );
 
   const { data, isLoading, refetch, error } = useQuery(
-    ['currentProject', appSubdomain as string],
+    ['project', appSubdomain as string],
     async () => {
       const response = await client.graphql.request<{
         apps: ProjectFragment[];
@@ -57,11 +51,6 @@ export default function useProject({
     },
     {
       enabled: shouldFetchProject,
-      keepPreviousData: true,
-      refetchInterval: poll ? 10000 : false,
-      refetchOnWindowFocus: true,
-      staleTime: 1000 * 60 * 5, // 1 minutes
-      cacheTime: 1000 * 60 * 6, //
     },
   );
 

dashboard/src/features/orgs/projects/hooks/useProjectWithState/index.ts

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

dashboard/src/features/orgs/projects/hooks/useProjectWithState/useProjectWithState.ts

@@ -0,0 +1,77 @@
+import { localApplication } from '@/features/orgs/utils/local-dashboard';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import {
+  GetProjectStateDocument,
+  type GetProjectQuery,
+  type ProjectFragment,
+} from '@/utils/__generated__/graphql';
+import { useAuthenticationStatus, useNhostClient } from '@nhost/nextjs';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+
+type Project = GetProjectQuery['apps'][0];
+
+export interface UseProjectWithStateReturnType {
+  project: Project;
+  loading?: boolean;
+  error?: Error;
+  refetch: (variables?: any) => Promise<any>;
+}
+
+export default function useProjectWithState(): UseProjectWithStateReturnType {
+  const {
+    query: { appSubdomain },
+    isReady: isRouterReady,
+  } = useRouter();
+  const client = useNhostClient();
+  const isPlatform = useIsPlatform();
+  const { isAuthenticated, isLoading: isAuthLoading } =
+    useAuthenticationStatus();
+
+  const shouldFetchProject = useMemo(
+    () =>
+      isPlatform &&
+      isAuthenticated &&
+      !isAuthLoading &&
+      !!appSubdomain &&
+      isRouterReady,
+    [isPlatform, isAuthenticated, isAuthLoading, appSubdomain, isRouterReady],
+  );
+
+  const { data, isLoading, refetch, error } = useQuery(
+    ['projectWithState', appSubdomain as string],
+    async () => {
+      const response = await client.graphql.request<{
+        apps: ProjectFragment[];
+      }>(GetProjectStateDocument, {
+        subdomain: (appSubdomain as string) || '',
+      });
+      return response;
+    },
+    {
+      enabled: shouldFetchProject,
+      keepPreviousData: true,
+      refetchOnWindowFocus: true,
+      refetchInterval: 10000, // poll every 10s
+      staleTime: 1000 * 60 * 5, // 1 minutes
+      cacheTime: 1000 * 60 * 6, //
+    },
+  );
+
+  if (isPlatform) {
+    return {
+      project: data?.data?.apps?.[0] || null,
+      loading: isLoading && shouldFetchProject,
+      error: Array.isArray(error || {}) ? error[0] : error,
+      refetch,
+    };
+  }
+
+  return {
+    project: localApplication,
+    loading: false,
+    error: null,
+    refetch: () => Promise.resolve(),
+  };
+}

dashboard/src/features/orgs/projects/logs/components/LogsHeader/LogsHeader.tsx

@@ -13,8 +13,8 @@ import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { LogsRangeSelector } from '@/features/orgs/projects/logs/components/LogsRangeSelector';
 import { AvailableLogsService } from '@/features/orgs/projects/logs/utils/constants/services';
-import { MINUTES_TO_DECREASE_FROM_CURRENT_DATE } from '@/utils/constants/common';
 import { useGetServiceLabelValuesQuery } from '@/utils/__generated__/graphql';
+import { MINUTES_TO_DECREASE_FROM_CURRENT_DATE } from '@/utils/constants/common';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { subMinutes } from 'date-fns';
 import { useEffect, useState } from 'react';
@@ -55,7 +55,7 @@ export default function LogsHeader({
 
   const { data, loading: loadingServiceLabelValues } =
     useGetServiceLabelValuesQuery({
-      variables: { appID: project.id },
+      variables: { appID: project?.id },
     });
 
   useEffect(() => {
@@ -121,7 +121,7 @@ export default function LogsHeader({
           <Box className="flex flex-row space-x-2">
             <ControlledSelect
               {...register('service')}
-              className="w-full text-sm font-normal min-w-fit"
+              className="w-full min-w-fit text-sm font-normal"
               placeholder="All Services"
               aria-label="Select service"
               hideEmptyHelperText
@@ -165,12 +165,12 @@ export default function LogsHeader({
                   },
                 }}
                 title={
-                  <div className="p-2 space-y-4">
+                  <div className="space-y-4 p-2">
                     <h2>Here are some useful regular expressions:</h2>
-                    <ul className="pl-3 space-y-2 list-disc">
+                    <ul className="list-disc space-y-2 pl-3">
                       <li>
                         use
-                        <code className="px-1 py-px mx-1 rounded-md bg-slate-500 text-slate-100">
+                        <code className="mx-1 rounded-md bg-slate-500 px-1 py-px text-slate-100">
                           (?i)error
                         </code>
                         to search for lines with the word <b>error</b> (case
@@ -178,7 +178,7 @@ export default function LogsHeader({
                       </li>
                       <li>
                         use
-                        <code className="px-1 py-px mx-1 rounded-md bg-slate-500 text-slate-100">
+                        <code className="mx-1 rounded-md bg-slate-500 px-1 py-px text-slate-100">
                           error
                         </code>
                         to search for lines with the word <b>error</b> (case
@@ -186,7 +186,7 @@ export default function LogsHeader({
                       </li>
                       <li>
                         use
-                        <code className="px-1 py-px mx-1 rounded-md bg-slate-500 text-slate-100">
+                        <code className="mx-1 rounded-md bg-slate-500 px-1 py-px text-slate-100">
                           /metadata.*error
                         </code>
                         to search for errors in hasura&apos;s metadata endpoint
@@ -208,10 +208,10 @@ export default function LogsHeader({
                   </div>
                 }
               >
-                <Box className="ml-2 rounded-full cursor-pointer">
+                <Box className="ml-2 cursor-pointer rounded-full">
                   <InfoIcon
                     aria-label="Info"
-                    className="w-5 h-5"
+                    className="h-5 w-5"
                     color="info"
                   />
                 </Box>
@@ -224,7 +224,7 @@ export default function LogsHeader({
             className="h-10"
             startIcon={
               loading ? (
-                <ActivityIndicator className="w-4 h-4" />
+                <ActivityIndicator className="h-4 w-4" />
               ) : (
                 <SearchIcon />
               )

dashboard/src/features/orgs/projects/metrics/settings/components/MetricsSMTPSettings/MetricsSMTPSettings.tsx

@@ -28,7 +28,7 @@ const smtpValidationSchema = yup
       .required(),
     user: yup.string().label('Username').required(),
     password: yup.string().label('Password'),
-    sender: yup.string().label('SMTP Sender').email().required(),
+    sender: yup.string().label('SMTP Sender').required(),
   })
   .required();
 

dashboard/src/features/orgs/projects/metrics/settings/components/MetricsSettings/MetricsSettings.tsx

@@ -33,15 +33,24 @@ export default function MetricsSettings() {
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project, refetch: refetchProject } = useProject();
+  const {
+    project,
+    refetch: refetchProject,
+    loading: loadingProject,
+  } = useProject();
   const [updateConfig] = useUpdateConfigMutation({
     refetchQueries: [GetObservabilitySettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
-  const { data, loading, error } = useGetObservabilitySettingsQuery({
+  const {
+    data,
+    loading: loadingObservabilitySettings,
+    error,
+  } = useGetObservabilitySettingsQuery({
     variables: { appId: project?.id },
     ...(!isPlatform ? { client: localMimirClient } : {}),
+    skip: !project?.id,
   });
 
   const { enabled: alertingEnabled } =
@@ -59,14 +68,14 @@ export default function MetricsSettings() {
   const alerting = watch('enabled');
 
   useEffect(() => {
-    if (!loading) {
+    if (!loadingObservabilitySettings) {
       alertingForm.reset({
         enabled: alertingEnabled,
       });
     }
-  }, [loading, alertingEnabled, alertingForm]);
+  }, [loadingObservabilitySettings, alertingEnabled, alertingForm]);
 
-  if (loading) {
+  if (loadingProject || loadingObservabilitySettings) {
     return (
       <ActivityIndicator
         delay={1000}
@@ -124,7 +133,7 @@ export default function MetricsSettings() {
   }
 
   return (
-    <div className="grid max-w-5xl grid-flow-row bg-transparent gap-y-6">
+    <div className="grid max-w-5xl grid-flow-row gap-y-6 bg-transparent">
       <FormProvider {...alertingForm}>
         <Form onSubmit={handleSubmit}>
           <SettingsContainer

dashboard/src/features/orgs/projects/overview/features/features.tsx

@@ -10,28 +10,28 @@ const features: CardProps[] = [
     description: 'Learn how to use Postgres with Nhost',
     icon: <DatabaseIcon className="h-8 w-8" sx={{ color: 'text.secondary' }} />,
     disableIconBackground: true,
-    link: 'https://docs.nhost.io/platform/database',
+    link: 'https://docs.nhost.io/product/database',
   },
   {
     title: 'GraphQL API',
     description: 'Learn how to interact with the GraphQL API',
     icon: <GraphQLIcon className="h-8 w-8" sx={{ color: 'text.secondary' }} />,
     disableIconBackground: true,
-    link: 'https://docs.nhost.io/platform/graphql',
+    link: 'https://docs.nhost.io/product/graphql',
   },
   {
     title: 'Authentication',
     description: 'Learn how to authenticate users with Nhost',
     icon: <UserIcon className="h-8 w-8" sx={{ color: 'text.secondary' }} />,
     disableIconBackground: true,
-    link: 'https://docs.nhost.io/platform/authentication',
+    link: 'https://docs.nhost.io/product/authentication',
   },
   {
     title: 'Storage',
     description: 'Learn how to use Storage with Nhost',
     icon: <StorageIcon className="h-8 w-8" sx={{ color: 'text.secondary' }} />,
     disableIconBackground: true,
-    link: 'https://docs.nhost.io/platform/storage',
+    link: 'https://docs.nhost.io/product/storage',
   },
 ];
 

dashboard/src/features/orgs/projects/resources/settings/components/ResourcesForm/ResourcesForm.tsx

@@ -18,15 +18,19 @@ import { calculateBillableResources } from '@/features/orgs/projects/resources/s
 import type { ResourceSettingsFormValues } from '@/features/orgs/projects/resources/settings/utils/resourceSettingsValidationSchema';
 import { resourceSettingsValidationSchema } from '@/features/orgs/projects/resources/settings/utils/resourceSettingsValidationSchema';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
-import {
-  RESOURCE_VCPU_MULTIPLIER,
-  RESOURCE_VCPU_PRICE,
-} from '@/utils/constants/common';
-import type { GetResourcesQuery } from '@/utils/__generated__/graphql';
+import type {
+  ConfigConfigUpdateInput,
+  GetResourcesQuery,
+} from '@/utils/__generated__/graphql';
 import {
   useGetResourcesQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
+import {
+  RESOURCE_VCPU_MULTIPLIER,
+  RESOURCE_VCPU_PRICE,
+} from '@/utils/constants/common';
+import { removeTypename } from '@/utils/helpers';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
@@ -36,7 +40,7 @@ function getInitialServiceResources(
   data: GetResourcesQuery,
   service: Exclude<keyof GetResourcesQuery['config'], '__typename'>,
 ) {
-  const { compute, replicas, autoscaler } =
+  const { compute, replicas, autoscaler, ...rest } =
     data?.config?.[service]?.resources || {};
 
   return {
@@ -44,6 +48,7 @@ function getInitialServiceResources(
     vcpu: compute?.cpu || 0,
     memory: compute?.memory || 0,
     autoscale: autoscaler || null,
+    rest,
   };
 }
 
@@ -176,76 +181,130 @@ export default function ResourcesForm() {
     ? (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) * RESOURCE_VCPU_PRICE
     : 0;
 
+  const getFormattedConfig = (
+    values: ResourceSettingsFormValues,
+  ): ConfigConfigUpdateInput => {
+    const sanitizedValues = removeTypename(
+      values,
+    ) as ResourceSettingsFormValues;
+
+    const sanitizedInitialDatabaseResources = removeTypename(
+      initialDatabaseResources,
+    );
+    const sanitizedInitialHasuraResources = removeTypename(
+      initialHasuraResources,
+    );
+    const sanitizedInitialAuthResources = removeTypename(initialAuthResources);
+    const sanitizedInitialStorageResources = removeTypename(
+      initialStorageResources,
+    );
+
+    if (sanitizedValues.enabled) {
+      return {
+        postgres: {
+          resources: {
+            compute: {
+              cpu: sanitizedValues.database.vcpu,
+              memory: sanitizedValues.database.memory,
+            },
+            replicas: sanitizedValues.database.replicas,
+            autoscaler: sanitizedValues.database.autoscale
+              ? {
+                  maxReplicas: sanitizedValues.database.maxReplicas,
+                }
+              : null,
+            ...sanitizedInitialDatabaseResources.rest,
+          },
+        },
+        hasura: {
+          resources: {
+            compute: {
+              cpu: sanitizedValues.hasura.vcpu,
+              memory: sanitizedValues.hasura.memory,
+            },
+            replicas: sanitizedValues.hasura.replicas,
+            autoscaler: sanitizedValues.hasura.autoscale
+              ? {
+                  maxReplicas: sanitizedValues.hasura.maxReplicas,
+                }
+              : null,
+            ...sanitizedInitialHasuraResources.rest,
+          },
+        },
+        auth: {
+          resources: {
+            compute: {
+              cpu: sanitizedValues.auth.vcpu,
+              memory: sanitizedValues.auth.memory,
+            },
+            replicas: sanitizedValues.auth.replicas,
+            autoscaler: sanitizedValues.auth.autoscale
+              ? {
+                  maxReplicas: sanitizedValues.auth.maxReplicas,
+                }
+              : null,
+            ...sanitizedInitialAuthResources.rest,
+          },
+        },
+        storage: {
+          resources: {
+            compute: {
+              cpu: sanitizedValues.storage.vcpu,
+              memory: sanitizedValues.storage.memory,
+            },
+            replicas: sanitizedValues.storage.replicas,
+            autoscaler: sanitizedValues.storage.autoscale
+              ? {
+                  maxReplicas: sanitizedValues.storage.maxReplicas,
+                }
+              : null,
+            ...sanitizedInitialStorageResources.rest,
+          },
+        },
+      };
+    }
+
+    return {
+      postgres: {
+        resources: {
+          compute: null,
+          replicas: null,
+          autoscaler: null,
+          ...sanitizedInitialDatabaseResources.rest,
+        },
+      },
+      hasura: {
+        resources: {
+          compute: null,
+          replicas: null,
+          autoscaler: null,
+          ...sanitizedInitialHasuraResources.rest,
+        },
+      },
+      auth: {
+        resources: {
+          compute: null,
+          replicas: null,
+          autoscaler: null,
+          ...sanitizedInitialAuthResources.rest,
+        },
+      },
+      storage: {
+        resources: {
+          compute: null,
+          replicas: null,
+          autoscaler: null,
+          ...sanitizedInitialStorageResources.rest,
+        },
+      },
+    };
+  };
+
   async function handleSubmit(formValues: ResourceSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: project?.id,
-        config: {
-          postgres: {
-            resources: formValues.enabled
-              ? {
-                  compute: {
-                    cpu: formValues.database.vcpu,
-                    memory: formValues.database.memory,
-                  },
-                  replicas: formValues.database.replicas,
-                  autoscaler: formValues.database.autoscale
-                    ? {
-                        maxReplicas: formValues.database.maxReplicas,
-                      }
-                    : null,
-                }
-              : null,
-          },
-          hasura: {
-            resources: formValues.enabled
-              ? {
-                  compute: {
-                    cpu: formValues.hasura.vcpu,
-                    memory: formValues.hasura.memory,
-                  },
-                  replicas: formValues.hasura.replicas,
-                  autoscaler: formValues.hasura.autoscale
-                    ? {
-                        maxReplicas: formValues.hasura.maxReplicas,
-                      }
-                    : null,
-                }
-              : null,
-          },
-          auth: {
-            resources: formValues.enabled
-              ? {
-                  compute: {
-                    cpu: formValues.auth.vcpu,
-                    memory: formValues.auth.memory,
-                  },
-                  replicas: formValues.auth.replicas,
-                  autoscaler: formValues.auth.autoscale
-                    ? {
-                        maxReplicas: formValues.auth.maxReplicas,
-                      }
-                    : null,
-                }
-              : null,
-          },
-          storage: {
-            resources: formValues.enabled
-              ? {
-                  compute: {
-                    cpu: formValues.storage.vcpu,
-                    memory: formValues.storage.memory,
-                  },
-                  replicas: formValues.storage.replicas,
-                  autoscaler: formValues.storage.autoscale
-                    ? {
-                        maxReplicas: formValues.storage.maxReplicas,
-                      }
-                    : null,
-                }
-              : null,
-          },
-        },
+        config: getFormattedConfig(formValues),
       },
     });
 

dashboard/src/features/orgs/projects/resources/settings/components/ServiceResourcesFormFragment/ServiceResourcesFormFragment.tsx

@@ -171,7 +171,7 @@ export default function ServiceResourcesFormFragment({
       </Box>
 
       <Box className="grid grid-flow-row gap-2">
-        <Box className="grid items-center justify-between grid-flow-col gap-2">
+        <Box className="grid grid-flow-col items-center justify-between gap-2">
           <Text>
             Allocated vCPUs:{' '}
             <span className="font-medium">
@@ -201,7 +201,7 @@ export default function ServiceResourcesFormFragment({
       </Box>
 
       <Box className="grid grid-flow-row gap-2">
-        <Box className="grid items-center justify-between grid-flow-col gap-2">
+        <Box className="grid grid-flow-col items-center justify-between gap-2">
           <Text>
             Allocated Memory:{' '}
             <span className="font-medium">
@@ -246,7 +246,7 @@ export default function ServiceResourcesFormFragment({
                 >
                   <ExclamationIcon
                     color="error"
-                    className="w-4 h-4"
+                    className="h-4 w-4"
                     aria-hidden="false"
                   />
                 </Tooltip>
@@ -274,7 +274,7 @@ export default function ServiceResourcesFormFragment({
                 >
                   <ExclamationIcon
                     color="error"
-                    className="w-4 h-4"
+                    className="h-4 w-4"
                     aria-hidden="false"
                   />
                 </Tooltip>
@@ -306,7 +306,7 @@ export default function ServiceResourcesFormFragment({
             <Tooltip
               title={`Enable autoscaler to automatically provision extra ${title} replicas when needed.`}
             >
-              <InfoOutlinedIcon className="w-4 h-4 text-black" />
+              <InfoOutlinedIcon className="h-4 w-4" />
             </Tooltip>
           </Box>
         </Box>
@@ -323,7 +323,7 @@ export default function ServiceResourcesFormFragment({
             className="font-medium"
           >
             Service Replicas
-            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+            <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
           </Link>
         </Text>
       )}

dashboard/src/features/orgs/projects/resources/settings/gql/getResources.gql

@@ -9,6 +9,11 @@ fragment ServiceResources on ConfigConfig {
       autoscaler {
         maxReplicas
       }
+      networking {
+        ingresses {
+          fqdn
+        }
+      }
     }
   }
   hasura {
@@ -21,10 +26,19 @@ fragment ServiceResources on ConfigConfig {
       autoscaler {
         maxReplicas
       }
+      networking {
+        ingresses {
+          fqdn
+        }
+      }
     }
   }
   postgres {
     resources {
+      storage {
+        capacity
+      }
+      enablePublicAccess
       compute {
         cpu
         memory

dashboard/src/features/orgs/projects/services/components/ServiceForm/ServiceForm.tsx

@@ -19,7 +19,6 @@ import { StorageFormSection } from '@/features/orgs/projects/services/components
 import { useHostName } from '@/features/projects/common/hooks/useHostName';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { COST_PER_VCPU } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
-import { v4 as uuidv4 } from 'uuid';
 
 import {
   validationSchema,
@@ -29,16 +28,15 @@ import {
 
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import {
+  useInsertRunServiceConfigMutation,
+  useReplaceRunServiceConfigMutation,
+  type ConfigRunServiceConfigInsertInput,
+} from '@/utils/__generated__/graphql';
 import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
 import { copy } from '@/utils/copy';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { removeTypename } from '@/utils/helpers';
-import {
-  useInsertRunServiceConfigMutation,
-  useInsertRunServiceMutation,
-  useReplaceRunServiceConfigMutation,
-  type ConfigRunServiceConfigInsertInput,
-} from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useMemo, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -58,9 +56,10 @@ export default function ServiceForm({
   const isPlatform = useIsPlatform();
   const localMimirClient = useLocalMimirClient();
   const { onDirtyStateChange, openDialog, closeDialog } = useDialog();
-  const [insertRunService] = useInsertRunServiceMutation();
   const { project } = useProject();
-  const [insertRunServiceConfig] = useInsertRunServiceConfigMutation();
+  const [insertRunServiceConfig] = useInsertRunServiceConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
   const [replaceRunServiceConfig] = useReplaceRunServiceConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
@@ -96,14 +95,14 @@ export default function ServiceForm({
     if (serviceID) {
       return serviceID;
     }
-    return uuidv4();
+    return '<uuid-to-be-generated-on-creation>';
   }, [serviceID]);
 
   const privateRegistryImage = `registry.${project?.region.name}.${project?.region.domain}/${newServiceID}`;
 
   let initialImageType: 'public' | 'private' | 'nhost' = 'public';
 
-  if (initialData?.image?.startsWith(privateRegistryImage)) {
+  if (initialData?.image?.startsWith(privateRegistryImage.split('/')[0])) {
     initialImageType = 'nhost';
   }
 
@@ -225,33 +224,14 @@ export default function ServiceForm({
         });
       }
     } else {
-      // Insert service config
-      const {
-        data: {
-          insertRunService: { id },
-        },
-      } = await insertRunService({
-        variables: {
-          object: {
-            appID: project.id,
-            id: newServiceID,
-          },
-        },
-      });
-
+      // Create service
       await insertRunServiceConfig({
         variables: {
           appID: project.id,
-          serviceID: id,
           config: {
             ...config,
             image: {
-              // If the image field left empty then we auto-populate following this format
-              // registry.<region>.<nhost_domain>/<service_id>
-              image:
-                values.image.length > 0
-                  ? values.image
-                  : `registry.${project.region.name}.${project.region.domain}/${newServiceID}`,
+              image: values.image,
               pullCredentials:
                 values.pullCredentials?.length > 0
                   ? values.pullCredentials
@@ -335,7 +315,7 @@ export default function ServiceForm({
               <Tooltip title="Name of the service, must be unique per project.">
                 <InfoIcon
                   aria-label="Info"
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   color="primary"
                 />
               </Tooltip>
@@ -359,7 +339,7 @@ export default function ServiceForm({
               <Tooltip title="Command to run when to start the service. This is optional as the image may already have a baked-in command.">
                 <InfoIcon
                   aria-label="Info"
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   color="primary"
                 />
               </Tooltip>
@@ -414,7 +394,7 @@ export default function ServiceForm({
         {createServiceFormError && (
           <Alert
             severity="error"
-            className="grid items-center justify-between grid-flow-col px-4 py-3"
+            className="grid grid-flow-col items-center justify-between px-4 py-3"
           >
             <span className="text-left">
               <strong>Error:</strong> {createServiceFormError.message}

dashboard/src/features/orgs/projects/services/components/ServiceForm/ServiceFormTypes.ts

@@ -12,7 +12,11 @@ import {
 
 export const validationSchema = Yup.object({
   name: Yup.string().required('The name is required.'),
-  image: Yup.string().label('Image to run').required('The image is required.'),
+  image: Yup.string()
+    .trim()
+    .label('Image to run')
+    .required('The image is required.')
+    .min(1, 'Image must be at least 1 character long'),
   pullCredentials: Yup.string().label('Pull credentials').nullable(),
   command: Yup.string(),
   environment: Yup.array().of(

dashboard/src/features/orgs/projects/services/components/ServiceForm/components/ReplicasFormSection/ReplicasFormSection.tsx

@@ -45,7 +45,7 @@ export default function ReplicasFormSection() {
   };
 
   return (
-    <Box className="p-4 space-y-4 rounded border-1">
+    <Box className="space-y-4 rounded border-1 p-4">
       <Box className="flex flex-row items-center space-x-2">
         <Text variant="h4" className="font-semibold">
           Replicas ({replicas})
@@ -65,7 +65,7 @@ export default function ReplicasFormSection() {
             </Text>
           }
         >
-          <InfoIcon aria-label="Info" className="w-4 h-4" color="primary" />
+          <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
         </Tooltip>
       </Box>
 
@@ -121,7 +121,7 @@ export default function ReplicasFormSection() {
           />
           <Text>Autoscaler</Text>
           <Tooltip title="Enable autoscaler to automatically provision extra run service replicas when needed.">
-            <InfoOutlinedIcon className="w-4 h-4 text-black" />
+            <InfoOutlinedIcon className="h-4 w-4" />
           </Tooltip>
         </Box>
       </Box>

dashboard/src/features/orgs/projects/services/hooks/useRunServices/useRunServices.ts

@@ -46,7 +46,7 @@ export default function useRunServices() {
     refetch: refetchPlatformServices,
   } = useGetRunServicesQuery({
     variables: {
-      appID: project.id,
+      appID: project?.id,
       resolve: false,
       limit: limit.current,
       offset,
@@ -59,7 +59,7 @@ export default function useRunServices() {
     data: localServicesData,
     refetch: refetchLocalServices,
   } = useGetLocalRunServiceConfigsQuery({
-    variables: { appID: project.id as any, resolve: false },
+    variables: { appID: project?.id as any, resolve: false },
     skip: isPlatform,
     client: localMimirClient,
   });

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGrid/DataGrid.tsx

@@ -1,13 +1,13 @@
-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 { DataBrowserEmptyState } from '@/features/orgs/projects/database/dataGrid/components/DataBrowserEmptyState';
+import type { DataBrowserGridColumn } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
+import type { UseDataGridOptions } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid/useDataGrid';
+import { DataGridBody } from '@/features/orgs/projects/storage/dataGrid/components/DataGridBody';
+import { DataGridConfigProvider } from '@/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider';
+import { DataGridFrame } from '@/features/orgs/projects/storage/dataGrid/components/DataGridFrame';
+import type { DataGridHeaderProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGridHeader';
+import { DataGridHeader } from '@/features/orgs/projects/storage/dataGrid/components/DataGridHeader';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';

dashboard/src/features/orgs/projects/storage/dataGrid/components/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 { DataBrowserGridColumn } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
+import type { DataGridProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid/DataGrid';
+import { DataGridCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridCell';
+import { useDataGridConfig } from '@/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider';
 import type { DetailedHTMLProps, HTMLProps, KeyboardEvent } from 'react';
 import { Fragment, useMemo, useRef } from 'react';
 import type { Row } from 'react-table';

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridBooleanCell/DataGridBooleanCell.tsx

@@ -1,8 +1,8 @@
-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 type { CommonDataGridCellProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGridCell';
+import { useDataGridCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridCell';
+import type { MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export type DataGridBooleanCellProps<TData extends object> =

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridCell/DataGridCell.tsx

@@ -6,7 +6,7 @@ import type {
   ColumnType,
   DataBrowserGridCell,
   DataBrowserGridCellProps,
-} from '@/features/database/dataGrid/types/dataBrowser';
+} from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
 import { triggerToast } from '@/utils/toast';
 import type {
   FocusEvent,

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider/DataGridConfigContext.ts

@@ -1,4 +1,4 @@
-import type { UseDataGridReturn } from '@/components/dataGrid/DataGrid';
+import type { UseDataGridReturn } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid/useDataGrid';
 import { createContext } from 'react';
 
 const DataGridConfigContext = createContext<Partial<UseDataGridReturn>>(null);

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider/DataGridConfigProvider.tsx

@@ -1,4 +1,4 @@
-import type { UseDataGridReturn } from '@/components/dataGrid/DataGrid';
+import type { UseDataGridReturn } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid/useDataGrid';
 import type { PropsWithChildren } from 'react';
 import DataGridConfigContext from './DataGridConfigContext';
 

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider/useDataGridConfig.ts

@@ -1,4 +1,4 @@
-import type { UseDataGridReturn } from '@/components/dataGrid/DataGrid';
+import type { UseDataGridReturn } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid';
 import { useContext } from 'react';
 import DataGridConfigContext from './DataGridConfigContext';
 

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridDateCell/DataGridDateCell.tsx

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

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridDecimalCell/DataGridDecimalCell.tsx

@@ -0,0 +1,108 @@
+import { Input, inputClasses } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import type { CommonDataGridCellProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGridCell';
+import { useDataGridCell } from '@/features/orgs/projects/storage/dataGrid/components/DataGridCell';
+import type { ChangeEvent, KeyboardEvent } from 'react';
+
+export type DataGridDecimalCellProps<TData extends object> =
+  CommonDataGridCellProps<TData, number | string>;
+
+export default function DataGridDecimalCell<TData extends object>({
+  onSave,
+  optimisticValue,
+  temporaryValue,
+  onTemporaryValueChange,
+}: DataGridDecimalCellProps<TData>) {
+  const { inputRef, focusCell, isEditing, cancelEditCell } =
+    useDataGridCell<HTMLInputElement>();
+
+  async function handleSave() {
+    if (onSave) {
+      if (typeof temporaryValue === 'string') {
+        await onSave(parseFloat(temporaryValue));
+      } else if (typeof temporaryValue === 'number') {
+        await onSave(temporaryValue);
+      } else {
+        await onSave(null);
+      }
+    }
+  }
+
+  async function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (
+      event.key === 'ArrowLeft' ||
+      event.key === 'ArrowRight' ||
+      event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown' ||
+      event.key === 'Backspace'
+    ) {
+      event.stopPropagation();
+    }
+
+    if (event.key === 'Tab') {
+      await handleSave();
+    }
+
+    if (event.key === 'Enter') {
+      await handleSave();
+      await focusCell();
+      cancelEditCell();
+    }
+  }
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    if (onTemporaryValueChange) {
+      onTemporaryValueChange(event.target.value ?? null);
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <Input
+        type="text"
+        ref={inputRef}
+        value={
+          temporaryValue !== null && typeof temporaryValue !== 'undefined'
+            ? temporaryValue
+            : ''
+        }
+        onKeyDown={handleKeyDown}
+        onChange={handleChange}
+        fullWidth
+        className="absolute top-0 z-10 -mx-0.5 h-full place-content-stretch"
+        sx={{
+          [`&.${inputClasses.focused}`]: {
+            boxShadow: `inset 0 0 0 1.5px rgba(0, 82, 205, 1)`,
+            borderColor: 'transparent !important',
+            borderRadius: 0,
+            backgroundColor: (theme) =>
+              theme.palette.mode === 'dark'
+                ? `${theme.palette.secondary[100]} !important`
+                : `${theme.palette.common.white} !important`,
+          },
+          [`& .${inputClasses.input}`]: {
+            backgroundColor: 'transparent',
+          },
+        }}
+        slotProps={{
+          inputWrapper: { className: 'h-full' },
+          input: { className: 'h-full' },
+          inputRoot: {
+            className:
+              'resize-none outline-none focus:outline-none !text-xs focus:ring-0',
+          },
+        }}
+      />
+    );
+  }
+
+  if (optimisticValue === null || typeof optimisticValue === 'undefined') {
+    return (
+      <Text className="truncate !text-xs" color="disabled">
+        null
+      </Text>
+    );
+  }
+
+  return <Text className="truncate !text-xs">{optimisticValue}</Text>;
+}

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridDecimalCell/index.ts

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

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridFrame/DataGridFrame.tsx

@@ -1,4 +1,4 @@
-import { useDataGridConfig } from '@/components/dataGrid/DataGridConfigProvider';
+import { useDataGridConfig } from '@/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider';
 import clsx from 'clsx';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridHeader/DataGridHeader.tsx

@@ -1,5 +1,3 @@
-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';
@@ -9,7 +7,10 @@ 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 type { DataBrowserGridColumn } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
+import type { DataGridProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGrid';
+import { useDataGridConfig } from '@/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider';
+import { DataGridHeaderButton } from '@/features/orgs/projects/storage/dataGrid/components/DataGridHeaderButton';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -54,7 +55,7 @@ export default function DataGridHeader<T extends object>({
   componentsProps,
   ...props
 }: DataGridHeaderProps<T>) {
-  const { flatHeaders, allowSort, allowResize } = useDataGridConfig<T>();
+  const { flatHeaders } = useDataGridConfig<T>();
 
   return (
     <div
@@ -96,53 +97,11 @@ export default function DataGridHeader<T extends object>({
             }}
             key={column.id}
           >
-            {column.id === 'selection' ? (
-              <span
-                {...headerProps}
-                className="relative grid w-full grid-flow-col items-center justify-between p-2"
-              >
-                {column.render('Header')}
-              </span>
-            ) : (
-              <Dropdown.Trigger
-                className={twMerge(
-                  'focus:outline-none motion-safe:transition-colors',
-                )}
-                disabled={
-                  column.isDisabled || (column.disableSortBy && !onRemoveColumn)
-                }
-                hideChevron
-              >
-                <span
-                  {...headerProps}
-                  className="relative grid w-full grid-flow-col items-center justify-between p-2"
-                >
-                  {column.render('Header')}
-
-                  {allowSort && (
-                    <Box component="span" sx={{ color: 'text.primary' }}>
-                      {column.isSorted && !column.isSortedDesc && (
-                        <ArrowUpIcon className="h-3 w-3" />
-                      )}
-
-                      {column.isSorted && column.isSortedDesc && (
-                        <ArrowDownIcon className="h-3 w-3" />
-                      )}
-                    </Box>
-                  )}
-                </span>
-
-                {allowResize && !column.disableResizing && (
-                  <span
-                    {...column.getResizerProps({
-                      onClick: (event: Event) => event.stopPropagation(),
-                    })}
-                    className="absolute -right-0.5 bottom-0 top-0 z-10 h-full w-1.5 group-hover:bg-slate-900 group-hover:bg-opacity-20 group-active:bg-slate-900 group-active:bg-opacity-20 motion-safe:transition-colors"
-                  />
-                )}
-              </Dropdown.Trigger>
-            )}
-
+            <DataGridHeaderButton
+              column={column}
+              headerProps={headerProps}
+              onRemoveColumn={onRemoveColumn}
+            />
             <Dropdown.Content
               menu
               PaperProps={{ className: 'w-52 mt-1' }}

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridHeaderButton/DataGridHeaderButton.tsx

@@ -0,0 +1,77 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { ArrowDownIcon } from '@/components/ui/v2/icons/ArrowDownIcon';
+import { ArrowUpIcon } from '@/components/ui/v2/icons/ArrowUpIcon';
+import type { DataBrowserGridColumn } from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
+import { useDataGridConfig } from '@/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider';
+import type { TableHeaderProps } from 'react-table';
+import { twMerge } from 'tailwind-merge';
+
+interface DataGridHeaderButtonProps<T extends object> {
+  column: DataBrowserGridColumn<T>;
+  headerProps: TableHeaderProps;
+  onRemoveColumn: (column: DataBrowserGridColumn<T>) => void;
+}
+
+export default function DataGridHeaderButton<T extends object>({
+  column,
+  headerProps,
+  onRemoveColumn,
+}: DataGridHeaderButtonProps<T>) {
+  const { allowSort, allowResize } = useDataGridConfig();
+
+  if (column.id === 'selection') {
+    return (
+      <span
+        {...headerProps}
+        className="relative grid w-full grid-flow-col items-center justify-between p-2"
+      >
+        {column.render('Header')}
+      </span>
+    );
+  }
+
+  if (column.id === 'preview') {
+    return (
+      <div className="focus:outline-none motion-safe:transition-colors">
+        {column.render('Header')}
+      </div>
+    );
+  }
+
+  return (
+    <Dropdown.Trigger
+      className={twMerge('focus:outline-none motion-safe:transition-colors')}
+      disabled={column.isDisabled || (column.disableSortBy && !onRemoveColumn)}
+      hideChevron
+    >
+      <span
+        {...headerProps}
+        className="relative grid w-full grid-flow-col items-center justify-between p-2"
+      >
+        {column.render('Header')}
+
+        {allowSort && (
+          <Box component="span" sx={{ color: 'text.primary' }}>
+            {column.isSorted && !column.isSortedDesc && (
+              <ArrowUpIcon className="h-3 w-3" />
+            )}
+
+            {column.isSorted && column.isSortedDesc && (
+              <ArrowDownIcon className="h-3 w-3" />
+            )}
+          </Box>
+        )}
+      </span>
+
+      {allowResize && !column.disableResizing && (
+        <span
+          {...column.getResizerProps({
+            onClick: (event: Event) => event.stopPropagation(),
+          })}
+          className="absolute -right-0.5 bottom-0 top-0 z-10 h-full w-1.5 group-hover:bg-slate-900 group-hover:bg-opacity-20 group-active:bg-slate-900 group-active:bg-opacity-20 motion-safe:transition-colors"
+        />
+      )}
+    </Dropdown.Trigger>
+  );
+}

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridHeaderButton/index.ts

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

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridIntegerCell/DataGridIntegerCell.tsx

@@ -1,18 +1,20 @@
-import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
-import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
 import { Input, inputClasses } from '@/components/ui/v2/Input';
 import { Text } from '@/components/ui/v2/Text';
+import {
+  useDataGridCell,
+  type CommonDataGridCellProps,
+} from '@/features/orgs/projects/storage/dataGrid/components/DataGridCell';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 
-export type DataGridNumericCellProps<TData extends object> =
+export type DataGridIntegerCellProps<TData extends object> =
   CommonDataGridCellProps<TData, number>;
 
-export default function DataGridNumericCell<TData extends object>({
+export default function DataGridIntegerCell<TData extends object>({
   onSave,
   optimisticValue,
   temporaryValue,
   onTemporaryValueChange,
-}: DataGridNumericCellProps<TData>) {
+}: DataGridIntegerCellProps<TData>) {
   const { inputRef, focusCell, isEditing, cancelEditCell } =
     useDataGridCell<HTMLInputElement>();
 

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridIntegerCell/index.ts

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

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridNumericCell/index.ts

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

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridPreviewCell/DataGridPreviewCell.tsx

@@ -9,6 +9,8 @@ import { VideoPreviewIcon } from '@/components/ui/v2/icons/VideoPreviewIcon';
 import { XIcon } from '@/components/ui/v2/icons/XIcon';
 import { useAppClient } from '@/features/orgs/projects/hooks/useAppClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { usePreviewToggle } from '@/features/orgs/projects/storage/dataGrid/hooks/usePreviewToggle';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import { useEffect, useReducer, useState } from 'react';
@@ -46,11 +48,16 @@ function useBlob({
   const [objectUrl, setObjectUrl] = useState<string>();
   const [error, setError] = useState<Error>();
   const [loading, setLoading] = useState<boolean>(false);
+  const [preview] = useSSRLocalStorage('preview', true);
 
   // This side-effect fetches the blob of the file from the server and sets the
   // relevant `objectUrl` state. Abort controller is reponsible for cancelling
   // the fetch if the component is unmounted.
   useEffect(() => {
+    if (!preview) {
+      return undefined;
+    }
+
     const abortController = new AbortController();
 
     async function generateOptimizedObjectUrl() {
@@ -104,7 +111,7 @@ function useBlob({
     generateObjectUrl();
 
     return () => abortController.abort();
-  }, [blob, fetchBlob, objectUrl, mimeType]);
+  }, [blob, fetchBlob, objectUrl, mimeType, preview]);
 
   return { objectUrl, error, loading };
 }
@@ -168,8 +175,13 @@ export default function DataGridPreviewCell<TData extends object>({
 }: DataGridPreviewCellProps<TData>) {
   const { project } = useProject();
   const appClient = useAppClient();
-  const { objectUrl, loading, error } = useBlob({ fetchBlob, blob, mimeType });
+  const { objectUrl, loading, error } = useBlob({
+    fetchBlob,
+    blob,
+    mimeType,
+  });
   const [showModal, setShowModal] = useState(false);
+  const { previewEnabled } = usePreviewToggle();
 
   const [
     { loading: previewLoading, error: previewError, data: previewUrl },
@@ -365,7 +377,7 @@ export default function DataGridPreviewCell<TData extends object>({
       </Modal>
 
       <div className="flex h-full w-full justify-center">
-        {previewableImages.includes(mimeType) && objectUrl && (
+        {previewEnabled && previewableImages.includes(mimeType) && objectUrl ? (
           <button
             type="button"
             aria-label={alt}
@@ -381,9 +393,11 @@ export default function DataGridPreviewCell<TData extends object>({
               />
             </picture>
           </button>
-        )}
+        ) : null}
 
-        {(!previewableImages.includes(mimeType) || !objectUrl) && (
+        {(!previewableImages.includes(mimeType) ||
+          !objectUrl ||
+          !previewEnabled) && (
           <button
             type="button"
             onClick={handleOpenPreview}

dashboard/src/features/orgs/projects/storage/dataGrid/components/DataGridTextCell/DataGridTextCell.tsx

@@ -1,9 +1,11 @@
-import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
-import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
 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 {
+  useDataGridCell,
+  type CommonDataGridCellProps,
+} from '@/features/orgs/projects/storage/dataGrid/components/DataGridCell';
 import { copy } from '@/utils/copy';
 import type { ChangeEvent, KeyboardEvent, Ref } from 'react';
 import { useEffect } from 'react';

dashboard/src/features/orgs/projects/storage/dataGrid/components/FilesDataGrid/FilesDataGrid.tsx

@@ -10,6 +10,7 @@ import { FilePreviewIcon } from '@/components/ui/v2/icons/FilePreviewIcon';
 import { useAppClient } from '@/features/orgs/projects/hooks/useAppClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { FilesDataGridControls } from '@/features/orgs/projects/storage/dataGrid/components/FilesDataGridControls';
+import { PreviewHeader } from '@/features/orgs/projects/storage/dataGrid/components/PreviewHeader';
 import { useBuckets } from '@/features/orgs/projects/storage/dataGrid/hooks/useBuckets';
 import { useFiles } from '@/features/orgs/projects/storage/dataGrid/hooks/useFiles';
 import { useFilesAggregate } from '@/features/orgs/projects/storage/dataGrid/hooks/useFilesAggregate';
@@ -112,7 +113,8 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
   const memoizedColumns: Column<StoredFile>[] = useMemo(
     () => [
       {
-        Header: 'Preview',
+        id: 'preview',
+        Header: PreviewHeader,
         accessor: 'preview',
         Cell: (cellProps) =>
           DataGridPreviewCell({
@@ -121,8 +123,8 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
               <FilePreviewIcon className="h-5 w-5 fill-current" />
             ),
           }),
-        minWidth: 80,
-        width: 80,
+        minWidth: 120,
+        width: 120,
         disableSortBy: true,
         disableResizing: true,
       },

dashboard/src/features/orgs/projects/storage/dataGrid/components/FilesDataGridControls/FilesDataGridControls.tsx

@@ -1,7 +1,4 @@
 import { useDialog } from '@/components/common/DialogProvider';
-import { useDataGridConfig } from '@/components/dataGrid/DataGridConfigProvider';
-import type { DataGridPaginationProps } from '@/components/dataGrid/DataGridPagination';
-import { DataGridPagination } from '@/components/dataGrid/DataGridPagination';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
@@ -10,6 +7,9 @@ import type { InputProps } from '@/components/ui/v2/Input';
 import { Input } from '@/components/ui/v2/Input';
 import { useAppClient } from '@/features/orgs/projects/hooks/useAppClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useDataGridConfig } from '@/features/orgs/projects/storage/dataGrid/components/DataGridConfigProvider';
+import type { DataGridPaginationProps } from '@/features/orgs/projects/storage/dataGrid/components/DataGridPagination';
+import { DataGridPagination } from '@/features/orgs/projects/storage/dataGrid/components/DataGridPagination';
 import type { FileUploadButtonProps } from '@/features/orgs/projects/storage/dataGrid/components/FileUploadButton';
 import { FileUploadButton } from '@/features/orgs/projects/storage/dataGrid/components/FileUploadButton';
 import type { Files } from '@/utils/__generated__/graphql';

dashboard/src/features/orgs/projects/storage/dataGrid/components/PreviewHeader/PreviewHeader.tsx

@@ -0,0 +1,22 @@
+import { Switch } from '@/components/ui/v2/Switch';
+import { usePreviewToggle } from '@/features/orgs/projects/storage/dataGrid/hooks/usePreviewToggle';
+import { type ChangeEvent } from 'react';
+
+export default function PreviewHeader() {
+  const { previewEnabled, setPreviewEnabled } = usePreviewToggle();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPreviewEnabled(e.target.checked);
+  };
+
+  return (
+    <div className="flex flex-row items-center gap-2 p-2">
+      Preview
+      <Switch
+        className="self-center"
+        checked={previewEnabled}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}

dashboard/src/features/orgs/projects/storage/dataGrid/components/PreviewHeader/index.ts

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

dashboard/src/features/orgs/projects/storage/dataGrid/hooks/usePreviewToggle/index.ts

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

dashboard/src/features/orgs/projects/storage/dataGrid/hooks/usePreviewToggle/usePreviewToggle.ts

@@ -0,0 +1,29 @@
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+
+// Store {projectId: previewEnabled, projectId2: previewEnabled, ...}
+type PreviewLocalStorage = {
+  [key: string]: boolean | undefined;
+};
+
+export default function usePreviewToggle() {
+  const [preview, setPreview] = useSSRLocalStorage<PreviewLocalStorage>(
+    'preview',
+    {},
+  );
+  const { project } = useProject();
+
+  // Default to previewEnabled true if not set
+  const previewEnabled = preview[project?.id] ?? true;
+
+  const setPreviewEnabled = (value: boolean) => {
+    const newPreview = { ...preview };
+    newPreview[project?.id] = value;
+    setPreview(newPreview);
+  };
+
+  return {
+    previewEnabled,
+    setPreviewEnabled,
+  };
+}

dashboard/src/features/projects/common/hooks/useIsHealthy/index.ts

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

dashboard/src/features/projects/common/hooks/useIsHealthy/useIsHealthy.ts

@@ -1,31 +0,0 @@
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
-import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
-import { useQuery } from '@tanstack/react-query';
-
-/**
- * Returns whether or not the app is healthy.
- */
-export default function useIsHealthy() {
-  const isPlatform = useIsPlatform();
-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const appUrl = generateAppServiceUrl(
-    currentProject?.subdomain,
-    currentProject?.region,
-    'auth',
-  );
-
-  const { failureCount, status } = useQuery(
-    ['/healthz'],
-    () => fetch(`${appUrl}/healthz`),
-    {
-      enabled: !isPlatform && !!currentProject,
-      retry: true,
-      retryDelay: 5000,
-      cacheTime: 0,
-    },
-  );
-
-  return isPlatform || (status === 'success' && failureCount === 0);
-}

dashboard/src/features/projects/common/hooks/useNotFoundRedirect/useNotFoundRedirect.ts

@@ -1,17 +1,35 @@
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
 /**
- * Redirects to 404 page if either currentWorkspace/currentProject resolves to undefined.
+ * Redirects to 404 page if either currentWorkspace/currentProject resolves to undefined
+ * or if the current pathname is not a valid organization/project.
+ * Not applicable if running dashboard with local Nhost backend.
  */
 export default function useNotFoundRedirect() {
   const router = useRouter();
   const {
-    query: { orgSlug, workspaceSlug, appSubdomain, updating, appSlug },
+    query: {
+      orgSlug: urlOrgSlug,
+      workspaceSlug: urlWorkspaceSlug,
+      appSubdomain: urlAppSubdomain,
+      updating,
+      appSlug: urlAppSlug,
+    },
     isReady,
   } = router;
 
+  const { project, loading: projectLoading } = useProject();
+  const isPlatform = useIsPlatform();
+  const { org, loading: orgLoading } = useCurrentOrg();
+
+  const { subdomain: projectSubdomain } = project || {};
+  const { slug: currentOrgSlug } = org || {};
+
   const { currentProject, currentWorkspace, loading } =
     useCurrentWorkspaceAndProject();
 
@@ -23,6 +41,10 @@ export default function useNotFoundRedirect() {
       !isReady ||
       // If the current workspace and project are not loaded, we don't want to redirect to 404
       loading ||
+      // If the project is loading, we don't want to redirect to 404
+      projectLoading ||
+      // If the org is loading, we don't want to redirect to 404
+      orgLoading ||
       // If we're already on the 404 page, we don't want to redirect to 404
       router.pathname === '/404' ||
       router.pathname === '/' ||
@@ -31,12 +53,14 @@ export default function useNotFoundRedirect() {
       router.pathname === '/run-one-click-install' ||
       router.pathname.includes('/orgs/_') ||
       router.pathname.includes('/orgs/_/projects/_') ||
-      orgSlug ||
-      (orgSlug && appSubdomain) ||
+      (!isPlatform &&
+        router.pathname.includes('/orgs/[orgSlug]/projects/[appSubdomain]')) ||
+      (urlOrgSlug === currentOrgSlug && !urlAppSubdomain) ||
+      (urlOrgSlug === currentOrgSlug && urlAppSubdomain === projectSubdomain) ||
       // If we are on a valid workspace and project, we don't want to redirect to 404
-      (workspaceSlug && currentWorkspace && appSlug && currentProject) ||
+      (urlWorkspaceSlug && currentWorkspace && urlAppSlug && currentProject) ||
       // If we are on a valid workspace and no project is selected, we don't want to redirect to 404
-      (workspaceSlug && currentWorkspace && !appSlug && !currentProject)
+      (urlWorkspaceSlug && currentWorkspace && !urlAppSlug && !currentProject)
     ) {
       return;
     }
@@ -47,11 +71,16 @@ export default function useNotFoundRedirect() {
     currentWorkspace,
     isReady,
     loading,
-    appSubdomain,
-    appSlug,
+    urlAppSubdomain,
+    urlAppSlug,
     router,
     updating,
-    workspaceSlug,
-    orgSlug,
+    projectLoading,
+    orgLoading,
+    currentOrgSlug,
+    projectSubdomain,
+    urlWorkspaceSlug,
+    urlOrgSlug,
+    isPlatform,
   ]);
 }

dashboard/src/features/services/components/ServiceForm/ServiceForm.tsx

@@ -28,16 +28,15 @@ import {
   type ServiceFormValues,
 } from '@/features/services/components/ServiceForm/ServiceFormTypes';
 import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import {
+  useInsertRunServiceConfigMutation,
+  useReplaceRunServiceConfigMutation,
+  type ConfigRunServiceConfigInsertInput,
+} from '@/utils/__generated__/graphql';
 import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
 import { copy } from '@/utils/copy';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { removeTypename } from '@/utils/helpers';
-import {
-  useInsertRunServiceConfigMutation,
-  useInsertRunServiceMutation,
-  useReplaceRunServiceConfigMutation,
-  type ConfigRunServiceConfigInsertInput,
-} from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -57,7 +56,6 @@ export default function ServiceForm({
   const isPlatform = useIsPlatform();
   const localMimirClient = useLocalMimirClient();
   const { onDirtyStateChange, openDialog, closeDialog } = useDialog();
-  const [insertRunService] = useInsertRunServiceMutation();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const [insertRunServiceConfig] = useInsertRunServiceConfigMutation();
   const [replaceRunServiceConfig] = useReplaceRunServiceConfigMutation({
@@ -187,20 +185,11 @@ export default function ServiceForm({
       // Insert service config
       const {
         data: {
-          insertRunService: { id: newServiceID, subdomain },
+          insertRunServiceConfig: { serviceID: newServiceID },
         },
-      } = await insertRunService({
-        variables: {
-          object: {
-            appID: currentProject.id,
-          },
-        },
-      });
-
-      await insertRunServiceConfig({
+      } = await insertRunServiceConfig({
         variables: {
           appID: currentProject.id,
-          serviceID: newServiceID,
           config: {
             ...config,
             image: {
@@ -209,14 +198,14 @@ export default function ServiceForm({
               image:
                 values.image.length > 0
                   ? values.image
-                  : `registry.${currentProject.region.name}.${currentProject.region.domain}/${newServiceID}`,
+                  : `registry.${currentProject.region.name}.${currentProject.region.domain}/<uuid-to-be-generated-on-creation>`,
             },
           },
         },
       });
 
       setDetailsServiceId(newServiceID);
-      setDetailsServiceSubdomain(subdomain);
+      setDetailsServiceSubdomain('');
     }
   };
 
@@ -322,7 +311,7 @@ export default function ServiceForm({
               <Tooltip title="Name of the service, must be unique per project.">
                 <InfoIcon
                   aria-label="Info"
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   color="primary"
                 />
               </Tooltip>
@@ -362,7 +351,7 @@ export default function ServiceForm({
               >
                 <InfoIcon
                   aria-label="Info"
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   color="primary"
                 />
               </Tooltip>
@@ -393,7 +382,7 @@ export default function ServiceForm({
               <Tooltip title="Command to run when to start the service. This is optional as the image may already have a baked-in command.">
                 <InfoIcon
                   aria-label="Info"
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   color="primary"
                 />
               </Tooltip>
@@ -441,7 +430,7 @@ export default function ServiceForm({
         {createServiceFormError && (
           <Alert
             severity="error"
-            className="grid items-center justify-between grid-flow-col px-4 py-3"
+            className="grid grid-flow-col items-center justify-between px-4 py-3"
           >
             <span className="text-left">
               <strong>Error:</strong> {createServiceFormError.message}

dashboard/src/gql/organizations/getProjectState.gql

@@ -0,0 +1,23 @@
+query getProjectState($subdomain: String!) {
+  apps(where: { subdomain: { _eq: $subdomain } }) {
+    id
+    name
+    subdomain
+    region {
+      id
+      countryCode
+      name
+      domain
+      city
+    }
+    createdAt
+    desiredState
+    appStates(order_by: { createdAt: desc }, limit: 1) {
+      id
+      appId
+      message
+      stateId
+      createdAt
+    }
+  }
+}

dashboard/src/gql/services/inserRunService.graphql

@@ -1,6 +0,0 @@
-mutation insertRunService($object: run_service_insert_input!) {
-  insertRunService(object: $object) {
-    id
-    subdomain
-  }
-}