feat: TGF-1775 - Implement autosave fail report logic

src/app/components/rich-text-editor/index.tsx

@@ -34,13 +34,13 @@ export const RichEditor: React.FC<{
     autofocus: true,
     content: selectedItem?.data?.rte || "",
     editable: !viewMode,
-    onUpdate: ({ editor }) => {
+    onUpdate: ({ editor: updatedEditor }) => {
       if (selectedItem) {
         editItem({
           ...selectedItem,
           data: {
             ...selectedItem.data,
-            rte: editor.getJSON(),
+            rte: updatedEditor.getJSON(),
           },
         });
       }

src/app/hooks/queries/report-builder.ts

@@ -651,3 +651,16 @@ export const useFilteredDatasetPage = ({
     placeholderData: (previousData) => previousData,
   });
 };
+
+export const useSendErrorReport = () => {
+  return useMutation({
+    mutationKey: ["ReportBuilderSendErrorReport"],
+    mutationFn: (data: {
+      action: string | null;
+      details: string;
+      reportId: string | undefined;
+      reportName: string | undefined;
+      errorMessage: string | null;
+    }) => axiosInstance.post(`/report/report-an-error`, data),
+  });
+};

src/app/pages/report-builder/builder/components/header/index.tsx

@@ -645,8 +645,7 @@ export const ReportBuilderPageHeader: React.FC = () => {
         reportId={id}
         reportName={name}
         error={updateReport.error}
-        onSubmit={(payload) => {
-          console.log("Report issue submitted:", payload);
+        onSubmitted={() => {
           setSnackbarMessage(
             "Thank you for reporting the issue. We will look into it.",
           );

src/app/pages/report-builder/main/components/report-issue-modal/data.ts

@@ -14,7 +14,7 @@ export interface ReportBuilderReportIssueSubmitPayload {
 export interface ReportBuilderReportIssueModalProps {
   open: boolean;
   onClose: () => void;
-  onSubmit?: (payload: ReportBuilderReportIssueSubmitPayload) => void;
+  onSubmitted?: () => void;
   activityOptions?: string[];
   maxDetailsLength?: number;
   reportId?: string;

src/app/pages/report-builder/main/components/report-issue-modal/index.tsx

@@ -12,13 +12,14 @@ import {
   ReportBuilderReportIssueModalProps,
 } from "app/pages/report-builder/main/components/report-issue-modal/data";
 import { format } from "date-fns";
+import { useSendErrorReport } from "app/hooks/queries/report-builder";
 
 export const ReportBuilderReportIssueModal: React.FC<
   ReportBuilderReportIssueModalProps
 > = ({
   open,
   onClose,
-  onSubmit,
+  onSubmitted,
   reportId,
   reportName,
   error,
@@ -36,17 +37,24 @@ export const ReportBuilderReportIssueModal: React.FC<
     );
   };
 
+  const sendErrorReport = useSendErrorReport();
+
   const handleDetailsChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     if (e.target.value.length <= maxDetailsLength) {
       setDetails(e.target.value);
     }
   };
 
   const handleSubmit = () => {
-    onSubmit?.({
-      activity: selectedActivity,
+    const payload = {
+      action: selectedActivity,
       details,
-    });
+      reportId,
+      reportName,
+      errorMessage: error?.message || null,
+    };
+    sendErrorReport.mutate(payload);
+    onSubmitted?.();
   };
 
   React.useEffect(() => {
@@ -342,7 +350,7 @@ export const ReportBuilderReportIssueModal: React.FC<
                 },
               }}
             >
-              Send Report
+              {sendErrorReport.isPending ? "Reporting..." : "Send Report"}
             </Button>
           </Box>
         </Box>