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

chore: update versions

dashboard/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nhost/dashboard
 
+## 0.11.20
+
+### Patch Changes
+
+- 4b4f0d01: chore(dashboard): improve dialog management
+
+## 0.11.19
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.6
+- @nhost/nextjs@1.13.11
+
 ## 0.11.18
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.11.18",
+  "version": "0.11.20",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

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

@@ -1,31 +1,8 @@
+import type { DialogFormProps } from '@/types/common';
 import type { CommonDialogProps } from '@/ui/v2/Dialog';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 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'
-  | 'EDIT_ROLE'
-  | 'CREATE_USER'
-  | 'CREATE_PERMISSION_VARIABLE'
-  | 'EDIT_PERMISSION_VARIABLE'
-  | 'CREATE_ENVIRONMENT_VARIABLE'
-  | 'EDIT_ENVIRONMENT_VARIABLE'
-  | 'EDIT_USER'
-  | 'EDIT_USER_PASSWORD'
-  | 'EDIT_JWT_SECRET';
-
 export interface DialogConfig<TPayload = unknown> {
   /**
    * Title of the dialog.
@@ -41,21 +18,36 @@ export interface DialogConfig<TPayload = unknown> {
   payload?: TPayload;
 }
 
+export interface OpenDialogOptions {
+  /**
+   * Title of the dialog.
+   */
+  title: ReactNode;
+  /**
+   * Component to render inside the dialog skeleton.
+   */
+  component: ReactElement<{
+    location?: 'drawer' | 'dialog';
+    onCancel?: () => void;
+    onSubmit?: (args?: any) => Promise<any> | void;
+  }>;
+  /**
+   * Props to pass to the root dialog component.
+   */
+  props?: Partial<CommonDialogProps>;
+}
+
 export interface DialogContextProps {
   /**
-   * Call this function to open a dialog.
+   * Call this function to open a dialog. It will automatically apply the
+   * necessary functionality to the dialog.
    */
-  openDialog: <TPayload = unknown>(
+  openDialog: (options: OpenDialogOptions) => void;
-    type: DialogType,
-    config?: DialogConfig<TPayload>,
-  ) => void;
   /**
-   * Call this function to open a drawer.
+   * Call this function to open a drawer. It will automatically apply the
+   * necessary functionality to the drawer.
    */
-  openDrawer: <TPayload = unknown>(
+  openDrawer: (options: OpenDialogOptions) => void;
-    type: DialogType,
-    config?: DialogConfig<TPayload>,
-  ) => void;
   /**
    * Call this function to open an alert dialog.
    */
@@ -87,7 +79,7 @@ export interface DialogContextProps {
    */
   onDirtyStateChange: (
     isDirty: boolean,
-    location?: 'drawer' | 'dialog',
+    location?: DialogFormProps['location'],
   ) => void;
   /**
    * Call this function to open a dirty confirmation dialog.

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

@@ -1,30 +1,12 @@
 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';
-import CreatePermissionVariableForm from '@/components/settings/permissions/CreatePermissionVariableForm';
-import EditPermissionVariableForm from '@/components/settings/permissions/EditPermissionVariableForm';
-import CreateRoleForm from '@/components/settings/roles/CreateRoleForm';
-import EditRoleForm from '@/components/settings/roles/EditRoleForm';
-import CreateUserForm from '@/components/users/CreateUserForm';
-import EditUserForm from '@/components/users/EditUserForm';
-import EditUserPasswordForm from '@/components/users/EditUserPasswordForm';
-import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import AlertDialog from '@/ui/v2/AlertDialog';
 import { BaseDialog } from '@/ui/v2/Dialog';
 import Drawer from '@/ui/v2/Drawer';
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import type {
+import type { BaseSyntheticEvent, PropsWithChildren } from 'react';
-  BaseSyntheticEvent,
-  DetailedHTMLProps,
-  HTMLProps,
-  PropsWithChildren,
-} from 'react';
 import {
+  cloneElement,
+  isValidElement,
   useCallback,
   useEffect,
   useMemo,
@@ -33,7 +15,7 @@ import {
   useState,
 } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { DialogConfig, DialogType } from './DialogContext';
+import type { DialogConfig, OpenDialogOptions } from './DialogContext';
 import DialogContext from './DialogContext';
 import {
   alertDialogReducer,
@@ -41,67 +23,11 @@ import {
   drawerReducer,
 } from './dialogReducers';
 
-function LoadingComponent({
-  className,
-  ...props
-}: DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> = {}) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        'grid items-center justify-center px-6 py-4',
-        className,
-      )}
-    >
-      <ActivityIndicator
-        circularProgressProps={{ className: 'w-5 h-5' }}
-        label="Loading form..."
-      />
-    </div>
-  );
-}
-
-const CreateRecordForm = dynamic(
-  () => import('@/components/dataBrowser/CreateRecordForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const CreateColumnForm = dynamic(
-  () => import('@/components/dataBrowser/CreateColumnForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const EditColumnForm = dynamic(
-  () => import('@/components/dataBrowser/EditColumnForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const CreateTableForm = dynamic(
-  () => import('@/components/dataBrowser/CreateTableForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const EditTableForm = dynamic(
-  () => import('@/components/dataBrowser/EditTableForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const EditPermissionsForm = dynamic(
-  () => import('@/components/dataBrowser/EditPermissionsForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
 function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const router = useRouter();
 
   const [
-    {
+    { open: dialogOpen, title: dialogTitle, activeDialog, dialogProps },
-      open: dialogOpen,
-      activeDialogType,
-      dialogProps,
-      title: dialogTitle,
-      payload: dialogPayload,
-    },
     dialogDispatch,
   ] = useReducer(dialogReducer, {
     open: false,
@@ -110,10 +36,9 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const [
     {
       open: drawerOpen,
-      activeDialogType: activeDrawerType,
-      dialogProps: drawerProps,
       title: drawerTitle,
-      payload: drawerPayload,
+      activeDialog: activeDrawer,
+      dialogProps: drawerProps,
     },
     drawerDispatch,
   ] = useReducer(drawerReducer, {
@@ -136,12 +61,9 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const isDialogDirty = useRef(false);
   const [showDirtyConfirmation, setShowDirtyConfirmation] = useState(false);
 
-  const openDialog = useCallback(
+  const openDialog = useCallback((options: OpenDialogOptions) => {
-    <TConfig,>(type: DialogType, config?: DialogConfig<TConfig>) => {
+    dialogDispatch({ type: 'OPEN_DIALOG', payload: options });
-      dialogDispatch({ type: 'OPEN_DIALOG', payload: { type, config } });
+  }, []);
-    },
-    [],
-  );
 
   const closeDialog = useCallback(() => {
     dialogDispatch({ type: 'HIDE_DIALOG' });
@@ -152,12 +74,9 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     dialogDispatch({ type: 'CLEAR_DIALOG_CONTENT' });
   }, []);
 
-  const openDrawer = useCallback(
+  const openDrawer = useCallback((options: OpenDialogOptions) => {
-    <TConfig,>(type: DialogType, config?: DialogConfig<TConfig>) => {
+    drawerDispatch({ type: 'OPEN_DRAWER', payload: options });
-      drawerDispatch({ type: 'OPEN_DRAWER', payload: { type, config } });
+  }, []);
-    },
-    [],
-  );
 
   const closeDrawer = useCallback(() => {
     drawerDispatch({ type: 'HIDE_DRAWER' });
@@ -228,9 +147,6 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     [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
-  // state in the future.
   const onDirtyStateChange = useCallback(
     (dirty: boolean, location: 'drawer' | 'dialog' = 'drawer') => {
       if (location === 'dialog') {
@@ -271,25 +187,6 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     ],
   );
 
-  const sharedDialogProps = {
-    ...dialogPayload,
-    onSubmit: async (values: any) => {
-      await dialogPayload?.onSubmit?.(values);
-
-      closeDialog();
-    },
-    onCancel: closeDialogWithDirtyGuard,
-  };
-
-  const sharedDrawerProps = {
-    onSubmit: async () => {
-      await drawerPayload?.onSubmit();
-
-      closeDrawer();
-    },
-    onCancel: closeDrawerWithDirtyGuard,
-  };
-
   useEffect(() => {
     function handleCloseDrawerAndDialog() {
       if (isDrawerDirty.current || isDialogDirty.current) {
@@ -367,56 +264,20 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         <RetryableErrorBoundary
           errorMessageProps={{ className: 'pt-0 pb-5 px-6' }}
         >
-          {activeDialogType === 'EDIT_WORKSPACE_NAME' && (
+          {isValidElement(activeDialog)
-            <EditWorkspaceNameForm {...sharedDialogProps} />
+            ? cloneElement(activeDialog, {
-          )}
+                ...activeDialog.props,
-
+                location: 'dialog',
-          {activeDialogType === 'CREATE_FOREIGN_KEY' && (
+                onSubmit: async (values?: any) => {
-            <CreateForeignKeyForm {...sharedDialogProps} />
+                  await activeDialog?.props?.onSubmit?.(values);
-          )}
+                  closeDialog();
-
+                },
-          {activeDialogType === 'EDIT_FOREIGN_KEY' && (
+                onCancel: () => {
-            <EditForeignKeyForm {...sharedDialogProps} />
+                  activeDialog?.props?.onCancel?.();
-          )}
+                  closeDialogWithDirtyGuard();
-
+                },
-          {activeDialogType === 'CREATE_ROLE' && (
+              })
-            <CreateRoleForm {...sharedDialogProps} />
+            : null}
-          )}
-
-          {activeDialogType === 'EDIT_ROLE' && (
-            <EditRoleForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_USER' && (
-            <CreateUserForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_PERMISSION_VARIABLE' && (
-            <CreatePermissionVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_PERMISSION_VARIABLE' && (
-            <EditPermissionVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_ENVIRONMENT_VARIABLE' && (
-            <CreateEnvironmentVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_ENVIRONMENT_VARIABLE' && (
-            <EditEnvironmentVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_USER_PASSWORD' && (
-            <EditUserPasswordForm
-              {...sharedDialogProps}
-              user={sharedDialogProps?.user}
-            />
-          )}
-
-          {activeDialogType === 'EDIT_JWT_SECRET' && (
-            <EditJwtSecretForm {...sharedDialogProps} />
-          )}
         </RetryableErrorBoundary>
       </BaseDialog>
 
@@ -436,51 +297,20 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         }}
       >
         <RetryableErrorBoundary>
-          {activeDrawerType === 'CREATE_RECORD' && (
+          {isValidElement(activeDrawer)
-            <CreateRecordForm
+            ? cloneElement(activeDrawer, {
-              {...sharedDrawerProps}
+                ...activeDrawer.props,
-              columns={drawerPayload?.columns}
+                location: 'drawer',
-            />
+                onSubmit: async (values?: any) => {
-          )}
+                  await activeDrawer?.props?.onSubmit?.(values);
-
+                  closeDrawer();
-          {activeDrawerType === 'CREATE_COLUMN' && (
+                },
-            <CreateColumnForm {...sharedDrawerProps} />
+                onCancel: () => {
-          )}
+                  activeDrawer?.props?.onCancel?.();
-
+                  closeDrawerWithDirtyGuard();
-          {activeDrawerType === 'EDIT_COLUMN' && (
+                },
-            <EditColumnForm
+              })
-              {...sharedDrawerProps}
+            : null}
-              column={drawerPayload?.column}
-            />
-          )}
-
-          {activeDrawerType === 'CREATE_TABLE' && (
-            <CreateTableForm
-              {...sharedDrawerProps}
-              schema={drawerPayload?.schema}
-            />
-          )}
-
-          {activeDrawerType === 'EDIT_TABLE' && (
-            <EditTableForm
-              {...sharedDrawerProps}
-              table={drawerPayload?.table}
-              schema={drawerPayload?.schema}
-            />
-          )}
-
-          {activeDrawerType === 'EDIT_PERMISSIONS' && (
-            <EditPermissionsForm
-              {...sharedDrawerProps}
-              disabled={drawerPayload?.disabled}
-              schema={drawerPayload?.schema}
-              table={drawerPayload?.table}
-            />
-          )}
-
-          {activeDrawerType === 'EDIT_USER' && (
-            <EditUserForm {...sharedDrawerProps} {...drawerPayload} />
-          )}
         </RetryableErrorBoundary>
       </Drawer>
 

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

@@ -1,6 +1,6 @@
 import type { CommonDialogProps } from '@/ui/v2/Dialog';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
-import type { DialogConfig, DialogType } from './DialogContext';
+import type { DialogConfig, OpenDialogOptions } from './DialogContext';
 
 export interface DialogState {
   /**
@@ -12,9 +12,13 @@ export interface DialogState {
    */
   open?: boolean;
   /**
-   * Type of the currently active dialog.
+   * Component to render inside the dialog skeleton.
    */
-  activeDialogType?: DialogType;
+  activeDialog?: ReactElement<{
+    location?: 'drawer' | 'dialog';
+    onCancel?: () => void;
+    onSubmit?: (args?: any) => Promise<any> | void;
+  }>;
   /**
    * Props passed to the currently active dialog.
    */
@@ -27,10 +31,7 @@ export interface DialogState {
 }
 
 export type DialogAction =
-  | {
+  | { type: 'OPEN_DIALOG'; payload: OpenDialogOptions }
-      type: 'OPEN_DIALOG';
-      payload: { type: DialogType; config?: DialogConfig };
-    }
   | { type: 'HIDE_DIALOG' }
   | { type: 'CLEAR_DIALOG_CONTENT' };
 
@@ -50,10 +51,9 @@ export function dialogReducer(
       return {
         ...state,
         open: true,
-        activeDialogType: action.payload?.type,
+        title: action.payload.title,
-        dialogProps: action.payload.config?.props,
+        activeDialog: action.payload.component,
-        title: action.payload.config?.title,
+        dialogProps: action.payload.props,
-        payload: action.payload.config?.payload,
       };
     case 'HIDE_DIALOG':
       return {
@@ -64,8 +64,7 @@ export function dialogReducer(
       return {
         ...state,
         title: undefined,
-        payload: undefined,
+        activeDialog: undefined,
-        activeDialogType: undefined,
         dialogProps: undefined,
       };
     default:
@@ -74,10 +73,7 @@ export function dialogReducer(
 }
 
 export type DrawerAction =
-  | {
+  | { type: 'OPEN_DRAWER'; payload: OpenDialogOptions }
-      type: 'OPEN_DRAWER';
-      payload: { type: DialogType; config?: DialogConfig };
-    }
   | { type: 'HIDE_DRAWER' }
   | { type: 'CLEAR_DRAWER_CONTENT' };
 
@@ -97,10 +93,9 @@ export function drawerReducer(
       return {
         ...state,
         open: true,
-        activeDialogType: action.payload?.type,
+        title: action.payload.title,
-        dialogProps: action.payload.config?.props,
+        activeDialog: action.payload.component,
-        title: action.payload.config?.title,
+        dialogProps: action.payload.props,
-        payload: action.payload.config?.payload,
       };
     case 'HIDE_DRAWER':
       return {
@@ -111,8 +106,7 @@ export function drawerReducer(
       return {
         ...state,
         title: undefined,
-        payload: undefined,
+        activeDialog: undefined,
-        activeDialogType: undefined,
         dialogProps: undefined,
       };
     default:

dashboard/src/components/common/FormActivityIndicator/FormActivityIndicator.tsx

@@ -0,0 +1,26 @@
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import type { BoxProps } from '@/ui/v2/Box';
+import Box from '@/ui/v2/Box';
+import { twMerge } from 'tailwind-merge';
+
+export interface FormActivityIndicatorProps extends BoxProps {}
+
+export default function FormActivityIndicator({
+  className,
+  ...props
+}: FormActivityIndicatorProps) {
+  return (
+    <Box
+      {...props}
+      className={twMerge(
+        'grid items-center justify-center px-6 py-4',
+        className,
+      )}
+    >
+      <ActivityIndicator
+        circularProgressProps={{ className: 'w-5 h-5' }}
+        label="Loading form..."
+      />
+    </Box>
+  );
+}

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

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

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

@@ -3,6 +3,7 @@ import ControlledCheckbox from '@/components/common/ControlledCheckbox';
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import InlineCode from '@/components/common/InlineCode';
+import type { DialogFormProps } from '@/types/common';
 import type { ColumnType, DatabaseColumn } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -22,7 +23,7 @@ import ForeignKeyEditor from './ForeignKeyEditor';
 
 export type BaseColumnFormValues = DatabaseColumn;
 
-export interface BaseColumnFormProps {
+export interface BaseColumnFormProps extends DialogFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -60,6 +61,7 @@ export default function BaseColumnForm({
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseColumnFormProps) {
   const { onDirtyStateChange } = useDialog();
 
@@ -91,8 +93,8 @@ export default function BaseColumnForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <Form

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

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
-import type { BaseForeignKeyFormValues } from '@/components/dataBrowser/BaseForeignKeyForm';
+import CreateForeignKeyForm from '@/components/dataBrowser/CreateForeignKeyForm';
+import EditForeignKeyForm from '@/components/dataBrowser/EditForeignKeyForm';
 import type { DatabaseColumn } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -29,7 +30,7 @@ const ForeignKeyEditorInput = forwardRef(
   ) => {
     const { openDialog } = useDialog();
     const { setValue } = useFormContext();
-    const column = useWatch<Partial<DatabaseColumn>>();
+    const column = useWatch() as DatabaseColumn;
     const { foreignKeyRelation } = column;
 
     if (!column.foreignKeyRelation) {
@@ -39,8 +40,8 @@ const ForeignKeyEditorInput = forwardRef(
           className="py-1"
           disabled={!column.name || !column.type}
           ref={ref}
-          onClick={() =>
+          onClick={() => {
-            openDialog('CREATE_FOREIGN_KEY', {
+            openDialog({
               title: (
                 <span className="grid grid-flow-row">
                   <span>Add a Foreign Key Relation</span>
@@ -51,16 +52,18 @@ const ForeignKeyEditorInput = forwardRef(
                   </Text>
                 </span>
               ),
-              payload: {
+              component: (
-                selectedColumn: column.name,
+                <CreateForeignKeyForm
-                availableColumns: [column],
+                  selectedColumn={column.name}
-                onSubmit: (values: BaseForeignKeyFormValues) => {
+                  availableColumns={[column]}
-                  setValue('foreignKeyRelation', values);
+                  onSubmit={(values) => {
-                  onCreateSubmit();
+                    setValue('foreignKeyRelation', values);
-                },
+                    onCreateSubmit();
-              },
+                  }}
-            })
+                />
-          }
+              ),
+            });
+          }}
         >
           Add Foreign Key
         </Button>
@@ -86,20 +89,22 @@ const ForeignKeyEditorInput = forwardRef(
         <div className="grid grid-flow-col">
           <Button
             ref={ref}
-            onClick={() =>
+            onClick={() => {
-              openDialog('EDIT_FOREIGN_KEY', {
+              openDialog({
                 title: 'Edit Foreign Key Relation',
-                payload: {
+                component: (
-                  foreignKeyRelation,
+                  <EditForeignKeyForm
-                  availableColumns: [column],
+                    foreignKeyRelation={foreignKeyRelation}
-                  selectedColumn: column.name,
+                    selectedColumn={column.name}
-                  onSubmit: (values: BaseForeignKeyFormValues) => {
+                    availableColumns={[column]}
-                    setValue('foreignKeyRelation', values);
+                    onSubmit={(values) => {
-                    onEditSubmit();
+                      setValue('foreignKeyRelation', values);
-                  },
+                      onEditSubmit();
-                },
+                    }}
-              })
+                  />
-            }
+                ),
+              });
+            }}
             variant="borderless"
             className="min-w-[initial] py-1 px-2"
           >

dashboard/src/components/dataBrowser/BaseForeignKeyForm/BaseForeignKeyForm.tsx

@@ -2,6 +2,7 @@ import ControlledSelect from '@/components/common/ControlledSelect';
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import useDatabaseQuery from '@/hooks/dataBrowser/useDatabaseQuery';
+import type { DialogFormProps } from '@/types/common';
 import type { DatabaseColumn, ForeignKeyRelation } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -23,7 +24,7 @@ export interface BaseForeignKeyFormValues extends ForeignKeyRelation {
   disableOriginColumn?: boolean;
 }
 
-export interface BaseForeignKeyFormProps {
+export interface BaseForeignKeyFormProps extends DialogFormProps {
   /**
    * Available columns in the table.
    */
@@ -64,6 +65,7 @@ export function BaseForeignKeyForm({
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseForeignKeyFormProps) {
   const { onDirtyStateChange } = useDialog();
 
@@ -86,8 +88,8 @@ export function BaseForeignKeyForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <Form

dashboard/src/components/dataBrowser/BaseRecordForm/BaseRecordForm.tsx

@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import DatabaseRecordInputGroup from '@/components/dataBrowser/DatabaseRecordInputGroup';
+import type { DialogFormProps } from '@/types/common';
 import type {
   ColumnInsertOptions,
   DataBrowserGridColumn,
@@ -10,7 +11,7 @@ import Button from '@/ui/v2/Button';
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-export interface BaseRecordFormProps {
+export interface BaseRecordFormProps extends DialogFormProps {
   /**
    * The columns of the table.
    */
@@ -36,6 +37,7 @@ export default function BaseRecordForm({
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseRecordFormProps) {
   const { onDirtyStateChange } = useDialog();
   const { requiredColumns, optionalColumns } = columns.reduce(
@@ -70,8 +72,8 @@ export default function BaseRecordForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   // Stores columns in a map to have constant time lookup. This is necessary
   // for tables with many columns.

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

@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import { baseColumnValidationSchema } from '@/components/dataBrowser/BaseColumnForm';
+import type { DialogFormProps } from '@/types/common';
 import type { DatabaseTable, ForeignKeyRelation } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -30,7 +31,7 @@ export interface BaseTableFormValues
   foreignKeyRelations?: ForeignKeyRelation[];
 }
 
-export interface BaseTableFormProps {
+export interface BaseTableFormProps extends DialogFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -99,7 +100,9 @@ function NameInput() {
 function FormFooter({
   onCancel,
   submitButtonText,
-}: Pick<BaseTableFormProps, 'onCancel' | 'submitButtonText'>) {
+  location,
+}: Pick<BaseTableFormProps, 'onCancel' | 'submitButtonText'> &
+  Pick<DialogFormProps, 'location'>) {
   const { onDirtyStateChange } = useDialog();
   const { isSubmitting, dirtyFields } = useFormState();
 
@@ -108,8 +111,8 @@ function FormFooter({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <Box className="grid flex-shrink-0 grid-flow-col justify-between gap-3 border-t-1 p-2">
@@ -135,6 +138,7 @@ function FormFooter({
 }
 
 export default function BaseTableForm({
+  location,
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
@@ -168,7 +172,11 @@ export default function BaseTableForm({
         <ForeignKeyEditorSection />
       </div>
 
-      <FormFooter onCancel={onCancel} submitButtonText={submitButtonText} />
+      <FormFooter
+        onCancel={onCancel}
+        submitButtonText={submitButtonText}
+        location={location}
+      />
     </Form>
   );
 }

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

@@ -1,5 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import type { BaseForeignKeyFormValues } from '@/components/dataBrowser/BaseForeignKeyForm';
+import CreateForeignKeyForm from '@/components/dataBrowser/CreateForeignKeyForm';
+import EditForeignKeyForm from '@/components/dataBrowser/EditForeignKeyForm';
 import type { DatabaseColumn, ForeignKeyRelation } from '@/types/dataBrowser';
 import Button from '@/ui/v2/Button';
 import PlusIcon from '@/ui/v2/icons/PlusIcon';
@@ -68,18 +70,19 @@ export default function ForeignKeyEditorSection() {
           onEdit={() => {
             const primaryKeyIndex = getValues('primaryKeyIndex');
 
-            openDialog('EDIT_FOREIGN_KEY', {
+            openDialog({
               title: 'Edit Foreign Key Relation',
-              payload: {
+              component: (
-                foreignKeyRelation: fields[index],
+                <EditForeignKeyForm
-                availableColumns: columns.map((column, columnIndex) =>
+                  foreignKeyRelation={fields[index] as ForeignKeyRelation}
-                  columnIndex === primaryKeyIndex
+                  availableColumns={columns.map((column, columnIndex) =>
-                    ? { ...column, isPrimary: true }
+                    columnIndex === primaryKeyIndex
-                    : column,
+                      ? { ...column, isPrimary: true }
-                ),
+                      : column,
-                onSubmit: (values: BaseForeignKeyFormValues) =>
+                  )}
-                  handleEdit(values, index),
+                  onSubmit={(values) => handleEdit(values, index)}
-              },
+                />
+              ),
             });
           }}
           onDelete={() => remove(index)}
@@ -105,7 +108,7 @@ export default function ForeignKeyEditorSection() {
         onClick={() => {
           const primaryKeyIndex = getValues('primaryKeyIndex');
 
-          openDialog('CREATE_FOREIGN_KEY', {
+          openDialog({
             title: (
               <span className="grid grid-flow-row">
                 <span>Add a Foreign Key Relation</span>
@@ -116,14 +119,16 @@ export default function ForeignKeyEditorSection() {
                 </Text>
               </span>
             ),
-            payload: {
+            component: (
-              availableColumns: columns.map((column, index) =>
+              <CreateForeignKeyForm
-                index === primaryKeyIndex
+                availableColumns={columns.map((column, index) =>
-                  ? { ...column, isPrimary: true }
+                  index === primaryKeyIndex
-                  : column,
+                    ? { ...column, isPrimary: true }
-              ),
+                    : column,
-              onSubmit: handleCreate,
+                )}
-            },
+                onSubmit={handleCreate}
+              />
+            ),
           });
         }}
       >

dashboard/src/components/dataBrowser/CreateColumnForm/CreateColumnForm.tsx

@@ -15,11 +15,11 @@ import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateColumnFormProps
-  extends Pick<BaseColumnFormProps, 'onCancel'> {
+  extends Pick<BaseColumnFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: () => Promise<void>;
+  onSubmit?: (args?: any) => Promise<any>;
 }
 
 export default function CreateColumnForm({

dashboard/src/components/dataBrowser/CreateForeignKeyForm/CreateForeignKeyForm.tsx

@@ -13,7 +13,10 @@ import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateForeignKeyFormProps
-  extends Pick<BaseForeignKeyFormProps, 'onCancel' | 'availableColumns'> {
+  extends Pick<
+    BaseForeignKeyFormProps,
+    'onCancel' | 'availableColumns' | 'location'
+  > {
   /**
    * Column selected by default.
    */
@@ -21,7 +24,7 @@ export interface CreateForeignKeyFormProps
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void>;
+  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void> | void;
 }
 
 export default function CreateForeignKeyForm({
@@ -51,9 +54,7 @@ export default function CreateForeignKeyForm({
     setError(undefined);
 
     try {
-      if (onSubmit) {
+      await onSubmit?.(values);
-        await onSubmit(values);
-      }
     } catch (submitError) {
       if (submitError && submitError instanceof Error) {
         setError(submitError);

dashboard/src/components/dataBrowser/CreateRecordForm/CreateRecordForm.tsx

@@ -10,11 +10,11 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateRecordFormProps
-  extends Pick<BaseRecordFormProps, 'columns' | 'onCancel'> {
+  extends Pick<BaseRecordFormProps, 'columns' | 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: () => Promise<void>;
+  onSubmit?: (args?: any) => Promise<any>;
 }
 
 export default function CreateRecordForm({

dashboard/src/components/dataBrowser/CreateTableForm/CreateTableForm.tsx

@@ -17,7 +17,7 @@ import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateTableFormProps
-  extends Pick<BaseTableFormProps, 'onCancel'> {
+  extends Pick<BaseTableFormProps, 'onCancel' | 'location'> {
   /**
    * Schema where the table should be created.
    */
@@ -25,7 +25,7 @@ export interface CreateTableFormProps
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: () => Promise<void>;
+  onSubmit?: (args?: any) => Promise<any>;
 }
 
 export default function CreateTableForm({

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

@@ -5,6 +5,7 @@ import DataGridDateCell from '@/components/common/DataGridDateCell';
 import DataGridNumericCell from '@/components/common/DataGridNumericCell';
 import DataGridTextCell from '@/components/common/DataGridTextCell';
 import { useDialog } from '@/components/common/DialogProvider';
+import FormActivityIndicator from '@/components/common/FormActivityIndicator';
 import InlineCode from '@/components/common/InlineCode';
 import DataBrowserEmptyState from '@/components/dataBrowser/DataBrowserEmptyState';
 import DataBrowserGridControls from '@/components/dataBrowser/DataBrowserGridControls';
@@ -28,9 +29,25 @@ import {
 } from '@/utils/dataBrowser/postgresqlConstants';
 import { isSchemaLocked } from '@/utils/dataBrowser/schemaHelpers';
 import { useQueryClient } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+const CreateColumnForm = dynamic(
+  () => import('@/components/dataBrowser/CreateColumnForm'),
+  { ssr: false, loading: () => <FormActivityIndicator /> },
+);
+
+const EditColumnForm = dynamic(
+  () => import('@/components/dataBrowser/EditColumnForm'),
+  { ssr: false, loading: () => <FormActivityIndicator /> },
+);
+
+const CreateRecordForm = dynamic(
+  () => import('@/components/dataBrowser/CreateRecordForm'),
+  { ssr: false, loading: () => <FormActivityIndicator /> },
+);
+
 export interface DataBrowserGridProps extends Partial<DataGridProps<any>> {}
 
 export function createDataGridColumn(
@@ -273,33 +290,36 @@ export default function DataBrowserGrid({
   const memoizedData = useMemo(() => rows, [rows]);
 
   async function handleInsertRowClick() {
-    openDrawer('CREATE_RECORD', {
+    openDrawer({
       title: 'Insert a New Row',
-      payload: {
+      component: (
-        columns: memoizedColumns,
+        <CreateRecordForm
-        onSubmit: refetch,
+          // TODO: Create proper typings for data browser columns
-      },
+          columns={memoizedColumns as unknown as DataBrowserGridColumn[]}
+          onSubmit={refetch}
+        />
+      ),
     });
   }
 
   async function handleInsertColumnClick() {
-    openDrawer('CREATE_COLUMN', {
+    openDrawer({
       title: 'Insert a New Column',
-      payload: {
+      component: <CreateColumnForm onSubmit={refetch} />,
-        onSubmit: refetch,
-      },
     });
   }
 
   async function handleEditColumnClick(
     column: DataBrowserGridColumn<NormalizedQueryDataRow>,
   ) {
-    openDrawer('EDIT_COLUMN', {
+    openDrawer({
       title: 'Edit Column',
-      payload: {
+      component: (
-        column,
+        <EditColumnForm
-        onSubmit: () => queryClient.refetchQueries([currentTablePath]),
+          column={column}
-      },
+          onSubmit={() => queryClient.refetchQueries([currentTablePath])}
+        />
+      ),
     });
   }
 

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

@@ -1,4 +1,5 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import FormActivityIndicator from '@/components/common/FormActivityIndicator';
 import InlineCode from '@/components/common/InlineCode';
 import NavLink from '@/components/common/NavLink';
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
@@ -31,11 +32,36 @@ import Select from '@/ui/v2/Select';
 import Text from '@/ui/v2/Text';
 import { isSchemaLocked } from '@/utils/dataBrowser/schemaHelpers';
 import { useQueryClient } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
+const CreateTableForm = dynamic(
+  () => import('@/components/dataBrowser/CreateTableForm'),
+  {
+    ssr: false,
+    loading: () => <FormActivityIndicator />,
+  },
+);
+
+const EditTableForm = dynamic(
+  () => import('@/components/dataBrowser/EditTableForm'),
+  {
+    ssr: false,
+    loading: () => <FormActivityIndicator />,
+  },
+);
+
+const EditPermissionsForm = dynamic(
+  () => import('@/components/dataBrowser/EditPermissionsForm'),
+  {
+    ssr: false,
+    loading: () => <FormActivityIndicator />,
+  },
+);
+
 export interface DataBrowserSidebarProps extends Omit<BoxProps, 'children'> {
   /**
    * Function to be called when a sidebar item is clicked.
@@ -200,7 +226,7 @@ function DataBrowserSidebarContent({
     table: string,
     disabled?: boolean,
   ) {
-    openDrawer('EDIT_PERMISSIONS', {
+    openDrawer({
       title: (
         <span className="inline-grid grid-flow-col items-center gap-2">
           Permissions
@@ -208,22 +234,18 @@ function DataBrowserSidebarContent({
           <Chip label="Preview" size="small" color="info" component="span" />
         </span>
       ),
+      component: (
+        <EditPermissionsForm
+          disabled={disabled}
+          schema={schema}
+          table={table}
+        />
+      ),
       props: {
         PaperProps: {
           className: 'lg:w-[65%] lg:max-w-7xl',
         },
       },
-      payload: {
-        onSubmit: async () => {
-          await queryClient.refetchQueries([
-            `${dataSourceSlug}.${schema}.${table}`,
-          ]);
-          await refetch();
-        },
-        disabled,
-        schema,
-        table,
-      },
     });
   }
 
@@ -296,9 +318,11 @@ function DataBrowserSidebarContent({
           endIcon={<PlusIcon />}
           className="mt-1 w-full justify-between px-2"
           onClick={() => {
-            openDrawer('CREATE_TABLE', {
+            openDrawer({
               title: 'Create a New Table',
-              payload: { onSubmit: refetch, schema: selectedSchema },
+              component: (
+                <CreateTableForm onSubmit={refetch} schema={selectedSchema} />
+              ),
             });
 
             onSidebarItemClick();
@@ -376,18 +400,20 @@ function DataBrowserSidebarContent({
                                 key="edit-table"
                                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
                                 onClick={() =>
-                                  openDrawer('EDIT_TABLE', {
+                                  openDrawer({
                                     title: 'Edit Table',
-                                    payload: {
+                                    component: (
-                                      onSubmit: async () => {
+                                      <EditTableForm
-                                        await queryClient.refetchQueries([
+                                        onSubmit={async () => {
-                                          `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
+                                          await queryClient.refetchQueries([
-                                        ]);
+                                            `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
-                                        await refetch();
+                                          ]);
-                                      },
+                                          await refetch();
-                                      schema: table.table_schema,
+                                        }}
-                                      table,
+                                        schema={table.table_schema}
-                                    },
+                                        table={table}
+                                      />
+                                    ),
                                   })
                                 }
                               >

dashboard/src/components/dataBrowser/EditColumnForm/EditColumnForm.tsx

@@ -18,7 +18,7 @@ import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface EditColumnFormProps
-  extends Pick<BaseColumnFormProps, 'onCancel'> {
+  extends Pick<BaseColumnFormProps, 'onCancel' | 'location'> {
   /**
    * Column to be edited.
    */

dashboard/src/components/dataBrowser/EditForeignKeyForm/EditForeignKeyForm.tsx

@@ -14,7 +14,10 @@ import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface EditForeignKeyFormProps
-  extends Pick<BaseForeignKeyFormProps, 'onCancel' | 'availableColumns'> {
+  extends Pick<
+    BaseForeignKeyFormProps,
+    'onCancel' | 'availableColumns' | 'location'
+  > {
   /**
    * Foreign key relation to be edited.
    */
@@ -26,7 +29,7 @@ export interface EditForeignKeyFormProps
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void>;
+  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void> | void;
 }
 
 export default function EditForeignKeyForm({
@@ -57,9 +60,7 @@ export default function EditForeignKeyForm({
     setError(undefined);
 
     try {
-      if (onSubmit) {
+      await onSubmit?.(values);
-        await onSubmit(values);
-      }
     } catch (submitError) {
       if (submitError && submitError instanceof Error) {
         setError(submitError);

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

@@ -3,6 +3,7 @@ import useMetadataQuery from '@/hooks/dataBrowser/useMetadataQuery';
 import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import type { DialogFormProps } from '@/types/common';
 import type {
   DatabaseAccessLevel,
   DatabaseAction,
@@ -30,7 +31,7 @@ import { twMerge } from 'tailwind-merge';
 import RolePermissionEditorForm from './RolePermissionEditorForm';
 import RolePermissionsRow from './RolePermissionsRow';
 
-export interface EditPermissionsFormProps {
+export interface EditPermissionsFormProps extends DialogFormProps {
   /**
    * Determines whether the form is disabled or not.
    */
@@ -54,6 +55,7 @@ export default function EditPermissionsForm({
   schema,
   table,
   onCancel,
+  location,
 }: EditPermissionsFormProps) {
   const [role, setRole] = useState<string>();
   const [action, setAction] = useState<DatabaseAction>();
@@ -181,6 +183,7 @@ export default function EditPermissionsForm({
 
     return (
       <RolePermissionEditorForm
+        location={location}
         resourceVersion={metadata?.resourceVersion}
         disabled={disabled}
         schema={schema}

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

@@ -2,6 +2,7 @@ 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 { DialogFormProps } from '@/types/common';
 import type {
   DatabaseAction,
   HasuraMetadataPermission,
@@ -72,7 +73,7 @@ export interface RolePermissionEditorFormValues {
   computedFields?: string[];
 }
 
-export interface RolePermissionEditorFormProps {
+export interface RolePermissionEditorFormProps extends DialogFormProps {
   /**
    * Determines whether or not the form is disabled.
    */
@@ -169,6 +170,7 @@ export default function RolePermissionEditorForm({
   onCancel,
   permission,
   disabled,
+  location,
 }: RolePermissionEditorFormProps) {
   const queryClient = useQueryClient();
   const {
@@ -214,8 +216,8 @@ export default function RolePermissionEditorForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   async function handleSubmit(values: RolePermissionEditorFormValues) {
     const managePermissionPromise = managePermission({
@@ -261,7 +263,7 @@ export default function RolePermissionEditorForm({
       getToastStyleProps(),
     );
 
-    onDirtyStateChange(false, 'drawer');
+    onDirtyStateChange(false, location);
     onSubmit?.();
   }
 
@@ -270,7 +272,7 @@ export default function RolePermissionEditorForm({
       openDirtyConfirmation({
         props: {
           onPrimaryAction: () => {
-            onDirtyStateChange(false, 'drawer');
+            onDirtyStateChange(false, location);
             onCancel?.();
           },
         },
@@ -300,7 +302,7 @@ export default function RolePermissionEditorForm({
       getToastStyleProps(),
     );
 
-    onDirtyStateChange(false, 'drawer');
+    onDirtyStateChange(false, location);
     onSubmit?.();
   }
 

dashboard/src/components/dataBrowser/EditTableForm/EditTableForm.tsx

@@ -23,7 +23,7 @@ import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface EditTableFormProps
-  extends Pick<BaseTableFormProps, 'onCancel'> {
+  extends Pick<BaseTableFormProps, 'onCancel' | 'location'> {
   /**
    * Schema where the table is located.
    */

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

@@ -1,4 +1,6 @@
+import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import { slugifyString } from '@/utils/helpers';
@@ -11,11 +13,12 @@ import {
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-export interface EditWorkspaceNameFormProps {
+export interface EditWorkspaceNameFormProps extends DialogFormProps {
   /**
    * The current workspace name if this is an edit operation.
    */
@@ -44,14 +47,7 @@ export interface EditWorkspaceNameFormProps {
   onCancel?: VoidFunction;
 }
 
-export interface EditWorkspaceNameFormValues {
+const validationSchema = Yup.object({
-  /**
-   * 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.')
@@ -71,14 +67,20 @@ const validationSchema = Yup.object().shape({
     ),
 });
 
-export default function EditWorkspaceName({
+export type EditWorkspaceNameFormValues = Yup.InferType<
+  typeof validationSchema
+>;
+
+export default function EditWorkspaceNameForm({
   disabled,
   onSubmit,
   onCancel,
   currentWorkspaceName,
   currentWorkspaceId,
   submitButtonText = 'Create',
+  location,
 }: EditWorkspaceNameFormProps) {
+  const { onDirtyStateChange } = useDialog();
   const currentUser = useUserData();
   const [insertWorkspace, { client }] = useInsertWorkspaceMutation();
   const [updateWorkspaceName] = useUpdateWorkspaceMutation({
@@ -105,6 +107,10 @@ export default function EditWorkspaceName({
   } = form;
   const isDirty = Object.keys(dirtyFields).length > 0;
 
+  useEffect(() => {
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
+
   async function handleSubmit({
     newWorkspaceName,
   }: EditWorkspaceNameFormValues) {
@@ -112,6 +118,8 @@ export default function EditWorkspaceName({
 
     try {
       if (currentWorkspaceId) {
+        onDirtyStateChange(false, location);
+
         // 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.
@@ -186,6 +194,9 @@ export default function EditWorkspaceName({
       include: ['getOneUser'],
     });
 
+    // The form has been submitted, it's not dirty anymore
+    onDirtyStateChange(false, location);
+
     await router.push(slug);
     onSubmit?.();
   }
@@ -194,9 +205,9 @@ export default function EditWorkspaceName({
     <FormProvider {...form}>
       <Form
         onSubmit={handleSubmit}
-        className="flex flex-col content-between flex-auto pt-2 pb-6 overflow-hidden"
+        className="flex flex-auto flex-col content-between overflow-hidden pt-2 pb-6"
       >
-        <div className="flex-auto px-6 overflow-y-auto">
+        <div className="flex-auto overflow-y-auto px-6">
           <Input
             {...register('newWorkspaceName')}
             error={Boolean(errors.newWorkspaceName?.message)}

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

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import Text from '@/ui/v2/Text';
@@ -26,7 +27,7 @@ export interface BaseEnvironmentVariableFormValues {
   prodValue: string;
 }
 
-export interface BaseEnvironmentVariableFormProps {
+export interface BaseEnvironmentVariableFormProps extends DialogFormProps {
   /**
    * Determines the mode of the form.
    *
@@ -89,6 +90,7 @@ export default function BaseEnvironmentVariableForm({
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseEnvironmentVariableFormProps) {
   const { onDirtyStateChange } = useDialog();
   const form = useFormContext<BaseEnvironmentVariableFormValues>();
@@ -103,8 +105,8 @@ export default function BaseEnvironmentVariableForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <div className="grid grid-flow-row gap-6 px-6 pb-6">

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

@@ -17,7 +17,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 export interface CreateEnvironmentVariableFormProps
-  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel'> {
+  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */

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

@@ -18,7 +18,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 export interface EditEnvironmentVariableFormProps
-  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel'> {
+  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel' | 'location'> {
   /**
    * The environment variable to edit.
    */

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

@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
@@ -14,7 +15,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-export interface EditJwtSecretFormProps {
+export interface EditJwtSecretFormProps extends DialogFormProps {
   /**
    * Initial JWT secret.
    */
@@ -39,14 +40,7 @@ export interface EditJwtSecretFormProps {
   onCancel?: VoidFunction;
 }
 
-export interface EditJwtSecretFormValues {
+const validationSchema = Yup.object({
-  /**
-   * JWT secret.
-   */
-  jwtSecret: string;
-}
-
-const validationSchema = Yup.object().shape({
   jwtSecret: Yup.string()
     .nullable()
     .required('This field is required.')
@@ -60,12 +54,15 @@ const validationSchema = Yup.object().shape({
     }),
 });
 
+export type EditJwtSecretFormValues = Yup.InferType<typeof validationSchema>;
+
 export default function EditJwtSecretForm({
   disabled,
   jwtSecret,
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: EditJwtSecretFormProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const [updateApplication] = useUpdateApplicationMutation({
@@ -89,8 +86,8 @@ export default function EditJwtSecretForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   async function handleSubmit(values: EditJwtSecretFormValues) {
     const updateAppPromise = updateApplication({
@@ -121,7 +118,7 @@ export default function EditJwtSecretForm({
         onSubmit={handleSubmit}
         className="flex flex-auto flex-col content-between overflow-hidden pb-4"
       >
-        <div className="px-6 overflow-y-auto flex-auto">
+        <div className="flex-auto overflow-y-auto px-6">
           <Input
             {...register('jwtSecret')}
             error={Boolean(errors.jwtSecret?.message)}

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

@@ -1,4 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import CreateEnvironmentVariableForm from '@/components/settings/environmentVariables/CreateEnvironmentVariableForm';
+import EditEnvironmentVariableForm from '@/components/settings/environmentVariables/EditEnvironmentVariableForm';
 import SettingsContainer from '@/components/settings/SettingsContainer';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { EnvironmentVariable } from '@/types/application';
@@ -23,9 +25,9 @@ import { Fragment } from 'react';
 import toast from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 
-export interface PermissionVariableSettingsFormValues {
+export interface EnvironmentVariableSettingsFormValues {
   /**
-   * Permission variables.
+   * Environment variables.
    */
   environmentVariables: EnvironmentVariable[];
 }
@@ -75,8 +77,9 @@ export default function EnvironmentVariableSettings() {
   }
 
   function handleOpenCreator() {
-    openDialog('CREATE_ENVIRONMENT_VARIABLE', {
+    openDialog({
       title: 'Create Environment Variable',
+      component: <CreateEnvironmentVariableForm />,
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'gap-2 max-w-sm' },
@@ -85,9 +88,13 @@ export default function EnvironmentVariableSettings() {
   }
 
   function handleOpenEditor(originalVariable: EnvironmentVariable) {
-    openDialog('EDIT_ENVIRONMENT_VARIABLE', {
+    openDialog({
-      title: 'Edit Environment Variables',
+      title: 'Edit Environment Variable',
-      payload: { originalEnvironmentVariable: originalVariable },
+      component: (
+        <EditEnvironmentVariableForm
+          originalEnvironmentVariable={originalVariable}
+        />
+      ),
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'gap-2 max-w-sm' },

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

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import InlineCode from '@/components/common/InlineCode';
+import EditJwtSecretForm from '@/components/settings/environmentVariables/EditJwtSecretForm';
 import SettingsContainer from '@/components/settings/SettingsContainer';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useAppClient } from '@/hooks/useAppClient';
@@ -50,7 +51,7 @@ export default function SystemEnvironmentVariableSettings() {
   }
 
   function showViewJwtSecretModal() {
-    openDialog('EDIT_JWT_SECRET', {
+    openDialog({
       title: (
         <span className="grid grid-flow-row">
           <span>Auth JWT Secret</span>
@@ -61,15 +62,17 @@ export default function SystemEnvironmentVariableSettings() {
           </Text>
         </span>
       ),
-      payload: {
+      component: (
-        disabled: true,
+        <EditJwtSecretForm
-        jwtSecret: data?.app?.hasuraGraphqlJwtSecret,
+          disabled
-      },
+          jwtSecret={data?.app?.hasuraGraphqlJwtSecret}
+        />
+      ),
     });
   }
 
   function showEditJwtSecretModal() {
-    openDialog('EDIT_JWT_SECRET', {
+    openDialog({
       title: (
         <span className="grid grid-flow-row">
           <span>Edit JWT Secret</span>
@@ -80,9 +83,9 @@ export default function SystemEnvironmentVariableSettings() {
           </Text>
         </span>
       ),
-      payload: {
+      component: (
-        jwtSecret: data?.app?.hasuraGraphqlJwtSecret,
+        <EditJwtSecretForm jwtSecret={data?.app?.hasuraGraphqlJwtSecret} />
-      },
+      ),
     });
   }
 

dashboard/src/components/settings/permissions/BasePermissionVariableForm/BasePermissionVariableForm.tsx

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import Text from '@/ui/v2/Text';
@@ -7,18 +8,7 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
-export interface BasePermissionVariableFormValues {
+export interface BasePermissionVariableFormProps extends DialogFormProps {
-  /**
-   * Permission variable key.
-   */
-  key: string;
-  /**
-   * Permission variable value.
-   */
-  value: string;
-}
-
-export interface BasePermissionVariableFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -40,10 +30,15 @@ export const basePermissionVariableValidationSchema = Yup.object({
   value: Yup.string().required('This field is required.'),
 });
 
+export type BasePermissionVariableFormValues = Yup.InferType<
+  typeof basePermissionVariableValidationSchema
+>;
+
 export default function BasePermissionVariableForm({
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BasePermissionVariableFormProps) {
   const { onDirtyStateChange } = useDialog();
   const form = useFormContext<BasePermissionVariableFormValues>();
@@ -56,8 +51,8 @@ export default function BasePermissionVariableForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <div className="grid grid-flow-row gap-2 px-6 pb-6">

dashboard/src/components/settings/permissions/CreatePermissionVariableForm/CreatePermissionVariableForm.tsx

@@ -19,7 +19,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 export interface CreatePermissionVariableFormProps
-  extends Pick<BasePermissionVariableFormProps, 'onCancel'> {
+  extends Pick<BasePermissionVariableFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */

dashboard/src/components/settings/permissions/EditPermissionVariableForm/EditPermissionVariableForm.tsx

@@ -20,7 +20,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 export interface EditPermissionVariableFormProps
-  extends Pick<BasePermissionVariableFormProps, 'onCancel'> {
+  extends Pick<BasePermissionVariableFormProps, 'onCancel' | 'location'> {
   /**
    * The permission variable to be edited.
    */

dashboard/src/components/settings/permissions/PermissionVariableSettings/PermissionVariableSettings.tsx

@@ -1,4 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import CreatePermissionVariableForm from '@/components/settings/permissions/CreatePermissionVariableForm';
+import EditPermissionVariableForm from '@/components/settings/permissions/EditPermissionVariableForm';
 import SettingsContainer from '@/components/settings/SettingsContainer';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { CustomClaim } from '@/types/application';
@@ -88,8 +90,9 @@ export default function PermissionVariableSettings() {
   }
 
   function handleOpenCreator() {
-    openDialog('CREATE_PERMISSION_VARIABLE', {
+    openDialog({
       title: 'Create Permission Variable',
+      component: <CreatePermissionVariableForm />,
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'max-w-sm' },
@@ -98,9 +101,11 @@ export default function PermissionVariableSettings() {
   }
 
   function handleOpenEditor(originalVariable: CustomClaim) {
-    openDialog('EDIT_PERMISSION_VARIABLE', {
+    openDialog({
       title: 'Edit Permission Variable',
-      payload: { originalVariable },
+      component: (
+        <EditPermissionVariableForm originalVariable={originalVariable} />
+      ),
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'max-w-sm' },
@@ -136,7 +141,7 @@ export default function PermissionVariableSettings() {
       description="Permission variables are used to define permission rules in the GraphQL API."
       docsLink="https://docs.nhost.io/graphql/permissions"
       rootClassName="gap-0"
-      className="px-0 my-2"
+      className="my-2 px-0"
       slotProps={{ submitButton: { className: 'invisible' } }}
     >
       <Box className="grid grid-cols-2 border-b-1 px-4 py-3">
@@ -149,7 +154,7 @@ export default function PermissionVariableSettings() {
           {availablePermissionVariables.map((customClaim, index) => (
             <Fragment key={customClaim.key}>
               <ListItem.Root
-                className="px-4 grid grid-cols-2"
+                className="grid grid-cols-2 px-4"
                 secondaryAction={
                   <Dropdown.Root>
                     <Tooltip
@@ -215,7 +220,7 @@ export default function PermissionVariableSettings() {
                     <>
                       X-Hasura-{customClaim.key}{' '}
                       {customClaim.isSystemClaim && (
-                        <LockIcon className="w-4 h-4" />
+                        <LockIcon className="h-4 w-4" />
                       )}
                     </>
                   }
@@ -237,7 +242,7 @@ export default function PermissionVariableSettings() {
         </List>
 
         <Button
-          className="justify-self-start mx-4"
+          className="mx-4 justify-self-start"
           variant="borderless"
           startIcon={<PlusIcon />}
           onClick={handleOpenCreator}

dashboard/src/components/settings/roles/BaseRoleForm/BaseRoleForm.tsx

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import type { DialogFormProps } from '@/types/common';
 import { Alert } from '@/ui/Alert';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
@@ -8,14 +9,7 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
-export interface BaseRoleFormValues {
+export interface BaseRoleFormProps extends DialogFormProps {
-  /**
-   * The name of the role.
-   */
-  name: string;
-}
-
-export interface BaseRoleFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -36,10 +30,15 @@ export const baseRoleFormValidationSchema = Yup.object({
   name: Yup.string().required('This field is required.'),
 });
 
+export type BaseRoleFormValues = Yup.InferType<
+  typeof baseRoleFormValidationSchema
+>;
+
 export default function BaseRoleForm({
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseRoleFormProps) {
   const { onDirtyStateChange } = useDialog();
   const form = useFormContext<BaseRoleFormValues>();
@@ -52,8 +51,8 @@ export default function BaseRoleForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <div className="grid grid-flow-row gap-3 px-6 pb-6">

dashboard/src/components/settings/roles/CreateRoleForm/CreateRoleForm.tsx

@@ -18,7 +18,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 export interface CreateRoleFormProps
-  extends Pick<BaseRoleFormProps, 'onCancel'> {
+  extends Pick<BaseRoleFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */

dashboard/src/components/settings/roles/EditRoleForm/EditRoleForm.tsx

@@ -18,7 +18,8 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
-export interface EditRoleFormProps extends Pick<BaseRoleFormProps, 'onCancel'> {
+export interface EditRoleFormProps
+  extends Pick<BaseRoleFormProps, 'onCancel' | 'location'> {
   /**
    * The role to be edited.
    */

dashboard/src/components/settings/roles/RoleSettings/RoleSettings.tsx

@@ -1,4 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import CreateRoleForm from '@/components/settings/roles/CreateRoleForm';
+import EditRoleForm from '@/components/settings/roles/EditRoleForm';
 import SettingsContainer from '@/components/settings/SettingsContainer';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { Role } from '@/types/application';
@@ -108,8 +110,9 @@ export default function RoleSettings() {
   }
 
   function handleOpenCreator() {
-    openDialog('CREATE_ROLE', {
+    openDialog({
       title: 'Create Allowed Role',
+      component: <CreateRoleForm />,
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'max-w-sm' },
@@ -118,9 +121,9 @@ export default function RoleSettings() {
   }
 
   function handleOpenEditor(originalRole: Role) {
-    openDialog('EDIT_ROLE', {
+    openDialog({
       title: 'Edit Allowed Role',
-      payload: { originalRole },
+      component: <EditRoleForm originalRole={originalRole} />,
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'max-w-sm' },

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

@@ -1,4 +1,5 @@
 import Backdrop from '@/ui/v2/Backdrop';
+import type { DialogTitleProps } from '@/ui/v2/Dialog';
 import { DialogTitle } from '@/ui/v2/Dialog';
 import { styled } from '@mui/material';
 import type { DrawerProps as MaterialDrawerProps } from '@mui/material/Drawer';
@@ -10,6 +11,10 @@ export interface DrawerProps extends Omit<MaterialDrawerProps, 'title'> {
    * Title of the drawer.
    */
   title?: ReactNode;
+  /**
+   * Props to pass to the title component.
+   */
+  titleProps?: DialogTitleProps;
   /**
    * Determines whether or not a close button is hidden in the drawer.
    *
@@ -33,13 +38,18 @@ function Drawer({
   children,
   onClose,
   title,
+  titleProps: { sx: titleSx, ...titleProps } = {},
   ...props
 }: DrawerProps) {
   return (
     <StyledDrawer components={{ Backdrop }} onClose={onClose} {...props}>
       {onClose && !hideCloseButton && (
         <DialogTitle
-          sx={{ padding: (theme) => theme.spacing(2.5, 3) }}
+          {...titleProps}
+          sx={[
+            ...(Array.isArray(titleSx) ? titleSx : [titleSx]),
+            { padding: (theme) => theme.spacing(2.5, 3) },
+          ]}
           onClose={(event) => onClose(event, 'escapeKeyDown')}
         >
           {title}

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

@@ -1,5 +1,7 @@
+import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import type { DialogFormProps } from '@/types/common';
 import { Alert } from '@/ui/Alert';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
@@ -7,23 +9,12 @@ import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { yupResolver } from '@hookform/resolvers/yup';
 import fetch from 'cross-fetch';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-export interface CreateUserFormValues {
+export interface CreateUserFormProps extends DialogFormProps {
-  /**
-   * Email of the user to add to this project.
-   */
-  email: string;
-  /**
-   * Password for the user.
-   */
-  password: string;
-}
-
-export interface CreateUserFormProps {
   /**
    * Function to be called when the operation is cancelled.
    */
@@ -31,10 +22,10 @@ export interface CreateUserFormProps {
   /**
    * Function to be called when the submit is successful.
    */
-  onSuccess?: VoidFunction;
+  onSubmit?: VoidFunction | ((args?: any) => Promise<any>);
 }
 
-export const CreateUserFormValidationSchema = Yup.object({
+export const validationSchema = Yup.object({
   email: Yup.string()
     .min(5, 'Email must be at least 5 characters long.')
     .email('Invalid email address')
@@ -45,10 +36,14 @@ export const CreateUserFormValidationSchema = Yup.object({
     .required('This field is required.'),
 });
 
+export type CreateUserFormValues = Yup.InferType<typeof validationSchema>;
+
 export default function CreateUserForm({
-  onSuccess,
+  onSubmit,
   onCancel,
+  location,
 }: CreateUserFormProps) {
+  const { onDirtyStateChange } = useDialog();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const [createUserFormError, setCreateUserFormError] = useState<Error | null>(
     null,
@@ -57,15 +52,21 @@ export default function CreateUserForm({
   const form = useForm<CreateUserFormValues>({
     defaultValues: {},
     reValidateMode: 'onSubmit',
-    resolver: yupResolver(CreateUserFormValidationSchema),
+    resolver: yupResolver(validationSchema),
   });
 
   const {
     register,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, dirtyFields },
     setError,
   } = form;
 
+  const isDirty = Object.keys(dirtyFields).length > 0;
+
+  useEffect(() => {
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
+
   const baseAuthUrl = generateAppServiceUrl(
     currentApplication?.subdomain,
     currentApplication?.region?.awsName,
@@ -107,9 +108,9 @@ export default function CreateUserForm({
         getToastStyleProps(),
       );
 
-      onSuccess?.();
+      onSubmit?.();
-    } catch {
+    } catch (error) {
-      // Note: Error is already handled by toast.promise
+      // Note: The error is already handled by the toast promise.
     }
   }
 

dashboard/src/components/users/EditUserForm/EditUserForm.tsx

@@ -2,8 +2,10 @@ import ControlledCheckbox from '@/components/common/ControlledCheckbox';
 import ControlledSelect from '@/components/common/ControlledSelect';
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import EditUserPasswordForm from '@/components/users/EditUserPasswordForm';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import type { DialogFormProps } from '@/types/common';
 import Avatar from '@/ui/v2/Avatar';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -20,6 +22,7 @@ import { copy } from '@/utils/copy';
 import getUserRoles from '@/utils/settings/getUserRoles';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
+  RemoteAppGetUsersDocument,
   useGetRolesQuery,
   useUpdateRemoteAppUserMutation,
 } from '@/utils/__generated__/graphql';
@@ -34,7 +37,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-export interface EditUserFormProps {
+export interface EditUserFormProps extends DialogFormProps {
   /**
    * This is the selected user from the user's table.
    */
@@ -42,10 +45,7 @@ export interface EditUserFormProps {
   /**
    * Function to be called when the form is submitted.
    */
-  onEditUser?: (
+  onSubmit?: (values: EditUserFormValues) => Promise<void>;
-    values: EditUserFormValues,
-    user: RemoteAppUser,
-  ) => Promise<void>;
   /**
    * Function to be called when the operation is cancelled.
    */
@@ -53,19 +53,15 @@ export interface EditUserFormProps {
   /**
    * Function to be called when banning the user.
    */
-  onBanUser?: (user: RemoteAppUser) => Promise<void>;
+  onBanUser?: (user: RemoteAppUser) => Promise<void> | void;
   /**
    * Function to be called when deleting the user.
    */
-  onDeleteUser: (user: RemoteAppUser) => Promise<void>;
+  onDeleteUser: (user: RemoteAppUser) => Promise<void> | void;
   /**
    * User roles
    */
   roles: { [key: string]: boolean }[];
-  /**
-   * Function to be called after a successful action.
-   */
-  onSuccessfulAction?: () => Promise<void> | void;
 }
 
 export const EditUserFormValidationSchema = Yup.object({
@@ -87,12 +83,12 @@ export type EditUserFormValues = Yup.InferType<
 >;
 
 export default function EditUserForm({
+  location,
   user,
-  onEditUser,
+  onSubmit,
   onCancel,
   onDeleteUser,
   roles,
-  onSuccessfulAction,
 }: EditUserFormProps) {
   const theme = useTheme();
   const { onDirtyStateChange, openDialog } = useDialog();
@@ -104,6 +100,7 @@ export default function EditUserForm({
 
   const [updateUser] = useUpdateRemoteAppUserMutation({
     client: remoteProjectGQLClient,
+    refetchQueries: [RemoteAppGetUsersDocument],
   });
 
   const form = useForm<EditUserFormValues>({
@@ -124,20 +121,19 @@ export default function EditUserForm({
 
   const {
     register,
-    handleSubmit,
     formState: { errors, dirtyFields, isSubmitting, isValidating },
   } = form;
 
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   function handleChangeUserPassword() {
-    openDialog('EDIT_USER_PASSWORD', {
+    openDialog({
       title: 'Change Password',
-      payload: { user },
+      component: <EditUserPasswordForm user={user} />,
     });
   }
 
@@ -156,11 +152,13 @@ export default function EditUserForm({
    * both having to refetch this single user from the database again or causing a re-render of the drawer.
    */
   async function handleUserDisabledStatus() {
+    const shouldBan = !isUserBanned;
+
     const banUser = updateUser({
       variables: {
         id: user.id,
         user: {
-          disabled: !isUserBanned,
+          disabled: shouldBan,
         },
       },
     });
@@ -168,26 +166,23 @@ export default function EditUserForm({
     await toast.promise(
       banUser,
       {
-        loading: user.disabled ? 'Unbanning user...' : 'Banning user...',
+        loading: shouldBan ? 'Banning user...' : 'Unbanning user...',
-        success: user.disabled
+        success: shouldBan
-          ? 'User unbanned successfully.'
+          ? 'User banned successfully'
-          : 'User banned successfully',
+          : 'User unbanned successfully.',
-        error: user.disabled
+        error: shouldBan
-          ? 'An error occurred while trying to unban the user.'
+          ? 'An error occurred while trying to ban the user.'
-          : 'An error occurred while trying to ban the user.',
+          : 'An error occurred while trying to unban the user.',
       },
       getToastStyleProps(),
     );
-    await onSuccessfulAction();
   }
 
   return (
     <FormProvider {...form}>
       <Form
         className="flex flex-col overflow-hidden border-t-1 lg:flex-auto lg:content-between"
-        onSubmit={handleSubmit(async (values) => {
+        onSubmit={onSubmit}
-          await onEditUser(values, user);
-        })}
       >
         <Box className="flex-auto divide-y overflow-y-auto">
           <Box

dashboard/src/components/users/EditUserPasswordForm/EditUserPasswordForm.tsx

@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import type { DialogFormProps } from '@/types/common';
 import { Alert } from '@/ui/Alert';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
@@ -14,18 +15,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-export interface EditUserPasswordFormValues {
+export interface EditUserPasswordFormProps extends DialogFormProps {
-  /**
-   * Password for the user.
-   */
-  password: string;
-  /**
-   * Confirm Password for the user.
-   */
-  cpassword: string;
-}
-
-export interface EditUserPasswordFormProps {
   /**
    * Function to be called when the operation is cancelled.
    */
@@ -36,7 +26,7 @@ export interface EditUserPasswordFormProps {
   user: RemoteAppGetUsersQuery['users'][0];
 }
 
-export const EditUserPasswordFormValidationSchema = Yup.object().shape({
+export const validationSchema = Yup.object({
   password: Yup.string()
     .label('Users Password')
     .min(8, 'Password must be at least 8 characters long.')
@@ -47,6 +37,8 @@ export const EditUserPasswordFormValidationSchema = Yup.object().shape({
     .oneOf([Yup.ref('password')], 'Passwords do not match'),
 });
 
+export type EditUserPasswordFormValues = Yup.InferType<typeof validationSchema>;
+
 export default function EditUserPasswordForm({
   onCancel,
   user,
@@ -63,7 +55,7 @@ export default function EditUserPasswordForm({
   const form = useForm<EditUserPasswordFormValues>({
     defaultValues: {},
     reValidateMode: 'onSubmit',
-    resolver: yupResolver(EditUserPasswordFormValidationSchema),
+    resolver: yupResolver(validationSchema),
   });
 
   const handleSubmit = async ({ password }: EditUserPasswordFormValues) => {

dashboard/src/components/users/UsersBody/UsersBody.tsx

@@ -1,4 +1,5 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import FormActivityIndicator from '@/components/common/FormActivityIndicator';
 import type { EditUserFormValues } from '@/components/users/EditUserForm';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
@@ -17,7 +18,6 @@ import Text from '@/ui/v2/Text';
 import getReadableProviderName from '@/utils/common/getReadableProviderName';
 import getUserRoles from '@/utils/settings/getUserRoles';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
-import type { RemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
 import {
   useDeleteRemoteAppUserRolesMutation,
   useGetRolesQuery,
@@ -25,16 +25,21 @@ import {
   useRemoteAppDeleteUserMutation,
   useUpdateRemoteAppUserMutation,
 } from '@/utils/__generated__/graphql';
-import type { ApolloQueryResult } from '@apollo/client';
 import { useTheme } from '@mui/material';
 import { formatDistance } from 'date-fns';
 import kebabCase from 'just-kebab-case';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import type { RemoteAppUser } from 'pages/[workspaceSlug]/[appSlug]/users';
 import { Fragment, useMemo } from 'react';
 import toast from 'react-hot-toast';
 
-export interface UsersBodyProps<T = {}> {
+const EditUserForm = dynamic(() => import('@/components/users/EditUserForm'), {
+  ssr: false,
+  loading: () => <FormActivityIndicator />,
+});
+
+export interface UsersBodyProps {
   /**
    * The users fetched from entering the users page given a limit and offset.
    * @remark users will be an empty array if there are no users.
@@ -46,13 +51,10 @@ export interface UsersBodyProps<T = {}> {
    * @example onSuccessfulAction={() => refetch()}
    * @example onSuccessfulAction={() => router.reload()}
    */
-  onSuccessfulAction?: () => Promise<void> | void | Promise<T>;
+  onSubmit?: () => Promise<any>;
 }
 
-export default function UsersBody({
+export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
-  users,
-  onSuccessfulAction,
-}: UsersBodyProps<ApolloQueryResult<RemoteAppGetUsersQuery>>) {
   const theme = useTheme();
   const { openAlertDialog, openDrawer, closeDrawer } = useDialog();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
@@ -151,7 +153,8 @@ export default function UsersBody({
       },
       getToastStyleProps(),
     );
-    await onSuccessfulAction?.();
+
+    await onSubmit?.();
 
     closeDrawer();
   }
@@ -181,7 +184,7 @@ export default function UsersBody({
             getToastStyleProps(),
           );
 
-          await onSuccessfulAction();
+          await onSubmit();
           closeDrawer();
         },
         primaryButtonColor: 'error',
@@ -191,20 +194,20 @@ export default function UsersBody({
   }
 
   function handleViewUser(user: RemoteAppUser) {
-    openDrawer('EDIT_USER', {
+    openDrawer({
       title: 'User Details',
-
+      component: (
-      payload: {
+        <EditUserForm
-        user,
+          user={user}
-        onEditUser: handleEditUser,
+          onSubmit={(values) => handleEditUser(values, user)}
-        onDeleteUser: handleDeleteUser,
+          onDeleteUser={handleDeleteUser}
-        onSuccessfulAction,
+          roles={allAvailableProjectRoles.map((role) => ({
-        roles: allAvailableProjectRoles.map((role) => ({
+            [role.name]: user.roles.some(
-          [role.name]: user.roles.some(
+              (userRole) => userRole.role === role.name,
-            (userRole) => userRole.role === role.name,
+            ),
-          ),
+          }))}
-        })),
+        />
-      },
+      ),
     });
   }
 

dashboard/src/components/workspace/WorkspaceHeader.tsx

@@ -1,4 +1,5 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import EditWorkspaceNameForm from '@/components/home/EditWorkspaceNameForm';
 import RemoveWorkspaceModal from '@/components/workspace/RemoveWorkspaceModal';
 import { useUI } from '@/context/UIContext';
 import { useGetWorkspace } from '@/hooks/use-GetWorkspace';
@@ -114,7 +115,7 @@ export default function WorkspaceHeader() {
                 <Dropdown.Item
                   className="py-2"
                   onClick={() => {
-                    openDialog('EDIT_WORKSPACE_NAME', {
+                    openDialog({
                       title: (
                         <span className="grid grid-flow-row">
                           <span>Change Workspace Name</span>
@@ -124,10 +125,12 @@ export default function WorkspaceHeader() {
                           </Text>
                         </span>
                       ),
-                      payload: {
+                      component: (
-                        currentWorkspaceName: currentWorkspace.name,
+                        <EditWorkspaceNameForm
-                        currentWorkspaceId: currentWorkspace.id,
+                          currentWorkspaceId={currentWorkspace.id}
-                      },
+                          currentWorkspaceName={currentWorkspace.name}
+                        />
+                      ),
                     });
                   }}
                 >

dashboard/src/components/workspace/WorkspaceSection.tsx

@@ -1,4 +1,5 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import EditWorkspaceNameForm from '@/components/home/EditWorkspaceNameForm';
 import Button from '@/ui/v2/Button';
 import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
 import Text from '@/ui/v2/Text';
@@ -16,7 +17,7 @@ export function WorkspaceSection() {
         variant="borderless"
         color="secondary"
         onClick={() => {
-          openDialog('EDIT_WORKSPACE_NAME', {
+          openDialog({
             title: (
               <span className="grid grid-flow-row">
                 <span>New Workspace</span>
@@ -26,6 +27,7 @@ export function WorkspaceSection() {
                 </Text>
               </span>
             ),
+            component: <EditWorkspaceNameForm />,
           });
         }}
         startIcon={<PlusCircleIcon />}

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

@@ -2,6 +2,7 @@ import { useDialog } from '@/components/common/DialogProvider';
 import Pagination from '@/components/common/Pagination';
 import Container from '@/components/layout/Container';
 import ProjectLayout from '@/components/layout/ProjectLayout';
+import CreateUserForm from '@/components/users/CreateUserForm';
 import UsersBody from '@/components/users/UsersBody';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
@@ -25,7 +26,7 @@ export type RemoteAppUser = Exclude<
 >;
 
 export default function UsersPage() {
-  const { openDialog, closeDialog } = useDialog();
+  const { openDialog } = useDialog();
   const remoteProjectGQLClient = useRemoteApplicationGQLClient();
   const [searchString, setSearchString] = useState<string>('');
 
@@ -200,14 +201,9 @@ export default function UsersPage() {
   );
 
   function openCreateUserDialog() {
-    openDialog('CREATE_USER', {
+    openDialog({
       title: 'Create User',
-      payload: {
+      component: <CreateUserForm onSubmit={refetchProjectUsers} />,
-        onSuccess: async () => {
-          await refetchProjectUsers();
-          closeDialog();
-        },
-      },
     });
   }
 
@@ -228,16 +224,16 @@ export default function UsersPage() {
   if (loadingRemoteAppUsersQuery) {
     return (
       <Container
-        className="flex flex-col max-w-9xl h-full"
+        className="flex h-full max-w-9xl flex-col"
         rootClassName="h-full"
       >
-        <div className="flex flex-row place-content-between shrink-0 grow-0">
+        <div className="flex shrink-0 grow-0 flex-row place-content-between">
           <Input
             className="rounded-sm"
             placeholder="Search users"
             startAdornment={
               <SearchIcon
-                className="w-4 h-4 ml-2 -mr-1 shrink-0"
+                className="ml-2 -mr-1 h-4 w-4 shrink-0"
                 sx={{ color: 'text.disabled' }}
               />
             }
@@ -245,14 +241,14 @@ export default function UsersPage() {
           />
           <Button
             onClick={openCreateUserDialog}
-            startIcon={<PlusIcon className="w-4 h-4" />}
+            startIcon={<PlusIcon className="h-4 w-4" />}
             size="small"
           >
             Create User
           </Button>
         </div>
 
-        <div className="overflow-hidden flex items-center justify-center flex-auto">
+        <div className="flex flex-auto items-center justify-center overflow-hidden">
           <ActivityIndicator label="Loading users..." />
         </div>
       </Container>
@@ -260,14 +256,14 @@ export default function UsersPage() {
   }
 
   return (
-    <Container className="mx-auto space-y-5 overflow-x-hidden max-w-9xl">
+    <Container className="mx-auto max-w-9xl space-y-5 overflow-x-hidden">
       <div className="flex flex-row place-content-between">
         <Input
           className="rounded-sm"
           placeholder="Search users"
           startAdornment={
             <SearchIcon
-              className="w-4 h-4 ml-2 -mr-1 shrink-0"
+              className="ml-2 -mr-1 h-4 w-4 shrink-0"
               sx={{ color: 'text.disabled' }}
             />
           }
@@ -275,21 +271,21 @@ export default function UsersPage() {
         />
         <Button
           onClick={openCreateUserDialog}
-          startIcon={<PlusIcon className="w-4 h-4" />}
+          startIcon={<PlusIcon className="h-4 w-4" />}
           size="small"
         >
           Create User
         </Button>
       </div>
       {usersCount === 0 ? (
-        <Box className="flex flex-col items-center justify-center px-48 py-12 space-y-5 border rounded-lg shadow-sm">
+        <Box className="flex flex-col items-center justify-center space-y-5 rounded-lg border px-48 py-12 shadow-sm">
           <UserIcon
             strokeWidth={1}
-            className="w-10 h-10"
+            className="h-10 w-10"
             sx={{ color: 'text.disabled' }}
           />
           <div className="flex flex-col space-y-1">
-            <Text className="font-medium text-center" variant="h3">
+            <Text className="text-center font-medium" variant="h3">
               There are no users yet
             </Text>
             <Text variant="subtitle1" className="text-center">
@@ -302,34 +298,34 @@ export default function UsersPage() {
               color="primary"
               className="w-full"
               onClick={openCreateUserDialog}
-              startIcon={<PlusIcon className="w-4 h-4" />}
+              startIcon={<PlusIcon className="h-4 w-4" />}
             >
               Create User
             </Button>
           </div>
         </Box>
       ) : (
-        <div className="grid grid-flow-row gap-2 lg:w-9xl">
+        <div className="lg:w-9xl grid grid-flow-row gap-2">
-          <div className="grid w-full h-full grid-flow-row pb-4 overflow-hidden">
+          <div className="grid h-full w-full grid-flow-row overflow-hidden pb-4">
-            <Box className="grid w-full p-2 border-b md:grid-cols-6">
+            <Box className="grid w-full border-b p-2 md:grid-cols-6">
               <Text className="font-medium md:col-span-2">Name</Text>
               <Text className="hidden font-medium md:block">Signed up at</Text>
               <Text className="hidden font-medium md:block">Last Seen</Text>
-              <Text className="hidden col-span-2 font-medium md:block">
+              <Text className="col-span-2 hidden font-medium md:block">
                 OAuth Providers
               </Text>
             </Box>
             {dataRemoteAppUsers?.filteredUsersAggreggate.aggregate.count ===
               0 &&
               usersCount !== 0 && (
-                <Box className="flex flex-col items-center justify-center px-48 py-12 space-y-5 border-b border-x">
+                <Box className="flex flex-col items-center justify-center space-y-5 border-x border-b px-48 py-12">
                   <UserIcon
                     strokeWidth={1}
-                    className="w-10 h-10"
+                    className="h-10 w-10"
                     sx={{ color: 'text.disabled' }}
                   />
                   <div className="flex flex-col space-y-1">
-                    <Text className="font-medium text-center" variant="h3">
+                    <Text className="text-center font-medium" variant="h3">
                       No results for &quot;{searchString}&quot;
                     </Text>
                     <Text variant="subtitle1" className="text-center">
@@ -340,10 +336,7 @@ export default function UsersPage() {
               )}
             {thereAreUsers && (
               <div className="grid grid-flow-row gap-4">
-                <UsersBody
+                <UsersBody users={users} onSubmit={refetchProjectUsers} />
-                  users={users}
-                  onSuccessfulAction={refetchProjectUsers}
-                />
                 <Pagination
                   className="px-2"
                   totalNrOfPages={nrOfPages}

dashboard/src/types/common.ts

@@ -0,0 +1,10 @@
+/**
+ * This interface is used to define the basic properties of a form that is
+ * rendered inside a drawer or a dialog.
+ */
+export interface DialogFormProps {
+  /**
+   * Determines whether the form is rendered inside a drawer or a dialog.
+   */
+  location?: 'drawer' | 'dialog';
+}

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/apollo
 
+## 5.0.5
+
+### Patch Changes
+
+- Updated dependencies [3c7cf92e]
+  - @nhost/nhost-js@2.0.5
+
 ## 5.0.4
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/react-apollo
 
+## 5.0.6
+
+### Patch Changes
+
+- @nhost/apollo@5.0.5
+- @nhost/react@2.0.5
+
 ## 5.0.5
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react-urql
 
+## 2.0.5
+
+### Patch Changes
+
+- @nhost/react@2.0.5
+
 ## 2.0.4
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/nextjs
 
+## 1.13.11
+
+### Patch Changes
+
+- @nhost/react@2.0.5
+
 ## 1.13.10
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.13.10",
+  "version": "1.13.11",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/nhost-js
 
+## 2.0.5
+
+### Patch Changes
+
+- 3c7cf92e: fixing generating the correct URL for function calls
+
 ## 2.0.4
 
 ### Patch Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [
@@ -58,14 +58,13 @@
     "verify:fix": "run-p prettier:fix lint:fix"
   },
   "dependencies": {
+    "@nhost/graphql-js": "workspace:*",
     "@nhost/hasura-auth-js": "workspace:*",
     "@nhost/hasura-storage-js": "workspace:*",
-    "@nhost/graphql-js": "workspace:*",
     "cross-fetch": "^3.1.5"
   },
   "devDependencies": {
-    "graphql": "16.6.0",
+    "graphql": "16.6.0"
-    "start-server-and-test": "^1.15.2"
   },
   "peerDependencies": {
     "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"

packages/nhost-js/src/clients/functions/index.ts

@@ -1,5 +1,5 @@
 import fetch from 'cross-fetch'
-import { urlFromSubdomain } from '../../utils/helpers'
+import { buildUrl, urlFromSubdomain } from '../../utils/helpers'
 import { NhostClientConstructorParams } from '../../utils/types'
 import {
   NhostFunctionCallConfig,
@@ -65,11 +65,10 @@ export class NhostFunctionsClient {
       ...config?.headers
     }
 
-    const backendUrl = this.url
+    const fullUrl = buildUrl(this.url, url)
-    const functionUrl = url.startsWith('/') ? url : `/${url}`
 
     try {
-      const result = await fetch(`${backendUrl}/${functionUrl}`, {
+      const result = await fetch(fullUrl, {
         body: JSON.stringify(body),
         headers,
         method: 'POST'
@@ -123,7 +122,7 @@ export class NhostFunctionsClient {
     this.accessToken = accessToken
   }
 
-  private generateAccessTokenHeaders(): NhostFunctionCallConfig['headers'] {
+  generateAccessTokenHeaders(): NhostFunctionCallConfig['headers'] {
     if (this.adminSecret) {
       return {
         'x-hasura-admin-secret': this.adminSecret

packages/nhost-js/src/utils/helpers.ts

@@ -1,7 +1,8 @@
 import { NhostClientConstructorParams } from './types'
 
 // a port can be a number or a placeholder string with leading and trailing double underscores, f.e. "8080" or "__PLACEHOLDER_NAME__"
-const LOCALHOST_REGEX = /^((?<protocol>http[s]?):\/\/)?(?<host>localhost)(:(?<port>(\d+|__\w+__)))?$/
+export const LOCALHOST_REGEX =
+  /^((?<protocol>http[s]?):\/\/)?(?<host>localhost)(:(?<port>(\d+|__\w+__)))?$/
 
 /**
  * `backendUrl` should now be used only when self-hosting
@@ -73,3 +74,16 @@ function getValueFromEnv(service: string) {
 
   return process.env[`NHOST_${service.toUpperCase()}_URL`]
 }
+
+/**
+ * Combines a base URL and a path into a single URL string.
+ *
+ * @param baseUrl - The base URL to use.
+ * @param path - The path to append to the base URL.
+ * @returns The combined URL string.
+ */
+export function buildUrl(baseUrl: string, path: string) {
+  const hasLeadingSlash = path.startsWith('/')
+  const urlPath = hasLeadingSlash ? path : `/${path}`
+  return baseUrl + urlPath
+}

packages/nhost-js/tests/functions.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect, afterEach, beforeEach } from 'vitest'
+import { urlFromSubdomain } from '../src/utils/helpers'
+import { createFunctionsClient, NhostFunctionsClient } from '../src/clients/functions'
+
+describe('createFunctionsClient', () => {
+  it('should throw an error if neither subdomain nor functionsUrl are provided', () => {
+    expect(() => {
+      createFunctionsClient({})
+    }).toThrow()
+  })
+
+  it('should throw an error if a non localhost subdomain is used without a region', () => {
+    const subdomain = 'test-subdomain'
+    expect(() => {
+      createFunctionsClient({ subdomain })
+    }).toThrow()
+  })
+
+  it('should create a client with localhost as a subdomain without a region subdomain', () => {
+    const subdomain = 'localhost'
+    const client = createFunctionsClient({ subdomain })
+
+    expect(client).toBeInstanceOf(NhostFunctionsClient)
+    expect(client.url).toEqual(urlFromSubdomain({ subdomain }, 'functions'))
+  })
+
+  it('should create a client with non localhost subdomain and any region', () => {
+    const subdomain = 'localhost'
+    const region = 'eu-central-1'
+    const client = createFunctionsClient({ subdomain, region })
+
+    expect(client).toBeInstanceOf(NhostFunctionsClient)
+    expect(client.url).toEqual(urlFromSubdomain({ subdomain, region }, 'functions'))
+  })
+
+  it('should create a client with functionsUrl', () => {
+    const functionsUrl = 'http://test-functions-url'
+    const client = createFunctionsClient({ functionsUrl })
+
+    expect(client).toBeInstanceOf(NhostFunctionsClient)
+    expect(client.url).toEqual(functionsUrl)
+  })
+})
+
+describe('NhostFunctionsClient', () => {
+  let client: NhostFunctionsClient
+
+  beforeEach(() => {
+    client = new NhostFunctionsClient({ url: 'http://test-url' })
+  })
+
+  it('should set the access token', () => {
+    const accessToken = 'test-access-token'
+
+    client.setAccessToken(accessToken)
+
+    expect(client.generateAccessTokenHeaders()).toEqual({
+      Authorization: `Bearer ${accessToken}`
+    })
+  })
+
+  it('should clear the access token', () => {
+    const accessToken = 'test-access-token'
+
+    client.setAccessToken(accessToken)
+    client.setAccessToken(undefined)
+
+    expect(client.generateAccessTokenHeaders()).toEqual({})
+  })
+
+  it('should generate headers with admin secret', () => {
+    const adminSecret = 'test-admin-secret'
+    const clientWithAdminSecret = new NhostFunctionsClient({ url: 'http://test-url', adminSecret })
+
+    expect(clientWithAdminSecret.generateAccessTokenHeaders()).toEqual({
+      'x-hasura-admin-secret': adminSecret
+    })
+  })
+})

packages/nhost-js/tests/utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { urlFromSubdomain } from '../src/utils/helpers'
+import { buildUrl, LOCALHOST_REGEX, urlFromSubdomain } from '../src/utils/helpers'
 
 describe('urlFromParams', () => {
   describe('when using backendUrl', () => {
@@ -81,3 +81,69 @@ describe('urlFromParams', () => {
     })
   })
 })
+
+describe('buildUrl', () => {
+  it('should combine base URL and path', () => {
+    const baseUrl = 'https://example.com'
+    const path = '/api/users'
+    expect(buildUrl(baseUrl, path)).toBe('https://example.com/api/users')
+  })
+
+  it('should add missing leading slash to path', () => {
+    const baseUrl = 'https://example.com'
+    const path = 'api/users'
+    expect(buildUrl(baseUrl, path)).toBe('https://example.com/api/users')
+  })
+
+  it('should handle empty base URL', () => {
+    const baseUrl = ''
+    const path = '/api/users'
+    expect(buildUrl(baseUrl, path)).toBe('/api/users')
+  })
+
+  it('should handle empty path', () => {
+    const baseUrl = 'https://example.com'
+    const path = ''
+    expect(buildUrl(baseUrl, path)).toBe('https://example.com/')
+  })
+
+  it('should handle missing parameters', () => {
+    expect(() => buildUrl()).toThrow()
+    expect(() => buildUrl('https://example.com')).toThrow()
+  })
+})
+
+describe('LOCALHOST_REGEX', () => {
+  it('should match localhost without protocol or port', () => {
+    const input = 'localhost'
+    const match = input.match(LOCALHOST_REGEX)
+    expect(match?.groups).toEqual({ host: 'localhost', protocol: undefined, port: undefined })
+  })
+
+  it('should match localhost with http protocol', () => {
+    const input = 'http://localhost'
+    const match = input.match(LOCALHOST_REGEX)
+    expect(match?.groups).toEqual({ host: 'localhost', protocol: 'http', port: undefined })
+  })
+
+  it('should match localhost with https protocol and port', () => {
+    const input = 'https://localhost:8443'
+    const match = input.match(LOCALHOST_REGEX)
+    expect(match?.groups).toEqual({ host: 'localhost', protocol: 'https', port: '8443' })
+  })
+
+  it('should match localhost with named port placeholder', () => {
+    const input = 'http://localhost:__PORT_NAME__'
+    const match = input.match(LOCALHOST_REGEX)
+    expect(match?.groups).toEqual({ host: 'localhost', protocol: 'http', port: '__PORT_NAME__' })
+  })
+
+  it('should not match other URLs', () => {
+    const input1 = 'https://www.example.com'
+    const input2 = 'http://127.0.0.1:3000'
+    const match1 = input1.match(LOCALHOST_REGEX)
+    const match2 = input2.match(LOCALHOST_REGEX)
+    expect(match1).toBeNull()
+    expect(match2).toBeNull()
+  })
+})

packages/react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/react
 
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies [3c7cf92e]
+  - @nhost/nhost-js@2.0.5
+
 ## 2.0.4
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/vue/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/vue
 
+## 1.13.11
+
+### Patch Changes
+
+- Updated dependencies [3c7cf92e]
+  - @nhost/nhost-js@2.0.5
+
 ## 1.13.10
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "1.13.10",
+  "version": "1.13.11",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [

pnpm-lock.yaml

@@ -1027,7 +1027,6 @@ importers:
       '@nhost/hasura-storage-js': workspace:*
       cross-fetch: ^3.1.5
       graphql: 16.6.0
-      start-server-and-test: ^1.15.2
     dependencies:
       '@nhost/graphql-js': link:../graphql-js
       '@nhost/hasura-auth-js': link:../hasura-auth-js
@@ -1035,7 +1034,6 @@ importers:
       cross-fetch: 3.1.5
     devDependencies:
       graphql: 16.6.0
-      start-server-and-test: 1.15.2
 
   packages/react:
     specifiers:
@@ -12817,7 +12815,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.5
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.0.2_@types+node@18.11.17
+      vite: 4.0.2_@types+node@16.18.11
     transitivePeerDependencies:
       - supports-color
     dev: true