feat(frontend): add an nlpSample import component

frontend/public/locales/en/translation.json

@@ -81,7 +81,9 @@
     "subtitle_is_required": "Subtitle is required",
     "category_is_required": "Flow is required",
     "attachment_is_required": "Attachment is required",
-    "success_import": "Content has been successfuly imported!",
+    "success_import": "Content has been successfully imported!",
+    "import_failed": "Import failed",
+    "import_duplicated_data": "Data already exists",
     "attachment_not_synced": "- Pending Sync. -",
     "success_translation_refresh": "Translations has been successfully refreshed!",
     "message_tag_is_required": "You need to specify a message tag.",

frontend/public/locales/fr/translation.json

@@ -83,6 +83,8 @@
     "category_is_required": "La catégorie est requise",
     "attachment_is_required": "L'attachement est obligatoire",
     "success_import": "Le contenu a été importé avec succès!",
+    "import_failed": "Échec de l'importation",
+    "import_duplicated_data": "Les données existent déjà",
     "attachment_not_synced": "- En attente de Sync. -",
     "success_translation_refresh": "Les traductions ont été actualisées avec succès!",
     "message_tag_is_required": "Vous devez spécifier le tag de message.",

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

@@ -15,13 +15,14 @@ import {
   Button,
   ButtonGroup,
   Chip,
+  CircularProgress,
   Grid,
   IconButton,
   MenuItem,
   Stack,
 } from "@mui/material";
 import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
@@ -38,6 +39,7 @@ import { useDelete } from "@/hooks/crud/useDelete";
 import { useDeleteMany } from "@/hooks/crud/useDeleteMany";
 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 { useHasPermission } from "@/hooks/useHasPermission";
@@ -104,6 +106,20 @@ export default function NlpSample() {
       },
     },
   );
+  const { mutateAsync: importDataset, isLoading } = useImport(
+    EntityType.NLP_SAMPLE,
+    {
+      onError: () => {
+        toast.error(t("message.import_failed"));
+      },
+      onSuccess: (data) => {
+        if (data.length) toast.success(t("message.success_import"));
+        else {
+          toast.error(t("message.import_duplicated_data"));
+        }
+      },
+    },
+  );
   const [selectedNlpSamples, setSelectedNlpSamples] = useState<string[]>([]);
   const { dataGridProps } = useFind(
     { entity: EntityType.NLP_SAMPLE, format: Format.FULL },
@@ -259,6 +275,15 @@ export default function NlpSample() {
   const handleSelectionChange = (selection: GridRowSelectionModel) => {
     setSelectedNlpSamples(selection as string[]);
   };
+  const handleImportChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files?.length) {
+      const file = event.target.files.item(0);
+
+      if (file) {
+        await importDataset(file);
+      }
+    }
+  };
 
   return (
     <Grid item xs={12}>
@@ -343,13 +368,25 @@ export default function NlpSample() {
               EntityType.NLP_SAMPLE_ENTITY,
               PermissionAction.CREATE,
             ) ? (
-              <Button
-                variant="contained"
-                onClick={() => importDialogCtl.openDialog()}
-                startIcon={<UploadIcon />}
-              >
-                {t("button.import")}
-              </Button>
+              <>
+                <Button
+                  htmlFor="importFile"
+                  variant="contained"
+                  component="label"
+                  startIcon={<UploadIcon />}
+                  endIcon={isLoading ? <CircularProgress size="1rem" /> : null}
+                  disabled={isLoading}
+                >
+                  {t("button.import")}
+                </Button>
+                <Input
+                  id="importFile"
+                  type="file"
+                  value="" // to trigger an automatic reset to allow the same file to be selected multiple times
+                  sx={{ display: "none" }}
+                  onChange={handleImportChange}
+                />
+              </>
             ) : null}
             {hasPermission(EntityType.NLP_SAMPLE, PermissionAction.READ) &&
             hasPermission(

frontend/src/hooks/crud/useImport.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright © 2024 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 { useMutation, useQueryClient } from "react-query";
+
+import { QueryType, TMutationOptions } from "@/services/types";
+import { IBaseSchema, IDynamicProps, TType } from "@/types/base.types";
+
+import { useEntityApiClient } from "../useApiClient";
+
+import { isSameEntity, useNormalizeAndCache } from "./helpers";
+
+export const useImport = <
+  TEntity extends IDynamicProps["entity"],
+  TAttr extends File = File,
+  TBasic extends IBaseSchema = TType<TEntity>["basic"],
+>(
+  entity: TEntity,
+  options: Omit<
+    TMutationOptions<TBasic[], Error, TAttr, TBasic[]>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) => {
+  const api = useEntityApiClient<TAttr, TBasic>(entity);
+  const queryClient = useQueryClient();
+  const normalizeAndCache = useNormalizeAndCache<TBasic, string[], TBasic>(
+    entity,
+  );
+  const { invalidate = true, ...rest } = options;
+
+  return useMutation({
+    mutationFn: async (variables) => {
+      const data = await api.import(variables);
+      const { result, entities } = normalizeAndCache(data);
+
+      // Invalidate current entity count and collection
+      if (invalidate) {
+        queryClient.invalidateQueries({
+          predicate: ({ queryKey }) => {
+            const [qType, qEntity] = queryKey;
+
+            return (
+              (qType === QueryType.count || qType === QueryType.collection) &&
+              isSameEntity(qEntity, entity)
+            );
+          },
+        });
+      }
+
+      return result.map((id) => entities[entity][id]);
+    },
+    ...rest,
+  });
+};

frontend/src/services/api.class.ts

@@ -269,6 +269,20 @@ export class EntityApiClient<TAttr, TBasic, TFull> extends ApiClient {
     return data;
   }
 
+  async import<T = TBasic>(file: File) {
+    const { _csrf } = await this.getCsrf();
+    const formData = new FormData();
+
+    formData.append("file", file);
+
+    const { data } = await this.request.post<T[], AxiosResponse<T[]>, FormData>(
+      `${ROUTES[this.type]}/import?_csrf=${_csrf}`,
+      formData,
+    );
+
+    return data;
+  }
+
   async upload(file: File) {
     const { _csrf } = await this.getCsrf();
     const formData = new FormData();