refactor(frontend): apply useDialogs props names changes

2025-06-26 18:27:28 +00:00 · 2025-05-08 09:26:54 +01:00
parent 43c7161777
commit 5dbe26ca60
57 changed files with 355 additions and 318 deletions
--- a/frontend/src/app-components/attachment/AttachmentForm.tsx
+++ b/frontend/src/app-components/attachment/AttachmentForm.tsx
@@ -20,7 +20,7 @@ export type AttachmentFormData = {
 };

 export const AttachmentForm: FC<ComponentFormProps<AttachmentFormData>> = ({
-  data,
+  data: { defaultValues: attachment },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -33,7 +33,7 @@ export const AttachmentForm: FC<ComponentFormProps<AttachmentFormData>> = ({
  return (
    <Wrapper
      onSubmit={() => {
-        data?.onChange?.(selected);
+        attachment?.onChange?.(selected);
        rest.onSuccess?.();
      }}
      {...WrapperProps}
@@ -45,7 +45,7 @@ export const AttachmentForm: FC<ComponentFormProps<AttachmentFormData>> = ({
      <MediaLibrary
        showTitle={false}
        onSelect={handleSelection}
-        accept={data?.accept}
+        accept={attachment?.accept}
      />
    </Wrapper>
  );
--- a/frontend/src/app-components/attachment/AttachmentFormDialog.tsx
+++ b/frontend/src/app-components/attachment/AttachmentFormDialog.tsx
@@ -9,16 +9,13 @@
 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

-import { AttachmentForm, AttachmentFormData } from "./AttachmentForm";
+import { AttachmentForm } from "./AttachmentForm";

-export const AttachmentFormDialog = <
-  T extends AttachmentFormData = AttachmentFormData,
->(
-  props: ComponentFormDialogProps<T>,
+export const AttachmentFormDialog = (
+  props: ComponentFormDialogProps<typeof AttachmentForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={AttachmentForm}
-    rowKey="row"
    addText="title.media_library"
    confirmButtonProps={{ value: "button.select" }}
    {...props}
--- a/frontend/src/app-components/attachment/AttachmentUploader.tsx
+++ b/frontend/src/app-components/attachment/AttachmentUploader.tsx
@@ -219,8 +219,7 @@ const AttachmentUploader: FC<FileUploadProps> = ({
                  dialogs.open(
                    AttachmentFormDialog,
                    {
-                      accept,
-                      onChange,
+                      defaultValues: { accept, onChange },
                    },
                    { maxWidth: "xl" },
                  )
--- a/frontend/src/app-components/dialogs/GenericFormDialog.tsx
+++ b/frontend/src/app-components/dialogs/GenericFormDialog.tsx
@@ -11,26 +11,27 @@ import React from "react";
 import { FormDialog as Wrapper } from "@/app-components/dialogs";
 import { useTranslate } from "@/hooks/useTranslate";
 import { TTranslationKeys } from "@/i18n/i18n.types";
-import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+import {
+  ComponentFormDialogProps,
+  TPayload,
+} from "@/types/common/dialogs.types";

-type GenericFormDialogProps<T> = ComponentFormDialogProps<T> & {
-  Form: React.ElementType;
-  rowKey?: keyof T;
-  addText?: TTranslationKeys;
-  editText?: TTranslationKeys;
-};
+type GenericFormDialogProps<T extends (arg: { data: any }) => unknown> =
+  ComponentFormDialogProps<T> & {
+    Form: React.ElementType;
+    addText?: TTranslationKeys;
+    editText?: TTranslationKeys;
+  } & { payload: TPayload<T> | null };

-export const GenericFormDialog = <T,>({
+export const GenericFormDialog = ({
  Form,
-  rowKey,
  payload: data,
  editText,
  addText,
  ...rest
-}: GenericFormDialogProps<T>) => {
+}: GenericFormDialogProps<typeof Form>) => {
  const { t } = useTranslate();
-  const hasRow = rowKey ? data?.[rowKey] : data;
-  const translationKey = hasRow ? editText : addText;
+  const translationKey = data?.defaultValues ? editText : addText;

  return (
    <Form
--- a/frontend/src/components/Menu/MenuForm.tsx
+++ b/frontend/src/components/Menu/MenuForm.tsx
@@ -31,7 +31,7 @@ export type MenuFormData = {
 };

 export const MenuForm: FC<ComponentFormProps<MenuFormData>> = ({
-  data,
+  data: { defaultValues: menu },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -79,23 +79,23 @@ export const MenuForm: FC<ComponentFormProps<MenuFormData>> = ({
    const { url, ...rest } = params;
    const payload = typeValue === "web_url" ? { ...rest, url } : rest;

-    if (data?.row?.id) {
+    if (menu?.row?.id) {
      updateMenu({
-        id: data.row.id,
+        id: menu.row.id,
        params: payload,
      });
    } else {
-      createMenu({ ...payload, parent: data?.parentId });
+      createMenu({ ...payload, parent: menu?.parentId });
    }
  };

  useEffect(() => {
-    if (data?.row) {
-      reset(data.row);
+    if (menu?.row) {
+      reset(menu.row);
    } else {
      reset(DEFAULT_VALUES);
    }
-  }, [reset, data?.row]);
+  }, [reset, menu?.row]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
@@ -164,7 +164,7 @@ export const MenuForm: FC<ComponentFormProps<MenuFormData>> = ({
                      label={t("label.payload")}
                      error={!!errors.payload}
                      required
-                      defaultValue={data?.row?.payload || ""}
+                      defaultValue={menu?.row?.payload || ""}
                      readOnlyValue={titleValue}
                      helperText={
                        errors.payload ? errors.payload.message : null
--- a/frontend/src/components/Menu/MenuFormDialog.tsx
+++ b/frontend/src/components/Menu/MenuFormDialog.tsx
@@ -9,12 +9,12 @@
 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

-import { MenuForm, MenuFormData } from "./MenuForm";
+import { MenuForm } from "./MenuForm";

-export const MenuFormDialog = <T extends MenuFormData = MenuFormData>(
-  props: ComponentFormDialogProps<T>,
+export const MenuFormDialog = (
+  props: ComponentFormDialogProps<typeof MenuForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={MenuForm}
    addText="title.add_menu_item"
    editText="title.edit_menu_item"
--- a/frontend/src/components/Menu/index.tsx
+++ b/frontend/src/components/Menu/index.tsx
@@ -59,7 +59,11 @@ export const Menu = () => {
            {hasPermission(EntityType.MENU, PermissionAction.CREATE) ? (
              <Button
                variant="contained"
-                onClick={() => dialogs.open(MenuFormDialog, null)}
+                onClick={() =>
+                  dialogs.open(MenuFormDialog, {
+                    defaultValues: null,
+                  })
+                }
                disabled={menus?.length === 10}
                startIcon={<AddIcon />}
              >
@@ -119,8 +123,16 @@ export const Menu = () => {
          <MenuAccordion
            key={menu.id}
            menu={menu}
-            onAppend={(parentId) => dialogs.open(MenuFormDialog, { parentId })}
-            onUpdate={(row) => dialogs.open(MenuFormDialog, { row })}
+            onAppend={(parentId) =>
+              dialogs.open(MenuFormDialog, {
+                defaultValues: { parentId },
+              })
+            }
+            onUpdate={(row) =>
+              dialogs.open(MenuFormDialog, {
+                defaultValues: { row },
+              })
+            }
            onDelete={async (row) => {
              const isConfirmed = await dialogs.confirm(ConfirmDialogBody);

--- a/frontend/src/components/categories/CategoryForm.tsx
+++ b/frontend/src/components/categories/CategoryForm.tsx
@@ -21,7 +21,7 @@ import { ICategory, ICategoryAttributes } from "@/types/category.types";
 import { ComponentFormProps } from "@/types/common/dialogs.types";

 export const CategoryForm: FC<ComponentFormProps<ICategory>> = ({
-  data,
+  data: { defaultValues: category },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -48,7 +48,7 @@ export const CategoryForm: FC<ComponentFormProps<ICategory>> = ({
    formState: { errors },
    handleSubmit,
  } = useForm<ICategoryAttributes>({
-    defaultValues: { label: data?.label || "" },
+    defaultValues: { label: category?.label || "" },
  });
  const validationRules = {
    label: {
@@ -56,22 +56,22 @@ export const CategoryForm: FC<ComponentFormProps<ICategory>> = ({
    },
  };
  const onSubmitForm = (params: ICategoryAttributes) => {
-    if (data) {
-      updateCategory({ id: data.id, params });
+    if (category) {
+      updateCategory({ id: category.id, params });
    } else {
      createCategory(params);
    }
  };

  useEffect(() => {
-    if (data) {
+    if (category) {
      reset({
-        label: data.label,
+        label: category.label,
      });
    } else {
      reset();
    }
-  }, [data, reset]);
+  }, [category, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
--- a/frontend/src/components/categories/CategoryFormDialog.tsx
+++ b/frontend/src/components/categories/CategoryFormDialog.tsx
@@ -7,15 +7,14 @@
 */

 import { GenericFormDialog } from "@/app-components/dialogs";
-import { ICategory } from "@/types/category.types";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

 import { CategoryForm } from "./CategoryForm";

-export const CategoryFormDialog = <T extends ICategory = ICategory>(
-  props: ComponentFormDialogProps<T>,
+export const CategoryFormDialog = (
+  props: ComponentFormDialogProps<typeof CategoryForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={CategoryForm}
    addText="title.new_category"
    editText="title.edit_category"
--- a/frontend/src/components/categories/index.tsx
+++ b/frontend/src/components/categories/index.tsx
@@ -72,8 +72,8 @@ export const Categories = () => {
    [
      {
        label: ActionColumnLabel.Edit,
-        action: async (row) => {
-          await dialogs.open(CategoryFormDialog, row);
+        action: (row) => {
+          dialogs.open(CategoryFormDialog, { defaultValues: row });
        },
        requires: [PermissionAction.UPDATE],
      },
@@ -150,7 +150,9 @@ export const Categories = () => {
                  startIcon={<AddIcon />}
                  variant="contained"
                  sx={{ float: "right" }}
-                  onClick={() => dialogs.open(CategoryFormDialog, null)}
+                  onClick={() =>
+                    dialogs.open(CategoryFormDialog, { defaultValues: null })
+                  }
                >
                  {t("button.add")}
                </Button>
--- a/frontend/src/components/content-types/ContentTypeForm.tsx
+++ b/frontend/src/components/content-types/ContentTypeForm.tsx
@@ -25,7 +25,7 @@ import { FieldInput } from "./components/FieldInput";
 import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";

 export const ContentTypeForm: FC<ComponentFormProps<IContentType>> = ({
-  data,
+  data: { defaultValues: contentType },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -41,8 +41,8 @@ export const ContentTypeForm: FC<ComponentFormProps<IContentType>> = ({
    handleSubmit,
  } = useForm<Partial<IContentType>>({
    defaultValues: {
-      name: data?.name || "",
-      fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
+      name: contentType?.name || "",
+      fields: contentType?.fields || FIELDS_FORM_DEFAULT_VALUES,
    },
  });
  const { append, fields, remove } = useFieldArray({
@@ -87,23 +87,23 @@ export const ContentTypeForm: FC<ComponentFormProps<IContentType>> = ({
      return;
    }

-    if (data) {
-      updateContentType({ id: data.id, params });
+    if (contentType) {
+      updateContentType({ id: contentType.id, params });
    } else {
      createContentType(params);
    }
  };

  useEffect(() => {
-    if (data) {
+    if (contentType) {
      reset({
-        name: data.name,
-        fields: data.fields || FIELDS_FORM_DEFAULT_VALUES,
+        name: contentType.name,
+        fields: contentType.fields || FIELDS_FORM_DEFAULT_VALUES,
      });
    } else {
      reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES });
    }
-  }, [data, reset]);
+  }, [contentType, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
--- a/frontend/src/components/content-types/ContentTypeFormDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { IContentType } from "@/types/content-type.types";

 import { ContentTypeForm } from "./ContentTypeForm";

-export const ContentTypeFormDialog = <T extends IContentType = IContentType>(
-  props: ComponentFormDialogProps<T>,
+export const ContentTypeFormDialog = (
+  props: ComponentFormDialogProps<typeof ContentTypeForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={ContentTypeForm}
    addText="title.new_content_type"
    editText="title.edit_content_type"
--- a/frontend/src/components/content-types/index.tsx
+++ b/frontend/src/components/content-types/index.tsx
@@ -67,7 +67,9 @@ export const ContentTypes = () => {
      },
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => dialogs.open(ContentTypeFormDialog, row),
+        action: (row) => {
+          dialogs.open(ContentTypeFormDialog, { defaultValues: row });
+        },
        requires: [PermissionAction.UPDATE],
      },
      {
@@ -104,7 +106,11 @@ export const ContentTypes = () => {
              <Button
                startIcon={<AddIcon />}
                variant="contained"
-                onClick={() => dialogs.open(ContentTypeFormDialog, null)}
+                onClick={() =>
+                  dialogs.open(ContentTypeFormDialog, {
+                    defaultValues: null,
+                  })
+                }
                sx={{ float: "right" }}
              >
                {t("button.add")}
--- a/frontend/src/components/contents/ContentForm.tsx
+++ b/frontend/src/components/contents/ContentForm.tsx
@@ -128,20 +128,12 @@ const buildDynamicFields = (
  },
 });

-export type ContentFormData = {
-  content?: IContent;
-  contentType?: IContentType;
-};
-export const ContentForm: FC<ComponentFormProps<ContentFormData>> = ({
-  data,
+export const ContentForm: FC<ComponentFormProps<IContent, IContentType>> = ({
+  data: { defaultValues: content, presetValues: contentType },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
 }) => {
-  const { content, contentType } = data || {
-    content: undefined,
-    contentType: undefined,
-  };
  const { t } = useTranslate();
  const { toast } = useToast();
  const {
--- a/frontend/src/components/contents/ContentFormDialog.tsx
+++ b/frontend/src/components/contents/ContentFormDialog.tsx
@@ -9,14 +9,13 @@
 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

-import { ContentForm, ContentFormData } from "./ContentForm";
+import { ContentForm } from "./ContentForm";

-export const ContentFormDialog = <T extends ContentFormData = ContentFormData>(
-  props: ComponentFormDialogProps<T>,
+export const ContentFormDialog = (
+  props: ComponentFormDialogProps<typeof ContentForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={ContentForm}
-    rowKey="content"
    addText="title.new_content"
    editText="title.edit_node"
    {...props}
--- a/frontend/src/components/contents/index.tsx
+++ b/frontend/src/components/contents/index.tsx
@@ -9,7 +9,15 @@
 import { faAlignLeft } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { Button, ButtonGroup, Chip, Grid, Paper, Switch, Typography } from "@mui/material";
+import {
+  Button,
+  ButtonGroup,
+  Chip,
+  Grid,
+  Paper,
+  Switch,
+  Typography,
+} from "@mui/material";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useQueryClient } from "react-query";
@@ -79,8 +87,12 @@ export const Contents = () => {
    [
      {
        label: ActionColumnLabel.Edit,
-        action: (row) =>
-          dialogs.open(ContentFormDialog, { content: row, contentType }),
+        action: (row) => {
+          dialogs.open(ContentFormDialog, {
+            defaultValues: row,
+            presetValues: contentType,
+          });
+        },
        requires: [PermissionAction.UPDATE],
      },
      {
@@ -111,9 +123,7 @@ export const Contents = () => {
          predicate: ({ queryKey }) => {
            const [_qType, qEntity] = queryKey;

-            return (
-              isSameEntity(qEntity, EntityType.CONTENT)
-            );
+            return isSameEntity(qEntity, EntityType.CONTENT);
          },
        });
        if (data.length) {
@@ -123,13 +133,13 @@ export const Contents = () => {
        }
      },
    },
-    { idTargetContentType: contentType?.id }
+    { idTargetContentType: contentType?.id },
  );
  const handleImportChange = (file: File) => {
    importDataset(file);
  };
-  
-return (
+
+  return (
    <Grid container flexDirection="column" gap={3}>
      <Grid item height="fit-content" container>
        <Link href="/content/types">
@@ -151,25 +161,27 @@ return (
            </Grid>
            {hasPermission(EntityType.CONTENT, PermissionAction.CREATE) ? (
              <ButtonGroup sx={{ marginLeft: "auto" }}>
-              <Grid item>
-                <Button
-                  startIcon={<AddIcon />}
-                  variant="contained"
-                  onClick={() =>
-                    dialogs.open(ContentFormDialog, { contentType })
-                  }
-                  sx={{ float: "right" }}
+                <Grid item>
+                  <Button
+                    startIcon={<AddIcon />}
+                    variant="contained"
+                    onClick={() =>
+                      dialogs.open(ContentFormDialog, {
+                        presetValues: contentType,
+                      })
+                    }
+                    sx={{ float: "right" }}
                  >
                    {t("button.add")}
                  </Button>
                </Grid>
                <Grid item>
                  <FileUploadButton
-                  accept="text/csv"
-                  label={t("button.import")}
-                  onChange={handleImportChange}
-                  isLoading={isLoading}
-                />
+                    accept="text/csv"
+                    label={t("button.import")}
+                    onChange={handleImportChange}
+                    isLoading={isLoading}
+                  />
                </Grid>
              </ButtonGroup>
            ) : null}
--- a/frontend/src/components/context-vars/ContextVarForm.tsx
+++ b/frontend/src/components/context-vars/ContextVarForm.tsx
@@ -22,7 +22,7 @@ import { IContextVar, IContextVarAttributes } from "@/types/context-var.types";
 import { slugify } from "@/utils/string";

 export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
-  data,
+  data: { defaultValues: contextVar },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -56,9 +56,9 @@ export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
    handleSubmit,
  } = useForm<IContextVarAttributes>({
    defaultValues: {
-      name: data?.name || "",
-      label: data?.label || "",
-      permanent: data?.permanent || false,
+      name: contextVar?.name || "",
+      label: contextVar?.label || "",
+      permanent: contextVar?.permanent || false,
    },
  });
  const validationRules = {
@@ -73,24 +73,24 @@ export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
    },
  };
  const onSubmitForm = (params: IContextVarAttributes) => {
-    if (data) {
-      updateContextVar({ id: data.id, params });
+    if (contextVar) {
+      updateContextVar({ id: contextVar.id, params });
    } else {
      createContextVar(params);
    }
  };

  useEffect(() => {
-    if (data) {
+    if (contextVar) {
      reset({
-        name: data.name,
-        label: data.label,
-        permanent: data.permanent,
+        name: contextVar.name,
+        label: contextVar.label,
+        permanent: contextVar.permanent,
      });
    } else {
      reset();
    }
-  }, [data, reset]);
+  }, [contextVar, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
--- a/frontend/src/components/context-vars/ContextVarFormDialog.tsx
+++ b/frontend/src/components/context-vars/ContextVarFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { IContextVar } from "@/types/context-var.types";

 import { ContextVarForm } from "./ContextVarForm";

-export const ContextVarFormDialog = <T extends IContextVar = IContextVar>(
-  props: ComponentFormDialogProps<T>,
+export const ContextVarFormDialog = (
+  props: ComponentFormDialogProps<typeof ContextVarForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={ContextVarForm}
    addText="title.new_context_var"
    editText="title.edit_context_var"
--- a/frontend/src/components/context-vars/index.tsx
+++ b/frontend/src/components/context-vars/index.tsx
@@ -83,7 +83,9 @@ export const ContextVars = () => {
    [
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => dialogs.open(ContextVarFormDialog, row),
+        action: (row) => {
+          dialogs.open(ContextVarFormDialog, { defaultValues: row });
+        },
        requires: [PermissionAction.UPDATE],
      },
      {
@@ -182,7 +184,9 @@ export const ContextVars = () => {
                startIcon={<AddIcon />}
                variant="contained"
                sx={{ float: "right" }}
-                onClick={() => dialogs.open(ContextVarFormDialog, null)}
+                onClick={() =>
+                  dialogs.open(ContextVarFormDialog, { defaultValues: null })
+                }
              >
                {t("button.add")}
              </Button>
--- a/frontend/src/components/inbox/components/AttachmentViewer.tsx
+++ b/frontend/src/components/inbox/components/AttachmentViewer.tsx
@@ -49,7 +49,7 @@ const componentMap: { [key in FileType]: FC<AttachmentInterface> } = {
          onClick={() =>
            dialogs.open(
              AttachmentViewerFormDialog,
-              { url },
+              { defaultValues: { url } },
              {
                hasButtons: false,
              },
--- a/frontend/src/components/inbox/components/AttachmentViewerForm.tsx
+++ b/frontend/src/components/inbox/components/AttachmentViewerForm.tsx
@@ -18,7 +18,11 @@ export type AttachmentViewerFormData = {

 export const AttachmentViewerForm: FC<
  ComponentFormProps<AttachmentViewerFormData>
-> = ({ data, Wrapper = Fragment, WrapperProps }) => {
+> = ({
+  data: { defaultValues: attachment },
+  Wrapper = Fragment,
+  WrapperProps,
+}) => {
  return (
    <Wrapper {...WrapperProps}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -29,8 +33,8 @@ export const AttachmentViewerForm: FC<
          objectFit: "contain",
          maxHeight: "70vh",
        }}
-        alt={data?.url}
-        src={data?.url}
+        alt={attachment?.url}
+        src={attachment?.url}
      />
    </Wrapper>
  );
--- a/frontend/src/components/inbox/components/AttachmentViewerFormDialog.tsx
+++ b/frontend/src/components/inbox/components/AttachmentViewerFormDialog.tsx
@@ -9,19 +9,13 @@
 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

-import {
-  AttachmentViewerForm,
-  AttachmentViewerFormData,
-} from "./AttachmentViewerForm";
+import { AttachmentViewerForm } from "./AttachmentViewerForm";

-export const AttachmentViewerFormDialog = <
-  T extends AttachmentViewerFormData = AttachmentViewerFormData,
->(
-  props: ComponentFormDialogProps<T>,
+export const AttachmentViewerFormDialog = (
+  props: ComponentFormDialogProps<typeof AttachmentViewerForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={AttachmentViewerForm}
-    rowKey="row"
    addText="label.image"
    {...props}
  />
--- a/frontend/src/components/labels/LabelForm.tsx
+++ b/frontend/src/components/labels/LabelForm.tsx
@@ -21,7 +21,7 @@ import { ILabel, ILabelAttributes } from "@/types/label.types";
 import { slugify } from "@/utils/string";

 export const LabelForm: FC<ComponentFormProps<ILabel>> = ({
-  data,
+  data: { defaultValues: label },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -48,9 +48,9 @@ export const LabelForm: FC<ComponentFormProps<ILabel>> = ({
    handleSubmit,
  } = useForm<ILabelAttributes>({
    defaultValues: {
-      name: data?.name || "",
-      title: data?.title || "",
-      description: data?.description || "",
+      name: label?.name || "",
+      title: label?.title || "",
+      description: label?.description || "",
    },
  });
  const validationRules = {
@@ -61,24 +61,24 @@ export const LabelForm: FC<ComponentFormProps<ILabel>> = ({
    description: {},
  };
  const onSubmitForm = (params: ILabelAttributes) => {
-    if (data) {
-      updateLabel({ id: data.id, params });
+    if (label) {
+      updateLabel({ id: label.id, params });
    } else {
      createLabel(params);
    }
  };

  useEffect(() => {
-    if (data) {
+    if (label) {
      reset({
-        name: data.name,
-        title: data.title,
-        description: data.description,
+        name: label.name,
+        title: label.title,
+        description: label.description,
      });
    } else {
      reset();
    }
-  }, [data, reset]);
+  }, [label, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
--- a/frontend/src/components/labels/LabelFormDialog.tsx
+++ b/frontend/src/components/labels/LabelFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { ILabel } from "@/types/label.types";

 import { LabelForm } from "./LabelForm";

-export const LabelFormDialog = <T extends ILabel = ILabel>(
-  props: ComponentFormDialogProps<T>,
+export const LabelFormDialog = (
+  props: ComponentFormDialogProps<typeof LabelForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={LabelForm}
    addText="title.new_label"
    editText="title.edit_label"
--- a/frontend/src/components/labels/index.tsx
+++ b/frontend/src/components/labels/index.tsx
@@ -66,7 +66,11 @@ export const Labels = () => {
    [
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => dialogs.open(LabelFormDialog, row),
+        action: (row) => {
+          dialogs.open(LabelFormDialog, {
+            defaultValues: row,
+          });
+        },
        requires: [PermissionAction.UPDATE],
      },
      {
@@ -177,7 +181,9 @@ export const Labels = () => {
                startIcon={<AddIcon />}
                variant="contained"
                sx={{ float: "right" }}
-                onClick={() => dialogs.open(LabelFormDialog, null)}
+                onClick={() =>
+                  dialogs.open(LabelFormDialog, { defaultValues: null })
+                }
              >
                {t("button.add")}
              </Button>
--- a/frontend/src/components/languages/LanguageForm.tsx
+++ b/frontend/src/components/languages/LanguageForm.tsx
@@ -21,7 +21,7 @@ import { ComponentFormProps } from "@/types/common/dialogs.types";
 import { ILanguage, ILanguageAttributes } from "@/types/language.types";

 export const LanguageForm: FC<ComponentFormProps<ILanguage>> = ({
-  data,
+  data: { defaultValues: language },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -48,9 +48,9 @@ export const LanguageForm: FC<ComponentFormProps<ILanguage>> = ({
    control,
  } = useForm<ILanguageAttributes>({
    defaultValues: {
-      title: data?.title || "",
-      code: data?.code || "",
-      isRTL: data?.isRTL || false,
+      title: language?.title || "",
+      code: language?.code || "",
+      isRTL: language?.isRTL || false,
    },
  });
  const validationRules = {
@@ -62,24 +62,24 @@ export const LanguageForm: FC<ComponentFormProps<ILanguage>> = ({
    },
  };
  const onSubmitForm = (params: ILanguageAttributes) => {
-    if (data) {
-      updateLanguage({ id: data.id, params });
+    if (language) {
+      updateLanguage({ id: language.id, params });
    } else {
      createLanguage(params);
    }
  };

  useEffect(() => {
-    if (data) {
+    if (language) {
      reset({
-        title: data.title,
-        code: data.code,
-        isRTL: data.isRTL,
+        title: language.title,
+        code: language.code,
+        isRTL: language.isRTL,
      });
    } else {
      reset();
    }
-  }, [data, reset]);
+  }, [language, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
--- a/frontend/src/components/languages/LanguageFormDialog.tsx
+++ b/frontend/src/components/languages/LanguageFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { ILanguage } from "@/types/language.types";

 import { LanguageForm } from "./LanguageForm";

-export const LanguageFormDialog = <T extends ILanguage = ILanguage>(
-  props: ComponentFormDialogProps<T>,
+export const LanguageFormDialog = (
+  props: ComponentFormDialogProps<typeof LanguageForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={LanguageForm}
    addText="title.new_language"
    editText="title.edit_language"
--- a/frontend/src/components/languages/index.tsx
+++ b/frontend/src/components/languages/index.tsx
@@ -91,7 +91,9 @@ export const Languages = () => {
    [
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => dialogs.open(LanguageFormDialog, row),
+        action: (row) => {
+          dialogs.open(LanguageFormDialog, { defaultValues: row });
+        },
        requires: [PermissionAction.UPDATE],
      },
      {
--- a/frontend/src/components/nlp/components/NlpEntity.tsx
+++ b/frontend/src/components/nlp/components/NlpEntity.tsx
@@ -121,7 +121,9 @@ const NlpEntity = () => {
      },
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => dialogs.open(NlpEntityFormDialog, row),
+        action: (row) => {
+          dialogs.open(NlpEntityFormDialog, { defaultValues: row });
+        },
        requires: [PermissionAction.UPDATE],
      },
      {
@@ -221,7 +223,9 @@ const NlpEntity = () => {
              startIcon={<AddIcon />}
              variant="contained"
              sx={{ float: "right" }}
-              onClick={() => dialogs.open(NlpEntityFormDialog, null)}
+              onClick={() =>
+                dialogs.open(NlpEntityFormDialog, { defaultValues: null })
+              }
            >
              {t("button.add")}
            </Button>
--- a/frontend/src/components/nlp/components/NlpEntityForm.tsx
+++ b/frontend/src/components/nlp/components/NlpEntityForm.tsx
@@ -31,7 +31,7 @@ import {
 } from "@/types/nlp-entity.types";

 export const NlpEntityVarForm: FC<ComponentFormProps<INlpEntity>> = ({
-  data,
+  data: { defaultValues: nlpEntity },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -57,9 +57,9 @@ export const NlpEntityVarForm: FC<ComponentFormProps<INlpEntity>> = ({
    handleSubmit,
  } = useForm<INlpEntityAttributes>({
    defaultValues: {
-      name: data?.name || "",
-      doc: data?.doc || "",
-      lookups: data?.lookups || ["keywords"],
+      name: nlpEntity?.name || "",
+      doc: nlpEntity?.doc || "",
+      lookups: nlpEntity?.lookups || ["keywords"],
    },
  });
  const validationRules = {
@@ -70,29 +70,29 @@ export const NlpEntityVarForm: FC<ComponentFormProps<INlpEntity>> = ({
    isChecked: {},
  };
  const onSubmitForm = (params: INlpEntityAttributes) => {
-    if (data) {
-      updateNlpEntity({ id: data.id, params });
+    if (nlpEntity) {
+      updateNlpEntity({ id: nlpEntity.id, params });
    } else {
      createNlpEntity(params);
    }
  };

  useEffect(() => {
-    if (data) {
+    if (nlpEntity) {
      reset({
-        name: data.name,
-        doc: data.doc,
+        name: nlpEntity.name,
+        doc: nlpEntity.doc,
      });
    } else {
      reset();
    }
-  }, [data, reset]);
+  }, [nlpEntity, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
      <form onSubmit={handleSubmit(onSubmitForm)}>
        <ContentContainer>
-          {!data ? (
+          {!nlpEntity ? (
            <ContentItem>
              <FormControl>
                <FormLabel>{t("label.lookup_strategies")}</FormLabel>
--- a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx
+++ b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { INlpEntity } from "@/types/nlp-entity.types";

 import { NlpEntityVarForm } from "./NlpEntityForm";

-export const NlpEntityFormDialog = <T extends INlpEntity = INlpEntity>(
-  props: ComponentFormDialogProps<T>,
+export const NlpEntityFormDialog = (
+  props: ComponentFormDialogProps<typeof NlpEntityVarForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={NlpEntityVarForm}
    addText="title.new_nlp_entity"
    editText="title.edit_nlp_entity"
--- a/frontend/src/components/nlp/components/NlpSample.tsx
+++ b/frontend/src/components/nlp/components/NlpSample.tsx
@@ -167,10 +167,14 @@ export default function NlpSample() {
              : null,
          };

-          dialogs.open(NlpSampleFormDialog, data, {
-            maxWidth: "md",
-            hasButtons: false,
-          });
+          dialogs.open(
+            NlpSampleFormDialog,
+            { defaultValues: data },
+            {
+              maxWidth: "md",
+              hasButtons: false,
+            },
+          );
        },
        requires: [PermissionAction.UPDATE],
      },
--- a/frontend/src/components/nlp/components/NlpSampleForm.tsx
+++ b/frontend/src/components/nlp/components/NlpSampleForm.tsx
@@ -22,7 +22,7 @@ import {
 import NlpDatasetSample from "./NlpTrainForm";

 export const NlpSampleForm: FC<ComponentFormProps<INlpDatasetSample>> = ({
-  data,
+  data: { defaultValues: nlpDatasetSample },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -41,10 +41,10 @@ export const NlpSampleForm: FC<ComponentFormProps<INlpDatasetSample>> = ({
    },
  });
  const onSubmitForm = (form: INlpSampleFormAttributes) => {
-    if (data?.id) {
+    if (nlpDatasetSample?.id) {
      updateSample(
        {
-          id: data.id,
+          id: nlpDatasetSample.id,
          params: {
            text: form.text,
            type: form.type,
@@ -63,7 +63,10 @@ export const NlpSampleForm: FC<ComponentFormProps<INlpDatasetSample>> = ({

  return (
    <Wrapper onSubmit={() => {}} {...WrapperProps}>
-      <NlpDatasetSample sample={data || undefined} submitForm={onSubmitForm} />
+      <NlpDatasetSample
+        sample={nlpDatasetSample || undefined}
+        submitForm={onSubmitForm}
+      />
    </Wrapper>
  );
 };
--- a/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx
+++ b/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx
@@ -8,16 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { INlpDatasetSample } from "@/types/nlp-sample.types";

 import { NlpSampleForm } from "./NlpSampleForm";

-export const NlpSampleFormDialog = <
-  T extends INlpDatasetSample = INlpDatasetSample,
->(
-  props: ComponentFormDialogProps<T>,
+export const NlpSampleFormDialog = (
+  props: ComponentFormDialogProps<typeof NlpSampleForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={NlpSampleForm}
    editText="title.edit_nlp_sample"
    {...props}
--- a/frontend/src/components/nlp/components/NlpValueForm.tsx
+++ b/frontend/src/components/nlp/components/NlpValueForm.tsx
@@ -23,20 +23,12 @@ import { ComponentFormProps } from "@/types/common/dialogs.types";
 import { INlpEntity, NlpLookups } from "@/types/nlp-entity.types";
 import { INlpValue, INlpValueAttributes } from "@/types/nlp-value.types";

-export type NlpValueFormProps = {
-  defaultValues?: INlpValue;
-  presetValues: INlpEntity | undefined;
-};
-export const NlpValueForm: FC<ComponentFormProps<NlpValueFormProps>> = ({
-  data: props,
+export const NlpValueForm: FC<ComponentFormProps<INlpValue, INlpEntity>> = ({
+  data: { defaultValues: nlpValue, presetValues: nlpEntity },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
 }) => {
-  const { defaultValues: nlpValue, presetValues: nlpEntity } = props || {
-    defaultValues: null,
-    presetValues: null,
-  };
  const { t } = useTranslate();
  const { toast } = useToast();
  const { query } = useRouter();
--- a/frontend/src/components/nlp/components/NlpValueFormDialog.tsx
+++ b/frontend/src/components/nlp/components/NlpValueFormDialog.tsx
@@ -9,16 +9,13 @@
 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

-import { NlpValueForm, NlpValueFormProps } from "./NlpValueForm";
+import { NlpValueForm } from "./NlpValueForm";

-export const NlpValueFormDialog = <
-  T extends NlpValueFormProps = NlpValueFormProps,
->(
-  props: ComponentFormDialogProps<T>,
+export const NlpValueFormDialog = (
+  props: ComponentFormDialogProps<typeof NlpValueForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={NlpValueForm}
-    rowKey="defaultValues"
    addText="title.new_nlp_entity_value"
    editText="title.edit_nlp_value"
    {...props}
--- a/frontend/src/components/roles/PermissionsBody.tsx
+++ b/frontend/src/components/roles/PermissionsBody.tsx
@@ -63,7 +63,7 @@ const AccordionModelHead = () => (
 );

 export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
-  data: role,
+  data: { defaultValues: role },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
--- a/frontend/src/components/roles/PermissionsBodyDialog.tsx
+++ b/frontend/src/components/roles/PermissionsBodyDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { IRole } from "@/types/role.types";

 import { PermissionsBody } from "./PermissionsBody";

-export const PermissionBodyDialog = <T extends IRole = IRole>(
-  props: ComponentFormDialogProps<T>,
+export const PermissionBodyDialog = (
+  props: ComponentFormDialogProps<typeof PermissionsBody>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={PermissionsBody}
    editText="title.manage_permissions"
    {...props}
--- a/frontend/src/components/roles/RoleForm.tsx
+++ b/frontend/src/components/roles/RoleForm.tsx
@@ -20,7 +20,7 @@ import { ComponentFormProps } from "@/types/common/dialogs.types";
 import { IRole, IRoleAttributes } from "@/types/role.types";

 export const RoleForm: FC<ComponentFormProps<IRole>> = ({
-  data,
+  data: { defaultValues: role },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -52,22 +52,22 @@ export const RoleForm: FC<ComponentFormProps<IRole>> = ({
    },
  };
  const onSubmitForm = (params: IRoleAttributes) => {
-    if (data) {
-      updateRole({ id: data.id, params });
+    if (role) {
+      updateRole({ id: role.id, params });
    } else {
      createRole(params);
    }
  };

  useEffect(() => {
-    if (data) {
+    if (role) {
      reset({
-        name: data.name,
+        name: role.name,
      });
    } else {
      reset();
    }
-  }, [data, reset]);
+  }, [role, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
--- a/frontend/src/components/roles/RoleFormDialog.tsx
+++ b/frontend/src/components/roles/RoleFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { IRole } from "@/types/role.types";

 import { RoleForm } from "./RoleForm";

-export const RoleFormDialog = <T extends IRole = IRole>(
-  props: ComponentFormDialogProps<T>,
+export const RoleFormDialog = (
+  props: ComponentFormDialogProps<typeof RoleForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={RoleForm}
    addText="title.new_role"
    editText="title.edit_role"
--- a/frontend/src/components/roles/index.tsx
+++ b/frontend/src/components/roles/index.tsx
@@ -63,13 +63,19 @@ export const Roles = () => {
      {
        label: ActionColumnLabel.Permissions,
        action: (row) =>
-          dialogs.open(PermissionBodyDialog, row, {
-            hasButtons: false,
-          }),
+          dialogs.open(
+            PermissionBodyDialog,
+            { defaultValues: row },
+            {
+              hasButtons: false,
+            },
+          ),
      },
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => dialogs.open(RoleFormDialog, row),
+        action: (row) => {
+          dialogs.open(RoleFormDialog, { defaultValues: row });
+        },
        requires: [PermissionAction.UPDATE],
      },

@@ -144,7 +150,9 @@ export const Roles = () => {
                sx={{
                  float: "right",
                }}
-                onClick={() => dialogs.open(RoleFormDialog, null)}
+                onClick={() =>
+                  dialogs.open(RoleFormDialog, { defaultValues: null })
+                }
              >
                {t("button.add")}
              </Button>
--- a/frontend/src/components/subscribers/SubscriberForm.tsx
+++ b/frontend/src/components/subscribers/SubscriberForm.tsx
@@ -25,7 +25,7 @@ const getFullName = (subscriber: ISubscriber | null) =>
  `${subscriber?.first_name} ${subscriber?.last_name}`;

 export const SubscriberForm: FC<ComponentFormProps<ISubscriber>> = ({
-  data,
+  data: { defaultValues: subscriber },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -49,16 +49,16 @@ export const SubscriberForm: FC<ComponentFormProps<ISubscriber>> = ({
    handleSubmit,
  } = useForm<ISubscriberAttributes>();
  const onSubmitForm = (params: ISubscriberAttributes) => {
-    if (data?.id) {
-      updateSubscriber({ id: data.id, params });
+    if (subscriber?.id) {
+      updateSubscriber({ id: subscriber.id, params });
    }
  };

  useEffect(() => {
-    if (data) {
-      reset({ labels: data?.labels });
+    if (subscriber) {
+      reset({ labels: subscriber?.labels });
    }
-  }, [data, reset]);
+  }, [subscriber, reset]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
@@ -67,7 +67,7 @@ export const SubscriberForm: FC<ComponentFormProps<ISubscriber>> = ({
          <ContentItem>
            <Input
              label={t("label.user")}
-              value={getFullName(data)}
+              value={subscriber ? getFullName(subscriber) : undefined}
              disabled
              InputProps={{
                readOnly: true,
--- a/frontend/src/components/subscribers/SubscriberFormDialog.tsx
+++ b/frontend/src/components/subscribers/SubscriberFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { ISubscriber } from "@/types/subscriber.types";

 import { SubscriberForm } from "./SubscriberForm";

-export const SubscriberFormDialog = <T extends ISubscriber = ISubscriber>(
-  props: ComponentFormDialogProps<T>,
+export const SubscriberFormDialog = (
+  props: ComponentFormDialogProps<typeof SubscriberForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={SubscriberForm}
    editText="title.manage_subscribers"
    {...props}
--- a/frontend/src/components/subscribers/index.tsx
+++ b/frontend/src/components/subscribers/index.tsx
@@ -151,7 +151,9 @@ export const Subscribers = () => {
      [
        {
          label: ActionColumnLabel.Manage_Labels,
-          action: (row) => dialogs.open(SubscriberFormDialog, row),
+          action: (row) => {
+            dialogs.open(SubscriberFormDialog, { defaultValues: row });
+          },
        },
      ],
      t("label.operations"),
--- a/frontend/src/components/translations/TranslationForm.tsx
+++ b/frontend/src/components/translations/TranslationForm.tsx
@@ -49,7 +49,7 @@ const TranslationInput: React.FC<TranslationInputProps> = ({
 );

 export const TranslationForm: FC<ComponentFormProps<ITranslation>> = ({
-  data,
+  data: { defaultValues: translation },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -74,11 +74,11 @@ export const TranslationForm: FC<ComponentFormProps<ITranslation>> = ({
  });
  const { control, handleSubmit } = useForm<ITranslationAttributes>({
    defaultValues: {
-      translations: data?.translations,
+      translations: translation?.translations,
    },
  });
  const onSubmitForm = (params: ITranslationAttributes) => {
-    if (data?.id) updateTranslation({ id: data.id, params });
+    if (translation?.id) updateTranslation({ id: translation.id, params });
  };

  return (
@@ -86,7 +86,7 @@ export const TranslationForm: FC<ComponentFormProps<ITranslation>> = ({
      <form onSubmit={handleSubmit(onSubmitForm)}>
        <ContentItem>
          <FormLabel>{t("label.original_text")}</FormLabel>
-          <Typography component="p">{data?.str}</Typography>
+          <Typography component="p">{translation?.str}</Typography>
        </ContentItem>
        <ContentContainer>
          {languages
--- a/frontend/src/components/translations/TranslationFormDialog.tsx
+++ b/frontend/src/components/translations/TranslationFormDialog.tsx
@@ -8,14 +8,13 @@

 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
-import { ITranslation } from "@/types/translation.types";

 import { TranslationForm } from "./TranslationForm";

-export const TranslationFormDialog = <T extends ITranslation = ITranslation>(
-  props: ComponentFormDialogProps<T>,
+export const TranslationFormDialog = (
+  props: ComponentFormDialogProps<typeof TranslationForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={TranslationForm}
    editText="title.update_translation"
    {...props}
--- a/frontend/src/components/translations/index.tsx
+++ b/frontend/src/components/translations/index.tsx
@@ -76,7 +76,9 @@ export const Translations = () => {
    [
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => dialogs.open(TranslationFormDialog, row),
+        action: (row) => {
+          dialogs.open(TranslationFormDialog, { defaultValues: row });
+        },
        requires: [PermissionAction.UPDATE],
      },
      {
--- a/frontend/src/components/users/EditUserForm.tsx
+++ b/frontend/src/components/users/EditUserForm.tsx
@@ -23,12 +23,8 @@ import { IUser, IUserAttributes } from "@/types/user.types";

 const getFullName = (user?: IUser) => `${user?.first_name} ${user?.last_name}`;

-export type EditUserFormData = {
-  user: IUser;
-  roles: IRole[];
-};
-export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
-  data,
+export const EditUserForm: FC<ComponentFormProps<IUser, IRole[]>> = ({
+  data: { defaultValues: user, presetValues: roles },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
@@ -51,7 +47,7 @@ export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
    formState: { errors },
    handleSubmit,
  } = useForm<IUserAttributes>({
-    defaultValues: { roles: data?.roles.map((role) => role.id) },
+    defaultValues: { roles: roles?.map((role) => role.id) },
  });
  const validationRules = {
    roles: {
@@ -59,19 +55,19 @@ export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
    },
  };
  const onSubmitForm = (params: IUserAttributes) => {
-    if (data?.user.id) {
+    if (user?.id) {
      updateUser({
-        id: data.user.id,
+        id: user.id,
        params,
      });
    }
  };

  useEffect(() => {
-    if (data?.user) {
-      reset({ roles: data?.user?.roles });
+    if (user) {
+      reset({ roles: user.roles });
    }
-  }, [reset, data?.user]);
+  }, [reset, user]);

  return (
    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
@@ -81,7 +77,7 @@ export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
            <Input
              disabled
              label={t("label.auth_user")}
-              value={getFullName(data?.user)}
+              value={user ? getFullName(user) : undefined}
              InputProps={{
                readOnly: true,
              }}
@@ -94,7 +90,7 @@ export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
                  name="roles"
                  rules={validationRules.roles}
                  control={control}
-                  defaultValue={data?.roles?.map(({ id }) => id) || []}
+                  defaultValue={roles?.map(({ id }) => id) || []}
                  render={({ field }) => {
                    const { onChange, ...rest } = field;

--- a/frontend/src/components/users/EditUserFormDialog.tsx
+++ b/frontend/src/components/users/EditUserFormDialog.tsx
@@ -9,14 +9,12 @@
 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

-import { EditUserForm, EditUserFormData } from "./EditUserForm";
+import { EditUserForm } from "./EditUserForm";

-export const CategoryFormDialog = <
-  T extends EditUserFormData = EditUserFormData,
->(
-  props: ComponentFormDialogProps<T>,
+export const CategoryFormDialog = (
+  props: ComponentFormDialogProps<typeof EditUserForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={EditUserForm}
    editText="title.manage_roles"
    {...props}
--- a/frontend/src/components/users/InviteUserFormDialog.tsx
+++ b/frontend/src/components/users/InviteUserFormDialog.tsx
@@ -13,10 +13,10 @@ import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

 import { InviteUserForm } from "./InviteUserForm";

-export const InviteUserFormFormDialog = <T extends undefined = undefined>(
-  props: ComponentFormDialogProps<T>,
+export const InviteUserFormFormDialog = (
+  props: ComponentFormDialogProps<typeof InviteUserForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={InviteUserForm}
    addText="title.invite_new_user"
    confirmButtonProps={{ startIcon: <SendIcon /> }}
--- a/frontend/src/components/users/index.tsx
+++ b/frontend/src/components/users/index.tsx
@@ -73,11 +73,12 @@ export const Users = () => {
    [
      {
        label: ActionColumnLabel.Manage_Roles,
-        action: (row) =>
+        action: (row) => {
          dialogs.open(CategoryFormDialog, {
-            user: row,
-            roles: roles || [],
-          }),
+            defaultValues: row,
+            presetValues: roles,
+          });
+        },
        requires: [PermissionAction.CREATE],
      },
    ],
@@ -208,7 +209,11 @@ export const Users = () => {
                sx={{
                  float: "right",
                }}
-                onClick={() => dialogs.open(InviteUserFormFormDialog)}
+                onClick={() =>
+                  dialogs.open(InviteUserFormFormDialog, {
+                    defaultValues: null,
+                  })
+                }
              >
                {t("button.invite")}
              </Button>
--- a/frontend/src/components/visual-editor/BlockEditForm.tsx
+++ b/frontend/src/components/visual-editor/BlockEditForm.tsx
@@ -32,7 +32,7 @@ import { TriggersForm } from "./form/TriggersForm";
 type TSelectedTab = "triggers" | "options" | "messages";

 export const BlockEditForm: FC<ComponentFormProps<IBlock>> = ({
-  data: block,
+  data: { defaultValues: block },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
--- a/frontend/src/components/visual-editor/BlockEditFormDialog.tsx
+++ b/frontend/src/components/visual-editor/BlockEditFormDialog.tsx
@@ -7,17 +7,14 @@
 */

 import { GenericFormDialog } from "@/app-components/dialogs";
-import { IBlock } from "@/types/block.types";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

 import { BlockEditForm } from "./BlockEditForm";

-export const BlockEditFormDialog = <
-  T extends IBlock | undefined = IBlock | undefined,
->(
-  props: ComponentFormDialogProps<T>,
+export const BlockEditFormDialog = (
+  props: ComponentFormDialogProps<typeof BlockEditForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={BlockEditForm}
    editText="title.edit_block"
    {...props}
--- a/frontend/src/components/visual-editor/BlockMoveForm.tsx
+++ b/frontend/src/components/visual-editor/BlockMoveForm.tsx
@@ -22,17 +22,17 @@ export type BlockMoveFormData = {
 };

 export const BlockMoveForm: FC<ComponentFormProps<BlockMoveFormData>> = ({
-  data,
+  data: { defaultValues: props },
  Wrapper = Fragment,
  WrapperProps,
  ...rest
 }) => {
  const [selectedCategoryId, setSelectedCategoryId] = useState<string>(
-    data?.category || "",
+    props?.category || "",
  );
  const handleMove = () => {
    if (selectedCategoryId) {
-      data?.onMove(data.ids, selectedCategoryId);
+      props?.onMove(props.ids, selectedCategoryId);
      rest.onSuccess?.();
    }
  };
@@ -43,7 +43,7 @@ export const BlockMoveForm: FC<ComponentFormProps<BlockMoveFormData>> = ({
      {...WrapperProps}
      confirmButtonProps={{
        ...WrapperProps?.confirmButtonProps,
-        disabled: selectedCategoryId === data?.category,
+        disabled: selectedCategoryId === props?.category,
      }}
    >
      <ContentContainer>
@@ -53,7 +53,7 @@ export const BlockMoveForm: FC<ComponentFormProps<BlockMoveFormData>> = ({
          fullWidth
          displayEmpty
        >
-          {data?.categories.map((category) => (
+          {props?.categories.map((category) => (
            <MenuItem key={category.id} value={category.id}>
              {category.label}
            </MenuItem>
--- a/frontend/src/components/visual-editor/BlockMoveFormDialog.tsx
+++ b/frontend/src/components/visual-editor/BlockMoveFormDialog.tsx
@@ -11,17 +11,14 @@ import { MoveUp } from "@mui/icons-material";
 import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";

-import { BlockMoveForm, BlockMoveFormData } from "./BlockMoveForm";
+import { BlockMoveForm } from "./BlockMoveForm";

-export const BlockMoveFormDialog = <
-  T extends BlockMoveFormData = BlockMoveFormData,
->(
-  props: ComponentFormDialogProps<T>,
+export const BlockMoveFormDialog = (
+  props: ComponentFormDialogProps<typeof BlockMoveForm>,
 ) => (
-  <GenericFormDialog<T>
+  <GenericFormDialog
    Form={BlockMoveForm}
-    rowKey="row"
-    addText="message.select_category"
+    editText="message.select_category"
    confirmButtonProps={{ value: "button.move", startIcon: <MoveUp /> }}
    {...props}
  />
--- a/frontend/src/components/visual-editor/v2/Diagrams.tsx
+++ b/frontend/src/components/visual-editor/v2/Diagrams.tsx
@@ -494,10 +494,14 @@ const Diagrams = () => {
  const openEditDialog = (selectedBlockId: string) => {
    const block = getBlockFromCache(selectedBlockId);

-    dialogs.open(BlockEditFormDialog, block, {
-      maxWidth: "md",
-      isSingleton: true,
-    });
+    dialogs.open(
+      BlockEditFormDialog,
+      { defaultValues: block },
+      {
+        maxWidth: "md",
+        isSingleton: true,
+      },
+    );
  };
  const handleMoveButton = () => {
    const ids = getSelectedIds();
@@ -505,10 +509,12 @@ const Diagrams = () => {

    if (ids.length) {
      dialogs.open(BlockMoveFormDialog, {
-        ids: blockIds,
-        onMove,
-        category: selectedCategoryId,
-        categories,
+        defaultValues: {
+          ids: blockIds,
+          onMove,
+          category: selectedCategoryId,
+          categories,
+        },
      });
    }
  };
--- a/frontend/src/types/common/dialogs.types.ts
+++ b/frontend/src/types/common/dialogs.types.ts
@@ -166,13 +166,22 @@ export interface FormButtonsProps {
  confirmButtonProps?: ButtonProps;
 }

-export type ComponentFormProps<T> = FormButtonsProps & {
-  data: T | null;
+export type TPayload<D, P = unknown> = {
+  presetValues?: P;
+  defaultValues?: D | null;
+};
+
+export type ComponentFormProps<D, P = unknown> = FormButtonsProps & {
+  data: TPayload<D, P>;
  onError?: () => void;
  onSuccess?: () => void;
  Wrapper?: React.FC<FormDialogProps>;
  WrapperProps?: Partial<FormDialogProps> & Partial<FormButtonsProps>;
 };

-export type ComponentFormDialogProps<T> = FormButtonsProps &
-  DialogProps<T | null, boolean>;
+export type ExtractFormProps<T extends (arg: { data: any }) => unknown> =
+  Parameters<T>[0]["data"];
+
+export type ComponentFormDialogProps<
+  T extends (arg: { data: any }) => unknown,
+> = FormButtonsProps & DialogProps<ExtractFormProps<T> | null, boolean>;