Merge pull request #696 from Hexastack/695-refactor-nlu-samples-dialogs-edit-delete-bulk

refactor(frontend): update nlpSample dialogs

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

@@ -20,14 +20,18 @@ export const FormDialog = ({
   ...rest
 }: FormDialogProps) => {
   const handleClose = () => rest.onClose?.({}, "backdropClick");
+  const dialogActions =
+    rest.hasButtons === false ? null : (
+      <DialogActions style={{ padding: "0.5rem" }}>
+        <DialogFormButtons onCancel={handleClose} onSubmit={onSubmit} />
+      </DialogActions>
+    );
 
   return (
     <Dialog fullWidth {...rest}>
       <DialogTitle onClose={handleClose}>{title}</DialogTitle>
       <DialogContent>{children}</DialogContent>
-      <DialogActions style={{ padding: "0.5rem" }}>
+      {dialogActions}
-        <DialogFormButtons onCancel={handleClose} onSubmit={onSubmit} />
-      </DialogActions>
     </Dialog>
   );
 };

frontend/src/components/nlp/components/NlpSample.tsx

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 CircleIcon from "@mui/icons-material/Circle";
 import ClearIcon from "@mui/icons-material/Clear";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -26,7 +27,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
 import { useState } from "react";
 import { useQueryClient } from "react-query";
 
-import { DeleteDialog } from "@/app-components/dialogs";
+import { ConfirmDialogBody } from "@/app-components/dialogs";
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
 import FileUploadButton from "@/app-components/inputs/FileInput";
@@ -45,7 +46,7 @@ import { useFind } from "@/hooks/crud/useFind";
 import { useGetFromCache } from "@/hooks/crud/useGet";
 import { useImport } from "@/hooks/crud/useImport";
 import { useConfig } from "@/hooks/useConfig";
-import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
@@ -62,7 +63,7 @@ import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";
 import { buildURL } from "@/utils/URL";
 
-import { NlpSampleDialog } from "../NlpSampleDialog";
+import { NlpSampleFormDialog } from "./NlpSampleFormDialog";
 
 const NLP_SAMPLE_TYPE_COLORS = {
   all: "#fff",
@@ -75,6 +76,7 @@ export default function NlpSample() {
   const { apiUrl } = useConfig();
   const { toast } = useToast();
   const { t } = useTranslate();
+  const dialogs = useDialogs();
   const queryClient = useQueryClient();
   const [type, setType] = useState<NlpSampleType | "all">("all");
   const [language, setLanguage] = useState<string | undefined>(undefined);
@@ -92,28 +94,23 @@ export default function NlpSample() {
     ],
     $iLike: ["text"],
   });
