refactor(frontend): update content and contentImport dialogs

frontend/src/app-components/buttons/FormButtons.tsx

@@ -11,6 +11,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import { Button, Grid } from "@mui/material";
 
 import { useTranslate } from "@/hooks/useTranslate";
+import { TTranslationKeys } from "@/i18n/i18n.types";
 import { FormButtonsProps } from "@/types/common/dialogs.types";
 
 export const DialogFormButtons = ({
@@ -20,6 +21,10 @@ export const DialogFormButtons = ({
   confirmButtonProps,
 }: FormButtonsProps) => {
   const { t } = useTranslate();
+  const cancelButtonTitle = (cancelButtonProps?.value ||
+    "button.cancel") as TTranslationKeys;
+  const confirmButtonTitle = (confirmButtonProps?.value ||
+    "button.submit") as TTranslationKeys;
 
   return (
     <Grid
@@ -35,16 +40,15 @@ export const DialogFormButtons = ({
         startIcon={<CloseIcon />}
         {...cancelButtonProps}
       >
-        {t("button.cancel")}
+        {t(cancelButtonTitle)}
       </Button>
       <Button
-        type="button"
         variant="contained"
         onClick={onSubmit}
         startIcon={<CheckIcon />}
         {...confirmButtonProps}
       >
-        {t("button.submit")}
+        {t(confirmButtonTitle)}
       </Button>
     </Grid>
   );

frontend/src/app-components/dialogs/GenericFormDialog.tsx

@@ -8,36 +8,38 @@
 
 import React from "react";
 
-import { FormDialog } from "@/app-components/dialogs";
+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";
 
 type GenericFormDialogProps<T> = ComponentFormDialogProps<T> & {
   Form: React.ElementType;
+  rowKey?: keyof T;
   addText?: TTranslationKeys;
   editText?: TTranslationKeys;
 };
 
 export const GenericFormDialog = <T,>({
   Form,
-  payload,
+  rowKey,
+  payload: data,
   ...rest
 }: GenericFormDialogProps<T>) => {
   const { t } = useTranslate();
-  const translationKey = payload ? rest.editText : rest.addText;
+  const hasRow = rowKey ? data?.[rowKey] : data;
+  const translationKey = hasRow ? rest.editText : rest.addText;
 
   return (
     <Form
-      data={payload}
-      Wrapper={FormDialog}
       onSuccess={() => {
         rest.onClose(true);
       }}
       WrapperProps={{
         title: translationKey && t(translationKey),
         ...rest,
       }}
+      {...{ data, Wrapper }}
     />
   );
 };

frontend/src/components/contents/ContentDialog.tsx → frontend/src/components/contents/ContentForm.tsx

@@ -7,16 +7,8 @@
  */
 
 import LinkIcon from "@mui/icons-material/Link";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  FormControl,
-  FormControlLabel,
-  Switch,
-} from "@mui/material";
-import { isAbsoluteUrl } from "next/dist/shared/lib/utils";
-import { FC, useEffect } from "react";
+import { FormControl, FormControlLabel, Switch } from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
 import {
   Controller,
   ControllerRenderProps,
@@ -25,26 +17,24 @@ import {
 } from "react-hook-form";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
-import DialogButtons from "@/app-components/buttons/DialogButtons";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
 import { Adornment } from "@/app-components/inputs/Adornment";
 import { Input } from "@/app-components/inputs/Input";
 import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { AttachmentResourceRef } from "@/types/attachment.types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
 import {
   ContentField,
   ContentFieldType,
   IContentType,
 } from "@/types/content-type.types";
 import { IContent, IContentAttributes } from "@/types/content.types";
 import { MIME_TYPES } from "@/utils/attachment";
+import { isAbsoluteUrl } from "@/utils/URL";
 
 interface ContentFieldInput {
   contentField: ContentField;
@@ -56,7 +46,6 @@ interface ContentFieldInput {
   >;
   idx: number;
 }
-
 const ContentFieldInput: React.FC<ContentFieldInput> = ({
   contentField: contentField,
   field,
@@ -139,14 +128,14 @@ const buildDynamicFields = (
   },
 });
 
-export type ContentDialogProps = DialogControlProps<{
+export type ContentFormData = {
   content?: IContent;
   contentType?: IContentType;
-}>;
-export const ContentDialog: FC<ContentDialogProps> = ({
-  open,
+};
+export const ContentForm: FC<ComponentFormProps<ContentFormData>> = ({
   data,
-  closeDialog,
+  Wrapper = Fragment,
+  WrapperProps,
   ...rest
 }) => {
   const { content, contentType } = data || {
@@ -177,44 +166,34 @@ export const ContentDialog: FC<ContentDialogProps> = ({
         isAbsoluteUrl(value) || t("message.url_is_invalid"),
     },
   };
-  const { mutateAsync: createContent } = useCreate(EntityType.CONTENT);
-  const { mutateAsync: updateContent } = useUpdate(EntityType.CONTENT);
-  const onSubmitForm = async (params: IContentAttributes) => {
+  const { mutate: createContent } = useCreate(EntityType.CONTENT);
+  const { mutate: updateContent } = useUpdate(EntityType.CONTENT);
+  const options = {
+    onError: (error: Error) => {
+      rest.onError?.();
+      toast.error(error.message || t("message.internal_server_error"));
+    },
+    onSuccess: () => {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  };
+  const onSubmitForm = (params: IContentAttributes) => {
     if (content) {
       updateContent(
         { id: content.id, params: buildDynamicFields(params, contentType) },
-        {
-          onError: () => {
-            toast.error(t("message.internal_server_error"));
-          },
-          onSuccess: () => {
-            closeDialog();
-            toast.success(t("message.success_save"));
-          },
-        },
+        options,
       );
     } else if (contentType) {
       createContent(
         { ...buildDynamicFields(params, contentType), entity: contentType.id },
-        {
-          onError: (error) => {
-            toast.error(error);
-          },
-          onSuccess: () => {
-            closeDialog();
-            toast.success(t("message.success_save"));
-          },
-        },
+        options,
       );
     } else {
       throw new Error("Content Type must be passed to the dialog form.");
     }
   };
 
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
   useEffect(() => {
     if (content) {
       reset(content);
@@ -224,47 +203,43 @@ export const ContentDialog: FC<ContentDialogProps> = ({
   }, [content, reset]);
 
   return (
-    <Dialog open={open} fullWidth maxWidth="md" onClose={closeDialog} {...rest}>
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {content ? t("title.edit_node") : t("title.new_content")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            {(contentType?.fields || []).map((contentField, index) => (
-              <ContentItem key={contentField.name}>
-                <Controller
-                  name={contentField.name}
-                  control={control}
-                  defaultValue={
-                    content ? content["dynamicFields"][contentField.name] : null
-                  }
-                  rules={
-                    contentField.name === "title"
-                      ? validationRules.title
-                      : contentField.type === ContentFieldType.URL
-                      ? validationRules.url
-                      : undefined
-                  }
-                  render={({ field }) => (
-                    <FormControl fullWidth sx={{ paddingTop: ".75rem" }}>
-                      <ContentFieldInput
-                        contentField={contentField}
-                        field={field}
-                        errors={errors}
-                        idx={index}
-                      />
-                    </FormControl>
-                  )}
-                />
-              </ContentItem>
-            ))}
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
+        <ContentContainer>
+          {(contentType?.fields || []).map((contentField, index) => (
+            <ContentItem key={contentField.name}>
+              <Controller
+                name={contentField.name}
+                control={control}
+                defaultValue={
+                  content ? content["dynamicFields"][contentField.name] : null
+                }
+                rules={
+                  contentField.name === "title"
+                    ? validationRules.title
+                    : contentField.type === ContentFieldType.URL
+                    ? validationRules.url
+                    : undefined
+                }
+                render={({ field }) => (
+                  <FormControl fullWidth sx={{ paddingTop: ".75rem" }}>
+                    <ContentFieldInput
+                      contentField={contentField}
+                      field={field}
+                      errors={errors}
+                      idx={index}
+                    />
+                  </FormControl>
+                )}
+              />
+            </ContentItem>
+          ))}
+        </ContentContainer>
       </form>
-    </Dialog>
+    </Wrapper>
   );
 };

frontend/src/components/contents/ContentFormDialog.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { GenericFormDialog } from "@/app-components/dialogs";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+
+import { ContentForm, ContentFormData } from "./ContentForm";
+
+export const ContentFormDialog = <T extends ContentFormData = ContentFormData>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={ContentForm}
+    rowKey="content"
+    addText="title.new_content"
+    editText="title.edit_node"
+    {...props}
+  />
+);