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

chore: update versions

.changeset/config.json

@@ -2,20 +2,7 @@
   "$schema": "https://unpkg.com/@changesets/config@1.6.0/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "linked": [
+  "linked": [],
-    [
-      "@nhost/nextjs",
-      "@nhost/react",
-      "@nhost/vue",
-      "@nhost/nhost-js",
-      "@nhost/hasura-auth-js",
-      "@nhost/hasura-storage-js"
-    ],
-    [
-      "@nhost/react-apollo",
-      "@nhost/apollo"
-    ]
-  ],
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",

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

@@ -38,7 +38,7 @@ runs:
       uses: nick-fields/retry@v2
       with:
         timeout_minutes: 3
-        max_attempts: 3
+        max_attempts: 10
         command: bash <(curl --silent -L https://raw.githubusercontent.com/nhost/cli/main/get.sh) ${{ inputs.version }}
     - name: Set custom configuration
       if: ${{ inputs.config }}

dashboard/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @nhost/dashboard
 
+## 0.9.5
+
+### Patch Changes
+
+- 200e9f77: chore(deps): update dependency @types/react-dom to v18.0.10
+- Updated dependencies [200e9f77]
+  - @nhost/nextjs@1.13.2
+  - @nhost/react-apollo@4.13.2
+
+## 0.9.4
+
+### Patch Changes
+
+- dbd3ded5: fix(dashboard): workspaces creation, new form, correct redirects.
+
+## 0.9.3
+
+### Patch Changes
+
+- 85f0f943: fix(dashboard): don't break the table creation process
+
+## 0.9.2
+
+### Patch Changes
+
+- Updated dependencies [d42c27ae]
+- Updated dependencies [927be4a2]
+  - @nhost/nextjs@1.13.1
+  - @nhost/react-apollo@4.13.1
+
+## 0.9.1
+
+### Patch Changes
+
+- d0f80811: fix(dashboard): don't show error when signing out the user
+
+## 0.9.0
+
+### Minor Changes
+
+- d92891b2: feat(dashboard): add Permission Editor to the Database section
+
+### Patch Changes
+
+- 3d379128: fix(dashboard): create new user
+  - @nhost/react-apollo@4.13.0
+  - @nhost/nextjs@1.13.0
+
+## 0.8.1
+
+### Patch Changes
+
+- 7cadd944: fix(dashboard): display Twitter provider settings
+
 ## 0.8.0
 
 ### Minor Changes

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo
+RUN yarn global add turbo@1
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.8.0",
+  "version": "0.9.5",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -105,14 +105,14 @@
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
     "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "18.0.10",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react": "^3.0.0",
-    "@vitest/coverage-c8": "^0.26.0",
+    "@vitest/coverage-c8": "^0.27.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -143,7 +143,7 @@
     "typescript": "^4.8.4",
     "vite": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.26.2",
+    "vitest": "^0.27.0",
     "webpack": "^5.75.0"
   },
   "browserslist": {

dashboard/src/components/applications/ChangeWorkspaceName.tsx

@@ -1,119 +0,0 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { Alert } from '@/ui/Alert';
-import Button from '@/ui/v2/Button';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
-import { inputErrorMessages } from '@/utils/getErrorMessage';
-import { slugifyString } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
-import { useUpdateWorkspaceMutation } from '@/utils/__generated__/graphql';
-import router from 'next/router';
-import type { ChangeEvent } from 'react';
-import React, { useState } from 'react';
-
-type ChangeWorkspaceNameProps = {
-  close: VoidFunction;
-};
-
-export default function ChangeWorkspaceName({
-  close,
-}: ChangeWorkspaceNameProps) {
-  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
-  const [newWorkspaceName, setNewWorkspaceName] = useState(
-    currentWorkspace.name,
-  );
-  const [workspaceError, setWorkspaceError] = useState<string>('');
-
-  const [updateWorkspace, { loading: mutationLoading, error: mutationError }] =
-    useUpdateWorkspaceMutation({
-      refetchQueries: [],
-    });
-
-  function handleChange(event: ChangeEvent<HTMLInputElement>) {
-    inputErrorMessages(
-      event.target.value,
-      setNewWorkspaceName,
-      setWorkspaceError,
-      'Workspace',
-    );
-  }
-
-  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const name = newWorkspaceName;
-    const slug = slugifyString(name);
-
-    if (slug.length < 4 || slug.length > 32) {
-      setWorkspaceError('Slug should be within 4 and 32 characters.');
-      return;
-    }
-
-    try {
-      await updateWorkspace({
-        variables: {
-          id: currentWorkspace.id,
-          workspace: {
-            name,
-            slug,
-          },
-        },
-      });
-      close();
-      triggerToast('Workspace name changed');
-    } catch (error) {
-      await discordAnnounce(
-        `Error trying to remove workspace: ${currentWorkspace.id} - ${error.message}`,
-      );
-    }
-    await router.push(slug);
-  }
-
-  return (
-    <div className="w-modal px-6 py-6 text-left">
-      <div className="flex flex-col">
-        <Text variant="h3" component="h2">
-          Change Workspace Name
-        </Text>
-
-        <form onSubmit={handleSubmit}>
-          <div className="mt-4 grid grid-flow-row gap-2">
-            <Input
-              id="workspaceName"
-              label="New Workspace Name"
-              onChange={handleChange}
-              value={newWorkspaceName}
-              placeholder="New workspace name"
-              fullWidth
-              autoFocus
-              autoComplete="off"
-              helperText={`https://app.nhost.io/${slugifyString(
-                newWorkspaceName || '',
-              )}`}
-            />
-
-            {workspaceError && <Alert severity="error">{workspaceError}</Alert>}
-
-            {mutationError && (
-              <Alert severity="error">{mutationError.toString()}</Alert>
-            )}
-          </div>
-
-          <div className="mt-6 grid grid-flow-row gap-2">
-            <Button
-              type="submit"
-              disabled={mutationLoading || !!workspaceError}
-            >
-              Save Changes
-            </Button>
-
-            <Button variant="outlined" color="secondary" onClick={close}>
-              Close
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

dashboard/src/components/common/ControlledAutocomplete/ControlledAutocomplete.tsx

@@ -52,12 +52,14 @@ function ControlledAutocomplete(
 
   return (
     <Autocomplete
+      inputValue={typeof field.value === 'string' ? field.value : undefined}
       {...props}
       {...field}
-      inputValue={typeof field.value === 'string' ? field.value : undefined}
       ref={mergeRefs([field.ref, ref])}
       onChange={(event, options, reason, details) => {
-        setValue?.(controllerProps?.name || name, options);
+        setValue?.(controllerProps?.name || name, options, {
+          shouldDirty: true,
+        });
 
         if (props.onChange) {
           props.onChange(event, options, reason, details);

dashboard/src/components/common/ControlledSwitch/ControlledSwitch.tsx

@@ -42,13 +42,16 @@ function ControlledSwitch(
       {...props}
       {...field}
       ref={mergeRefs([field.ref, ref])}
-      onChange={(e) => {
+      onChange={(event) => {
-        setValue(controllerProps?.name || name, e.target.checked, {
+        setValue(controllerProps?.name || name, event.target.checked, {
           shouldDirty: true,
         });
+
+        if (props.onChange) {
+          props.onChange(event);
+        }
       }}
       checked={field.value || false}
-      {...props}
     />
   );
 }

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

@@ -6,11 +6,13 @@ import { createContext } from 'react';
  * Available dialog types.
  */
 export type DialogType =
+  | 'EDIT_WORKSPACE_NAME'
   | 'CREATE_RECORD'
   | 'CREATE_COLUMN'
   | 'EDIT_COLUMN'
   | 'CREATE_TABLE'
   | 'EDIT_TABLE'
+  | 'EDIT_PERMISSIONS'
   | 'CREATE_FOREIGN_KEY'
   | 'EDIT_FOREIGN_KEY'
   | 'CREATE_ROLE'
@@ -66,6 +68,16 @@ export interface DialogContextProps {
    * Call this function to close the active drawer.
    */
   closeDrawer: VoidFunction;
+  /**
+   * Call this function to check if the form is dirty and close the active dialog
+   * if the form is pristine.
+   */
+  closeDialogWithDirtyGuard: VoidFunction;
+  /**
+   * Call this function to check if the form is dirty and close the active drawer
+   * if the form is pristine.
+   */
+  closeDrawerWithDirtyGuard: VoidFunction;
   /**
    * Call this function to close the active alert dialog.
    */
@@ -77,6 +89,10 @@ export interface DialogContextProps {
     isDirty: boolean,
     location?: 'drawer' | 'dialog',
   ) => void;
+  /**
+   * Call this function to open a dirty confirmation dialog.
+   */
+  openDirtyConfirmation: (config?: Partial<DialogConfig<string>>) => void;
 }
 
 export default createContext<DialogContextProps>({
@@ -85,6 +101,9 @@ export default createContext<DialogContextProps>({
   openAlertDialog: () => {},
   closeDialog: () => {},
   closeDrawer: () => {},
+  closeDialogWithDirtyGuard: () => {},
+  closeDrawerWithDirtyGuard: () => {},
   closeAlertDialog: () => {},
   onDirtyStateChange: () => {},
+  openDirtyConfirmation: () => {},
 });

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

@@ -1,6 +1,7 @@
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import CreateForeignKeyForm from '@/components/dataBrowser/CreateForeignKeyForm';
 import EditForeignKeyForm from '@/components/dataBrowser/EditForeignKeyForm';
+import EditWorkspaceNameForm from '@/components/home/EditWorkspaceNameForm';
 import CreateEnvironmentVariableForm from '@/components/settings/environmentVariables/CreateEnvironmentVariableForm';
 import EditEnvironmentVariableForm from '@/components/settings/environmentVariables/EditEnvironmentVariableForm';
 import EditJwtSecretForm from '@/components/settings/environmentVariables/EditJwtSecretForm';
@@ -85,6 +86,11 @@ const EditTableForm = dynamic(
   { ssr: false, loading: () => LoadingComponent() },
 );
 
+const EditPermissionsForm = dynamic(
+  () => import('@/components/dataBrowser/EditPermissionsForm'),
+  { ssr: false, loading: () => LoadingComponent() },
+);
+
 function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const router = useRouter();
 
@@ -196,23 +202,31 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     [],
   );
 
-  function closeDrawerWithDirtyGuard(event?: BaseSyntheticEvent) {
+  const closeDrawerWithDirtyGuard = useCallback(
-    if (isDrawerDirty.current && event?.type !== 'submit') {
+    (event?: BaseSyntheticEvent) => {
-      openDirtyConfirmation({ props: { onPrimaryAction: closeDrawer } });
+      if (isDrawerDirty.current && event?.type !== 'submit') {
-      return;
+        setShowDirtyConfirmation(true);
-    }
+        openDirtyConfirmation({ props: { onPrimaryAction: closeDrawer } });
+        return;
+      }
 
-    closeDrawer();
+      closeDrawer();
-  }
+    },
+    [closeDrawer, openDirtyConfirmation],
+  );
 
-  function closeDialogWithDirtyGuard(event?: BaseSyntheticEvent) {
+  const closeDialogWithDirtyGuard = useCallback(
-    if (isDialogDirty.current && event?.type !== 'submit') {
+    (event?: BaseSyntheticEvent) => {
-      openDirtyConfirmation({ props: { onPrimaryAction: closeDialog } });
+      if (isDialogDirty.current && event?.type !== 'submit') {
-      return;
+        setShowDirtyConfirmation(true);
-    }
+        openDirtyConfirmation({ props: { onPrimaryAction: closeDialog } });
+        return;
+      }
 
-    closeDialog();
+      closeDialog();
-  }
+    },
+    [closeDialog, openDirtyConfirmation],
+  );
 
   // We are coupling this logic with the location of the dialog content which is
   // not ideal. We shoule figure out a better logic for tracking the dirty
@@ -239,10 +253,22 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
       openAlertDialog,
       closeDialog,
       closeDrawer,
+      closeDialogWithDirtyGuard,
+      closeDrawerWithDirtyGuard,
       closeAlertDialog,
       onDirtyStateChange,
+      openDirtyConfirmation,
     }),
-    [closeDialog, closeDrawer, onDirtyStateChange, openDialog, openDrawer],
+    [
+      closeDialog,
+      closeDialogWithDirtyGuard,
+      closeDrawer,
+      closeDrawerWithDirtyGuard,
+      onDirtyStateChange,
+      openDialog,
+      openDirtyConfirmation,
+      openDrawer,
+    ],
   );
 
   const sharedDialogProps = {
@@ -341,6 +367,10 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         <RetryableErrorBoundary
           errorMessageProps={{ className: 'pt-0 pb-5 px-6' }}
         >
+          {activeDialogType === 'EDIT_WORKSPACE_NAME' && (
+            <EditWorkspaceNameForm {...sharedDialogProps} />
+          )}
+
           {activeDialogType === 'CREATE_FOREIGN_KEY' && (
             <CreateForeignKeyForm {...sharedDialogProps} />
           )}
@@ -391,13 +421,19 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
       </BaseDialog>
 
       <Drawer
+        anchor="right"
         {...drawerProps}
         title={drawerTitle}
         open={drawerOpen}
         onClose={closeDrawerWithDirtyGuard}
         SlideProps={{ onExited: clearDrawerContent, unmountOnExit: false }}
-        anchor="right"
+        PaperProps={{
-        PaperProps={{ className: 'max-w-2.5xl w-full' }}
+          ...drawerProps?.PaperProps,
+          className: twMerge(
+            'max-w-2.5xl w-full',
+            drawerProps?.PaperProps?.className,
+          ),
+        }}
       >
         <RetryableErrorBoundary>
           {activeDrawerType === 'CREATE_RECORD' && (
@@ -433,6 +469,15 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
             />
           )}
 
+          {activeDrawerType === 'EDIT_PERMISSIONS' && (
+            <EditPermissionsForm
+              {...sharedDrawerProps}
+              disabled={drawerPayload?.disabled}
+              schema={drawerPayload?.schema}
+              table={drawerPayload?.table}
+            />
+          )}
+
           {activeDrawerType === 'EDIT_USER' && (
             <EditUserForm {...sharedDrawerProps} {...drawerPayload} />
           )}

dashboard/src/components/common/HighlightedText/HighlightedText.tsx

@@ -0,0 +1,12 @@
+import InlineCode from '@/components/common/InlineCode';
+import type { PropsWithChildren } from 'react';
+
+export default function HighlightedText({
+  children,
+}: PropsWithChildren<unknown>) {
+  return (
+    <InlineCode className="text-greyscaleDark bg-primary-light font-display text-sm">
+      {children}
+    </InlineCode>
+  );
+}

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

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

dashboard/src/components/common/InlineCode/InlineCode.tsx

@@ -8,7 +8,7 @@ function InlineCode({ className, children, ...props }: InlineCodeProps) {
   return (
     <code
       className={twMerge(
-        'inline-grid h-full max-h-[18px] max-w-xs items-center truncate rounded-sm bg-gray-100 px-1 font-mono text-[11px] text-gray-600',
+        'inline-grid max-w-xs items-center truncate rounded-sm bg-gray-100 px-1 font-mono text-[11px] text-greyscaleMedium',
         className,
       )}
       {...props}

dashboard/src/components/dashboard/AccountMenu.tsx

@@ -1,13 +1,11 @@
 import { ChangePasswordModal } from '@/components/applications/ChangePasswordModal';
-import { useWorkspaceContext } from '@/context/workspace-context';
-import { useUserDataContext } from '@/context/workspace1-context';
 import { Avatar } from '@/ui/Avatar';
 import { Modal } from '@/ui/Modal';
 import Button from '@/ui/v2/Button';
 import { Dropdown, useDropdown } from '@/ui/v2/Dropdown';
 import Text from '@/ui/v2/Text';
-import { emptyWorkspace } from '@/utils/helpers';
 import { nhost } from '@/utils/nhost';
+import { useApolloClient } from '@apollo/client';
 import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -22,9 +20,8 @@ function AccountMenuContent({
 }: AccountMenuContentProps) {
   const user = useUserData();
   const router = useRouter();
+  const client = useApolloClient();
   const [clicked, setClicked] = useState(false);
-  const { setWorkspaceContext } = useWorkspaceContext();
-  const { setUserContext } = useUserDataContext();
   const { handleClose } = useDropdown();
 
   return (
@@ -34,10 +31,9 @@ function AccountMenuContent({
         color="secondary"
         className="absolute top-6 right-4 grid grid-flow-col items-center gap-1 self-start font-medium"
         onClick={async () => {
-          setWorkspaceContext(emptyWorkspace());
-          setUserContext({ workspaces: [] });
-          nhost.auth.signOut();
           router.push('/signin');
+          await nhost.auth.signOut();
+          await client.resetStore();
         }}
         aria-label="Sign Out"
       >

dashboard/src/components/dataBrowser/BaseColumnForm/BaseColumnForm.tsx

@@ -118,6 +118,7 @@ export default function BaseColumnForm({
             variant="inline"
             className="col-span-8 py-3"
             autoFocus
+            autoComplete="off"
           />
 
           <ControlledAutocomplete
@@ -272,6 +273,7 @@ export default function BaseColumnForm({
             error={Boolean(errors.comment)}
             variant="inline"
             className="col-span-8 py-3"
+            autoComplete="off"
           />
         </section>
       </div>

dashboard/src/components/dataBrowser/BaseTableForm/BaseTableForm.tsx

@@ -88,6 +88,7 @@ function NameInput() {
       error={Boolean(errors.name)}
       variant="inline"
       className="col-span-8 py-3"
+      autoComplete="off"
       autoFocus
     />
   );

dashboard/src/components/dataBrowser/BaseTableForm/ColumnEditorRow.tsx

@@ -70,6 +70,7 @@ function NameInput({ index }: FieldArrayInputProps) {
           }
         },
       })}
+      autoComplete="off"
       aria-label="Name"
       placeholder="Enter name"
       hideEmptyHelperText

dashboard/src/components/dataBrowser/BaseTableForm/ColumnEditorTable.tsx

@@ -82,7 +82,7 @@ export default function ColumnEditorTable() {
           startIcon={<PlusIcon />}
           size="small"
         >
-          Add column
+          Add Column
         </Button>
       </div>
     </>

dashboard/src/components/dataBrowser/ColumnAutocomplete/ColumnAutocomplete.tsx

@@ -25,8 +25,8 @@ import type {
 } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { UseAsyncInitialValueOptions } from './useAsyncInitialValue';
+import type { UseAsyncValueOptions } from './useAsyncValue';
-import useAsyncInitialValue from './useAsyncInitialValue';
+import useAsyncValue from './useAsyncValue';
 import type { UseColumnGroupsOptions } from './useColumnGroups';
 import useColumnGroups from './useColumnGroups';
 
@@ -54,7 +54,7 @@ export interface ColumnAutocompleteProps
   /**
    * Function to be called when the input is asynchronously initialized.
    */
-  onInitialized?: UseAsyncInitialValueOptions['onInitialized'];
+  onInitialized?: UseAsyncValueOptions['onInitialized'];
   /**
    * Class name to be applied to the root element.
    */
@@ -107,7 +107,11 @@ function ColumnAutocomplete(
   ref: ForwardedRef<HTMLInputElement>,
 ) {
   const [open, setOpen] = useState(false);
-  const [activeRelationship, setActiveRelationship] = useState<any>();
+  const [activeRelationship, setActiveRelationship] = useState<{
+    schema: string;
+    table: string;
+    name: string;
+  }>();
   const selectedSchema = activeRelationship?.schema || defaultSchema;
   const selectedTable = activeRelationship?.table || defaultTable;
 
@@ -119,6 +123,7 @@ function ColumnAutocomplete(
   } = useTableQuery([`default.${selectedSchema}.${selectedTable}`], {
     schema: selectedSchema,
     table: selectedTable,
+    preventRowFetching: true,
     queryOptions: { refetchOnWindowFocus: false },
   });
 
@@ -141,7 +146,7 @@ function ColumnAutocomplete(
     setSelectedRelationships,
     relationshipDotNotation,
     activeRelationship: asyncActiveRelationship,
-  } = useAsyncInitialValue({
+  } = useAsyncValue({
     selectedSchema,
     selectedTable,
     initialValue: externalValue as string,
@@ -226,7 +231,7 @@ function ColumnAutocomplete(
     inputValue,
     options,
     id: props?.name,
-    openOnFocus: true,
+    openOnFocus: !props.disabled,
     disableCloseOnSelect: true,
     value: selectedColumn,
     onClose: () => setOpen(false),
@@ -256,24 +261,43 @@ function ColumnAutocomplete(
               ),
             },
           }}
-          onFocus={() => setOpen(true)}
+          onFocus={() => {
-          onClick={() => setOpen(true)}
+            if (props.disabled) {
-          error={Boolean(tableError || metadataError)}
+              return;
-          helperText={String(tableError || metadataError || '')}
+            }
+
+            setOpen(true);
+          }}
+          onClick={() => {
+            if (props.disabled) {
+              return;
+            }
+
+            setOpen(true);
+          }}
+          error={Boolean(tableError || metadataError) || props.error}
+          helperText={
+            String(tableError || metadataError || '') || props.helperText
+          }
           onChange={(event) => setInputValue(event.target.value)}
           value={inputValue}
           startAdornment={
             selectedColumn || relationshipDotNotation ? (
-              <Text className="!ml-2 lg:max-w-[200px] flex-shrink-0 truncate">
+              <Text
+                className={twMerge(
+                  '!ml-2 lg:max-w-[200px] flex-shrink-0 truncate',
+                  props.disabled && 'text-greyscaleGrey',
+                )}
+              >
                 <span className="text-greyscaleGrey">{defaultTable}</span>.
                 {relationshipDotNotation && (
                   <>
                     <span className="hidden lg:inline">
-                      {getTruncatedText(relationshipDotNotation, 15, 'start')}.
+                      {getTruncatedText(relationshipDotNotation, 15, 'end')}.
                     </span>
 
                     <span className="inline lg:hidden">
-                      {relationshipDotNotation}.
+                      {getTruncatedText(relationshipDotNotation, 35, 'end')}.
                     </span>
                   </>
                 )}

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

@@ -4,7 +4,7 @@ import type { HasuraMetadataTable } from '@/types/dataBrowser';
 import type { AutocompleteOption } from '@/ui/v2/Autocomplete';
 import { useEffect, useState } from 'react';
 
-export interface UseAsyncInitialValueOptions {
+export interface UseAsyncValueOptions {
   /**
    * Selected schema to be used to determine the initial value.
    */
@@ -42,7 +42,7 @@ export interface UseAsyncInitialValueOptions {
   }) => void;
 }
 
-export default function useAsyncInitialValue({
+export default function useAsyncValue({
   selectedSchema,
   selectedTable,
   initialValue,
@@ -51,7 +51,7 @@ export default function useAsyncInitialValue({
   tableData,
   metadata,
   onInitialized,
-}: UseAsyncInitialValueOptions) {
+}: UseAsyncValueOptions) {
   const currentTablePath = `${selectedSchema}.${selectedTable}`;
   const [inputValue, setInputValue] = useState('');
   const [initialized, setInitialized] = useState(false);
@@ -65,10 +65,9 @@ export default function useAsyncInitialValue({
   const [selectedRelationships, setSelectedRelationships] = useState<
     { schema: string; table: string; name: string }[]
   >([]);
-  const relationshipDotNotation =
+  const relationshipDotNotation = selectedRelationships
-    initialized && selectedRelationships?.length > 0
+    .map((relationship) => relationship.name)
-      ? selectedRelationships.map((relationship) => relationship.name).join('.')
+    .join('.');
-      : '';
   const [selectedColumn, setSelectedColumn] =
     useState<AutocompleteOption>(null);
   const activeRelationship =
@@ -146,7 +145,8 @@ export default function useAsyncInitialValue({
       remainingColumnPath.length < 2 ||
       isTableLoading ||
       isMetadataLoading ||
-      !tableData?.columns
+      !tableData?.columns ||
+      asyncTablePath !== currentTablePath
     ) {
       return;
     }
@@ -167,8 +167,8 @@ export default function useAsyncInitialValue({
 
     const tableMetadata = metadataMap.get(`${selectedSchema}.${selectedTable}`);
     const currentRelationship = [
-      ...(tableMetadata.object_relationships || []),
+      ...(tableMetadata?.object_relationships || []),
-      ...(tableMetadata.array_relationships || []),
+      ...(tableMetadata?.array_relationships || []),
     ].find(({ name }) => name === nextPath);
 
     if (!currentRelationship) {
@@ -176,11 +176,32 @@ export default function useAsyncInitialValue({
       return;
     }
 
-    const { foreign_key_constraint_on: metadataConstraint } =
+    const {
-      currentRelationship.using || {};
+      foreign_key_constraint_on: metadataConstraint,
+      manual_configuration: metadataManualConfiguration,
+    } = currentRelationship.using || {};
+
+    if (metadataManualConfiguration) {
+      setAsyncTablePath(
+        `${metadataManualConfiguration.remote_table.schema}.${metadataManualConfiguration.remote_table.name}`,
+      );
+
+      setSelectedRelationships((currentRelationships) => [
+        ...currentRelationships,
+        {
+          schema: metadataManualConfiguration.remote_table.schema || 'public',
+          table: metadataManualConfiguration.remote_table.name,
+          name: nextPath,
+        },
+      ]);
+
+      setRemainingColumnPath((columnPath) => columnPath.slice(1));
+
+      return;
+    }
 
     // In some cases the metadata already contains the schema and table name
-    if (typeof metadataConstraint !== 'string') {
+    if (metadataConstraint && typeof metadataConstraint !== 'string') {
       setAsyncTablePath(
         `${metadataConstraint.table.schema || 'public'}.${
           metadataConstraint.table.name
@@ -203,17 +224,25 @@ export default function useAsyncInitialValue({
 
     const foreignKeyRelation = tableData?.foreignKeyRelations?.find(
       ({ columnName }) => {
-        const { foreign_key_constraint_on } = currentRelationship.using || {};
+        const normalizedColumnName = columnName.replace(/"/g, '');
+        const { foreign_key_constraint_on, manual_configuration } =
+          currentRelationship.using || {};
 
-        if (!foreign_key_constraint_on) {
+        if (!foreign_key_constraint_on && !manual_configuration) {
           return false;
         }
 
-        if (typeof foreign_key_constraint_on === 'string') {
+        if (manual_configuration) {
-          return foreign_key_constraint_on === columnName;
+          return Object.keys(manual_configuration.column_mapping).includes(
+            normalizedColumnName,
+          );
         }
 
-        return foreign_key_constraint_on.column === columnName;
+        if (typeof foreign_key_constraint_on === 'string') {
+          return foreign_key_constraint_on === normalizedColumnName;
+        }
+
+        return foreign_key_constraint_on.column === normalizedColumnName;
       },
     );
 
@@ -222,23 +251,30 @@ export default function useAsyncInitialValue({
       return;
     }
 
-    setAsyncTablePath(
+    const normalizedSchema = foreignKeyRelation.referencedSchema?.replace(
-      `${foreignKeyRelation.referencedSchema || 'public'}.${
+      /(\\"|")/g,
-        foreignKeyRelation.referencedTable
+      '',
-      }`,
     );
+    const normalizedTable = foreignKeyRelation.referencedTable?.replace(
+      /(\\"|")/g,
+      '',
+    );
+
+    setAsyncTablePath(`${normalizedSchema || 'public'}.${normalizedTable}`);
 
     setSelectedRelationships((currentRelationships) => [
       ...currentRelationships,
       {
-        schema: foreignKeyRelation.referencedSchema || 'public',
+        schema: normalizedSchema || 'public',
-        table: foreignKeyRelation.referencedTable,
+        table: normalizedTable,
         name: nextPath,
       },
     ]);
 
     setRemainingColumnPath((columnPath) => columnPath.slice(1));
   }, [
+    currentTablePath,
+    asyncTablePath,
     selectedSchema,
     selectedTable,
     metadata?.tables,
@@ -258,6 +294,9 @@ export default function useAsyncInitialValue({
     selectedColumn: initialized ? selectedColumn : null,
     setSelectedRelationships,
     setSelectedColumn,
-    relationshipDotNotation,
+    relationshipDotNotation:
+      initialized && selectedRelationships?.length > 0
+        ? relationshipDotNotation
+        : '',
   };
 }

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

@@ -65,25 +65,44 @@ export default function useColumnGroups({
   const objectAndArrayRelationships = [
     ...(object_relationships || []),
     ...(array_relationships || []),
-  ].map((relationship) => {
+  ].reduce((relationships, currentRelationship) => {
-    const { foreign_key_constraint_on } = relationship?.using || {};
+    const { foreign_key_constraint_on, manual_configuration } =
+      currentRelationship?.using || {};
 
-    if (typeof foreign_key_constraint_on === 'string') {
+    if (manual_configuration) {
-      return {
+      return [
-        schema: selectedSchema,
+        ...relationships,
-        table: selectedTable,
+        ...Object.keys(manual_configuration.column_mapping).map((column) => ({
-        column: foreign_key_constraint_on,
+          schema: manual_configuration.remote_table?.schema || 'public',
-        name: relationship.name,
+          table: manual_configuration.remote_table?.name,
-      };
+          column,
+          name: currentRelationship.name,
+        })),
+      ];
     }
 
-    return {
+    if (typeof foreign_key_constraint_on === 'string') {
-      schema: foreign_key_constraint_on.table.schema,
+      return [
-      table: foreign_key_constraint_on.table.name,
+        ...relationships,
-      column: foreign_key_constraint_on.column,
+        {
-      name: relationship.name,
+          schema: selectedSchema,
-    };
+          table: selectedTable,
-  });
+          column: foreign_key_constraint_on,
+          name: currentRelationship.name,
+        },
+      ];
+    }
+
+    return [
+      ...relationships,
+      {
+        schema: foreign_key_constraint_on.table.schema,
+        table: foreign_key_constraint_on.table.name,
+        column: foreign_key_constraint_on.column,
+        name: currentRelationship.name,
+      },
+    ];
+  }, [] as { schema: string; table: string; column: string; name: string }[]);
 
   return [
     ...columnOptions,
@@ -93,6 +112,9 @@ export default function useColumnGroups({
       group: 'relationships',
       metadata: {
         target: {
+          schema: relationship.schema,
+          table: relationship.table,
+          column: relationship.column,
           ...(columnTargetMap?.get(relationship.column) || {}),
           name: relationship.name,
         },

dashboard/src/components/dataBrowser/DataBrowserGrid/DataBrowserGrid.tsx

@@ -348,7 +348,7 @@ export default function DataBrowserGrid({
         description={
           <span>
             Schema{' '}
-            <InlineCode className="max-h-[32px] bg-gray-200 bg-opacity-80 px-1.5 text-sm">
+            <InlineCode className="bg-gray-200 bg-opacity-80 px-1.5 text-sm">
               {metadata.schema || schemaSlug}
             </InlineCode>{' '}
             does not exist.
@@ -365,7 +365,7 @@ export default function DataBrowserGrid({
         description={
           <span>
             Table{' '}
-            <InlineCode className="max-h-[32px] bg-gray-200 bg-opacity-80 px-1.5 text-sm">
+            <InlineCode className="bg-gray-200 bg-opacity-80 px-1.5 text-sm">
               {metadata.schema || schemaSlug}.{metadata.table || tableSlug}
             </InlineCode>{' '}
             does not exist.

dashboard/src/components/dataBrowser/DataBrowserSidebar/DataBrowserSidebar.tsx

@@ -1,4 +1,5 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import InlineCode from '@/components/common/InlineCode';
 import NavLink from '@/components/common/NavLink';
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
@@ -8,6 +9,7 @@ import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAn
 import FloatingActionButton from '@/ui/FloatingActionButton';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Button from '@/ui/v2/Button';
+import Chip from '@/ui/v2/Chip';
 import Divider from '@/ui/v2/Divider';
 import { Dropdown } from '@/ui/v2/Dropdown';
 import IconButton from '@/ui/v2/IconButton';
@@ -17,6 +19,7 @@ import LockIcon from '@/ui/v2/icons/LockIcon';
 import PencilIcon from '@/ui/v2/icons/PencilIcon';
 import PlusIcon from '@/ui/v2/icons/PlusIcon';
 import TrashIcon from '@/ui/v2/icons/TrashIcon';
+import UsersIcon from '@/ui/v2/icons/UsersIcon';
 import Link from '@/ui/v2/Link';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
@@ -194,6 +197,40 @@ function DataBrowserSidebarContent({
     });
   }
 
+  function handleEditPermissionClick(
+    schema: string,
+    table: string,
+    disabled?: boolean,
+  ) {
+    openDrawer('EDIT_PERMISSIONS', {
+      title: (
+        <span className="inline-grid grid-flow-col gap-2 items-center">
+          Permissions
+          <InlineCode className="!text-sm+ font-normal text-greyscaleMedium">
+            {table}
+          </InlineCode>
+          <Chip label="Preview" size="small" color="info" component="span" />
+        </span>
+      ),
+      props: {
+        PaperProps: {
+          className: 'lg:w-[65%] lg:max-w-7xl',
+        },
+      },
+      payload: {
+        onSubmit: async () => {
+          await queryClient.refetchQueries([
+            `${dataSourceSlug}.${schema}.${table}`,
+          ]);
+          await refetch();
+        },
+        disabled,
+        schema,
+        table,
+      },
+    });
+  }
+
   return (
     <div className="grid gap-1">
       {schemas && schemas.length > 0 && (
@@ -318,9 +355,7 @@ function DataBrowserSidebarContent({
                         <Dropdown.Trigger
                           asChild
                           hideChevron
-                          disabled={
+                          disabled={tablePath === removableTable}
-                            tablePath === removableTable || isGitHubConnected
-                          }
                         >
                           <IconButton
                             variant="borderless"
@@ -329,7 +364,6 @@ function DataBrowserSidebarContent({
                               !isSelected &&
                                 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
                             )}
-                            disabled={isGitHubConnected}
                           >
                             <DotsHorizontalIcon />
                           </IconButton>
@@ -339,44 +373,84 @@ function DataBrowserSidebarContent({
                           menu
                           PaperProps={{ className: 'w-52' }}
                         >
-                          <Dropdown.Item
+                          {isGitHubConnected ? (
-                            className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                            <Dropdown.Item
-                            onClick={() =>
+                              className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                              openDrawer('EDIT_TABLE', {
+                              onClick={() =>
-                                title: 'Edit Table',
+                                handleEditPermissionClick(
-                                payload: {
+                                  table.table_schema,
-                                  onSubmit: async () => {
+                                  table.table_name,
-                                    await queryClient.refetchQueries([
+                                  true,
-                                      `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
+                                )
-                                    ]);
+                              }
-                                    await refetch();
+                            >
-                                  },
+                              <UsersIcon className="h-4 w-4 text-gray-700" />
-                                  schema: table.table_schema,
-                                  table,
-                                },
-                              })
-                            }
-                          >
-                            <PencilIcon className="h-4 w-4 text-gray-700" />
 
-                            <span>Edit Table</span>
+                              <span>View Permissions</span>
-                          </Dropdown.Item>
+                            </Dropdown.Item>
+                          ) : (
+                            [
+                              <Dropdown.Item
+                                key="edit-table"
+                                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                                onClick={() =>
+                                  openDrawer('EDIT_TABLE', {
+                                    title: 'Edit Table',
+                                    payload: {
+                                      onSubmit: async () => {
+                                        await queryClient.refetchQueries([
+                                          `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
+                                        ]);
+                                        await refetch();
+                                      },
+                                      schema: table.table_schema,
+                                      table,
+                                    },
+                                  })
+                                }
+                              >
+                                <PencilIcon className="h-4 w-4 text-gray-700" />
 
-                          <Divider component="li" />
+                                <span>Edit Table</span>
+                              </Dropdown.Item>,
+                              <Divider
+                                key="edit-table-separator"
+                                component="li"
+                              />,
+                              <Dropdown.Item
+                                key="edit-permissions"
+                                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                                onClick={() =>
+                                  handleEditPermissionClick(
+                                    table.table_schema,
+                                    table.table_name,
+                                  )
+                                }
+                              >
+                                <UsersIcon className="h-4  w-4 text-gray-700" />
 
-                          <Dropdown.Item
+                                <span>Edit Permissions</span>
-                            className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium text-red"
+                              </Dropdown.Item>,
-                            onClick={() =>
+                              <Divider
-                              handleDeleteTableClick(
+                                key="edit-permissions-separator"
-                                table.table_schema,
+                                component="li"
-                                table.table_name,
+                              />,
-                              )
+                              <Dropdown.Item
-                            }
+                                key="delete-table"
-                          >
+                                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium text-red"
-                            <TrashIcon className="h-4 w-4 text-red" />
+                                onClick={() =>
+                                  handleDeleteTableClick(
+                                    table.table_schema,
+                                    table.table_name,
+                                  )
+                                }
+                              >
+                                <TrashIcon className="h-4 w-4 text-red" />
 
-                            <span>Delete Table</span>
+                                <span>Delete Table</span>
-                          </Dropdown.Item>
+                              </Dropdown.Item>,
+                            ]
+                          )}
                         </Dropdown.Content>
                       </Dropdown.Root>
                     )

dashboard/src/components/dataBrowser/DatabaseRecordInputGroup/DatabaseRecordInputGroup.tsx

@@ -127,7 +127,7 @@ export default function DatabaseRecordInputGroup({
                   <span>{columnId}</span>
                 </span>
 
-                <InlineCode>
+                <InlineCode className="h-[18px]">
                   {specificType}
                   {maxLength ? `(${maxLength})` : null}
                 </InlineCode>

dashboard/src/components/dataBrowser/EditPermissionsForm/EditPermissionsForm.tsx

@@ -0,0 +1,348 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import useMetadataQuery from '@/hooks/dataBrowser/useMetadataQuery';
+import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import type {
+  DatabaseAccessLevel,
+  DatabaseAction,
+  HasuraMetadataPermission,
+} from '@/types/dataBrowser';
+import { Alert } from '@/ui/Alert';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import Button from '@/ui/v2/Button';
+import FullPermissionIcon from '@/ui/v2/icons/FullPermissionIcon';
+import NoPermissionIcon from '@/ui/v2/icons/NoPermissionIcon';
+import PartialPermissionIcon from '@/ui/v2/icons/PartialPermissionIcon';
+import Link from '@/ui/v2/Link';
+import Table from '@/ui/v2/Table';
+import TableBody from '@/ui/v2/TableBody';
+import TableCell from '@/ui/v2/TableCell';
+import TableContainer from '@/ui/v2/TableContainer';
+import TableHead from '@/ui/v2/TableHead';
+import TableRow from '@/ui/v2/TableRow';
+import Text from '@/ui/v2/Text';
+import { useGetRemoteAppRolesQuery } from '@/utils/__generated__/graphql';
+import NavLink from 'next/link';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import RolePermissionEditorForm from './RolePermissionEditorForm';
+import RolePermissionsRow from './RolePermissionsRow';
+
+export interface EditPermissionsFormProps {
+  /**
+   * Determines whether the form is disabled or not.
+   */
+  disabled?: boolean;
+  /**
+   * The schema that is being edited.
+   */
+  schema: string;
+  /**
+   * The table that is being edited.
+   */
+  table: string;
+  /**
+   * Function to be called when the operation is cancelled.
+   */
+  onCancel?: VoidFunction;
+}
+
+export default function EditPermissionsForm({
+  disabled,
+  schema,
+  table,
+  onCancel,
+}: EditPermissionsFormProps) {
+  const [role, setRole] = useState<string>();
+  const [action, setAction] = useState<DatabaseAction>();
+
+  const { closeDrawerWithDirtyGuard } = useDialog();
+  const { currentWorkspace, currentApplication } =
+    useCurrentWorkspaceAndApplication();
+
+  const client = useRemoteApplicationGQLClient();
+  const {
+    data: rolesData,
+    loading: rolesLoading,
+    error: rolesError,
+  } = useGetRemoteAppRolesQuery({ client });
+
+  const {
+    data: tableData,
+    status: tableStatus,
+    error: tableError,
+  } = useTableQuery([`default.${schema}.${table}`], { schema, table });
+
+  const {
+    data: metadata,
+    status: metadataStatus,
+    error: metadataError,
+  } = useMetadataQuery([`default.metadata`]);
+
+  if (tableStatus === 'loading') {
+    return (
+      <div className="p-6">
+        <ActivityIndicator label="Loading table..." />
+      </div>
+    );
+  }
+
+  if (tableError) {
+    throw tableError;
+  }
+
+  if (metadataStatus === 'loading') {
+    return (
+      <div className="p-6">
+        <ActivityIndicator label="Loading table metadata..." />
+      </div>
+    );
+  }
+
+  if (metadataError) {
+    throw metadataError;
+  }
+
+  if (rolesLoading) {
+    return (
+      <div className="p-6">
+        <ActivityIndicator label="Loading available roles..." />
+      </div>
+    );
+  }
+
+  if (rolesError) {
+    throw rolesError;
+  }
+
+  const availableRoles = [
+    'public',
+    ...(rolesData?.authRoles?.map(({ role: authRole }) => authRole) || []),
+  ];
+
+  const metadataForTable = metadata?.tables?.find(
+    ({ table: currentTable }) =>
+      currentTable.name === table && currentTable.schema === schema,
+  );
+
+  const availableColumns =
+    tableData?.columns.map((column) => column.column_name) || [];
+
+  function handleSubmit() {
+    setRole(undefined);
+    setAction(undefined);
+  }
+
+  function handleCancel() {
+    setRole(undefined);
+    setAction(undefined);
+  }
+
+  function getAccessLevel(
+    permission?: HasuraMetadataPermission['permission'],
+  ): DatabaseAccessLevel {
+    if (
+      !permission ||
+      (!permission?.check && !permission && permission?.columns?.length === 0)
+    ) {
+      return 'none';
+    }
+
+    const sortedTableColumns = [...availableColumns].sort();
+    const isAllColumnSelected =
+      sortedTableColumns.length === permission?.columns?.length &&
+      [...(permission?.columns || [])]
+        .sort()
+        .every(
+          (permissionColumn, index) =>
+            permissionColumn === sortedTableColumns[index],
+        );
+
+    if (
+      Object.keys(permission?.check || {}).length === 0 &&
+      Object.keys(permission?.filter || {}).length === 0 &&
+      isAllColumnSelected
+    ) {
+      return 'full';
+    }
+
+    return 'partial';
+  }
+
+  if (role && action) {
+    const permissionsForAction = {
+      insert: metadataForTable?.insert_permissions,
+      select: metadataForTable?.select_permissions,
+      update: metadataForTable?.update_permissions,
+      delete: metadataForTable?.delete_permissions,
+    };
+
+    return (
+      <RolePermissionEditorForm
+        disabled={disabled}
+        schema={schema}
+        table={table}
+        role={role}
+        action={action}
+        onSubmit={handleSubmit}
+        onCancel={handleCancel}
+        permission={
+          permissionsForAction[action]?.find(
+            ({ role: currentRole }) => currentRole === role,
+          )?.permission
+        }
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-auto flex-col content-between overflow-hidden border-t-1 border-gray-200 bg-[#fafafa]">
+      <div className="flex-auto">
+        <section className="grid grid-flow-row gap-6 content-start overflow-y-auto p-6 bg-white border-b-1 border-gray-200">
+          <div className="grid grid-flow-row gap-2">
+            <Text component="h2" className="!font-bold">
+              Roles & Actions overview
+            </Text>
+
+            <Text>
+              Rules for each role and action can be set by clicking on the
+              corresponding cell.
+            </Text>
+          </div>
+
+          <div className="grid grid-flow-col gap-4 items-center justify-start">
+            <Text
+              variant="subtitle2"
+              className="!text-greyscaleDark grid items-center grid-flow-col gap-1"
+            >
+              full access <FullPermissionIcon />
+            </Text>
+
+            <Text
+              variant="subtitle2"
+              className="!text-greyscaleDark grid items-center grid-flow-col gap-1"
+            >
+              partial access <PartialPermissionIcon />
+            </Text>
+
+            <Text
+              variant="subtitle2"
+              className="!text-greyscaleDark grid items-center grid-flow-col gap-1"
+            >
+              no access <NoPermissionIcon />
+            </Text>
+          </div>
+
+          <TableContainer>
+            <Table>
+              <TableHead className="block">
+                <TableRow className="grid grid-cols-5 items-center">
+                  <TableCell className="border-b-0 p-2">Role</TableCell>
+
+                  <TableCell className="border-b-0 p-2 text-center">
+                    Insert
+                  </TableCell>
+
+                  <TableCell className="border-b-0 p-2 text-center">
+                    Select
+                  </TableCell>
+
+                  <TableCell className="border-b-0 p-2 text-center">
+                    Update
+                  </TableCell>
+
+                  <TableCell className="border-b-0 p-2 text-center">
+                    Delete
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+
+              <TableBody className="rounded-sm+ block border-1">
+                <RolePermissionsRow
+                  name="admin"
+                  disabled
+                  accessLevels={{
+                    insert: 'full',
+                    select: 'full',
+                    update: 'full',
+                    delete: 'full',
+                  }}
+                />
+
+                {availableRoles.map((currentRole, index) => {
+                  const insertPermissions =
+                    metadataForTable?.insert_permissions?.find(
+                      ({ role: permissionRole }) =>
+                        permissionRole === currentRole,
+                    );
+
+                  const selectPermissions =
+                    metadataForTable?.select_permissions?.find(
+                      ({ role: permissionRole }) =>
+                        permissionRole === currentRole,
+                    );
+
+                  const updatePermissions =
+                    metadataForTable?.update_permissions?.find(
+                      ({ role: permissionRole }) =>
+                        permissionRole === currentRole,
+                    );
+
+                  const deletePermissions =
+                    metadataForTable?.delete_permissions?.find(
+                      ({ role: permissionRole }) =>
+                        permissionRole === currentRole,
+                    );
+
+                  return (
+                    <RolePermissionsRow
+                      name={currentRole}
+                      key={currentRole}
+                      className={twMerge(
+                        index === availableRoles.length - 1 && 'border-b-0',
+                      )}
+                      onActionSelect={(selectedAction) => {
+                        setRole(currentRole);
+                        setAction(selectedAction);
+                      }}
+                      accessLevels={{
+                        insert: getAccessLevel(insertPermissions?.permission),
+                        select: getAccessLevel(selectPermissions?.permission),
+                        update: getAccessLevel(updatePermissions?.permission),
+                        delete: getAccessLevel(deletePermissions?.permission),
+                      }}
+                    />
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          <Alert className="text-left">
+            Please go to the{' '}
+            <NavLink
+              href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/roles-and-permissions`}
+              passHref
+            >
+              <Link
+                href="settings/roles-and-permissions"
+                underline="hover"
+                onClick={closeDrawerWithDirtyGuard}
+              >
+                Settings page
+              </Link>
+            </NavLink>{' '}
+            to add and delete roles.
+          </Alert>
+        </section>
+      </div>
+
+      <div className="grid flex-shrink-0 grid-flow-col justify-between gap-3 border-t-1 border-gray-200 p-2 bg-white">
+        <Button variant="borderless" color="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm.tsx

@@ -0,0 +1,425 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import Form from '@/components/common/Form';
+import HighlightedText from '@/components/common/HighlightedText';
+import useManagePermissionMutation from '@/hooks/dataBrowser/useManagePermissionMutation';
+import type {
+  DatabaseAction,
+  HasuraMetadataPermission,
+  RuleGroup,
+} from '@/types/dataBrowser';
+import { Alert } from '@/ui/Alert';
+import Button from '@/ui/v2/Button';
+import Text from '@/ui/v2/Text';
+import convertToHasuraPermissions from '@/utils/dataBrowser/convertToHasuraPermissions';
+import convertToRuleGroup from '@/utils/dataBrowser/convertToRuleGroup';
+import { toastStyleProps } from '@/utils/settings/settingsConstants';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import AggregationQuerySection from './sections/AggregationQuerySection';
+import BackendOnlySection from './sections/BackendOnlySection';
+import ColumnPermissionsSection from './sections/ColumnPermissionsSection';
+import type { ColumnPreset } from './sections/ColumnPresetsSection';
+import ColumnPresetsSection from './sections/ColumnPresetsSection';
+import PermissionSettingsSection from './sections/PermissionSettingsSection';
+import RootFieldPermissionsSection from './sections/RootFieldPermissionsSection';
+import RowPermissionsSection from './sections/RowPermissionsSection';
+import validationSchemas from './validationSchemas';
+
+export interface RolePermissionEditorFormValues {
+  /**
+   * The permission filter to be applied for the role.
+   */
+  filter: Record<string, any> | {};
+  /**
+   * The allowed columns to CRUD for the role.
+   */
+  columns?: string[];
+  /**
+   * The number of rows to be returned for the role.
+   */
+  limit?: number;
+  /**
+   * Whether the role is allowed to perform aggregations.
+   */
+  allowAggregations?: boolean;
+  /**
+   * Whether the role is allowed to have access to special fields.
+   */
+  enableRootFieldCustomization?: boolean;
+  /**
+   * The allowed root fields in queries and mutations for the role.
+   */
+  queryRootFields?: string[];
+  /**
+   * The allowed root fields in subscriptions for the role.
+   */
+  subscriptionRootFields?: string[];
+  /**
+   * Column presets for the role.
+   */
+  columnPresets?: ColumnPreset[];
+  /**
+   * Whether the mutation should be restricted to trusted backends.
+   */
+  backendOnly?: boolean;
+}
+
+export interface RolePermissionEditorFormProps {
+  /**
+   * Determines whether or not the form is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The schema that is being edited.
+   */
+  schema: string;
+  /**
+   * The table that is being edited.
+   */
+  table: string;
+  /**
+   * The role that is being edited.
+   */
+  role: string;
+  /**
+   * The action that is being edited.
+   */
+  action: DatabaseAction;
+  /**
+   * Function to be called when the form is submitted.
+   */
+  onSubmit: VoidFunction;
+  /**
+   * Function to be called when the editing is cancelled.
+   */
+  onCancel: VoidFunction;
+  /**
+   * The existing permissions for the role and action.
+   */
+  permission?: HasuraMetadataPermission['permission'];
+}
+
+function getDefaultRuleGroup(
+  action: DatabaseAction,
+  permission: HasuraMetadataPermission['permission'],
+): RuleGroup | {} {
+  if (!permission) {
+    return null;
+  }
+
+  if (action === 'insert') {
+    return convertToRuleGroup(permission.check);
+  }
+
+  return convertToRuleGroup(permission.filter);
+}
+
+function getColumnPresets(data: Record<string, any>): ColumnPreset[] {
+  if (!data || Object.keys(data).length === 0) {
+    return [{ column: '', value: '' }];
+  }
+
+  return Object.keys(data).map((key) => ({
+    column: key,
+    value: data[key],
+  }));
+}
+
+function convertToColumnPresetObject(
+  columnPresets: ColumnPreset[],
+): Record<string, any> {
+  if (columnPresets?.length === 0) {
+    return null;
+  }
+
+  const returnValue = columnPresets.reduce((data, { column, value }) => {
+    if (column) {
+      return { ...data, [column]: value };
+    }
+
+    return data;
+  }, {});
+
+  if (Object.keys(returnValue).length === 0) {
+    return null;
+  }
+
+  return returnValue;
+}
+
+export default function RolePermissionEditorForm({
+  schema,
+  table,
+  role,
+  action,
+  onSubmit,
+  onCancel,
+  permission,
+  disabled,
+}: RolePermissionEditorFormProps) {
+  const queryClient = useQueryClient();
+  const {
+    mutateAsync: managePermission,
+    error,
+    reset: resetError,
+    isLoading,
+  } = useManagePermissionMutation({
+    schema,
+    table,
+    mutationOptions: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['default.metadata'] });
+      },
+    },
+  });
+
+  const form = useForm<RolePermissionEditorFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      filter: getDefaultRuleGroup(action, permission),
+      columns: permission?.columns || [],
+      limit: permission?.limit || null,
+      allowAggregations: permission?.allow_aggregations || false,
+      enableRootFieldCustomization:
+        permission?.query_root_fields?.length > 0 ||
+        permission?.subscription_root_fields?.length > 0,
+      queryRootFields: permission?.query_root_fields || [],
+      subscriptionRootFields: permission?.subscription_root_fields || [],
+      columnPresets: getColumnPresets(permission?.set || {}),
+      backendOnly: permission?.backend_only || false,
+    },
+    resolver: yupResolver(validationSchemas[action]),
+  });
+
+  const {
+    formState: { dirtyFields, isSubmitting },
+  } = form;
+
+  const { onDirtyStateChange, openDirtyConfirmation, openAlertDialog } =
+    useDialog();
+  const isDirty = Object.keys(dirtyFields).length > 0;
+
+  useEffect(() => {
+    onDirtyStateChange(isDirty, 'drawer');
+  }, [isDirty, onDirtyStateChange]);
+
+  async function handleSubmit(values: RolePermissionEditorFormValues) {
+    const managePermissionPromise = managePermission({
+      role,
+      action,
+      mode: permission ? 'update' : 'insert',
+      originalPermission: permission,
+      permission: {
+        set: convertToColumnPresetObject(values.columnPresets),
+        columns: values.columns,
+        limit: values.limit,
+        allow_aggregations: values.allowAggregations,
+        query_root_fields: values.queryRootFields,
+        subscription_root_fields: values.subscriptionRootFields,
+        filter:
+          action !== 'insert'
+            ? convertToHasuraPermissions(values.filter as RuleGroup)
+            : permission?.filter,
+        check:
+          action === 'insert'
+            ? convertToHasuraPermissions(values.filter as RuleGroup)
+            : permission?.check,
+        backend_only: values.backendOnly,
+      },
+    });
+
+    await toast.promise(
+      managePermissionPromise,
+      {
+        loading: 'Saving permission...',
+        success: 'Permission has been saved successfully.',
+        error: 'An error occurred while saving the permission.',
+      },
+      toastStyleProps,
+    );
+
+    onDirtyStateChange(false, 'drawer');
+    onSubmit?.();
+  }
+
+  function handleCancelClick() {
+    if (isDirty) {
+      openDirtyConfirmation({
+        props: {
+          onPrimaryAction: () => {
+            onDirtyStateChange(false, 'drawer');
+            onCancel?.();
+          },
+        },
+      });
+
+      return;
+    }
+    onCancel?.();
+  }
+
+  async function handleDelete() {
+    const deletePermissionPromise = managePermission({
+      role,
+      action,
+      originalPermission: permission,
+      mode: 'delete',
+    });
+
+    await toast.promise(
+      deletePermissionPromise,
+      {
+        loading: 'Deleting permission...',
+        success: 'Permission has been deleted successfully.',
+        error: 'An error occurred while deleting the permission.',
+      },
+      toastStyleProps,
+    );
+
+    onDirtyStateChange(false, 'drawer');
+    onSubmit?.();
+  }
+
+  function handleDeleteClick() {
+    openAlertDialog({
+      title: 'Delete permissions',
+      payload: (
+        <span>
+          Are you sure you want to delete the{' '}
+          <HighlightedText>{action}</HighlightedText> permissions of{' '}
+          <HighlightedText>{role}</HighlightedText>?
+        </span>
+      ),
+      props: {
+        primaryButtonText: 'Delete',
+        primaryButtonColor: 'error',
+        onPrimaryAction: handleDelete,
+      },
+    });
+  }
+
+  return (
+    <FormProvider {...form}>
+      {error && error instanceof Error && (
+        <div className="-mt-3 mb-4 px-6">
+          <Alert
+            severity="error"
+            className="grid grid-flow-col items-center justify-between px-4 py-3"
+          >
+            <span className="text-left">
+              <strong>Error:</strong> {error.message}
+            </span>
+
+            <Button
+              variant="borderless"
+              color="secondary"
+              className="p-1"
+              onClick={resetError}
+            >
+              Clear
+            </Button>
+          </Alert>
+        </div>
+      )}
+
+      <Form
+        onSubmit={handleSubmit}
+        className="flex flex-auto flex-col content-between overflow-hidden border-t-1 border-gray-200 bg-[#fafafa]"
+      >
+        <div className="grid grid-flow-row gap-6 content-start flex-auto py-4 overflow-auto">
+          <PermissionSettingsSection
+            title="Selected role & action"
+            className="justify-between grid-flow-col"
+          >
+            <div className="grid grid-flow-col gap-4">
+              <Text>
+                Role: <HighlightedText>{role}</HighlightedText>
+              </Text>
+
+              <Text>
+                Action: <HighlightedText>{action}</HighlightedText>
+              </Text>
+            </div>
+
+            <Button variant="borderless" onClick={handleCancelClick}>
+              Change
+            </Button>
+          </PermissionSettingsSection>
+
+          <RowPermissionsSection
+            disabled={disabled}
+            role={role}
+            action={action}
+            schema={schema}
+            table={table}
+          />
+
+          {action !== 'delete' && (
+            <ColumnPermissionsSection
+              disabled={disabled}
+              role={role}
+              action={action}
+              schema={schema}
+              table={table}
+            />
+          )}
+
+          {action === 'select' && (
+            <>
+              <AggregationQuerySection role={role} disabled={disabled} />
+              <RootFieldPermissionsSection disabled={disabled} />
+            </>
+          )}
+
+          {(action === 'insert' || action === 'update') && (
+            <ColumnPresetsSection
+              schema={schema}
+              table={table}
+              disabled={disabled}
+            />
+          )}
+
+          {action !== 'select' && <BackendOnlySection disabled={disabled} />}
+        </div>
+
+        <div className="grid flex-shrink-0 sm:grid-flow-col sm:justify-between gap-2 border-t-1 border-gray-200 p-2 bg-white">
+          <Button
+            variant="borderless"
+            color="secondary"
+            onClick={handleCancelClick}
+            tabIndex={isDirty ? -1 : 0}
+          >
+            Cancel
+          </Button>
+
+          {!disabled && (
+            <div className="grid grid-flow-row sm:grid-flow-col gap-2">
+              {Boolean(permission) && (
+                <Button
+                  variant="outlined"
+                  color="error"
+                  onClick={handleDeleteClick}
+                  disabled={isLoading}
+                >
+                  Delete Permissions
+                </Button>
+              )}
+
+              <Button
+                loading={isSubmitting}
+                disabled={isSubmitting}
+                type="submit"
+                className="justify-self-end"
+              >
+                Save
+              </Button>
+            </div>
+          )}
+        </div>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/RolePermissionsRow.tsx

@@ -0,0 +1,176 @@
+import type { DatabaseAccessLevel, DatabaseAction } from '@/types/dataBrowser';
+import IconButton from '@/ui/v2/IconButton';
+import FullPermissionIcon from '@/ui/v2/icons/FullPermissionIcon';
+import NoPermissionIcon from '@/ui/v2/icons/NoPermissionIcon';
+import PartialPermissionIcon from '@/ui/v2/icons/PartialPermissionIcon';
+import type { TableCellProps } from '@/ui/v2/TableCell';
+import TableCell from '@/ui/v2/TableCell';
+import type { TableRowProps } from '@/ui/v2/TableRow';
+import TableRow from '@/ui/v2/TableRow';
+import { twMerge } from 'tailwind-merge';
+
+export interface RolePermissionsProps extends TableRowProps {
+  /**
+   * Role name.
+   */
+  name: string;
+  /**
+   * Determines whether or not the actions are disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Access types for specific operations.
+   */
+  accessLevels?: Record<DatabaseAction, DatabaseAccessLevel>;
+  /**
+   * Function to be called when the user wants to open the settings for an
+   * operation.
+   */
+  onActionSelect?: (action: DatabaseAction) => void;
+  /**
+   * Props passed to individual component slots.
+   */
+  slotProps?: {
+    /**
+     * Props passed to every cell in the table row.
+     */
+    cell?: Partial<TableCellProps>;
+  };
+}
+
+function AccessLevelIcon({ level }: { level: DatabaseAccessLevel }) {
+  if (level === 'none') {
+    return <NoPermissionIcon />;
+  }
+
+  if (level === 'partial') {
+    return <PartialPermissionIcon />;
+  }
+
+  return <FullPermissionIcon />;
+}
+
+export default function RolePermissions({
+  name,
+  disabled,
+  accessLevels = {
+    insert: 'none',
+    select: 'none',
+    update: 'none',
+    delete: 'none',
+  },
+  onActionSelect,
+  slotProps,
+  className,
+  ...props
+}: RolePermissionsProps) {
+  const cellProps = slotProps?.cell || {};
+
+  return (
+    <TableRow
+      className={twMerge(
+        'grid grid-cols-5 items-center justify-items-stretch border-b-1',
+        className,
+      )}
+      {...props}
+    >
+      <TableCell
+        {...cellProps}
+        className={twMerge(
+          'block p-2 border-0 truncate border-r-1',
+          cellProps.className,
+        )}
+      >
+        {name}
+      </TableCell>
+
+      <TableCell
+        {...cellProps}
+        className={twMerge(
+          'inline-grid items-center p-0 border-0 text-center w-full h-full border-r-1',
+          disabled && 'justify-center',
+          cellProps.className,
+        )}
+      >
+        {disabled ? (
+          <AccessLevelIcon level={accessLevels.insert} />
+        ) : (
+          <IconButton
+            variant="borderless"
+            color="secondary"
+            className="w-full h-full rounded-none"
+            onClick={() => onActionSelect('insert')}
+          >
+            <AccessLevelIcon level={accessLevels.insert} />
+          </IconButton>
+        )}
+      </TableCell>
+
+      <TableCell
+        {...cellProps}
+        className={twMerge(
+          'inline-grid items-center p-0 border-0 text-center w-full h-full border-r-1',
+          disabled && 'justify-center',
+          cellProps.className,
+        )}
+      >
+        {disabled ? (
+          <AccessLevelIcon level={accessLevels.select} />
+        ) : (
+          <IconButton
+            variant="borderless"
+            color="secondary"
+            className="w-full h-full rounded-none"
+            onClick={() => onActionSelect('select')}
+          >
+            <AccessLevelIcon level={accessLevels.select} />
+          </IconButton>
+        )}
+      </TableCell>
+
+      <TableCell
+        {...cellProps}
+        className={twMerge(
+          'inline-grid items-center p-0 border-0 text-center w-full h-full border-r-1',
+          disabled && 'justify-center',
+          cellProps.className,
+        )}
+      >
+        {disabled ? (
+          <AccessLevelIcon level={accessLevels.update} />
+        ) : (
+          <IconButton
+            variant="borderless"
+            color="secondary"
+            className="w-full h-full rounded-none"
+            onClick={() => onActionSelect('update')}
+          >
+            <AccessLevelIcon level={accessLevels.update} />
+          </IconButton>
+        )}
+      </TableCell>
+
+      <TableCell
+        {...cellProps}
+        className={twMerge(
+          'inline-grid items-center p-0 border-0 text-center w-full h-full',
+          disabled && 'justify-center',
+          cellProps.className,
+        )}
+      >
+        {disabled ? (
+          <AccessLevelIcon level={accessLevels.delete} />
+        ) : (
+          <IconButton
+            variant="borderless"
+            color="secondary"
+            className="w-full h-full rounded-none"
+            onClick={() => onActionSelect('delete')}
+          >
+            <AccessLevelIcon level={accessLevels.delete} />
+          </IconButton>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}

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

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

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/AggregationQuerySection.tsx

@@ -0,0 +1,64 @@
+import ControlledSwitch from '@/components/common/ControlledSwitch';
+import HighlightedText from '@/components/common/HighlightedText';
+import type { RolePermissionEditorFormValues } from '@/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm';
+import Text from '@/ui/v2/Text';
+import { useFormContext } from 'react-hook-form';
+import PermissionSettingsSection from './PermissionSettingsSection';
+
+export interface AggregationQuerySectionProps {
+  /**
+   * The role that is being edited.
+   */
+  role: string;
+  /**
+   * Determines whether or not the section is disabled.
+   */
+  disabled?: boolean;
+}
+
+export default function AggregationQuerySection({
+  role,
+  disabled,
+}: AggregationQuerySectionProps) {
+  const { setValue, getValues } =
+    useFormContext<RolePermissionEditorFormValues>();
+
+  return (
+    <PermissionSettingsSection title="Aggregation queries permissions">
+      <Text variant="subtitle1">
+        Allow queries with aggregate functions like sum, count, avg, max, min,
+        etc.
+      </Text>
+
+      <ControlledSwitch
+        disabled={disabled}
+        name="allowAggregations"
+        label={
+          <Text variant="subtitle1" component="span">
+            Allow <HighlightedText>{role}</HighlightedText> to make aggregation
+            queries
+          </Text>
+        }
+        onChange={(event) => {
+          if (event.target.checked) {
+            return;
+          }
+
+          setValue(
+            'queryRootFields',
+            getValues('queryRootFields')?.filter(
+              (field) => field !== 'select_aggregate',
+            ) || [],
+          );
+
+          setValue(
+            'subscriptionRootFields',
+            getValues('subscriptionRootFields')?.filter(
+              (field) => field !== 'select_aggregate',
+            ) || [],
+          );
+        }}
+      />
+    </PermissionSettingsSection>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/BackendOnlySection.tsx

@@ -0,0 +1,33 @@
+import ControlledSwitch from '@/components/common/ControlledSwitch';
+import Text from '@/ui/v2/Text';
+import PermissionSettingsSection from './PermissionSettingsSection';
+
+export interface BackendOnlySectionProps {
+  /**
+   * Determines whether or not the section is disabled.
+   */
+  disabled?: boolean;
+}
+
+export default function BackendOnlySection({
+  disabled,
+}: BackendOnlySectionProps) {
+  return (
+    <PermissionSettingsSection title="Backend only">
+      <Text variant="subtitle1">
+        When enabled, this mutation is accessible only via &apos;trusted
+        backends&apos;.
+      </Text>
+
+      <ControlledSwitch
+        disabled={disabled}
+        name="backendOnly"
+        label={
+          <Text variant="subtitle1" component="span">
+            Allow from backends only
+          </Text>
+        }
+      />
+    </PermissionSettingsSection>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/ColumnPermissionsSection.tsx

@@ -0,0 +1,113 @@
+import HighlightedText from '@/components/common/HighlightedText';
+import type { RolePermissionEditorFormValues } from '@/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm';
+import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
+import type { DatabaseAction } from '@/types/dataBrowser';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import Button from '@/ui/v2/Button';
+import Checkbox from '@/ui/v2/Checkbox';
+import Text from '@/ui/v2/Text';
+import { useFormContext, useWatch } from 'react-hook-form';
+import PermissionSettingsSection from './PermissionSettingsSection';
+
+export interface ColumnPermissionsSectionProps {
+  /**
+   * The role that is being edited.
+   */
+  role: string;
+  /**
+   * The action that is being edited.
+   */
+  action: DatabaseAction;
+  /**
+   * The schema that is being edited.
+   */
+  schema: string;
+  /**
+   * The table that is being edited.
+   */
+  table: string;
+  /**
+   * Determines whether or not the section is disabled.
+   */
+  disabled?: boolean;
+}
+
+export default function ColumnPermissionsSection({
+  role,
+  action,
+  schema,
+  table,
+  disabled,
+}: ColumnPermissionsSectionProps) {
+  const { register, setValue } =
+    useFormContext<RolePermissionEditorFormValues>();
+  const selectedColumns = useWatch({ name: 'columns' }) as string[];
+
+  const {
+    data: tableData,
+    status: tableStatus,
+    error: tableError,
+  } = useTableQuery([`default.${schema}.${table}`], { schema, table });
+
+  if (tableError) {
+    throw tableError;
+  }
+
+  const isAllSelected = selectedColumns?.length === tableData?.columns?.length;
+
+  return (
+    <PermissionSettingsSection title={`Column ${action} permissions`}>
+      <div className="grid grid-flow-col justify-between gap-2 items-center">
+        <Text>
+          Allow role <HighlightedText>{role}</HighlightedText> to{' '}
+          <HighlightedText>{action}</HighlightedText> columns:
+        </Text>
+
+        <Button
+          variant="borderless"
+          size="small"
+          disabled={disabled}
+          onClick={() => {
+            if (isAllSelected) {
+              setValue('columns', []);
+
+              return;
+            }
+
+            setValue(
+              'columns',
+              tableData?.columns?.map((column) => column.column_name),
+            );
+          }}
+        >
+          {isAllSelected ? 'Deselect All' : 'Select All'}
+        </Button>
+      </div>
+
+      {tableStatus === 'loading' && (
+        <ActivityIndicator label="Loading columns..." />
+      )}
+
+      {tableStatus === 'success' && (
+        <div className="flex flex-row gap-6 justify-start flex-wrap items-center">
+          {tableData?.columns?.map((column) => (
+            <Checkbox
+              disabled={disabled}
+              name="columns"
+              value={column.column_name}
+              label={column.column_name}
+              key={column.column_name}
+              checked={selectedColumns.includes(column.column_name)}
+              {...register('columns')}
+            />
+          ))}
+        </div>
+      )}
+
+      <Text variant="subtitle1">
+        For <strong>relationships</strong>, set permissions for the
+        corresponding tables/views.
+      </Text>
+    </PermissionSettingsSection>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/ColumnPresetsSection.tsx

@@ -0,0 +1,215 @@
+import ControlledSelect from '@/components/common/ControlledSelect';
+import type { RolePermissionEditorFormValues } from '@/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm';
+import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import Autocomplete from '@/ui/v2/Autocomplete';
+import Button from '@/ui/v2/Button';
+import IconButton from '@/ui/v2/IconButton';
+import PlusIcon from '@/ui/v2/icons/PlusIcon';
+import XIcon from '@/ui/v2/icons/XIcon';
+import InputLabel from '@/ui/v2/InputLabel';
+import Option from '@/ui/v2/Option';
+import Text from '@/ui/v2/Text';
+import getPermissionVariablesArray from '@/utils/settings/getPermissionVariablesArray';
+import { useGetAppCustomClaimsQuery } from '@/utils/__generated__/graphql';
+import { useTheme } from '@mui/material';
+import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+import PermissionSettingsSection from './PermissionSettingsSection';
+
+export interface ColumnPreset {
+  column: string;
+  value: string;
+}
+
+export interface ColumnPresetSectionProps {
+  /**
+   * Schema to use for fetching available columns.
+   */
+  schema: string;
+  /**
+   * Table to use for fetching available columns.
+   */
+  table: string;
+  /**
+   * Determines whether or not the section is disabled.
+   */
+  disabled?: boolean;
+}
+
+export default function ColumnPresetsSection({
+  schema,
+  table,
+  disabled,
+}: ColumnPresetSectionProps) {
+  const theme = useTheme();
+  const {
+    data: tableData,
+    status: tableStatus,
+    error: tableError,
+  } = useTableQuery([`default.${schema}.${table}`], { schema, table });
+
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { data: customClaimsData } = useGetAppCustomClaimsQuery({
+    variables: { id: currentApplication?.id },
+    skip: !currentApplication?.id,
+  });
+  const {
+    setValue,
+    formState: { errors },
+  } = useFormContext<RolePermissionEditorFormValues>();
+  const { fields, append, remove } = useFieldArray({ name: 'columnPresets' });
+  const columnPresets = useWatch({ name: 'columnPresets' }) as ColumnPreset[];
+
+  const allColumnNames: string[] =
+    tableData?.columns.map((column) => column.column_name) || [];
+  const selectedColumns = fields as (ColumnPreset & { id: string })[];
+  const selectedColumnsMap = columnPresets.reduce(
+    (map, { column }) => map.set(column, true),
+    new Map<string, boolean>(),
+  );
+
+  if (tableError) {
+    throw tableError;
+  }
+
+  const permissionVariableOptions = getPermissionVariablesArray(
+    customClaimsData?.app?.authJwtCustomClaims,
+  ).map(({ key }) => ({
+    label: `X-Hasura-${key}`,
+    value: `X-Hasura-${key}`,
+    group: 'Permission variables',
+  }));
+
+  return (
+    <PermissionSettingsSection title="Column presets" className="gap-6">
+      <Text variant="subtitle1">
+        Set static values or session variables as pre-determined values for
+        columns while inserting.
+      </Text>
+
+      <div className="grid grid-flow-row gap-2">
+        <div className="grid grid-cols-[1fr_1fr_40px] gap-2">
+          <InputLabel as="span">Column Name</InputLabel>
+          <InputLabel as="span">Column Value</InputLabel>
+        </div>
+
+        {tableStatus === 'loading' && (
+          <ActivityIndicator label="Loading columns..." />
+        )}
+
+        <div className="grid grid-flow-row gap-4">
+          {tableStatus === 'success' &&
+            selectedColumns.map((field, index) => (
+              <div
+                key={field.id}
+                className="grid grid-cols-[1fr_1fr_40px] gap-2"
+              >
+                <ControlledSelect
+                  disabled={disabled}
+                  name={`columnPresets.${index}.column`}
+                  error={Boolean(
+                    errors?.columnPresets?.at(index).column?.message,
+                  )}
+                >
+                  {allColumnNames.map((column) => (
+                    <Option
+                      value={column}
+                      disabled={selectedColumnsMap.has(column)}
+                      key={column}
+                    >
+                      {column}
+                    </Option>
+                  ))}
+                </ControlledSelect>
+
+                <Autocomplete
+                  disabled={disabled}
+                  options={permissionVariableOptions}
+                  groupBy={(option) => option.group}
+                  name={`columnPresets.${index}.value`}
+                  inputValue={field.value}
+                  value={field.value}
+                  freeSolo
+                  fullWidth
+                  disableClearable={false}
+                  clearIcon={
+                    <XIcon
+                      className="w-4 h-4 mt-px"
+                      sx={{ color: theme.palette.text.primary }}
+                    />
+                  }
+                  autoSelect
+                  autoHighlight={false}
+                  error={Boolean(
+                    errors?.columnPresets?.at(index).value?.message,
+                  )}
+                  isOptionEqualToValue={(option, value) => {
+                    if (typeof value === 'string') {
+                      return (
+                        option.value.toLowerCase() ===
+                        (value as string).toLowerCase()
+                      );
+                    }
+
+                    return (
+                      option.value.toLowerCase() === value.value.toLowerCase()
+                    );
+                  }}
+                  onChange={(_event, _value, reason, details) => {
+                    if (reason === 'clear') {
+                      setValue(`columnPresets.${index}.value`, null, {
+                        shouldDirty: true,
+                      });
+
+                      return;
+                    }
+
+                    setValue(
+                      `columnPresets.${index}.value`,
+                      typeof details.option === 'string'
+                        ? details.option
+                        : details.option.value,
+                      { shouldDirty: true },
+                    );
+                  }}
+                />
+
+                <IconButton
+                  disabled={disabled}
+                  variant="outlined"
+                  color="secondary"
+                  className="shrink-0 grow-0 flex-[40px]"
+                  onClick={() => {
+                    if (fields.length === 1) {
+                      remove(index);
+                      append({ column: '', value: '' });
+
+                      return;
+                    }
+
+                    remove(index);
+                  }}
+                >
+                  <XIcon className="w-4 h-4" />
+                </IconButton>
+              </div>
+            ))}
+        </div>
+
+        <Button
+          variant="borderless"
+          startIcon={<PlusIcon />}
+          size="small"
+          onClick={() => append({ column: '', value: '' })}
+          disabled={
+            selectedColumns.length === allColumnNames.length || disabled
+          }
+          className="justify-self-start"
+        >
+          Add Column
+        </Button>
+      </div>
+    </PermissionSettingsSection>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/PermissionSettingsSection.tsx

@@ -0,0 +1,67 @@
+import type { TextProps } from '@/ui/v2/Text';
+import Text from '@/ui/v2/Text';
+import type { DetailedHTMLProps, HTMLProps, ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface PermissionSettingsSectionProps
+  extends Omit<
+    DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement>,
+    'title'
+  > {
+  /**
+   * Title of the section.
+   */
+  title: ReactNode;
+  /**
+   * Props to be passed to individual slots.
+   */
+  slotProps?: {
+    /**
+     * Props to be passed to the root slot.
+     */
+    root?: DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Props to be passed to the title slot.
+     */
+    title?: TextProps;
+  };
+}
+
+export default function PermissionSettingsSection({
+  children,
+  className,
+  title,
+  slotProps,
+  ...props
+}: PermissionSettingsSectionProps) {
+  return (
+    <section
+      {...(slotProps?.root || {})}
+      className={twMerge(
+        'bg-white border-y-1 border-gray-200',
+        slotProps?.root?.className,
+      )}
+    >
+      <Text
+        component="h2"
+        {...(slotProps?.title || {})}
+        className={twMerge(
+          'px-6 py-3 font-bold border-b-1 border-gray-200',
+          slotProps?.title?.className,
+        )}
+      >
+        {title}
+      </Text>
+
+      <div
+        {...props}
+        className={twMerge(
+          'grid grid-flow-row gap-4 items-center px-6 py-4',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/RootFieldPermissionsSection.tsx

@@ -0,0 +1,241 @@
+import ControlledSwitch from '@/components/common/ControlledSwitch';
+import type { RolePermissionEditorFormValues } from '@/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm';
+import Button from '@/ui/v2/Button';
+import Checkbox from '@/ui/v2/Checkbox';
+import Text from '@/ui/v2/Text';
+import { useFormContext, useWatch } from 'react-hook-form';
+import PermissionSettingsSection from './PermissionSettingsSection';
+
+export interface RootFieldPermissionsSectionProps {
+  /**
+   * Determines whether or not the section is disabled.
+   */
+  disabled?: boolean;
+}
+
+export default function RootFieldPermissionsSection({
+  disabled,
+}: RootFieldPermissionsSectionProps) {
+  const { register, setValue } =
+    useFormContext<RolePermissionEditorFormValues>();
+  const allowAggregations = useWatch({
+    name: 'allowAggregations',
+  }) as boolean;
+  const enableRootFieldCustomization = useWatch({
+    name: 'enableRootFieldCustomization',
+  }) as boolean;
+  const checkedQueryRootFields = useWatch({
+    name: 'queryRootFields',
+  }) as string[];
+  const checkedSubscriptionRootFields = useWatch({
+    name: 'subscriptionRootFields',
+  }) as string[];
+
+  const numberOfAvailableQueryRootFields = allowAggregations ? 3 : 2;
+  const availableQueryRootFields = allowAggregations
+    ? checkedQueryRootFields
+    : checkedQueryRootFields.filter((field) => field !== 'select_aggregate');
+
+  const numberOfAvailableSubscriptionRootFields = allowAggregations ? 3 : 2;
+  const availableSubscriptionRootFields = allowAggregations
+    ? checkedSubscriptionRootFields
+    : checkedSubscriptionRootFields.filter(
+        (field) => field !== 'select_aggregate',
+      );
+
+  function toggleQueryRootFields() {
+    if (availableQueryRootFields.length === numberOfAvailableQueryRootFields) {
+      setValue('queryRootFields', []);
+
+      return;
+    }
+
+    if (!allowAggregations) {
+      setValue('queryRootFields', ['select', 'select_by_pk']);
+
+      return;
+    }
+
+    setValue('queryRootFields', ['select', 'select_by_pk', 'select_aggregate']);
+  }
+
+  function toggleSubscriptionRootFields() {
+    if (
+      availableSubscriptionRootFields.length ===
+      numberOfAvailableSubscriptionRootFields
+    ) {
+      setValue('subscriptionRootFields', []);
+
+      return;
+    }
+
+    if (!allowAggregations) {
+      setValue('subscriptionRootFields', ['select', 'select_by_pk']);
+
+      return;
+    }
+
+    setValue('subscriptionRootFields', [
+      'select',
+      'select_by_pk',
+      'select_aggregate',
+    ]);
+  }
+
+  return (
+    <PermissionSettingsSection title="Root fields permissions">
+      <Text variant="subtitle1">
+        By enabling this you can customize the root field permissions. When this
+        switch is turned off, all values are enabled by default.
+      </Text>
+
+      <ControlledSwitch
+        disabled={disabled}
+        name="enableRootFieldCustomization"
+        label={
+          <Text variant="subtitle1" component="span">
+            Enable GraphQL root field visibility customization
+          </Text>
+        }
+        onChange={(event) => {
+          if (!event.target.checked) {
+            setValue('queryRootFields', []);
+            setValue('subscriptionRootFields', []);
+
+            return;
+          }
+
+          if (!allowAggregations) {
+            setValue('queryRootFields', ['select', 'select_by_pk']);
+            setValue('subscriptionRootFields', ['select', 'select_by_pk']);
+
+            return;
+          }
+
+          setValue('queryRootFields', [
+            'select',
+            'select_by_pk',
+            'select_aggregate',
+          ]);
+          setValue('subscriptionRootFields', [
+            'select',
+            'select_by_pk',
+            'select_aggregate',
+          ]);
+        }}
+      />
+
+      {enableRootFieldCustomization && (
+        <div className="grid grid-flow-row gap-4">
+          <div className="grid grid-flow-row gap-2">
+            <div className="grid grid-flow-row items-center sm:grid-flow-col gap-2 justify-center sm:justify-between">
+              <Text>
+                Allow the following root fields under the{' '}
+                <strong>query root field</strong>:
+              </Text>
+
+              <Button
+                disabled={disabled}
+                variant="borderless"
+                size="small"
+                onClick={toggleQueryRootFields}
+              >
+                {availableQueryRootFields.length ===
+                numberOfAvailableQueryRootFields
+                  ? 'Deselect All'
+                  : 'Select All'}
+              </Button>
+            </div>
+
+            <div className="flex flex-row flex-wrap gap-6 justify-start">
+              <Checkbox
+                disabled={disabled}
+                name="queryRootFields"
+                value="select"
+                label="select"
+                checked={availableQueryRootFields.includes('select')}
+                {...register('queryRootFields')}
+              />
+              <Checkbox
+                disabled={disabled}
+                name="queryRootFields"
+                value="select_by_pk"
+                label="select_by_pk"
+                checked={availableQueryRootFields.includes('select_by_pk')}
+                {...register('queryRootFields')}
+              />
+              <Checkbox
+                disabled={!allowAggregations || disabled}
+                name="queryRootFields"
+                value="select_aggregate"
+                label="select_aggregate"
+                checked={
+                  allowAggregations
+                    ? availableQueryRootFields.includes('select_aggregate')
+                    : false
+                }
+                {...register('queryRootFields')}
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-flow-row gap-2">
+            <div className="grid grid-flow-row items-center sm:grid-flow-col gap-2 justify-center sm:justify-between">
+              <Text>
+                Allow the following root fields under the{' '}
+                <strong>subscription root field</strong>:
+              </Text>
+
+              <Button
+                disabled={disabled}
+                variant="borderless"
+                size="small"
+                onClick={toggleSubscriptionRootFields}
+              >
+                {availableSubscriptionRootFields.length ===
+                numberOfAvailableSubscriptionRootFields
+                  ? 'Deselect All'
+                  : 'Select All'}
+              </Button>
+            </div>
+
+            <div className="flex flex-row flex-wrap gap-6 justify-start">
+              <Checkbox
+                disabled={disabled}
+                name="subscriptionRootFields"
+                value="select"
+                label="select"
+                checked={availableSubscriptionRootFields.includes('select')}
+                {...register('subscriptionRootFields')}
+              />
+              <Checkbox
+                disabled={disabled}
+                name="subscriptionRootFields"
+                value="select_by_pk"
+                label="select_by_pk"
+                checked={availableSubscriptionRootFields.includes(
+                  'select_by_pk',
+                )}
+                {...register('subscriptionRootFields')}
+              />
+              <Checkbox
+                disabled={!allowAggregations || disabled}
+                name="subscriptionRootFields"
+                value="select_aggregate"
+                label="select_aggregate"
+                checked={
+                  allowAggregations
+                    ? availableSubscriptionRootFields.includes(
+                        'select_aggregate',
+                      )
+                    : false
+                }
+                {...register('subscriptionRootFields')}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </PermissionSettingsSection>
+  );
+}

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/RowPermissionsSection.tsx

@@ -0,0 +1,147 @@
+import HighlightedText from '@/components/common/HighlightedText';
+import type { RolePermissionEditorFormValues } from '@/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm';
+import RuleGroupEditor from '@/components/dataBrowser/RuleGroupEditor';
+import type { DatabaseAction, RuleGroup } from '@/types/dataBrowser';
+import Input from '@/ui/v2/Input';
+import Radio from '@/ui/v2/Radio';
+import RadioGroup from '@/ui/v2/RadioGroup';
+import Text from '@/ui/v2/Text';
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import PermissionSettingsSection from './PermissionSettingsSection';
+
+export interface RowPermissionsSectionProps {
+  /**
+   * Determines whether or not the section is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The role that is being edited.
+   */
+  role: string;
+  /**
+   * The action that is being edited.
+   */
+  action: DatabaseAction;
+  /**
+   * The schema that is being edited.
+   */
+  schema: string;
+  /**
+   * The table that is being edited.
+   */
+  table: string;
+}
+
+export default function RowPermissionsSection({
+  role,
+  action,
+  schema,
+  table,
+  disabled,
+}: RowPermissionsSectionProps) {
+  const {
+    register,
+    setValue,
+    getValues,
+    formState: { errors },
+  } = useFormContext<RolePermissionEditorFormValues>();
+  const { filter } = getValues();
+
+  const defaultRowCheckType =
+    filter &&
+    'rules' in filter &&
+    'groups' in filter &&
+    (filter.rules.length > 0 ||
+      filter.groups.length > 0 ||
+      filter.unsupported?.length > 0)
+      ? 'custom'
+      : 'none';
+
+  const [temporaryPermissions, setTemporaryPermissions] = useState<
+    RuleGroup | {}
+  >(null);
+
+  const [rowCheckType, setRowCheckType] = useState<'none' | 'custom'>(
+    filter ? defaultRowCheckType : null,
+  );
+
+  function handleCheckTypeChange(value: typeof rowCheckType) {
+    setRowCheckType(value);
+
+    if (value === 'none') {
+      setTemporaryPermissions(getValues().filter);
+
+      // Note: https://github.com/react-hook-form/react-hook-form/issues/4055#issuecomment-950145092
+      // @ts-ignore
+      setValue('filter', {});
+
+      return;
+    }
+
+    setRowCheckType(value);
+    setValue(
+      'filter',
+      temporaryPermissions || {
+        operator: '_and',
+        rules: [{ column: '', operator: '_eq', value: '' }],
+        groups: [],
+      },
+    );
+  }
+
+  return (
+    <PermissionSettingsSection title={`Row ${action} permissions`}>
+      <Text>
+        Allow role <HighlightedText>{role}</HighlightedText> to{' '}
+        <HighlightedText>{action}</HighlightedText> rows:
+      </Text>
+
+      <RadioGroup
+        value={rowCheckType}
+        className="grid grid-flow-col justify-start gap-4"
+        onChange={(_event, value) =>
+          handleCheckTypeChange(value as typeof rowCheckType)
+        }
+      >
+        <Radio value="none" label="Without any checks" disabled={disabled} />
+        <Radio value="custom" label="With custom check" disabled={disabled} />
+      </RadioGroup>
+
+      {errors?.filter?.message && (
+        <Text variant="subtitle2" className="font-normal !text-red">
+          {errors.filter.message}
+        </Text>
+      )}
+
+      {rowCheckType === 'custom' && (
+        <RuleGroupEditor
+          name="filter"
+          schema={schema}
+          table={table}
+          className="w-full overflow-x-auto"
+          disabled={disabled}
+        />
+      )}
+
+      {action === 'select' && (
+        <Input
+          {...register('limit')}
+          disabled={disabled}
+          id="limit"
+          type="number"
+          label="Limit number of rows"
+          slotProps={{
+            input: { className: 'max-w-xs w-full' },
+            inputRoot: { min: 0 },
+          }}
+          helperText={
+            errors?.limit?.message ||
+            'Set limit on number of rows fetched per request.'
+          }
+          error={Boolean(errors?.limit)}
+        />
+      )}
+    </PermissionSettingsSection>
+  );
+}

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

@@ -0,0 +1,98 @@
+import type { DatabaseAction } from '@/types/dataBrowser';
+import * as Yup from 'yup';
+
+const ruleSchema = Yup.object().shape({
+  column: Yup.string().nullable().required('Please select a column.'),
+  operator: Yup.string().nullable().required('Please select an operator.'),
+  value: Yup.string().nullable().required('Please enter a value.'),
+});
+
+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;
+    },
+  ),
+  rules: Yup.array().of(ruleSchema),
+  groups: Yup.array().of(Yup.lazy(() => ruleGroupSchema) as any),
+});
+
+const baseValidationSchema = Yup.object().shape({
+  filter: ruleGroupSchema.nullable().required('Please select a filter type.'),
+  columns: Yup.array().of(Yup.string()).nullable(true),
+});
+
+const selectValidationSchema = baseValidationSchema.shape({
+  limit: Yup.number().min(0, 'Limit must not be negative.').nullable(true),
+  allowAggregations: Yup.boolean().nullable(true),
+  queryRootFields: Yup.array().of(Yup.string()).nullable(true),
+  subscriptionRootFields: Yup.array().of(Yup.string()).nullable(true),
+});
+
+const columnPresetSchema = Yup.object().shape({
+  column: Yup.string()
+    .nullable()
+    .test('column', 'Please select a column.', (selectedColumn, ctx) => {
+      // `from` is part of the Yup API, but it's not typed.
+      // @ts-ignore
+      const [, { value }] = ctx.from;
+
+      if (
+        (value.columnPresets.length > 1 && !selectedColumn) ||
+        (!!ctx.parent.value && !selectedColumn)
+      ) {
+        return false;
+      }
+
+      return true;
+    }),
+  value: Yup.string()
+    .nullable()
+    .test('value', 'Please enter a value.', (selectedValue, ctx) => {
+      // `from` is part of the Yup API, but it's not typed.
+      // @ts-ignore
+      const [, { value }] = ctx.from;
+
+      if (
+        (value.columnPresets.length > 1 && !selectedValue) ||
+        (!!ctx.parent.column && !selectedValue)
+      ) {
+        return false;
+      }
+
+      return true;
+    }),
+});
+
+const insertValidationSchema = baseValidationSchema.shape({
+  backendOnly: Yup.boolean().nullable(true),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+});
+
+const updateValidationSchema = baseValidationSchema.shape({
+  backendOnly: Yup.boolean().nullable(true),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+});
+
+const deleteValidationSchema = baseValidationSchema.shape({
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+});
+
+const validationSchemas: Record<DatabaseAction, Yup.ObjectSchema<any>> = {
+  select: selectValidationSchema,
+  insert: insertValidationSchema,
+  update: updateValidationSchema,
+  delete: deleteValidationSchema,
+};
+
+export default validationSchemas;

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleEditorRow.tsx

@@ -3,13 +3,13 @@ import ColumnAutocomplete from '@/components/dataBrowser/ColumnAutocomplete';
 import type { HasuraOperator } from '@/types/dataBrowser';
 import Option from '@/ui/v2/Option';
 import Text from '@/ui/v2/Text';
-import { useRouter } from 'next/router';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { useState } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import RuleRemoveButton from './RuleRemoveButton';
 import RuleValueInput from './RuleValueInput';
+import useRuleGroupEditor from './useRuleGroupEditor';
 
 export interface RuleEditorRowProps
   extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {
@@ -98,12 +98,14 @@ export default function RuleEditorRow({
   disabledOperators = [],
   ...props
 }: RuleEditorRowProps) {
-  const {
+  const { schema, table, disabled } = useRuleGroupEditor();
-    query: { schemaSlug, tableSlug },
+  const { control, setValue, getFieldState } = useFormContext();
-  } = useRouter();
-  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({
@@ -128,30 +130,36 @@ export default function RuleEditorRow({
   return (
     <div
       className={twMerge(
-        'flex lg:flex-row flex-col items-stretch lg:max-h-10 flex-1 space-y-1 lg:space-y-0',
+        'grid lg:grid-cols-[320px_140px_minmax(100px,_1fr)_40px] grid-flow-row lg:max-h-10 space-y-1 lg:space-y-0',
         className,
       )}
       {...props}
     >
       <ColumnAutocomplete
         {...autocompleteField}
-        schema={schemaSlug as string}
+        disabled={disabled}
-        table={tableSlug as string}
+        schema={schema}
-        rootClassName="lg:flex-grow-0 lg:flex-shrink-0 lg:flex-[320px] h-10"
+        table={table}
+        rootClassName="h-10"
         slotProps={{ input: { className: 'bg-white lg:!rounded-r-none' } }}
         fullWidth
+        error={Boolean(columnState?.error?.message)}
         onChange={(_event, { value, columnMetadata, disableReset }) => {
           setSelectedTablePath(
             `${columnMetadata.table_schema}.${columnMetadata.table_name}`,
           );
           setSelectedColumnType(columnMetadata?.udt_name);
-          setValue(`${rowName}.column`, value, { shouldDirty: true });
+          setValue(`${rowName}.column`, value, {
+            shouldDirty: true,
+          });
 
           if (disableReset) {
             return;
           }
 
-          setValue(`${rowName}.operator`, '_eq', { shouldDirty: true });
+          setValue(`${rowName}.operator`, '_eq', {
+            shouldDirty: true,
+          });
           setValue(`${rowName}.value`, '', { shouldDirty: true });
         }}
         onInitialized={({ value, columnMetadata }) => {
@@ -159,22 +167,32 @@ export default function RuleEditorRow({
             `${columnMetadata.table_schema}.${columnMetadata.table_name}`,
           );
           setSelectedColumnType(columnMetadata?.udt_name);
-          setValue(`${rowName}.column`, value, { shouldDirty: true });
+          setValue(`${rowName}.column`, value, {
+            shouldDirty: true,
+          });
         }}
       />
 
       <ControlledSelect
+        disabled={disabled}
         name={`${rowName}.operator`}
-        className="lg:flex-grow-0 lg:flex-shrink-0 lg:flex-[140px] h-10"
+        className="h-10"
-        slotProps={{ root: { className: 'bg-white lg:!rounded-none' } }}
+        slotProps={{
+          root: { className: 'bg-white lg:!rounded-none' },
+          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 });
+            setValue(`${rowName}.value`, null, {
+              shouldDirty: true,
+            });
 
             return;
           }
@@ -200,9 +218,13 @@ export default function RuleEditorRow({
         {availableOperators.map(renderOption)}
       </ControlledSelect>
 
-      <RuleValueInput selectedTablePath={selectedTablePath} name={rowName} />
+      <RuleValueInput
+        selectedTablePath={selectedTablePath}
+        name={rowName}
+        error={Boolean(valueState?.error?.message)}
+      />
 
-      <RuleRemoveButton onRemove={onRemove} name={name} />
+      <RuleRemoveButton onRemove={onRemove} name={name} disabled={disabled} />
     </div>
   );
 }

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleGroupControls.tsx

@@ -5,6 +5,7 @@ import Text from '@/ui/v2/Text';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { useWatch } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
+import useRuleGroupEditor from './useRuleGroupEditor';
 
 export interface RuleGroupControlsProps
   extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {
@@ -30,6 +31,7 @@ export default function RuleGroupControls({
   className,
   ...props
 }: RuleGroupControlsProps) {
+  const { disabled } = useRuleGroupEditor();
   const currentOperator: RuleGroup['operator'] = useWatch({
     name: `${name}.operator`,
   });
@@ -41,6 +43,7 @@ export default function RuleGroupControls({
     >
       {showSelect ? (
         <ControlledSelect
+          disabled={disabled}
           name={`${name}.operator`}
           slotProps={{ root: { className: 'bg-white' } }}
           fullWidth

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleGroupEditor.stories.tsx

@@ -65,7 +65,13 @@ const Template: ComponentStory<typeof RuleGroupEditor> = function Template(
     <div className="grid grid-flow-row gap-2">
       <FormProvider {...form}>
         <Form onSubmit={handleSubmit} className="grid grid-flow-row gap-2">
-          <RuleGroupEditor {...args} name="ruleGroupEditor" onRemove={null} />
+          <RuleGroupEditor
+            schema="public"
+            table="books"
+            {...args}
+            name="ruleGroupEditor"
+            onRemove={null}
+          />
 
           <Button type="submit" className="justify-self-start">
             Submit

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleGroupEditor.tsx

@@ -1,17 +1,35 @@
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { Rule, RuleGroup } from '@/types/dataBrowser';
+import { Alert } from '@/ui/Alert';
 import Button from '@/ui/v2/Button';
 import PlusIcon from '@/ui/v2/icons/PlusIcon';
+import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
+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 DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement>,
     Pick<RuleEditorRowProps, 'disabledOperators'> {
+  /**
+   * Determines whether or not the rule group editor is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Schema for the column autocomplete.
+   */
+  schema: string;
+  /**
+   * Table for the column autocomplete.
+   */
+  table: string;
   /**
    * Name of the group editor.
    */
@@ -46,14 +64,15 @@ export default function RuleGroupEditor({
   disabledOperators = [],
   depth = 0,
   maxDepth = 7,
+  schema,
+  table,
+  disabled,
   ...props
 }: RuleGroupEditorProps) {
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
   const form = useFormContext();
 
-  const { control } = form;
+  const { control, getValues } = form;
-
-  // Note: Reason for the type cast to `never`
-  // https://github.com/react-hook-form/react-hook-form/issues/4055#issuecomment-950145092
   const {
     fields: rules,
     append: appendRule,
@@ -61,10 +80,11 @@ export default function RuleGroupEditor({
   } = useFieldArray({
     control,
     name: `${name}.rules`,
-  } as never);
+  });
+
+  const unsupportedValues: Record<string, any>[] =
+    getValues(`${name}.unsupported`) || [];
 
-  // Note: Reason for the type cast to `never`
-  // https://github.com/react-hook-form/react-hook-form/issues/4055#issuecomment-950145092
   const {
     fields: groups,
     append: appendGroup,
@@ -72,122 +92,164 @@ export default function RuleGroupEditor({
   } = useFieldArray({
     control,
     name: `${name}.groups`,
-  } as never);
+  });
 
   if (!form) {
     throw new Error('RuleGroupEditor must be used in a FormContext.');
   }
 
+  const contextValue = useMemo(
+    () => ({
+      disabled,
+      schema,
+      table,
+    }),
+    [disabled, schema, table],
+  );
+
   return (
-    <div
+    <RuleGroupEditorContext.Provider value={contextValue}>
-      className={twMerge(
+      <div
-        'rounded-lg px-2',
+        className={twMerge(
-        depth === 0 && 'bg-greyscale-50',
+          'rounded-lg border border-r-8 border-transparent pl-2',
-        depth === 1 && 'bg-greyscale-100',
+          depth === 0 && 'bg-greyscale-50',
-        depth === 2 && 'bg-greyscale-200',
+          depth === 1 && 'bg-greyscale-100',
-        depth === 3 && 'bg-greyscale-300',
+          depth === 2 && 'bg-greyscale-200',
-        depth === 4 && 'bg-greyscale-400',
+          depth === 3 && 'bg-greyscale-300',
-        depth === 5 && 'bg-greyscale-500',
+          depth === 4 && 'bg-greyscale-400',
-        depth >= 6 && 'bg-greyscale-600',
+          depth === 5 && 'bg-greyscale-500',
-        className,
+          depth >= 6 && 'bg-greyscale-600',
-      )}
+          className,
-      {...props}
+        )}
-    >
+        {...props}
-      <div className="flex flex-col flex-auto space-y-4 lg:space-y-2 py-4">
+      >
-        {(rules as (Rule & { id: string })[]).map((rule, ruleIndex) => (
+        <div className="grid grid-flow-row gap-4 lg:gap-2 py-4">
-          <div className="flex flex-row flex-auto" key={rule.id}>
+          {(rules as (Rule & { id: string })[]).map((rule, ruleIndex) => (
-            <div className="flex-[70px] flex-grow-0 flex-shrink-0 mr-2">
+            <div className="grid grid-cols-[70px_1fr] gap-2" key={rule.id}>
-              {ruleIndex === 0 && (
+              <div>
-                <Text className="p-2 !font-medium">Where</Text>
+                {ruleIndex === 0 && (
-              )}
-
-              {ruleIndex > 0 && (
-                <RuleGroupControls name={name} showSelect={ruleIndex === 1} />
-              )}
-            </div>
-
-            <RuleEditorRow
-              name={name}
-              index={ruleIndex}
-              onRemove={() => removeRule(ruleIndex)}
-              className="flex-auto"
-              disabledOperators={disabledOperators}
-            />
-          </div>
-        ))}
-
-        {(groups as (RuleGroup & { id: string })[]).map(
-          (ruleGroup, ruleGroupIndex) => (
-            <div
-              className="flex flex-row flex-auto items-start mt-2"
-              key={ruleGroup.id}
-            >
-              <div className="flex-[70px] flex-grow-0 flex-shrink-0 mr-2">
-                {rules.length === 0 && ruleGroupIndex === 0 && (
                   <Text className="p-2 !font-medium">Where</Text>
                 )}
 
-                <RuleGroupControls
+                {ruleIndex > 0 && (
-                  name={name}
+                  <RuleGroupControls name={name} showSelect={ruleIndex === 1} />
-                  showSelect={
+                )}
-                    (rules.length === 0 && ruleGroupIndex === 1) ||
-                    (rules.length === 1 && ruleGroupIndex === 0)
-                  }
-                />
               </div>
 
-              <RuleGroupEditor
+              <RuleEditorRow
-                onRemove={() => removeGroup(ruleGroupIndex)}
+                name={name}
-                disableRemove={rules.length === 0 && groups.length === 1}
+                index={ruleIndex}
+                onRemove={() => removeRule(ruleIndex)}
                 disabledOperators={disabledOperators}
-                name={`${name}.groups.${ruleGroupIndex}`}
-                className="flex-auto"
-                depth={depth + 1}
               />
             </div>
-          ),
+          ))}
-        )}
-      </div>
 
-      <div className="grid grid-flow-row lg:grid-flow-col lg:justify-between gap-2 pb-2">
+          {(groups as (RuleGroup & { id: string })[]).map(
-        <div className="grid grid-flow-row lg:grid-flow-col gap-2 lg:justify-start">
+            (ruleGroup, ruleGroupIndex) => (
-          <Button
+              <div
-            startIcon={<PlusIcon />}
+                className="grid grid-cols-[70px_1fr] gap-2"
-            variant="borderless"
+                key={ruleGroup.id}
-            onClick={() =>
+              >
-              appendRule({ column: '', operator: '_eq', value: '' })
+                <div>
-            }
+                  {rules.length === 0 && ruleGroupIndex === 0 && (
-          >
+                    <Text className="p-2 !font-medium">Where</Text>
-            New Rule
+                  )}
-          </Button>
 
-          <Button
+                  <RuleGroupControls
-            startIcon={<PlusIcon />}
+                    name={name}
-            variant="borderless"
+                    showSelect={
-            onClick={() =>
+                      (rules.length === 0 && ruleGroupIndex === 1) ||
-              appendGroup({
+                      (rules.length === 1 && ruleGroupIndex === 0)
-                operator: '_and',
+                    }
-                rules: [{ column: '', operator: '_eq', value: '' }],
+                  />
-                groups: [],
+                </div>
-              })
+
-            }
+                <RuleGroupEditor
-            disabled={depth >= maxDepth - 1}
+                  schema={schema}
-          >
+                  table={table}
-            New Group
+                  onRemove={() => removeGroup(ruleGroupIndex)}
-          </Button>
+                  disableRemove={rules.length === 0 && groups.length === 1}
+                  disabledOperators={disabledOperators}
+                  name={`${name}.groups.${ruleGroupIndex}`}
+                  depth={depth + 1}
+                  disabled={disabled}
+                />
+              </div>
+            ),
+          )}
+
+          {unsupportedValues?.length > 0 && (
+            <Alert severity="warning" className="text-left">
+              <Text>
+                This rule group contains one or more objects (e.g: _exists) that
+                are not supported by our dashboard yet.{' '}
+                {currentApplication && (
+                  <span>
+                    Please{' '}
+                    <Link
+                      href={`${generateAppServiceUrl(
+                        currentApplication.subdomain,
+                        currentApplication.region?.awsName,
+                        'hasura',
+                      )}/console/data/default/schema/${schema}/tables/${table}/permissions`}
+                      underline="hover"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      visit Hasura
+                    </Link>{' '}
+                    to edit them.
+                  </span>
+                )}
+              </Text>
+            </Alert>
+          )}
         </div>
 
-        {onRemove && (
+        {!disabled && (
-          <Button
+          <div className="grid grid-flow-row lg:grid-flow-col lg:justify-between gap-2 pb-2">
-            variant="borderless"
+            <div className="grid grid-flow-row lg:grid-flow-col gap-2 lg:justify-start">
-            color="secondary"
+              <Button
-            onClick={onRemove}
+                startIcon={<PlusIcon />}
-            disabled={disableRemove}
+                variant="borderless"
-          >
+                onClick={() =>
-            Delete Group
+                  appendRule({ column: '', operator: '_eq', value: '' })
-          </Button>
+                }
+              >
+                New Rule
+              </Button>
+
+              <Button
+                startIcon={<PlusIcon />}
+                variant="borderless"
+                onClick={() =>
+                  appendGroup({
+                    operator: '_and',
+                    rules: [{ column: '', operator: '_eq', value: '' }],
+                    groups: [],
+                    unsupported: [],
+                  })
+                }
+                disabled={depth >= maxDepth - 1}
+              >
+                New Group
+              </Button>
+            </div>
+
+            {onRemove && (
+              <Button
+                variant="borderless"
+                color="secondary"
+                onClick={onRemove}
+                disabled={disableRemove}
+              >
+                Delete Group
+              </Button>
+            )}
+          </div>
         )}
       </div>
-    </div>
+    </RuleGroupEditorContext.Provider>
   );
 }

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleRemoveButton.tsx

@@ -24,16 +24,19 @@ function RuleRemoveButton({
 }: RuleRemoveButtonProps) {
   const rules: Rule[] = useWatch({ name: `${name}.rules` });
   const groups: RuleGroup[] = useWatch({ name: `${name}.groups` });
+  const unsupported: Record<string, any>[] = useWatch({
+    name: `${name}.unsupported`,
+  });
 
   return (
     <Button
       variant="outlined"
       color="secondary"
       className={twMerge(
-        '!bg-white lg:!rounded-l-none lg:flex-grow-0 lg:flex-shrink-0 lg:flex-[40px] !min-w-0 h-10',
+        '!bg-white lg:!rounded-l-none !min-w-0 h-10',
         className,
       )}
-      disabled={rules.length === 1 && groups.length === 0}
+      disabled={rules.length === 1 && !groups?.length && !unsupported?.length}
       aria-label="Remove Rule"
       {...props}
       onClick={onRemove}

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleValueInput.tsx

@@ -6,22 +6,12 @@ import ColumnAutocomplete from '@/components/dataBrowser/ColumnAutocomplete';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { HasuraOperator } from '@/types/dataBrowser';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import type { InputProps } from '@/ui/v2/Input';
 import Option from '@/ui/v2/Option';
 import getPermissionVariablesArray from '@/utils/settings/getPermissionVariablesArray';
 import { useGetAppCustomClaimsQuery } from '@/utils/__generated__/graphql';
-import { useRouter } from 'next/router';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
-
+import useRuleGroupEditor from './useRuleGroupEditor';
-export interface RuleValueInputProps {
-  /**
-   * Name of the parent group editor.
-   */
-  name: string;
-  /**
-   * Path of the table selected through the column input.
-   */
-  selectedTablePath?: string;
-}
 
 function ColumnSelectorInput({
   name,
@@ -47,7 +37,6 @@ function ColumnSelectorInput({
       schema={schema}
       table={table}
       disableRelationships
-      rootClassName="flex-auto"
       slotProps={{
         input: { className: 'lg:!rounded-none !bg-white !z-10' },
       }}
@@ -64,31 +53,59 @@ function ColumnSelectorInput({
   );
 }
 
+export interface RuleValueInputProps {
+  /**
+   * Name of the parent group editor.
+   */
+  name: 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,
 }: RuleValueInputProps) {
+  const { schema, table, disabled } = useRuleGroupEditor();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const { setValue } = useFormContext();
   const inputName = `${name}.value`;
   const operator: HasuraOperator = useWatch({ name: `${name}.operator` });
   const isHasuraInput = operator === '_in_hasura' || operator === '_nin_hasura';
-  const {
-    query: { schemaSlug, tableSlug },
-  } = useRouter();
 
-  const { data, loading, error } = useGetAppCustomClaimsQuery({
+  const {
+    data,
+    loading,
+    error: customClaimsError,
+  } = useGetAppCustomClaimsQuery({
     variables: { id: currentApplication?.id },
-    skip: !isHasuraInput,
+    skip: !isHasuraInput || !currentApplication?.id,
   });
 
   if (operator === '_is_null') {
     return (
       <ControlledSelect
+        disabled={disabled}
         name={inputName}
-        className="flex-auto"
         fullWidth
-        slotProps={{ root: { className: 'bg-white lg:!rounded-none h-10' } }}
+        slotProps={{
+          root: { className: 'bg-white lg:!rounded-none h-10' },
+          popper: { disablePortal: false, className: 'z-[10000]' },
+        }}
+        error={error}
+        helperText={helperText}
       >
         <Option value="true">
           <ReadOnlyToggle
@@ -110,15 +127,17 @@ export default function RuleValueInput({
   if (operator === '_in' || operator === '_nin') {
     return (
       <ControlledAutocomplete
+        disabled={disabled}
         name={inputName}
         multiple
         freeSolo
-        limitTags={5}
+        limitTags={3}
-        className="flex-auto"
         slotProps={{ input: { className: 'lg:!rounded-none !bg-white !z-10' } }}
         options={[]}
         fullWidth
         filterSelectedOptions
+        error={error}
+        helperText={helperText}
       />
     );
   }
@@ -126,28 +145,41 @@ export default function RuleValueInput({
   if (['_ceq', '_cne', '_cgt', '_clt', '_cgte', '_clte'].includes(operator)) {
     return (
       <ColumnSelectorInput
+        disabled={disabled}
         selectedTablePath={selectedTablePath}
-        schema={schemaSlug as string}
+        schema={schema}
-        table={tableSlug as string}
+        table={table}
         name={inputName}
+        error={error}
+        helperText={helperText}
       />
     );
   }
 
-  const availableHasuraPermissionVariables = !loading
+  const availableHasuraPermissionVariables = getPermissionVariablesArray(
-    ? getPermissionVariablesArray(data?.app?.authJwtCustomClaims).map(
+    data?.app?.authJwtCustomClaims,
-        ({ key }) => ({
+  ).map(({ key }) => ({
-          value: `X-Hasura-${key}`,
+    value: `X-Hasura-${key}`,
-          label: `X-Hasura-${key}`,
+    label: `X-Hasura-${key}`,
-        }),
+    group: 'Frequently used',
-      )
+  }));
-    : [];
 
   return (
     <ControlledAutocomplete
+      disabled={disabled}
       freeSolo={!isHasuraInput}
+      autoSelect={!isHasuraInput}
+      autoHighlight={isHasuraInput}
+      filterSelectedOptions
+      isOptionEqualToValue={(option, value) => {
+        if (typeof value === 'string') {
+          return option.value.toLowerCase() === (value as string).toLowerCase();
+        }
+
+        return option.value.toLowerCase() === value.value.toLowerCase();
+      }}
       name={inputName}
-      className="flex-auto"
+      groupBy={(option) => option.group}
       slotProps={{
         input: { className: 'lg:!rounded-none !bg-white' },
         formControl: { className: '!bg-transparent' },
@@ -155,12 +187,18 @@ export default function RuleValueInput({
       fullWidth
       loading={loading}
       loadingText={<ActivityIndicator label="Loading..." />}
-      error={!!error}
+      error={Boolean(customClaimsError) || error}
-      helperText={error?.message}
+      helperText={customClaimsError?.message || helperText}
       options={
         isHasuraInput
           ? availableHasuraPermissionVariables
-          : [{ value: 'X-Hasura-User-Id', label: 'X-Hasura-User-Id' }]
+          : [
+              {
+                value: 'X-Hasura-User-Id',
+                label: 'X-Hasura-User-Id',
+                group: 'Frequently used',
+              },
+            ]
       }
       onChange={(_event, _value, reason, details) => {
         if (

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

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+
+export const RuleGroupEditorContext = createContext<{
+  schema: string;
+  table: string;
+  disabled: boolean;
+}>({
+  schema: '',
+  table: '',
+  disabled: false,
+});
+
+export default function useRuleGroupEditor() {
+  const context = useContext(RuleGroupEditorContext);
+
+  if (!context) {
+    throw new Error('useRuleGroupEditor must be used within a RuleGroupEditor');
+  }
+
+  return context;
+}

dashboard/src/components/home/EditWorkspaceNameForm/EditWorkspaceNameForm.tsx

@@ -0,0 +1,239 @@
+import Form from '@/components/common/Form';
+import Button from '@/ui/v2/Button';
+import Input from '@/ui/v2/Input';
+import {
+  refetchGetOneUserQuery,
+  useInsertWorkspaceMutation,
+  useUpdateWorkspaceMutation,
+} from '@/utils/__generated__/graphql';
+import { slugifyString } from '@/utils/helpers';
+import { toastStyleProps } from '@/utils/settings/settingsConstants';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useUserData } from '@nhost/nextjs';
+import { useRouter } from 'next/router';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+export interface EditWorkspaceNameFormProps {
+  /**
+   * The current workspace name if this is an edit operation.
+   */
+  currentWorkspaceName?: string;
+  /**
+   * The current workspace name id if this is an edit operation.
+   */
+  currentWorkspaceId?: string;
+  /**
+   * Determines whether the form is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Submit button text.
+   *
+   * @default 'Create'
+   */
+  submitButtonText?: string;
+  /**
+   * Function to be called when the form is submitted.
+   */
+  onSubmit?: () => void;
+  /**
+   * Function to be called when the operation is cancelled.
+   */
+  onCancel?: VoidFunction;
+}
+
+export interface EditWorkspaceNameFormValues {
+  /**
+   * New workspace name.
+   */
+  newWorkspaceName: string;
+}
+
+const validationSchema = Yup.object().shape({
+  newWorkspaceName: Yup.string()
+    .required('Workspace name is required.')
+    .min(4, 'The new Workspace name must be at least 4 characters.')
+    .max(32, "The new Workspace name can't be longer than 32 characters.")
+    .test(
+      'canBeSlugified',
+      `This field should be at least 4 characters and can't be longer than 32 characters.`,
+      (value) => {
+        const slug = slugifyString(value);
+
+        if (slug.length < 4 || slug.length > 32) {
+          return false;
+        }
+
+        return true;
+      },
+    ),
+});
+
+export default function EditWorkspaceName({
+  disabled,
+  onSubmit,
+  onCancel,
+  currentWorkspaceName,
+  currentWorkspaceId,
+  submitButtonText = 'Create',
+}: EditWorkspaceNameFormProps) {
+  const currentUser = useUserData();
+  const [insertWorkspace, { client }] = useInsertWorkspaceMutation();
+  const [updateWorkspaceName] = useUpdateWorkspaceMutation({
+    refetchQueries: [
+      refetchGetOneUserQuery({
+        userId: currentUser.id,
+      }),
+    ],
+    awaitRefetchQueries: true,
+    ignoreResults: true,
+  });
+  const router = useRouter();
+
+  const form = useForm<EditWorkspaceNameFormValues>({
+    defaultValues: {
+      newWorkspaceName: currentWorkspaceName || '',
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const {
+    register,
+    formState: { dirtyFields, isSubmitting, errors },
+  } = form;
+  const isDirty = Object.keys(dirtyFields).length > 0;
+
+  async function handleSubmit({
+    newWorkspaceName,
+  }: EditWorkspaceNameFormValues) {
+    const slug = slugifyString(newWorkspaceName);
+
+    try {
+      if (currentWorkspaceId) {
+        // In this bit of code we spread the props of the current path (e.g. /workspace/...) and add one key-value pair: `mutating: true`.
+        // We want to indicate that the currently we're in the process of running a mutation state that will affect the routing behaviour of the website
+        // i.e. redirecting to 404 if there's no workspace/project with that slug.
+        await router.replace({
+          pathname: router.pathname,
+          query: { ...router.query, updating: true },
+        });
+
+        await toast.promise(
+          updateWorkspaceName({
+            variables: {
+              id: currentWorkspaceId,
+              workspace: {
+                name: newWorkspaceName,
+                slug,
+              },
+            },
+          }),
+          {
+            loading: 'Updating workspace name...',
+            success: 'Workspace name has been updated successfully.',
+            error: 'An error occurred while updating the workspace name.',
+          },
+          toastStyleProps,
+        );
+      } else {
+        await toast.promise(
+          insertWorkspace({
+            variables: {
+              workspace: {
+                name: newWorkspaceName,
+                companyName: newWorkspaceName,
+                email: currentUser.email,
+                slug,
+                workspaceMembers: {
+                  data: [
+                    {
+                      userId: currentUser.id,
+                      type: 'owner',
+                    },
+                  ],
+                },
+              },
+            },
+          }),
+          {
+            loading: 'Creating new workspace...',
+            success: 'The new workspace has been created successfully.',
+            error: 'An error occurred while creating the new workspace.',
+          },
+          toastStyleProps,
+        );
+      }
+    } catch (error) {
+      if (error.message?.includes('duplicate key value')) {
+        form.setError(
+          'newWorkspaceName',
+          {
+            type: 'manual',
+            message: 'This workspace name is already taken.',
+          },
+          {
+            shouldFocus: false,
+          },
+        );
+      }
+
+      return;
+    }
+
+    await client.refetchQueries({
+      include: ['getOneUser'],
+    });
+
+    await router.push(slug);
+    onSubmit?.();
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleSubmit}
+        className="flex flex-col content-between flex-auto pt-2 pb-6 overflow-hidden"
+      >
+        <div className="flex-auto px-6 overflow-y-auto">
+          <Input
+            {...register('newWorkspaceName')}
+            error={Boolean(errors.newWorkspaceName?.message)}
+            label="Name"
+            helperText={errors.newWorkspaceName?.message}
+            autoFocus={!disabled}
+            disabled={disabled}
+            fullWidth
+            hideEmptyHelperText
+            placeholder='e.g. "My Workspace"'
+          />
+        </div>
+
+        <div className="grid flex-shrink-0 grid-flow-row gap-2 px-6 pt-4">
+          {!disabled && (
+            <Button
+              loading={isSubmitting}
+              disabled={
+                isSubmitting || Boolean(errors.newWorkspaceName?.message)
+              }
+              type="submit"
+            >
+              {currentWorkspaceName ? 'Save' : submitButtonText}
+            </Button>
+          )}
+
+          <Button
+            variant="outlined"
+            color="secondary"
+            onClick={onCancel}
+            tabIndex={isDirty ? -1 : 0}
+            autoFocus={disabled}
+          >
+            {disabled ? 'Close' : 'Cancel'}
+          </Button>
+        </div>
+      </Form>
+    </FormProvider>
+  );
+}

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

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

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

@@ -4,11 +4,8 @@ import { InviteAnnounce } from '@/components/home/InviteAnnounce';
 import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
 import BaseLayout from '@/components/layout/BaseLayout';
 import Container from '@/components/layout/Container';
-import AddWorkspace from '@/components/workspace/AddWorkspace';
-import { useUI } from '@/context/UIContext';
 import useIsHealthy from '@/hooks/common/useIsHealthy';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { Modal } from '@/ui';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
@@ -39,7 +36,6 @@ export default function AuthenticatedLayout({
 }: AuthenticatedLayoutProps) {
   const router = useRouter();
   const isPlatform = useIsPlatform();
-  const { newWorkspace, closeSection } = useUI();
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
   const isHealthy = useIsHealthy();
 
@@ -85,7 +81,7 @@ export default function AuthenticatedLayout({
       <BaseLayout {...props}>
         <Header className="flex max-h-[59px] flex-auto" />
 
-        <Container className="my-12 grid max-w-md grid-flow-row justify-center gap-2 text-center">
+        <Container className="grid justify-center max-w-md grid-flow-row gap-2 my-12 text-center">
           <div className="mx-auto">
             <Image
               src="/terminal-text.svg"
@@ -123,13 +119,7 @@ export default function AuthenticatedLayout({
   }
 
   return (
-    <BaseLayout className="flex h-full flex-col" {...props}>
+    <BaseLayout className="flex flex-col h-full" {...props}>
-      <Modal
-        showModal={newWorkspace}
-        close={closeSection}
-        Component={AddWorkspace}
-      />
-
       <Header className="flex max-h-[59px] flex-auto" />
 
       <InviteAnnounce />

dashboard/src/components/settings/environmentVariables/SystemEnvironmentVariableSettings/SystemEnvironmentVariableSettings.tsx

@@ -117,22 +117,22 @@ export default function SystemEnvironmentVariableSettings() {
       description="Environment Variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys."
       docsLink="https://docs.nhost.io/platform/environment-variables#system-environment-variables"
       rootClassName="gap-0"
-      className="px-0 mt-2 mb-2.5"
+      className="mt-2 mb-2.5 px-0"
       slotProps={{ submitButton: { className: 'invisible' } }}
     >
-      <div className="grid grid-cols-3 border-b-1 gap-2 border-gray-200 px-4 py-3">
+      <div className="grid grid-cols-3 gap-2 border-b-1 border-gray-200 px-4 py-3">
         <Text className="font-medium">Variable Name</Text>
         <Text className="font-medium lg:col-span-2">Value</Text>
       </div>
 
       <List>
-        <ListItem.Root className="px-4 grid grid-cols-2 lg:grid-cols-3 gap-2">
+        <ListItem.Root className="grid grid-cols-2 gap-2 px-4 lg:grid-cols-3">
           <ListItem.Text>NHOST_ADMIN_SECRET</ListItem.Text>
 
-          <div className="grid grid-flow-col lg:col-span-2 gap-2 items-center justify-start">
+          <div className="grid grid-flow-col items-center justify-start gap-2 lg:col-span-2">
-            <Text className="text-greyscaleGreyDark truncate">
+            <Text className="truncate text-greyscaleGreyDark">
               {showAdminSecret ? (
-                <InlineCode className="!text-sm font-medium max-h-[initial] h-[initial]">
+                <InlineCode className="!text-sm font-medium">
                   {currentApplication?.hasuraGraphqlAdminSecret}
                 </InlineCode>
               ) : (
@@ -149,9 +149,9 @@ export default function SystemEnvironmentVariableSettings() {
               onClick={() => setShowAdminSecret((show) => !show)}
             >
               {showAdminSecret ? (
-                <EyeOffIcon className="w-5 h-5" />
+                <EyeOffIcon className="h-5 w-5" />
               ) : (
-                <EyeIcon className="w-5 h-5" />
+                <EyeIcon className="h-5 w-5" />
               )}
             </IconButton>
           </div>
@@ -159,13 +159,13 @@ export default function SystemEnvironmentVariableSettings() {
 
         <Divider component="li" className="!my-4" />
 
-        <ListItem.Root className="px-4 grid grid-cols-2 lg:grid-cols-3 gap-2">
+        <ListItem.Root className="grid grid-cols-2 gap-2 px-4 lg:grid-cols-3">
           <ListItem.Text>NHOST_WEBHOOK_SECRET</ListItem.Text>
 
-          <div className="grid grid-flow-col gap-2 lg:col-span-2 items-center justify-start">
+          <div className="grid grid-flow-col items-center justify-start gap-2 lg:col-span-2">
-            <Text className="text-greyscaleGreyDark truncate">
+            <Text className="truncate text-greyscaleGreyDark">
               {showWebhookSecret ? (
-                <InlineCode className="!text-sm font-medium max-h-[initial] h-[initial]">
+                <InlineCode className="!text-sm font-medium">
                   {data?.app?.webhookSecret}
                 </InlineCode>
               ) : (
@@ -184,9 +184,9 @@ export default function SystemEnvironmentVariableSettings() {
               onClick={() => setShowWebhookSecret((show) => !show)}
             >
               {showWebhookSecret ? (
-                <EyeOffIcon className="w-5 h-5" />
+                <EyeOffIcon className="h-5 w-5" />
               ) : (
-                <EyeIcon className="w-5 h-5" />
+                <EyeIcon className="h-5 w-5" />
               )}
             </IconButton>
           </div>
@@ -196,7 +196,7 @@ export default function SystemEnvironmentVariableSettings() {
 
         {systemEnvironmentVariables.map((environmentVariable, index) => (
           <Fragment key={environmentVariable.key}>
-            <ListItem.Root className="px-4 grid grid-cols-2 lg:grid-cols-3 gap-2">
+            <ListItem.Root className="grid grid-cols-2 gap-2 px-4 lg:grid-cols-3">
               <ListItem.Text>{environmentVariable.key}</ListItem.Text>
 
               <Text className="truncate lg:col-span-2">
@@ -212,7 +212,7 @@ export default function SystemEnvironmentVariableSettings() {
 
         <Divider component="li" className="!mt-4 !mb-2.5" />
 
-        <ListItem.Root className="px-4 grid grid-cols-2 lg:grid-cols-3 justify-start">
+        <ListItem.Root className="grid grid-cols-2 justify-start px-4 lg:grid-cols-3">
           <ListItem.Text>NHOST_JWT_SECRET</ListItem.Text>
 
           <div className="grid grid-flow-row md:grid-flow-col gap-1.5 justify-center text-center lg:text-left lg:justify-start items-center lg:col-span-2">

dashboard/src/components/settings/signInMethods/EmailAndPasswordSettings/EmailAndPasswordSettings.tsx

@@ -2,7 +2,6 @@ import ControlledCheckbox from '@/components/common/ControlledCheckbox';
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
 import {
-  GetAppLoginDataDocument,
   useSignInMethodsQuery,
   useUpdateAppMutation,
 } from '@/generated/graphql';
@@ -25,9 +24,7 @@ export interface EmailAndPasswordFormValues {
 
 export default function EmailAndPasswordSettings() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation({
+  const [updateApp] = useUpdateAppMutation();
-    refetchQueries: [GetAppLoginDataDocument],
-  });
 
   const { data, error, loading } = useSignInMethodsQuery({
     variables: {

dashboard/src/components/settings/signInMethods/TwitterProviderSettings/TwitterProviderSettings.tsx

@@ -1,7 +1,7 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
 import {
-  useGetAppLoginDataQuery,
+  useSignInMethodsQuery,
   useUpdateAppMutation,
 } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
@@ -27,10 +27,11 @@ export default function TwitterProviderSettings() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const [updateApp] = useUpdateAppMutation();
 
-  const { data, loading, error } = useGetAppLoginDataQuery({
+  const { data, loading, error } = useSignInMethodsQuery({
     variables: {
       id: currentApplication?.id,
     },
+    fetchPolicy: 'cache-only',
   });
 
   const form = useForm<TwitterProviderFormValues>({

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

@@ -3,21 +3,21 @@ import type { FormControlProps } from '@/ui/v2/FormControl';
 import ChevronDownIcon from '@/ui/v2/icons/ChevronDownIcon';
 import XIcon from '@/ui/v2/icons/XIcon';
 import type { InputProps } from '@/ui/v2/Input';
-import Input from '@/ui/v2/Input';
+import Input, { inputClasses } from '@/ui/v2/Input';
 import { OptionBase } from '@/ui/v2/Option';
 import { OptionGroupBase } from '@/ui/v2/OptionGroup';
 import type { StyledComponent } from '@emotion/styled';
 import type { UseAutocompleteProps } from '@mui/base/AutocompleteUnstyled';
 import { createFilterOptions } from '@mui/base/AutocompleteUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
-import { darken, inputBaseClasses, styled } from '@mui/material';
+import { darken, styled } from '@mui/material';
 import type { AutocompleteProps as MaterialAutocompleteProps } from '@mui/material/Autocomplete';
 import MaterialAutocomplete, {
   autocompleteClasses as materialAutocompleteClasses,
 } from '@mui/material/Autocomplete';
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 
 export interface AutocompleteOption<TValue = string> {
   /**
@@ -112,6 +112,12 @@ const StyledTag = styled(Chip)(({ theme }) => ({
 }));
 
 const StyledAutocomplete = styled(MaterialAutocomplete)(({ theme }) => ({
+  [`&:not(.${materialAutocompleteClasses.focused})`]: {
+    [`& .${inputClasses.root}`]: {
+      maxHeight: 40,
+      overflow: 'auto',
+    },
+  },
   [`.${materialAutocompleteClasses.endAdornment}`]: {
     right: theme.spacing(1.5),
   },
@@ -127,7 +133,7 @@ const StyledAutocomplete = styled(MaterialAutocomplete)(({ theme }) => ({
 >;
 
 export const AutocompletePopper = styled(PopperUnstyled)(({ theme }) => ({
-  zIndex: 1,
+  zIndex: theme.zIndex.modal + 1,
   boxShadow: 'none',
   minWidth: 320,
   maxWidth: 600,
@@ -196,6 +202,7 @@ function Autocomplete(
   }: AutocompleteProps<AutocompleteOption>,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
+  const inputRef = useRef<HTMLInputElement>();
   const { formControl: formControlSlotProps, ...defaultComponentsProps } =
     slotProps || {};
 
@@ -262,6 +269,17 @@ function Autocomplete(
           onInputChange(event, value, reason);
         }
       }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape') {
+          return;
+        }
+
+        event.stopPropagation();
+
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
+        }
+      }}
       PopperComponent={AutocompletePopper}
       popupIcon={<ChevronDownIcon sx={{ width: 12, height: 12 }} />}
       getOptionLabel={(option) => {
@@ -344,13 +362,14 @@ function Autocomplete(
         ...params
       }) => (
         <Input
+          ref={inputRef}
           slotProps={{
             input: {
               className: slotProps?.input?.className,
               sx: props.multiple
                 ? {
                     flexWrap: 'wrap',
-                    [`& .${inputBaseClasses.input}`]: {
+                    [`& .${inputClasses.input}`]: {
                       minWidth: 30,
                       width: 0,
                     },

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

@@ -29,4 +29,5 @@ function FormControlLabel(
 
 FormControlLabel.displayName = 'NhostFormControlLabel';
 
+export { formControlLabelClasses } from '@mui/material/FormControlLabel';
 export default forwardRef(FormControlLabel);

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

@@ -71,9 +71,12 @@ const StyledInputBase = styled(MaterialInputBase)(({ theme }) => ({
     outline: 'none',
   },
   [`&.${inputBaseClasses.disabled}`]: {
-    color: theme.palette.grey[600],
+    color: `${theme.palette.grey[600]} !important`,
-    borderColor: darken(theme.palette.grey[300], 0.1),
+    borderColor: `${darken(theme.palette.grey[300], 0.1)} !important`,
-    backgroundColor: lighten(theme.palette.action.disabled, 0.75),
+    backgroundColor: `${lighten(
+      theme.palette.action.disabled,
+      0.75,
+    )} !important`,
   },
   [`&:not(.${inputBaseClasses.disabled}):hover`]: {
     borderColor: theme.palette.grey[600],
@@ -165,4 +168,6 @@ function Input(
 
 Input.displayName = 'NhostInput';
 
+export { inputBaseClasses as inputClasses } from '@mui/material/InputBase';
+
 export default forwardRef(Input);

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

@@ -1,12 +1,21 @@
 import type { LinkProps as MaterialLinkProps } from '@mui/material/Link';
 import MaterialLink from '@mui/material/Link';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
 
 export interface LinkProps extends MaterialLinkProps {}
 
-function Link({ children, ...props }: LinkProps) {
+function Link(
-  return <MaterialLink {...props}>{children}</MaterialLink>;
+  { children, ...props }: LinkProps,
+  ref: ForwardedRef<HTMLAnchorElement>,
+) {
+  return (
+    <MaterialLink ref={ref} {...props}>
+      {children}
+    </MaterialLink>
+  );
 }
 
 Link.displayName = 'NhostLink';
 
-export default Link;
+export default forwardRef(Link);

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

@@ -11,16 +11,21 @@ export interface OptionProps<TValue extends {}>
   extends OptionUnstyledProps<TValue> {}
 
 const StyledOption = styled(OptionUnstyled)(({ theme }) => ({
+  [`&.${optionUnstyledClasses.disabled}:not(.${optionUnstyledClasses.highlighted}):hover`]:
+    {
+      backgroundColor: 'transparent',
+    },
   [`&.${optionUnstyledClasses.highlighted}`]: {
     backgroundColor: darken(theme.palette.action.active, 0.025),
   },
-  [`&.${optionUnstyledClasses.highlighted}:hover`]: {
+  [`&.${optionUnstyledClasses.highlighted}:not(.${optionUnstyledClasses.disabled}):hover`]:
-    backgroundColor: darken(theme.palette.action.hover, 0.1),
+    {
-  },
+      backgroundColor: darken(theme.palette.action.hover, 0.1),
+    },
   [`&.${optionUnstyledClasses.disabled}`]: {
     color: theme.palette.text.disabled,
   },
-  [`&:hover:not(.${optionUnstyledClasses.disabled}):not(.${optionUnstyledClasses.highlighted})`]:
+  [`&:not(.${optionUnstyledClasses.disabled}):not(.${optionUnstyledClasses.highlighted}):hover`]:
     {
       backgroundColor: theme.palette.action.hover,
     },

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

@@ -0,0 +1,119 @@
+import type { FormControlLabelProps } from '@/ui/v2/FormControlLabel';
+import FormControlLabel, {
+  formControlLabelClasses,
+} from '@/ui/v2/FormControlLabel';
+import { styled } from '@mui/material';
+import type { RadioProps as MaterialRadioProps } from '@mui/material/Radio';
+import MaterialRadio from '@mui/material/Radio';
+import SvgIcon from '@mui/material/SvgIcon';
+import type { ForwardedRef, PropsWithoutRef } from 'react';
+import { forwardRef } from 'react';
+
+export interface RadioProps extends MaterialRadioProps {
+  /**
+   * Value of the radio button.
+   */
+  value?: string;
+  /**
+   * Label to be displayed next to the radio button.
+   */
+  label?: string;
+  /**
+   * Props to be passed to individual component slots.
+   */
+  slotProps?: {
+    /**
+     * Props to be passed to the radio button.
+     */
+    radio?: Partial<MaterialRadioProps>;
+    /**
+     * Props to be passed to the form control label.
+     */
+    formControl?: Partial<PropsWithoutRef<FormControlLabelProps>>;
+  };
+}
+
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+  [`& .${formControlLabelClasses.label}`]: {
+    display: 'inline-block',
+    marginLeft: theme.spacing(1),
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: 500,
+    lineHeight: theme.typography.pxToRem(22),
+  },
+}));
+
+const StyledRadio = styled(MaterialRadio)(({ theme }) => ({
+  padding: 0,
+  width: 18,
+  height: 18,
+  color: theme.palette.action.disabled,
+  [`& > svg`]: {
+    width: 18,
+    height: 18,
+  },
+}));
+
+function Radio(
+  { label, value, slotProps, ...props }: RadioProps,
+  ref: ForwardedRef<HTMLInputElement>,
+) {
+  return (
+    <StyledFormControlLabel
+      {...(slotProps?.formControl || {})}
+      label={label}
+      value={value}
+      control={
+        <StyledRadio
+          checkedIcon={
+            <SvgIcon
+              width={18}
+              height={18}
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 18 18"
+            >
+              <circle cx="9" cy="9" r="4" fill="currentColor" />
+              <rect
+                x=".75"
+                y=".75"
+                width="16.5"
+                height="16.5"
+                rx="8.25"
+                stroke="currentColor"
+                fill="none"
+                strokeWidth="1.5"
+              />
+            </SvgIcon>
+          }
+          icon={
+            <SvgIcon
+              width={18}
+              height={18}
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 18 18"
+            >
+              <rect
+                x=".75"
+                y=".75"
+                width="16.5"
+                height="16.5"
+                rx="8.25"
+                stroke="currentColor"
+                fill="none"
+                strokeWidth="1.5"
+              />
+            </SvgIcon>
+          }
+          disableRipple
+          ref={ref}
+          {...slotProps?.radio}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+Radio.displayName = 'NhostRadio';
+
+export default forwardRef(Radio);

dashboard/src/components/ui/v2/Radio/index.ts

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

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

@@ -0,0 +1,14 @@
+import type { RadioGroupProps as MaterialRadioGroupProps } from '@mui/material/RadioGroup';
+import MaterialRadioGroup from '@mui/material/RadioGroup';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+export interface RadioGroupProps extends MaterialRadioGroupProps {}
+
+function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  return <MaterialRadioGroup ref={ref} {...props} />;
+}
+
+RadioGroup.displayName = 'NhostRadioGroup';
+
+export default forwardRef(RadioGroup);

dashboard/src/components/ui/v2/RadioGroup/index.ts

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

dashboard/src/components/ui/v2/Select/ToggleButton.tsx

@@ -46,9 +46,12 @@ const StyledButton = styled(ButtonUnstyled)(({ theme }) => ({
     borderColor: theme.palette.grey[600],
   },
   [`&.${selectUnstyledClasses.disabled}`]: {
-    color: theme.palette.grey[600],
+    color: `${theme.palette.grey[600]} !important`,
-    borderColor: darken(theme.palette.grey[300], 0.1),
+    borderColor: `${darken(theme.palette.grey[300], 0.1)} !important`,
-    backgroundColor: lighten(theme.palette.grey[200], 0.5),
+    backgroundColor: `${lighten(
+      theme.palette.action.disabled,
+      0.75,
+    )} !important`,
   },
   [`&.${selectUnstyledClasses.focusVisible}, &.${selectUnstyledClasses.expanded}`]:
     {

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

@@ -11,7 +11,7 @@ export default {
 const Template: ComponentStory<typeof Switch> = function Template(
   args: SwitchProps,
 ) {
-  return <Switch {...args} />;
+  return <Switch label="Accept Rules" {...args} />;
 };
 
 export const Default = Template.bind({});

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

@@ -1,13 +1,39 @@
+import type { FormControlLabelProps } from '@/ui/v2/FormControlLabel';
+import FormControlLabel from '@/ui/v2/FormControlLabel';
 import SwitchUnstyled, {
   switchUnstyledClasses,
 } from '@mui/base/SwitchUnstyled';
 import type { SwitchUnstyledProps } from '@mui/base/SwitchUnstyled/SwitchUnstyled.types';
-
 import { styled } from '@mui/material';
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 
-export interface SwitchProps extends SwitchUnstyledProps {}
+export interface SwitchProps extends SwitchUnstyledProps {
+  /**
+   * Label to be displayed next to the checkbox.
+   */
+  label?: FormControlLabelProps['label'];
+  /**
+   * Props to be passed to the internal components.
+   */
+  slotProps?: SwitchUnstyledProps['slotProps'] & {
+    /**
+     * Props to be passed to the `Switch` component.
+     */
+    root?: Partial<SwitchUnstyledProps>;
+    /**
+     * Props to be passed to the `FormControlLabel` component.
+     */
+    formControlLabel?: Partial<PropsWithoutRef<FormControlLabelProps>>;
+  };
+}
+
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gap: theme.spacing(1.25),
+  justifyContent: 'start',
+}));
 
 const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
   position: 'relative',
@@ -86,13 +112,21 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
 }));
 
 function Switch(
-  { children, ...props }: SwitchProps,
+  { label, slotProps, ...props }: SwitchProps,
   ref: ForwardedRef<HTMLSpanElement>,
 ) {
+  if (!label) {
+    return <StyledSwitch {...(slotProps?.root || {})} {...props} ref={ref} />;
+  }
+
   return (
-    <StyledSwitch {...props} ref={ref}>
+    <StyledFormControlLabel
-      {children}
+      {...(slotProps?.formControlLabel || {})}
-    </StyledSwitch>
+      control={
+        <StyledSwitch {...(slotProps?.root || {})} {...props} ref={ref} />
+      }
+      label={label}
+    />
   );
 }
 

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

@@ -1,10 +1,19 @@
+import { styled } from '@mui/material';
 import type { TableCellProps as MaterialTableCellProps } from '@mui/material/TableCell';
-import MaterialTableCell from '@mui/material/TableCell';
+import MaterialTableCell, { tableCellClasses } from '@mui/material/TableCell';
 
 export interface TableCellProps extends MaterialTableCellProps {}
 
+const StyledTableCell = styled(MaterialTableCell)(({ theme }) => ({
+  borderColor: theme.palette.grey[400],
+  [`&.${tableCellClasses.head}`]: {
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: theme.typography.pxToRem(16),
+  },
+}));
+
 function TableCell({ children, ...props }: TableCellProps) {
-  return <MaterialTableCell {...props}>{children}</MaterialTableCell>;
+  return <StyledTableCell {...props}>{children}</StyledTableCell>;
 }
 
 TableCell.displayName = 'NhostTableCell';

dashboard/src/components/ui/v2/icons/FullPermissionIcon/FullPermissionIcon.tsx

@@ -0,0 +1,24 @@
+import type { IconProps } from '@/ui/v2/icons';
+import SvgIcon from '@mui/material/SvgIcon';
+
+function FullPermissionIcon({ sx, ...props }: IconProps) {
+  return (
+    <SvgIcon
+      width="20"
+      height="20"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      aria-label="Three filled horizontal lines"
+      {...props}
+      sx={{ width: 20, height: 20, ...sx }}
+    >
+      <path fill="currentColor" d="M5 15h10v2.5H5z" />
+      <path fill="currentColor" d="M5 8.75h10v2.5H5z" />
+      <path fill="currentColor" d="M5 2.5h10V5H5z" />
+    </SvgIcon>
+  );
+}
+
+FullPermissionIcon.displayName = 'NhostFullPermissionIcon';
+
+export default FullPermissionIcon;

dashboard/src/components/ui/v2/icons/FullPermissionIcon/index.ts

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

dashboard/src/components/ui/v2/icons/NoPermissionIcon/NoPermissionIcon.tsx

@@ -0,0 +1,24 @@
+import type { IconProps } from '@/ui/v2/icons';
+import SvgIcon from '@mui/material/SvgIcon';
+
+function NoPermissionIcon({ sx, ...props }: IconProps) {
+  return (
+    <SvgIcon
+      width="20"
+      height="20"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      aria-label="Three horizontal lines"
+      {...props}
+      sx={{ width: 20, height: 20, ...sx }}
+    >
+      <path fill="currentColor" d="M5 15h10v2.5H5z" fillOpacity={0.3} />
+      <path fill="currentColor" d="M5 8.75h10v2.5H5z" fillOpacity={0.3} />
+      <path fill="currentColor" d="M5 2.5h10V5H5z" fillOpacity={0.3} />
+    </SvgIcon>
+  );
+}
+
+NoPermissionIcon.displayName = 'NhostNoPermissionIcon';
+
+export default NoPermissionIcon;

dashboard/src/components/ui/v2/icons/NoPermissionIcon/index.ts

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

dashboard/src/components/ui/v2/icons/PartialPermissionIcon/PartialPermissionIcon.tsx

@@ -0,0 +1,24 @@
+import type { IconProps } from '@/ui/v2/icons';
+import SvgIcon from '@mui/material/SvgIcon';
+
+function PartialPermissionIcon({ sx, ...props }: IconProps) {
+  return (
+    <SvgIcon
+      width="20"
+      height="20"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      aria-label="Three horizontal lines, the one in the middle filles"
+      {...props}
+      sx={{ width: 20, height: 20, ...sx }}
+    >
+      <path fill="currentColor" d="M5 15h10v2.5H5z" fillOpacity={0.3} />
+      <path fill="currentColor" d="M5 8.75h10v2.5H5z" />
+      <path fill="currentColor" d="M5 2.5h10V5H5z" fillOpacity={0.3} />
+    </SvgIcon>
+  );
+}
+
+PartialPermissionIcon.displayName = 'NhostPartialPermissionIcon';
+
+export default PartialPermissionIcon;

dashboard/src/components/ui/v2/icons/PartialPermissionIcon/index.ts

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

dashboard/src/components/ui/v2/icons/UsersIcon/UsersIcon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@/ui/v2/icons';
+import SvgIcon from '@mui/material/SvgIcon';
+
+function UsersIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      aria-label="Users"
+      {...props}
+    >
+      <path
+        d="M5.5 10a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5Z"
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M9.713 3.621A3.25 3.25 0 1 1 10.595 10M1 12.337a5.501 5.501 0 0 1 9 0M10.595 10a5.493 5.493 0 0 1 4.5 2.337"
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </SvgIcon>
+  );
+}
+
+UsersIcon.displayName = 'NhostUsersIcon';
+
+export default UsersIcon;

dashboard/src/components/ui/v2/icons/UsersIcon/index.ts

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

dashboard/src/components/users/CreateUserForm/CreateUserForm.tsx

@@ -66,12 +66,14 @@ export default function CreateUserForm({
     setError,
   } = form;
 
-  const signUpUrl = generateAppServiceUrl(
+  const baseAuthUrl = generateAppServiceUrl(
-    currentApplication?.subdomain,
+    currentApplication.subdomain,
-    currentApplication?.region.awsName,
+    currentApplication.region.awsName,
     'auth',
   );
 
+  const signUpUrl = `${baseAuthUrl}/signup/email-password`;
+
   async function handleCreateUser({ email, password }: CreateUserFormValues) {
     setCreateUserFormError(null);
 

dashboard/src/components/workspace/AddWorkspace.tsx

@@ -1,159 +0,0 @@
-import { useUI } from '@/context/UIContext';
-import { useInsertWorkspaceMutation } from '@/generated/graphql';
-import { Alert } from '@/ui/Alert';
-import Button from '@/ui/v2/Button';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
-import { getErrorMessage, inputErrorMessages } from '@/utils/getErrorMessage';
-import { slugifyString } from '@/utils/helpers';
-import { nhost } from '@/utils/nhost';
-import { triggerToast } from '@/utils/toast';
-import router from 'next/router';
-import React, { useState } from 'react';
-import slugify from 'slugify';
-
-function AddNewWorkspaceForm({
-  closeSection: externalCloseSection,
-}: {
-  closeSection: VoidFunction;
-}) {
-  const [workspace, setWorkspace] = useState('');
-  const { closeSection } = useUI();
-  const [workspaceError, setWorkspaceError] = useState<string>('');
-  const [loadingAddWorkspace, setLoadingAddWorkspace] = useState(false);
-
-  const [insertWorkspace, { client }] = useInsertWorkspaceMutation();
-
-  const slug = slugify(workspace, { lower: true, strict: true });
-  const user = nhost.auth.getUser();
-  if (!user) {
-    return <div>No user..</div>;
-  }
-  const userId = user.id;
-
-  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setWorkspaceError('');
-    setLoadingAddWorkspace(true);
-
-    if (
-      !inputErrorMessages(
-        workspace,
-        setWorkspace,
-        setWorkspaceError,
-        'Workspace',
-      )
-    ) {
-      return;
-    }
-
-    if (slug.length < 4 || slug.length > 32) {
-      setWorkspaceError('Slug should be within 4 and 32 characters.');
-      setLoadingAddWorkspace(false);
-      return;
-    }
-
-    const currentUser = nhost.auth.getUser();
-
-    if (!currentUser) {
-      triggerToast('User is not signed in');
-      setLoadingAddWorkspace(false);
-      return;
-    }
-
-    try {
-      await insertWorkspace({
-        variables: {
-          workspace: {
-            name: workspace,
-            companyName: workspace,
-            email: user.email,
-            slug,
-            workspaceMembers: {
-              data: [
-                {
-                  userId,
-                  type: 'owner',
-                },
-              ],
-            },
-          },
-        },
-      });
-      await client.refetchQueries({ include: ['getOneUser'] });
-      router.push(`/${slug}`);
-      setLoadingAddWorkspace(false);
-      closeSection();
-    } catch (error: any) {
-      setWorkspaceError(getErrorMessage(error, 'workspace'));
-      setLoadingAddWorkspace(false);
-    }
-  }
-  return (
-    <form onSubmit={handleSubmit} className="grid grid-flow-row gap-4">
-      <Input
-        type="text"
-        placeholder="Your new workspace"
-        name="workspace"
-        id="workspace"
-        label="Workspace"
-        fullWidth
-        autoFocus
-        helperText={`https://app.nhost.io/${slugifyString(workspace)}`}
-        onChange={(event) => {
-          setWorkspace(event.target.value);
-          setWorkspaceError('');
-        }}
-      />
-
-      {workspaceError && <Alert severity="error">{workspaceError}</Alert>}
-
-      <div className="grid grid-flow-col justify-between gap-2">
-        <Button
-          variant="outlined"
-          color="secondary"
-          onClick={(e) => {
-            e.preventDefault();
-            externalCloseSection();
-          }}
-        >
-          Cancel
-        </Button>
-
-        <Button
-          type="submit"
-          disabled={!!workspaceError}
-          loading={loadingAddWorkspace}
-        >
-          Create Workspace
-        </Button>
-      </div>
-    </form>
-  );
-}
-
-export default function AddWorkspace() {
-  const { closeSection } = useUI();
-
-  const user = nhost.auth.getUser();
-
-  if (!user) {
-    return <div>No user..</div>;
-  }
-
-  return (
-    <div className="grid w-modal grid-flow-row gap-2 px-6 py-6 text-left">
-      <div className="grid w-full grid-flow-row gap-1">
-        <Text variant="h3" component="h2">
-          New Workspace
-        </Text>
-
-        <Text variant="subtitle2">
-          Invite team members to workspaces to work collaboratively.
-        </Text>
-      </div>
-
-      <AddNewWorkspaceForm closeSection={closeSection} />
-    </div>
-  );
-}

dashboard/src/components/workspace/SidebarWorkspaces.tsx

@@ -1,14 +1,16 @@
 import { Avatar } from '@/ui/Avatar';
 import Text from '@/ui/v2/Text';
-import { nhost } from '@/utils/nhost';
 import { useGetWorkspacesQuery } from '@/utils/__generated__/graphql';
+import { nhost } from '@/utils/nhost';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect } from 'react';
 
 export default function SidebarWorkspaces() {
   const user = nhost.auth.getUser();
-  const { data, loading, startPolling, stopPolling } = useGetWorkspacesQuery();
+  const { data, loading, startPolling, stopPolling } = useGetWorkspacesQuery({
+    fetchPolicy: 'cache-and-network',
+  });
 
   useEffect(() => {
     startPolling(1000);
@@ -28,7 +30,7 @@ export default function SidebarWorkspaces() {
       <div className="mt-3 mb-4 space-y-2">
         <div className="flex flex-row">
           <svg
-            className="ml-1 h-4 w-4 animate-spin self-center text-dark"
+            className="self-center w-4 h-4 ml-1 animate-spin text-dark"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -47,7 +49,7 @@ export default function SidebarWorkspaces() {
               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
             />
           </svg>
-          <Text size="tiny" className="ml-2 self-center" color="greyscaleGrey">
+          <Text size="tiny" className="self-center ml-2" color="greyscaleGrey">
             Creating first workspace...
           </Text>
         </div>
@@ -66,12 +68,12 @@ export default function SidebarWorkspaces() {
           >
             {name === 'Default Workspace' && creatorUserId === user.id ? (
               <Avatar
-                className="h-8 w-8 self-center rounded-full"
+                className="self-center w-8 h-8 rounded-full"
                 name={user?.displayName}
                 avatarUrl={user?.avatarUrl}
               />
             ) : (
-              <div className="inline-block h-8 w-8 overflow-hidden rounded-lg">
+              <div className="inline-block w-8 h-8 overflow-hidden rounded-lg">
                 <Image
                   src="/logos/new.svg"
                   alt="Nhost Logo"

dashboard/src/components/workspace/WorkspaceHeader.tsx

@@ -1,4 +1,4 @@
-import ChangeWorkspaceName from '@/components/applications/ChangeWorkspaceName';
+import { useDialog } from '@/components/common/DialogProvider';
 import RemoveWorkspaceModal from '@/components/workspace/RemoveWorkspaceModal';
 import { useUI } from '@/context/UIContext';
 import { useGetWorkspace } from '@/hooks/use-GetWorkspace';
@@ -13,7 +13,6 @@ import { copy } from '@/utils/copy';
 import { nhost } from '@/utils/nhost';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
 
 export default function WorkspaceHeader() {
   const { currentWorkspace } = useCurrentWorkspaceAndApplication();
@@ -21,14 +20,14 @@ export default function WorkspaceHeader() {
     query: { workspaceSlug },
   } = useRouter();
 
-  const [changeWorkspaceNameModal, setChangeWorkspaceNameModal] =
-    useState(false);
   const {
     openDeleteWorkspaceModal,
     closeDeleteWorkspaceModal,
     deleteWorkspaceModal,
   } = useUI();
 
+  const { openDialog } = useDialog();
+
   const { data } = useGetWorkspace(workspaceSlug);
 
   const workspace = data?.workspaces[0];
@@ -45,11 +44,6 @@ export default function WorkspaceHeader() {
 
   return (
     <div className="mx-auto flex max-w-3xl flex-col">
-      <Modal
-        showModal={changeWorkspaceNameModal}
-        close={() => setChangeWorkspaceNameModal(!changeWorkspaceNameModal)}
-        Component={ChangeWorkspaceName}
-      />
       <Modal
         showModal={deleteWorkspaceModal}
         close={closeDeleteWorkspaceModal}
@@ -112,9 +106,23 @@ export default function WorkspaceHeader() {
               >
                 <Dropdown.Item
                   className="py-2"
-                  onClick={() =>
+                  onClick={() => {
-                    setChangeWorkspaceNameModal(!changeWorkspaceNameModal)
+                    openDialog('EDIT_WORKSPACE_NAME', {
-                  }
+                      title: (
+                        <span className="grid grid-flow-row">
+                          <span>Change Workspace Name</span>
+                          <Text variant="subtitle1" component="span">
+                            Changing the workspace name will also affect the URL
+                            of the workspace.
+                          </Text>
+                        </span>
+                      ),
+                      payload: {
+                        currentWorkspaceName: currentWorkspace.name,
+                        currentWorkspaceId: currentWorkspace.id,
+                      },
+                    });
+                  }}
                 >
                   Change workspace name
                 </Dropdown.Item>

dashboard/src/components/workspace/WorkspaceSection.tsx

@@ -1,11 +1,12 @@
+import { useDialog } from '@/components/common/DialogProvider';
 import { SidebarTitle } from '@/components/home/SidebarTitle';
-import { useUI } from '@/context/UIContext';
 import Button from '@/ui/v2/Button';
+import Text from '@/ui/v2/Text';
 import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
 import SidebarWorkspaces from './SidebarWorkspaces';
 
 export function WorkspaceSection() {
-  const { openSection } = useUI();
+  const { openDialog } = useDialog();
 
   return (
     <>
@@ -15,7 +16,19 @@ export function WorkspaceSection() {
       <Button
         variant="borderless"
         color="secondary"
-        onClick={openSection}
+        onClick={() => {
+          openDialog('EDIT_WORKSPACE_NAME', {
+            title: (
+              <span className="grid grid-flow-row">
+                <span>New Workspace</span>
+
+                <Text variant="subtitle1" component="span">
+                  Invite team members to workspaces to work collaboratively.
+                </Text>
+              </span>
+            ),
+          });
+        }}
         startIcon={<PlusCircleIcon />}
       >
         New Workspace

dashboard/src/gql/app/getAppLoginData.gql

@@ -1,84 +0,0 @@
-fragment GetAppLoginData on apps {
-  id
-  slug
-  subdomain
-  name
-  createdAt
-
-  authEmailSigninEmailVerifiedRequired
-  authPasswordHibpEnabled
-
-  authEmailPasswordlessEnabled
-  authSmsPasswordlessEnabled
-  authWebAuthnEnabled
-
-  authClientUrl
-  authAccessControlAllowedRedirectUrls
-
-  authAccessControlAllowedEmails
-  authAccessControlAllowedEmailDomains
-  authAccessControlBlockedEmails
-  authAccessControlBlockedEmailDomains
-
-  authGithubEnabled
-  authGithubClientId
-  authGithubClientSecret
-  authGoogleEnabled
-  authGoogleClientId
-  authGoogleClientSecret
-
-  authFacebookEnabled
-  authFacebookClientId
-  authFacebookClientSecret
-
-  authLinkedinEnabled
-  authLinkedinClientId
-  authLinkedinClientSecret
-
-  # Twitter
-  authTwitterEnabled
-  authTwitterConsumerKey
-  authTwitterConsumerSecret
-
-  # Apple
-  authAppleEnabled
-  authAppleTeamId
-  authAppleKeyId
-  authAppleClientId
-  authApplePrivateKey
-  authAppleScope
-
-  # Windows Live
-  authWindowsLiveEnabled
-  authWindowsLiveClientId
-  authWindowsLiveClientSecret
-
-  # Spotify
-  authSpotifyEnabled
-  authSpotifyClientId
-  authSpotifyClientSecret
-
-  # WorkOs
-  authWorkOsEnabled
-  authWorkOsClientId
-  authWorkOsClientSecret
-  authWorkOsDefaultDomain
-  authWorkOsDefaultOrganization
-  authWorkOsDefaultConnection
-
-  # Discord
-  authDiscordEnabled
-  authDiscordClientId
-  authDiscordClientSecret
-
-  # Twitch
-  authTwitchEnabled
-  authTwitchClientId
-  authTwitchClientSecret
-}
-
-query getAppLoginData($id: uuid!) {
-  app(id: $id) {
-    ...GetAppLoginData
-  }
-}

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/index.ts

@@ -0,0 +1,4 @@
+export * from './managePermission';
+export * from './managePermissionMigration';
+export * from './useManagePermissionMutation';
+export { default } from './useManagePermissionMutation';

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/managePermission.test.ts

@@ -0,0 +1,40 @@
+import fetch from 'cross-fetch';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import type { ManagePermissionOptions } from './managePermission';
+import managePermission from './managePermission';
+
+global.fetch = fetch;
+
+const defaultParameters: ManagePermissionOptions = {
+  dataSource: 'default',
+  schema: 'public',
+  table: 'users',
+  appUrl: 'http://localhost:1337',
+  adminSecret: 'x-hasura-admin-secret',
+};
+
+const server = setupServer(
+  rest.post('http://localhost:1337/v1/metadata', (_req, res, ctx) =>
+    res(ctx.json({})),
+  ),
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+test('should throw an error if permission object is incorrectly provided', async () => {
+  await expect(
+    managePermission({
+      ...defaultParameters,
+      action: 'select',
+      role: 'user',
+      mode: 'update',
+    }),
+  ).rejects.toThrowError(
+    new Error(
+      'A permission must be provided when creating or updating a permission.',
+    ),
+  );
+});

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/managePermission.ts

@@ -0,0 +1,105 @@
+import type {
+  AffectedRowsResult,
+  DatabaseAction,
+  HasuraMetadataPermission,
+  MetadataError,
+  MutationOrQueryBaseOptions,
+  QueryResult,
+} from '@/types/dataBrowser';
+import normalizeMetadataError from '@/utils/dataBrowser/normalizeMetadataError/normalizeMetadataError';
+
+export interface ManagePermissionVariables {
+  /**
+   * The role to manage the permission for.
+   */
+  role: string;
+  /**
+   * The action to manage the permission for.
+   */
+  action: DatabaseAction;
+  /**
+   * Permission to insert or update.
+   */
+  permission?: HasuraMetadataPermission['permission'];
+  /**
+   * The mode to use when managing the permission.
+   *
+   * Available modes:
+   * - `create`: Creates the permission using the provided object.
+   * - `update`: Drops the permission and creates it again using the provided object.
+   * - `delete`: Drops the permission.
+   *
+   * @default 'update'
+   */
+  mode?: 'insert' | 'update' | 'delete';
+}
+
+export interface ManagePermissionOptions extends MutationOrQueryBaseOptions {}
+
+export default async function managePermission({
+  dataSource,
+  schema,
+  appUrl,
+  adminSecret,
+  table,
+  permission,
+  role,
+  action,
+  mode = 'update',
+}: ManagePermissionOptions & ManagePermissionVariables) {
+  if (mode !== 'delete' && !permission) {
+    throw new Error(
+      'A permission must be provided when creating or updating a permission.',
+    );
+  }
+
+  const deleteArgs = {
+    type: `pg_drop_${action}_permission`,
+    args: { table: { schema, name: table }, source: dataSource, role },
+  };
+
+  const insertArgs = {
+    type: `pg_create_${action}_permission`,
+    args: {
+      source: dataSource,
+      table: { schema, name: table },
+      role,
+      permission,
+    },
+  };
+
+  let args = [];
+
+  if (mode === 'delete') {
+    args = [deleteArgs];
+  } else if (mode === 'insert') {
+    args = [insertArgs];
+  } else {
+    args = [deleteArgs, insertArgs];
+  }
+
+  const response = await fetch(`${appUrl}/v1/metadata`, {
+    method: 'POST',
+    headers: {
+      'x-hasura-admin-secret': adminSecret,
+    },
+    body: JSON.stringify({
+      args,
+      type: 'bulk',
+      source: dataSource,
+      version: 1,
+    }),
+  });
+
+  const responseData:
+    | [AffectedRowsResult, QueryResult<string[]>]
+    | MetadataError = await response.json();
+
+  if (response.ok) {
+    return;
+  }
+
+  const normalizedError = normalizeMetadataError(responseData);
+
+  throw new Error(normalizedError);
+}

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/managePermissionMigration.ts

@@ -0,0 +1,136 @@
+import type {
+  AffectedRowsResult,
+  DatabaseAction,
+  HasuraMetadataPermission,
+  MutationOrQueryBaseOptions,
+  QueryError,
+  QueryResult,
+} from '@/types/dataBrowser';
+import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
+import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+
+export interface ManagePermissionMigrationVariables {
+  /**
+   * The role to manage the permission for.
+   */
+  role: string;
+  /**
+   * The action to manage the permission for.
+   */
+  action: DatabaseAction;
+  /**
+   * Permission to insert or update.
+   */
+  permission?: HasuraMetadataPermission['permission'];
+  /**
+   * The original permission to use for the down migration when updating and the
+   * up migration when deleting.
+   */
+  originalPermission?: HasuraMetadataPermission['permission'];
+  /**
+   * The mode to use when managing the permission.
+   *
+   * Available modes:
+   * - `create`: Creates the permission using the provided object.
+   * - `update`: Drops the permission and creates it again using the provided object.
+   * - `delete`: Drops the permission.
+   *
+   * @default 'update'
+   */
+  mode?: 'insert' | 'update' | 'delete';
+}
+
+export interface ManagePermissionMigrationOptions
+  extends MutationOrQueryBaseOptions {}
+
+export default async function managePermissionMigration({
+  dataSource,
+  schema,
+  adminSecret,
+  table,
+  permission,
+  originalPermission,
+  role,
+  action,
+  mode = 'update',
+}: ManagePermissionMigrationOptions & ManagePermissionMigrationVariables) {
+  if (mode !== 'delete' && !permission) {
+    throw new Error('A permission object must be provided.');
+  }
+
+  if (mode === 'delete' && !originalPermission) {
+    throw new Error(
+      'An original permission object must be provided when mode is "delete".',
+    );
+  }
+
+  const deleteArgs = {
+    type: `pg_drop_${action}_permission`,
+    args: { table: { schema, name: table }, source: dataSource, role },
+  };
+
+  const insertArgs = {
+    type: `pg_create_${action}_permission`,
+    args: {
+      source: dataSource,
+      table: { schema, name: table },
+      role,
+      permission,
+    },
+  };
+
+  let args: { up: any[]; down: any[] } = {
+    up: [],
+    down: [],
+  };
+
+  if (mode === 'delete') {
+    args = {
+      down: [
+        {
+          ...insertArgs,
+          args: { ...insertArgs.args, permission: originalPermission },
+        },
+      ],
+      up: [deleteArgs],
+    };
+  } else if (mode === 'insert') {
+    args = { down: [deleteArgs], up: [insertArgs] };
+  } else {
+    args = {
+      down: [
+        {
+          ...insertArgs,
+          args: { ...insertArgs.args, permission: originalPermission },
+        },
+        deleteArgs,
+      ],
+      up: [deleteArgs, insertArgs],
+    };
+  }
+
+  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+    method: 'POST',
+    headers: {
+      'x-hasura-admin-secret': adminSecret,
+    },
+    body: JSON.stringify({
+      dataSource,
+      skip_execution: false,
+      name: `change_${action}_permission_${role}_${schema}_${table}`,
+      down: args.down,
+      up: args.up,
+    }),
+  });
+
+  const responseData: [AffectedRowsResult, QueryResult<string[]>] | QueryError =
+    await response.json();
+
+  if (response.ok) {
+    return;
+  }
+
+  const normalizedError = normalizeQueryError(responseData);
+
+  throw new Error(normalizedError);
+}

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/useManagePermissionMutation.ts

@@ -0,0 +1,69 @@
+import useIsPlatform from '@/hooks/common/useIsPlatform';
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import type { MutationOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import type { ManagePermissionOptions } from './managePermission';
+import managePermission from './managePermission';
+import type { ManagePermissionMigrationVariables } from './managePermissionMigration';
+import managePermissionMigration from './managePermissionMigration';
+
+export interface UseManagePermissionMutationOptions
+  extends Partial<ManagePermissionOptions> {
+  /**
+   * Props passed to the underlying mutation hook.
+   */
+  mutationOptions?: MutationOptions<
+    void,
+    unknown,
+    ManagePermissionMigrationVariables
+  >;
+}
+
+/**
+ * This hook is a wrapper around a fetch call that manages a permission for a
+ * specific role on a specific table.
+ *
+ * @param options - Options to use for the mutation.
+ * @returns The result of the mutation.
+ */
+export default function useManagePermissionMutation({
+  dataSource: customDataSource,
+  schema: customSchema,
+  table: customTable,
+  appUrl: customAppUrl,
+  adminSecret: customAdminSecret,
+  mutationOptions,
+}: UseManagePermissionMutationOptions = {}) {
+  const isPlatform = useIsPlatform();
+  const {
+    query: { dataSourceSlug, schemaSlug },
+  } = useRouter();
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
+
+  const mutationFn = isPlatform ? managePermission : managePermissionMigration;
+
+  const mutation = useMutation(
+    (variables) =>
+      mutationFn({
+        ...variables,
+        appUrl: customAppUrl || appUrl,
+        adminSecret:
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+        dataSource: customDataSource || (dataSourceSlug as string),
+        schema: customSchema || (schemaSlug as string),
+        table: customTable || (dataSourceSlug as string),
+      }),
+    mutationOptions,
+  );
+
+  return mutation;
+}

dashboard/src/hooks/dataBrowser/useTableQuery/fetchTable.ts

@@ -27,6 +27,10 @@ export interface FetchTableOptions extends MutationOrQueryBaseOptions {
    * @default []
    */
   orderBy?: OrderBy[];
+  /**
+   * Determines whether the query should fetch the rows or not.
+   */
+  preventRowFetching?: boolean;
 }
 
 export interface FetchTableReturnType {
@@ -68,10 +72,13 @@ export default async function fetchTable({
   limit,
   offset,
   orderBy,
+  preventRowFetching,
 }: FetchTableOptions): Promise<FetchTableReturnType> {
   let limitAndOffsetClause = '';
 
-  if (limit && offset) {
+  if (preventRowFetching) {
+    limitAndOffsetClause = `LIMIT 0`;
+  } else if (limit && offset) {
     limitAndOffsetClause = `LIMIT ${limit} OFFSET ${offset}`;
   } else if (limit) {
     limitAndOffsetClause = `LIMIT ${limit}`;

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/prepareTrackForeignKeyRelationsMetadata.test.ts

@@ -237,7 +237,10 @@ test('should drop existing relationships and prepare a new one-to-many relations
         "cascade": false,
         "relationship": "books",
         "source": "default",
-        "table": "authors",
+        "table": {
+          "name": "authors",
+          "schema": "public",
+        },
       },
       "type": "pg_drop_relationship",
     }

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/prepareTrackForeignKeyRelationsMetadata.ts

@@ -152,7 +152,12 @@ export default async function prepareTrackForeignKeyRelationsMetadata({
         type: 'pg_drop_relationship',
         args: {
           source: dataSource,
-          table: foreignKeyRelation.referencedTable,
+          table: foreignKeyRelation.referencedSchema
+            ? {
+                name: foreignKeyRelation.referencedTable,
+                schema: foreignKeyRelation.referencedSchema,
+              }
+            : foreignKeyRelation.referencedTable,
           relationship: oneToManyRelationshipName,
           cascade: false,
         },

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/trackForeignKeyRelations.ts

@@ -5,6 +5,7 @@ import type {
   MutationOrQueryBaseOptions,
   QueryResult,
 } from '@/types/dataBrowser';
+import normalizeMetadataError from '@/utils/dataBrowser/normalizeMetadataError/normalizeMetadataError';
 import prepareTrackForeignKeyRelationsMetadata from './prepareTrackForeignKeyRelationsMetadata';
 
 export interface TrackForeignKeyRelationsVariables {
@@ -60,15 +61,11 @@ export default async function trackForeignKeyRelations({
     | [AffectedRowsResult, QueryResult<string[]>]
     | MetadataError = await response.json();
 
-  if (!response.ok || 'error' in responseData) {
+  if (response.ok) {
-    if ('internal' in responseData) {
+    return;
-      const metadataError = responseData as MetadataError;
-      throw new Error(metadataError.internal[0]?.reason);
-    }
-
-    if ('error' in responseData) {
-      const metadataError = responseData as MetadataError;
-      throw new Error(metadataError.error);
-    }
   }
+
+  const normalizedError = normalizeMetadataError(responseData);
+
+  throw new Error(normalizedError);
 }

dashboard/src/hooks/dataBrowser/useTrackTableMutation/trackTable.ts

@@ -5,6 +5,7 @@ import type {
   MutationOrQueryBaseOptions,
   QueryResult,
 } from '@/types/dataBrowser';
+import normalizeMetadataError from '@/utils/dataBrowser/normalizeMetadataError/normalizeMetadataError';
 
 export interface TrackTableVariables {
   /**
@@ -45,18 +46,11 @@ export default async function trackTable({
     | [AffectedRowsResult, QueryResult<string[]>]
     | MetadataError = await response.json();
 
-  if (!response.ok || 'error' in responseData) {
+  if (response.ok) {
-    if ('internal' in responseData) {
+    return;
-      const metadataError = responseData as MetadataError;
-      throw new Error(
-        metadataError.internal[0]?.reason ||
-          'Unknown error occurred. Please try again later.',
-      );
-    }
-
-    if ('error' in responseData) {
-      const metadataError = responseData as MetadataError;
-      throw new Error(metadataError.error);
-    }
   }
+
+  const normalizedError = normalizeMetadataError(responseData);
+
+  throw new Error(normalizedError);
 }

dashboard/src/hooks/dataBrowser/useTrackTableMutation/useTrackTableMutation.ts

@@ -17,8 +17,7 @@ export interface UseTrackTableMutationOptions
 }
 
 /**
- * This hook is a wrapper around a fetch call that inserts a record into the
+ * This hook is a wrapper around a fetch call that tracks a table.
- * table.
  *
  * @param options - Options to use for the mutation.
  * @returns The result of the mutation.

dashboard/src/hooks/dataBrowser/useUpdateTableMutation/prepareUpdateTableQuery.ts

@@ -184,7 +184,7 @@ export default function prepareUpdateTableQuery({
           );
 
           return [
-            ...args,
+            ...updatedArgs,
             ...prepareUpdateForeignKeyConstraintQuery({
               ...baseVariables,
               originalForeignKeyRelation,

dashboard/src/hooks/useNotFoundRedirect.tsx

@@ -10,7 +10,7 @@ export default function useNotFoundRedirect() {
     useCurrentWorkspaceAndApplication();
   const router = useRouter();
   const {
-    query: { workspaceSlug, appSlug },
+    query: { workspaceSlug, appSlug, updating },
   } = useRouter();
 
   const notIn404Already = router.pathname !== '/404';
@@ -25,6 +25,15 @@ export default function useNotFoundRedirect() {
   const inSettingsDatabasePage = router.pathname.includes('/settings/database');
 
   useEffect(() => {
+    // This code is checking if the URL has a query of the form `?updating=true`
+    // If it does (`updating` is true) this useEffect will immediately exit without executing
+    //  any further statements (e.g. the page will show a loader until `updating` is false).
+    // This is to prevent the user from being redirected to the 404 page while we are updating
+    // either the workspace slug or application slug.
+    if (updating) {
+      return;
+    }
+
     if (noResolvedWorkspace && notIn404Already) {
       router.push('/404');
     }
@@ -37,6 +46,7 @@ export default function useNotFoundRedirect() {
       router.push('/404');
     }
   }, [
+    updating,
     currentApplication,
     currentWorkspace,
     noResolvedApplication,

dashboard/src/pages/[workspaceSlug]/[appSlug]/database/browser/[dataSourceSlug]/index.tsx

@@ -16,7 +16,7 @@ export default function DataBrowserDatabaseDetailsPage() {
         description={
           <span>
             Database{' '}
-            <InlineCode className="max-h-[32px] bg-gray-200 bg-opacity-80 px-1.5 text-sm">
+            <InlineCode className="bg-gray-200 bg-opacity-80 px-1.5 text-sm">
               {dataSourceSlug}
             </InlineCode>{' '}
             does not exist.

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/general/index.tsx

@@ -9,8 +9,8 @@ import {
   useUpdateAppMutation,
 } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import CheckIcon from '@/ui/v2/icons/CheckIcon';
 import Input from '@/ui/v2/Input';
+import CheckIcon from '@/ui/v2/icons/CheckIcon';
 import { discordAnnounce } from '@/utils/discordAnnounce';
 import { slugifyString } from '@/utils/helpers';
 import { updateOwnCache } from '@/utils/updateOwnCache';
@@ -53,6 +53,7 @@ export default function SettingsGeneralPage() {
   const [deleteApplication] = useDeleteApplicationMutation({
     variables: { appId: currentApplication?.id },
   });
+  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
   const router = useRouter();
 
   const form = useForm<ProjectNameValidationSchema>({
@@ -69,6 +70,14 @@ export default function SettingsGeneralPage() {
   const { register, formState } = form;
 
   const handleProjectNameChange = async (data: ProjectNameValidationSchema) => {
+    // In this bit of code we spread the props of the current path (e.g. /workspace/...) and add one key-value pair: `updating: true`.
+    // We want to indicate that the currently we're in the process of running a mutation state that will affect the routing behaviour of the website
+    // i.e. redirecting to 404 if there's no workspace/project with that slug.
+    await router.replace({
+      pathname: router.pathname,
+      query: { ...router.query, updating: true },
+    });
+
     const newProjectSlug = slugifyString(data.name);
 
     if (newProjectSlug.length < 1 || newProjectSlug.length > 32) {
@@ -100,8 +109,13 @@ export default function SettingsGeneralPage() {
       toastStyleProps,
     );
     try {
-      await client.refetchQueries({ include: ['getOneUser'] });
+      await client.refetchQueries({
+        include: ['getOneUser'],
+      });
       form.reset(undefined, { keepValues: true, keepDirty: false });
+      await router.push(
+        `/${currentWorkspace.slug}/${newProjectSlug}/settings/general`,
+      );
     } catch (error) {
       await discordAnnounce(
         error.message || 'Error while trying to update application cache',

dashboard/src/pages/[workspaceSlug]/[appSlug]/users/index.tsx

@@ -6,10 +6,10 @@ import UsersBody from '@/components/users/UsersBody';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Button from '@/ui/v2/Button';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
 import PlusIcon from '@/ui/v2/icons/PlusIcon';
 import UserIcon from '@/ui/v2/icons/UserIcon';
+import Input from '@/ui/v2/Input';
+import Text from '@/ui/v2/Text';
 import type { RemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
 import { useRemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
 import { SearchIcon } from '@heroicons/react/solid';
@@ -198,7 +198,7 @@ export default function UsersPage() {
     [handleSearchStringChange],
   );
 
-  function handleViewUser() {
+  function openCreateUserDialog() {
     openDialog('CREATE_USER', {
       title: 'Create User',
       payload: {
@@ -237,7 +237,7 @@ export default function UsersPage() {
             onChange={handleSearchStringChange}
           />
           <Button
-            onClick={handleViewUser}
+            onClick={openCreateUserDialog}
             startIcon={<PlusIcon className="w-4 h-4" />}
             className="grid h-full grid-flow-col gap-1 p-2 place-items-center"
             size="small"
@@ -271,7 +271,7 @@ export default function UsersPage() {
           onChange={handleSearchStringChange}
         />
         <Button
-          onClick={handleViewUser}
+          onClick={openCreateUserDialog}
           startIcon={<PlusIcon className="w-4 h-4" />}
           className="grid h-full grid-flow-col gap-1 p-2 place-items-center"
           size="small"
@@ -296,7 +296,7 @@ export default function UsersPage() {
               color="primary"
               className="w-full"
               aria-label="Create User"
-              onClick={handleViewUser}
+              onClick={openCreateUserDialog}
               startIcon={<PlusIcon className="w-4 h-4" />}
             >
               Create User

dashboard/src/theme/default/defaultTheme.ts

@@ -57,13 +57,13 @@ export const theme = createTheme({
       hover: '#f3f4f6',
       active: '#f3f4f6',
       focus: '#f3f4f6',
-      disabled: '#C2CAD6',
+      disabled: '#c2cad6',
     },
     grey: {
       100: '#ffffff',
       200: '#f4f7f9',
       300: '#eaedf0',
-      400: '#c2cad6',
+      400: '#e0e0e0',
       500: '#9ca7b7',
       600: '#556378',
       700: '#21324b',

dashboard/src/types/dataBrowser.ts

@@ -33,6 +33,13 @@ export interface MutationOrQueryBaseOptions {
 export interface HasuraMetadataRelationship {
   name: string;
   using: {
+    manual_configuration?: {
+      column_mapping: Record<string, string>;
+      remote_table: {
+        name: string;
+        schema: string;
+      };
+    };
     foreign_key_constraint_on?:
       | string
       | {
@@ -45,6 +52,21 @@ export interface HasuraMetadataRelationship {
   };
 }
 
+export interface HasuraMetadataPermission {
+  role: string;
+  permission: Partial<{
+    columns: string[];
+    filter: Record<string, any>;
+    check: Record<string, any>;
+    limit: number;
+    allow_aggregations: boolean;
+    query_root_fields: string[];
+    subscription_root_fields: string[];
+    set: Record<string, any>;
+    backend_only: boolean;
+  }>;
+}
+
 /**
  * Represents a table from Hasura metadata.
  */
@@ -54,8 +76,12 @@ export interface HasuraMetadataTable {
     schema: string;
   };
   configuration: Record<string, Record<string, any>>;
-  array_relationships: HasuraMetadataRelationship[];
+  array_relationships?: HasuraMetadataRelationship[];
-  object_relationships: HasuraMetadataRelationship[];
+  object_relationships?: HasuraMetadataRelationship[];
+  insert_permissions?: HasuraMetadataPermission[];
+  select_permissions?: HasuraMetadataPermission[];
+  update_permissions?: HasuraMetadataPermission[];
+  delete_permissions?: HasuraMetadataPermission[];
 }
 
 /**
@@ -132,7 +158,7 @@ export interface MetadataError {
       schema: string;
       name: string;
     };
-    using: {
+    using?: {
       foreign_key_constraint_on: string;
     };
   }[];
@@ -385,10 +411,25 @@ export interface DatabaseColumn {
  * Represents a database table.
  */
 export interface DatabaseTable {
+  /**
+   * Name of the table.
+   */
   name: string;
+  /**
+   * Columns of the table.
+   */
   columns: DatabaseColumn[];
+  /**
+   * Primary key of the table.
+   */
   primaryKey: string;
+  /**
+   * Identity column of the table.
+   */
   identityColumn?: string;
+  /**
+   * Foreign key relations of the table.
+   */
   foreignKeyRelations?: ForeignKeyRelation[];
 }
 
@@ -485,6 +526,16 @@ export interface DataBrowserGridCellProps<
   row: DataBrowserGridRow<TData>;
 }
 
+/**
+ * Represents an available database action.
+ */
+export type DatabaseAction = 'insert' | 'select' | 'update' | 'delete';
+
+/**
+ * Represents the database access level.
+ */
+export type DatabaseAccessLevel = 'full' | 'partial' | 'none';
+
 /**
  * Represents a Hasura operator.
  */
@@ -534,4 +585,5 @@ export interface RuleGroup {
   operator: '_and' | '_or';
   rules: Rule[];
   groups: RuleGroup[];
+  unsupported?: Record<string, any>[];
 }

dashboard/src/utils/dataBrowser/convertToHasuraPermissions/convertToHasuraPermissions.test.ts

@@ -1,5 +1,37 @@
 import convertToHasuraPermissions from './convertToHasuraPermissions';
 
+test('should return null if there are no rules or groups', () => {
+  expect(convertToHasuraPermissions()).toBeNull();
+  expect(convertToHasuraPermissions(null)).toBeNull();
+  expect(convertToHasuraPermissions(undefined)).toBeNull();
+});
+
+test('should return an empty object if the input is an empty object', () => {
+  expect(convertToHasuraPermissions({})).toMatchObject({});
+});
+
+test(`should return an empty object if the input doesn't have any rules or groups`, () => {
+  expect(
+    convertToHasuraPermissions({ operator: '_and', rules: [], groups: [] }),
+  ).toMatchObject({});
+});
+
+test(`should remove a nesting level if it only contains a single group and no rules`, () => {
+  expect(
+    convertToHasuraPermissions({
+      operator: '_and',
+      rules: [],
+      groups: [
+        {
+          operator: '_and',
+          rules: [{ column: 'id', operator: '_eq', value: 'X-Hasura-User-Id' }],
+          groups: [],
+        },
+      ],
+    }),
+  ).toMatchObject({ id: { _eq: 'X-Hasura-User-Id' } });
+});
+
 test('should not return any operators if there is only one rule in a group', () => {
   expect(
     convertToHasuraPermissions({
@@ -179,3 +211,87 @@ test('should return nested groups', () => {
     ],
   });
 });
+
+test('should merge unsupported rules into the object', () => {
+  expect(
+    convertToHasuraPermissions({
+      operator: '_or',
+      rules: [
+        {
+          column: 'title',
+          operator: '_eq',
+          value: 'test',
+        },
+        {
+          column: 'title',
+          operator: '_eq',
+          value: 'test2',
+        },
+      ],
+      groups: [
+        {
+          operator: '_and',
+          rules: [],
+          groups: [],
+          unsupported: [
+            {
+              _exists: {
+                _table: { schema: 'public', name: 'authors' },
+                _where: { name: { _eq: 'test3' } },
+              },
+            },
+          ],
+        },
+      ],
+      unsupported: [
+        {
+          _exists: {
+            _table: { schema: 'public', name: 'authors' },
+            _where: { name: { _eq: 'test3' } },
+          },
+        },
+      ],
+    }),
+  ).toMatchObject({
+    _or: [
+      { title: { _eq: 'test' } },
+      { title: { _eq: 'test2' } },
+      {
+        _and: [
+          {
+            _exists: {
+              _table: { schema: 'public', name: 'authors' },
+              _where: { name: { _eq: 'test3' } },
+            },
+          },
+        ],
+      },
+      {
+        _exists: {
+          _table: { schema: 'public', name: 'authors' },
+          _where: { name: { _eq: 'test3' } },
+        },
+      },
+    ],
+  });
+});
+
+test('should convert value to boolean if the operator is _is_null', () => {
+  expect(
+    convertToHasuraPermissions({
+      operator: '_and',
+      rules: [
+        {
+          column: 'title',
+          operator: '_is_null',
+          value: 'true',
+        },
+      ],
+      groups: [],
+    }),
+  ).toMatchObject({
+    title: {
+      _is_null: true,
+    },
+  });
+});

dashboard/src/utils/dataBrowser/convertToHasuraPermissions/convertToHasuraPermissions.ts

@@ -7,6 +7,14 @@ function createNestedObjectFromRule({
 }: Rule): Record<string, any> {
   const columnNameParts = column.split('.');
 
+  if (columnNameParts.length === 1 && operator === '_is_null') {
+    return {
+      [column]: {
+        [operator]: value === 'true',
+      },
+    };
+  }
+
   if (columnNameParts.length === 1) {
     return {
       [column]: {
@@ -33,16 +41,48 @@ function createNestedObjectFromRule({
  * @returns - A Hasura permission object
  */
 export default function convertToHasuraPermissions(
-  ruleGroup: RuleGroup,
+  ruleGroup?: Partial<RuleGroup>,
 ): Record<string, any> {
-  if (ruleGroup.rules.length === 1 && ruleGroup.groups.length === 0) {
+  if (!ruleGroup) {
+    return null;
+  }
+
+  if (
+    (!('rules' in ruleGroup) &&
+      !('groups' in ruleGroup) &&
+      !('unsupported' in ruleGroup)) ||
+    (!ruleGroup.rules.length &&
+      !ruleGroup.groups?.length &&
+      !ruleGroup.unsupported?.length)
+  ) {
+    return {};
+  }
+
+  if (
+    ruleGroup.rules?.length === 1 &&
+    !ruleGroup.groups?.length &&
+    !ruleGroup?.unsupported?.length
+  ) {
     return createNestedObjectFromRule(ruleGroup.rules[0]);
   }
 
-  const convertedRules = ruleGroup.rules.map(createNestedObjectFromRule);
+  if (
-  const subGroupRules = ruleGroup.groups.map(convertToHasuraPermissions);
+    !ruleGroup.rules?.length &&
+    ruleGroup.groups?.length === 1 &&
+    !ruleGroup.unsupported?.length
+  ) {
+    return convertToHasuraPermissions(ruleGroup.groups[0]);
+  }
+
+  const convertedRules = ruleGroup.rules?.map(createNestedObjectFromRule) || [];
+  const subGroupRules = ruleGroup.groups?.map(convertToHasuraPermissions) || [];
+  const convertedUnsupportedRules = ruleGroup.unsupported || [];
 
   return {
-    [ruleGroup.operator]: [...convertedRules, ...subGroupRules],
+    [ruleGroup.operator]: [
+      ...convertedRules,
+      ...subGroupRules,
+      ...convertedUnsupportedRules,
+    ],
   };
 }

dashboard/src/utils/dataBrowser/convertToRuleGroup/convertToRuleGroup.test.ts

@@ -22,12 +22,56 @@ test('should return an empty rule group when there are no permissions or the obj
   });
 });
 
+test('should convert value to stringified boolean if operator is _is_null', () => {
+  expect(
+    convertToRuleGroup({
+      _or: [
+        { title: { _eq: 'test' } },
+        { title: { _is_null: true } },
+        { title: { _is_null: 'true' } },
+        { title: { _is_null: 'false' } },
+      ],
+    }),
+  ).toMatchObject({
+    operator: '_or',
+    rules: [
+      { column: 'title', operator: '_eq', value: 'test' },
+      { column: 'title', operator: '_is_null', value: 'true' },
+      { column: 'title', operator: '_is_null', value: 'true' },
+      { column: 'title', operator: '_is_null', value: 'false' },
+    ],
+    groups: [],
+  });
+});
+
 test('should convert a simple Hasura permission object to a rule group', () => {
   expect(convertToRuleGroup({ title: { _eq: 'test' } })).toMatchObject({
     operator: '_and',
     rules: [{ column: 'title', operator: '_eq', value: 'test' }],
     groups: [],
   });
+
+  expect(convertToRuleGroup({ title: { _is_null: 'false' } })).toMatchObject({
+    operator: '_and',
+    rules: [{ column: 'title', operator: '_is_null', value: 'false' }],
+    groups: [],
+  });
+
+  expect(
+    convertToRuleGroup({
+      books: { author: { id: { _eq: 'X-Hasura-User-Id' } } },
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [
+      {
+        column: 'books.author.id',
+        operator: '_eq',
+        value: 'X-Hasura-User-Id',
+      },
+    ],
+    groups: [],
+  });
 });
 
 test('should convert a permission containing a relationship to a rule group', () => {
@@ -40,6 +84,34 @@ test('should convert a permission containing a relationship to a rule group', ()
   });
 });
 
+test('should convert a permission containing _and or _or on the top level to a rule group', () => {
+  expect(
+    convertToRuleGroup({
+      _or: [{ title: { _eq: 'test' } }, { title: { _eq: 'test2' } }],
+    }),
+  ).toMatchObject({
+    operator: '_or',
+    rules: [
+      { column: 'title', operator: '_eq', value: 'test' },
+      { column: 'title', operator: '_eq', value: 'test2' },
+    ],
+    groups: [],
+  });
+
+  expect(
+    convertToRuleGroup({
+      _and: [{ title: { _eq: 'test' } }, { title: { _eq: 'test2' } }],
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [
+      { column: 'title', operator: '_eq', value: 'test' },
+      { column: 'title', operator: '_eq', value: 'test2' },
+    ],
+    groups: [],
+  });
+});
+
 test('should join a relationship when there is a nested group inside', () => {
   expect(
     convertToRuleGroup({
@@ -159,3 +231,248 @@ test(`should convert an _in or _nin value that do not have an array as value to
     groups: [],
   });
 });
+
+test('should transform operators and relations if the _not operator is being used', () => {
+  expect(
+    convertToRuleGroup({ _not: { title: { _eq: 'test' } } }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [{ column: 'title', operator: '_neq', value: 'test' }],
+    groups: [],
+  });
+
+  expect(
+    convertToRuleGroup({
+      _not: {
+        _or: [{ title: { _eq: 'test' } }, { age: { _gt: 32 } }],
+      },
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [
+      { column: 'title', operator: '_neq', value: 'test' },
+      { column: 'age', operator: '_lte', value: 32 },
+    ],
+    groups: [],
+  });
+
+  expect(
+    convertToRuleGroup({
+      _not: {
+        _or: [
+          { title: { _eq: 'test' } },
+          { age: { _gt: 32 } },
+          { _or: [{ title: { _eq: 'sample' } }, { age: { _lt: 24 } }] },
+        ],
+      },
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [
+      { column: 'title', operator: '_neq', value: 'test' },
+      { column: 'age', operator: '_lte', value: 32 },
+    ],
+    groups: [
+      {
+        operator: '_and',
+        rules: [
+          { column: 'title', operator: '_neq', value: 'sample' },
+          { column: 'age', operator: '_gte', value: 24 },
+        ],
+        groups: [],
+      },
+    ],
+  });
+
+  expect(
+    convertToRuleGroup({
+      _not: {
+        title: { _is_null: true },
+      },
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [{ column: 'title', operator: '_is_null', value: 'false' }],
+    groups: [],
+  });
+
+  expect(
+    convertToRuleGroup({
+      _not: {
+        title: { _is_null: 'false' },
+      },
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [{ column: 'title', operator: '_is_null', value: 'true' }],
+    groups: [],
+  });
+});
+
+test('should retain unsupported _exists objects', () => {
+  expect(
+    convertToRuleGroup({
+      _or: [
+        { title: { _eq: 'test' } },
+        {
+          _exists: {
+            _table: {
+              name: 'users',
+              schema: 'public',
+            },
+            _where: {
+              id: {
+                _eq: 'X-Hasura-User-Id',
+              },
+            },
+          },
+        },
+        {
+          books: {
+            author: {
+              _exists: {
+                _table: {
+                  name: 'users',
+                  schema: 'public',
+                },
+                _where: {
+                  id: {
+                    _eq: 'X-Hasura-User-Id',
+                  },
+                },
+              },
+            },
+          },
+        },
+        {
+          _and: [
+            { name: { _eq: 'John Doe' } },
+            { age: { _gte: '32' } },
+            {
+              _exists: {
+                _table: {
+                  name: 'users',
+                  schema: 'public',
+                },
+                _where: {
+                  id: {
+                    _eq: 'X-Hasura-User-Id',
+                  },
+                },
+              },
+            },
+          ],
+        },
+      ],
+    }),
+  ).toMatchObject({
+    operator: '_or',
+    rules: [{ column: 'title', operator: '_eq', value: 'test' }],
+    groups: [
+      {
+        operator: '_and',
+        rules: [
+          { column: 'name', operator: '_eq', value: 'John Doe' },
+          { column: 'age', operator: '_gte', value: '32' },
+        ],
+        groups: [],
+        unsupported: [
+          {
+            _exists: {
+              _table: { name: 'users', schema: 'public' },
+              _where: { id: { _eq: 'X-Hasura-User-Id' } },
+            },
+          },
+        ],
+      },
+    ],
+    unsupported: [
+      {
+        _exists: {
+          _table: { name: 'users', schema: 'public' },
+          _where: { id: { _eq: 'X-Hasura-User-Id' } },
+        },
+      },
+      {
+        books: {
+          author: {
+            _exists: {
+              _table: { name: 'users', schema: 'public' },
+              _where: { id: { _eq: 'X-Hasura-User-Id' } },
+            },
+          },
+        },
+      },
+    ],
+  });
+
+  expect(
+    convertToRuleGroup({
+      _and: [
+        { name: { _eq: 'X-Hasura-User-Id' } },
+        {
+          _or: [
+            { birth_date: { _eq: 'X-Hasura-User-Id' } },
+            {
+              _exists: {
+                _table: { name: 'books', schema: 'public' },
+                _where: { _and: [{ title: { _eq: 'X-Hasura-User-Id' } }] },
+              },
+            },
+          ],
+        },
+      ],
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [
+      { column: 'name', operator: '_eq', value: 'X-Hasura-User-Id' },
+      { column: 'birth_date', operator: '_eq', value: 'X-Hasura-User-Id' },
+    ],
+    groups: [],
+    unsupported: [
+      {
+        _exists: {
+          _table: { name: 'books', schema: 'public' },
+          _where: { _and: [{ title: { _eq: 'X-Hasura-User-Id' } }] },
+        },
+      },
+    ],
+  });
+
+  expect(
+    convertToRuleGroup({
+      books: {
+        author: {
+          _exists: {
+            _table: {
+              name: 'users',
+              schema: 'public',
+            },
+            _where: {
+              id: {
+                _eq: 'X-Hasura-User-Id',
+              },
+            },
+          },
+        },
+      },
+    }),
+  ).toMatchObject({
+    operator: '_and',
+    rules: [],
+    groups: [],
+    unsupported: [
+      {
+        books: {
+          author: {
+            _exists: {
+              _table: { name: 'users', schema: 'public' },
+              _where: { id: { _eq: 'X-Hasura-User-Id' } },
+            },
+          },
+        },
+      },
+    ],
+  });
+});

dashboard/src/utils/dataBrowser/convertToRuleGroup/convertToRuleGroup.ts

@@ -1,9 +1,68 @@
 import type { HasuraOperator, RuleGroup } from '@/types/dataBrowser';
 
+function createNestedObject(pathParts: string[], value: any) {
+  const [currentPath, ...restPath] = pathParts;
+
+  if (pathParts.length === 0) {
+    return value;
+  }
+
+  if (pathParts.length === 1) {
+    return {
+      [currentPath]: value,
+    };
+  }
+
+  return {
+    [currentPath]: createNestedObject(restPath, value),
+  };
+}
+
+const negatedArrayOperatorPairs: Record<'_and' | '_or', '_and' | '_or'> = {
+  _and: '_or',
+  _or: '_and',
+};
+
+const negatedValueOperatorPairs: Record<HasuraOperator, HasuraOperator> = {
+  _eq: '_neq',
+  _neq: '_eq',
+  _in: '_nin',
+  _nin: '_in',
+  _gt: '_lte',
+  _lt: '_gte',
+  _gte: '_lt',
+  _lte: '_gt',
+  _like: '_nlike',
+  _nlike: '_like',
+  _ilike: '_nilike',
+  _nilike: '_ilike',
+  _similar: '_nsimilar',
+  _nsimilar: '_similar',
+  _regex: '_nregex',
+  _nregex: '_regex',
+  _iregex: '_niregex',
+  _niregex: '_iregex',
+  _ceq: '_cne',
+  _cne: '_ceq',
+  _cgt: '_clte',
+  _clt: '_cgte',
+  _cgte: '_clt',
+  _clte: '_cgt',
+  _is_null: '_is_null',
+  _in_hasura: '_nin_hasura',
+  _nin_hasura: '_in_hasura',
+};
+
 export default function convertToRuleGroup(
   hasuraPermissions: Record<string, any>,
-  previousKey?: string,
+  options?: {
+    previousKey?: string;
+    shouldNegate?: boolean;
+    isNested?: boolean;
+  },
 ): RuleGroup {
+  const { previousKey, shouldNegate = false, isNested = false } = options || {};
+
   const keys = Object.keys(hasuraPermissions);
 
   if (keys.length !== 1) {
@@ -15,18 +74,91 @@ export default function convertToRuleGroup(
   }
 
   const [currentKey] = keys;
+  const value = hasuraPermissions[currentKey];
 
+  // Note: Exists is currently not supported by the UI, so we are returning it
+  // as is and treating it as an unsupported object type.
+  if (currentKey === '_exists') {
+    const pathParts = previousKey?.split('.') || [];
+
+    if (!isNested) {
+      return {
+        operator: '_and',
+        rules: [],
+        groups: [],
+        unsupported: [
+          createNestedObject(pathParts, {
+            _exists: value,
+          }),
+        ],
+      };
+    }
+
+    return createNestedObject(pathParts, {
+      _exists: value,
+    });
+  }
+
+  // Note: _not is a special case, we just need to negate the nested operators
+  // or values in certain cases (e.g: _is_null).
+  if (currentKey === '_not') {
+    return convertToRuleGroup(value, {
+      ...options,
+      shouldNegate: true,
+    });
+  }
+
+  // Note: _is_null is special, because we need to negate its value instead of
+  // the operator.
+  if (currentKey === '_is_null') {
+    if (typeof value !== 'boolean') {
+      const convertedValue = value === 'true';
+
+      return {
+        operator: '_and',
+        rules: [
+          {
+            column: previousKey,
+            operator: '_is_null',
+            value: Boolean(
+              shouldNegate ? !convertedValue : convertedValue,
+            ).toString(),
+          },
+        ],
+        groups: [],
+      };
+    }
+
+    return {
+      operator: '_and',
+      rules: [
+        {
+          column: options.previousKey,
+          operator: '_is_null',
+          value: Boolean(shouldNegate ? !value : value).toString(),
+        },
+      ],
+      groups: [],
+    };
+  }
+
+  // Note: _in and _nin are special if they contain a string, because we need
+  // to treat them differently in the UI.
   if (
     (currentKey === '_in' || currentKey === '_nin') &&
-    typeof hasuraPermissions[currentKey] === 'string'
+    typeof value === 'string'
   ) {
+    const operator = currentKey === '_in' ? '_in_hasura' : '_nin_hasura';
+
     return {
       operator: '_and',
       rules: [
         {
           column: previousKey,
-          operator: currentKey === '_in' ? '_in_hasura' : '_nin_hasura',
+          operator: shouldNegate
-          value: hasuraPermissions[currentKey],
+            ? negatedValueOperatorPairs[operator]
+            : operator,
+          value,
         },
       ],
       groups: [],
@@ -59,7 +191,6 @@ export default function convertToRuleGroup(
       '_clt',
       '_cgte',
       '_clte',
-      '_is_null',
     ].includes(currentKey)
   ) {
     return {
@@ -67,8 +198,10 @@ export default function convertToRuleGroup(
       rules: [
         {
           column: previousKey,
-          operator: currentKey as HasuraOperator,
+          operator: shouldNegate
-          value: hasuraPermissions[currentKey],
+            ? negatedValueOperatorPairs[currentKey]
+            : currentKey,
+          value,
         },
       ],
       groups: [],
@@ -76,12 +209,22 @@ export default function convertToRuleGroup(
   }
 
   if (currentKey === '_or' || currentKey === '_and') {
-    return hasuraPermissions[currentKey]
+    return value
       .map((permissionObject: ArrayLike<string> | Record<string, any>) =>
-        convertToRuleGroup(permissionObject, previousKey),
+        convertToRuleGroup(permissionObject, {
+          ...options,
+          isNested: true,
+        }),
       )
       .reduce(
         (accumulator: RuleGroup, rule: RuleGroup) => {
+          if (!('rules' in rule) && !('groups' in rule)) {
+            return {
+              ...accumulator,
+              unsupported: [...(accumulator.unsupported || []), rule],
+            };
+          }
+
           if (rule.rules.length > 1) {
             return {
               ...accumulator,
@@ -92,17 +235,23 @@ export default function convertToRuleGroup(
           return {
             ...accumulator,
             rules: [...(accumulator.rules || []), ...rule.rules],
+            unsupported: [
+              ...(accumulator.unsupported || []),
+              ...(rule.unsupported || []),
+            ],
           };
         },
         {
-          operator: currentKey,
+          operator: shouldNegate
-          rules: [...(hasuraPermissions[currentKey]?.rules || [])],
+            ? negatedArrayOperatorPairs[currentKey]
-          groups: [...(hasuraPermissions[currentKey]?.groups || [])],
+            : currentKey,
+          rules: [...(value?.rules || [])],
+          groups: [...(value?.groups || [])],
         },
       );
   }
 
-  if (typeof hasuraPermissions[currentKey] !== 'object') {
+  if (typeof value !== 'object') {
     return {
       operator: '_and',
       rules: [],
@@ -110,8 +259,8 @@ export default function convertToRuleGroup(
     };
   }
 
-  return convertToRuleGroup(
+  return convertToRuleGroup(value, {
-    hasuraPermissions[currentKey],
+    ...options,
-    previousKey ? `${previousKey}.${currentKey}` : currentKey,
+    previousKey: previousKey ? `${previousKey}.${currentKey}` : currentKey,
-  );
+  });
 }

dashboard/src/utils/dataBrowser/normalizeMetadataError/normalizeMetadataError.test.ts

@@ -0,0 +1,47 @@
+import type { MetadataError } from '@/types/dataBrowser';
+import normalizeMetadataError from './normalizeMetadataError';
+
+const baseMetadataError = {
+  code: 'P0001',
+  path: '$[0]',
+  error: 'some-error',
+};
+
+test(`should not extract any error messages if response is an empty object`, () => {
+  expect(normalizeMetadataError({})).toBe('Unknown error occurred.');
+});
+
+test('should not extract any error messages if response is not a query error', () => {
+  expect(normalizeMetadataError({ errorCode: 2, status: 500 })).toBe(
+    'Unknown error occurred.',
+  );
+});
+
+test('should return the first internal error message if response is a metadata error', () => {
+  const metadataError: MetadataError = {
+    ...baseMetadataError,
+    internal: [
+      {
+        reason: 'some-reason',
+        name: 'internal-error',
+        type: 'error',
+        definition: { source: 'default', name: 'default' },
+        table: {
+          schema: 'public',
+          name: 'tests',
+        },
+      },
+    ],
+  };
+
+  expect(normalizeMetadataError(metadataError)).toBe('some-reason');
+});
+
+test('should not extroct any error messages if the list of internal errors is empty', () => {
+  const metadataError: MetadataError = {
+    ...baseMetadataError,
+    internal: [],
+  };
+
+  expect(normalizeMetadataError(metadataError)).toBe('Unknown error occurred.');
+});