-  const { mutateAsync: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, {
+  const { mutate: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, {
     onError: () => {
       toast.error(t("message.internal_server_error"));
     },
     onSuccess() {
-      deleteDialogCtl.closeDialog();
       toast.success(t("message.item_delete_success"));
     },
   });
-  const { mutateAsync: deleteNlpSamples } = useDeleteMany(
+  const { mutate: deleteNlpSamples } = useDeleteMany(EntityType.NLP_SAMPLE, {
-    EntityType.NLP_SAMPLE,
+    onError: (error) => {
-    {
+      toast.error(error);
-      onError: (error) => {
-        toast.error(error);
-      },
-      onSuccess: () => {
-        deleteDialogCtl.closeDialog();
-        setSelectedNlpSamples([]);
-        toast.success(t("message.item_delete_success"));
-      },
     },
-  );
+    onSuccess: () => {
+      setSelectedNlpSamples([]);
+      toast.success(t("message.item_delete_success"));
+    },
+  });
   const { mutateAsync: importDataset, isLoading } = useImport(
     EntityType.NLP_SAMPLE,
     {
@@ -147,8 +144,6 @@ export default function NlpSample() {
       params: searchPayload,
     },
   );
-  const deleteDialogCtl = useDialog<string>(false);
-  const editDialogCtl = useDialog<INlpDatasetSample>(false);
   const actionColumns = getActionsColumn<INlpSample>(
     [
       {
@@ -173,13 +168,22 @@ export default function NlpSample() {
               : null,
           };
 
-          editDialogCtl.openDialog(data);
+          dialogs.open(NlpSampleFormDialog, data, {
+            maxWidth: "md",
+            hasButtons: false,
+          });
         },
         requires: [PermissionAction.UPDATE],
       },
       {
         label: ActionColumnLabel.Delete,
-        action: (row) => deleteDialogCtl.openDialog(row.id),
+        action: async ({ id }) => {
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
+
+          if (isConfirmed) {
+            deleteNlpSample(id);
+          }
+        },
         requires: [PermissionAction.DELETE],
       },
     ],
@@ -300,19 +304,6 @@ export default function NlpSample() {
 
   return (
     <Grid item xs={12}>
-      <NlpSampleDialog {...getDisplayDialogs(editDialogCtl)} />
-      <DeleteDialog
-        {...deleteDialogCtl}
-        callback={() => {
-          if (selectedNlpSamples.length > 0) {
-            deleteNlpSamples(selectedNlpSamples);
-            setSelectedNlpSamples([]);
-            deleteDialogCtl.closeDialog();
-          } else if (deleteDialogCtl.data) {
-            deleteNlpSample(deleteDialogCtl.data);
-          }
-        }}
-      />
       <Grid container alignItems="center">
         <Grid
           container
@@ -406,18 +397,26 @@ export default function NlpSample() {
                 {t("button.export")}
               </Button>
             ) : null}
-            {selectedNlpSamples.length > 0 && (
+            <Grid item>
-              <Grid item>
+              <Button
-                <Button
+                startIcon={<DeleteIcon />}
-                  startIcon={<DeleteIcon />}
+                variant="contained"
-                  variant="contained"
+                color="error"
-                  color="error"
+                onClick={async () => {
-                  onClick={() => deleteDialogCtl.openDialog(undefined)}
+                  const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
-                >
+                    mode: "selection",
-                  {t("button.delete")}
+                    count: selectedNlpSamples.length,
-                </Button>
+                  });
-              </Grid>
+
-            )}
+                  if (isConfirmed) {
+                    deleteNlpSamples(selectedNlpSamples);
+                  }
+                }}
+                disabled={!selectedNlpSamples.length}
+              >
+                {t("button.delete")}
+              </Button>
+            </Grid>
           </ButtonGroup>
         </Grid>
       </Grid>

frontend/src/components/nlp/components/NlpSampleForm.tsx

@@ -1,38 +1,35 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 { Dialog, DialogContent } from "@mui/material";
+import { FC, Fragment } from "react";
-import { FC } from "react";
 
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
 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 { ComponentFormProps } from "@/types/common/dialogs.types";
 import {
   INlpDatasetSample,
   INlpDatasetSampleAttributes,
   INlpSampleFormAttributes,
 } from "@/types/nlp-sample.types";
 
-import NlpDatasetSample from "./components/NlpTrainForm";
+import NlpDatasetSample from "./NlpTrainForm";
 
-export type NlpSampleDialogProps = DialogControlProps<INlpDatasetSample>;
+export const NlpSampleForm: FC<ComponentFormProps<INlpDatasetSample>> = ({
-export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
+  data,
-  open,
+  Wrapper = Fragment,
-  data: sample,
+  WrapperProps,
-  closeDialog,
   ...rest
 }) => {
   const { t } = useTranslate();
   const { toast } = useToast();
-  const { mutateAsync: updateSample } = useUpdate<
+  const { mutate: updateSample } = useUpdate<
     EntityType.NLP_SAMPLE,
     INlpDatasetSampleAttributes
   >(EntityType.NLP_SAMPLE, {
@@ -44,10 +41,10 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
     },
   });
   const onSubmitForm = (form: INlpSampleFormAttributes) => {
-    if (sample?.id) {
+    if (data?.id) {
       updateSample(
         {
-          id: sample.id,
+          id: data.id,
           params: {
             text: form.text,
             type: form.type,
@@ -57,7 +54,7 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
         },
         {
           onSuccess: () => {
-            closeDialog();
+            rest.onSuccess?.();
           },
         },
       );
@@ -65,13 +62,13 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
   };
 
   return (
-    <Dialog open={open} fullWidth maxWidth="md" onClose={closeDialog} {...rest}>
+    <Wrapper open={!!WrapperProps?.open} onSubmit={() => {}} {...WrapperProps}>
-      <DialogTitle onClose={closeDialog}>
+      <form>
-        {t("title.edit_nlp_sample")}
+        <NlpDatasetSample
-      </DialogTitle>
+          sample={data || undefined}
-      <DialogContent>
+          submitForm={onSubmitForm}
-        <NlpDatasetSample sample={sample} submitForm={onSubmitForm} />
+        />
-      </DialogContent>
+      </form>
-    </Dialog>
+    </Wrapper>
   );
 };

frontend/src/components/nlp/components/NlpSampleFormDialog.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 { INlpDatasetSample } from "@/types/nlp-sample.types";
+
+import { NlpSampleForm } from "./NlpSampleForm";
+
+export const NlpSampleFormDialog = <
+  T extends INlpDatasetSample = INlpDatasetSample,
+>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={NlpSampleForm}
+    editText="title.edit_nlp_sample"
+    {...props}
+  />
+);

frontend/src/contexts/dialogs.context.tsx

@@ -55,7 +55,7 @@ function DialogsProvider(props: DialogProviderProps) {
       payload: P,
       options: OpenDialogOptions<R> = {},
     ) {
-      const { onClose = async () => {} } = options;
+      const { onClose = async () => {}, ...rest } = options;
       let resolve: ((result: R) => void) | undefined;
       const promise = new Promise<R>((resolveImpl) => {
         resolve = resolveImpl;
@@ -77,7 +77,7 @@ function DialogsProvider(props: DialogProviderProps) {
         payload,
         onClose,
         resolve,
-        msgProps: { count: options.count, mode: options.mode },
+        msgProps: rest,
       };
 
       setStack((prevStack) => [...prevStack, newEntry]);

frontend/src/types/common/dialogs.types.ts

@@ -9,12 +9,14 @@
 import { DialogProps as MuiDialogProps } from "@mui/material";
 import { BaseSyntheticEvent } from "react";
 
-interface ConfirmDialogExtraOptions {
+interface DialogExtraOptions {
   mode?: "click" | "selection";
   count?: number;
+  maxWidth?: MuiDialogProps["maxWidth"];
+  hasButtons?: boolean;
 }
 // context
-export interface OpenDialogOptions<R> extends ConfirmDialogExtraOptions {
+export interface OpenDialogOptions<R> extends DialogExtraOptions {
   /**
    * A function that is called before closing the dialog closes. The dialog
    * stays open as long as the returned promise is not resolved. Use this if
@@ -133,7 +135,7 @@ export interface DialogStackEntry<P, R> {
   payload: P;
   onClose: (result: R) => Promise<void>;
   resolve: (result: R) => void;
-  msgProps: ConfirmDialogExtraOptions;
+  msgProps: DialogExtraOptions;
 }
 
 export interface DialogProviderProps {
@@ -142,7 +144,7 @@ export interface DialogProviderProps {
 }
 
 // form dialog
-export interface FormDialogProps extends MuiDialogProps {
+export interface FormDialogProps extends MuiDialogProps, DialogExtraOptions {
   title?: string;
   children?: React.ReactNode;
   onSubmit: (e: BaseSyntheticEvent) => void;