Feature/v2/automate (#4248)

* automate feature
* Moved all providers to app level to simplify homepage 
* Circular dependency fixes
* You will see that now toolRegistry gets a tool config and a tool
settings object. These enable automate to run the tools using as much
static code as possible.

---------

Co-authored-by: Connor Yoh <[email protected]>

frontend/src/tools/AddPassword.tsx

@@ -9,11 +9,11 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import AddPasswordSettings from "../components/tools/addPassword/AddPasswordSettings";
 import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings";
 
-import { useAddPasswordParameters } from "../hooks/tools/addPassword/useAddPasswordParameters";
+import { useAddPasswordParameters, defaultParameters } from "../hooks/tools/addPassword/useAddPasswordParameters";
 import { useAddPasswordOperation } from "../hooks/tools/addPassword/useAddPasswordOperation";
 import { useAddPasswordTips } from "../components/tooltips/useAddPasswordTips";
 import { useAddPasswordPermissionsTips } from "../components/tooltips/useAddPasswordPermissionsTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -114,4 +114,4 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default AddPassword;
+export default AddPassword as ToolComponent;

frontend/src/tools/AddWatermark.tsx

@@ -21,7 +21,7 @@ import {
   useWatermarkFileTips,
   useWatermarkFormattingTips,
 } from "../components/tooltips/useWatermarkTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -208,4 +208,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
   });
 };
 
-export default AddWatermark;
+// Static method to get the operation hook for automation
+AddWatermark.tool = () => useAddWatermarkOperation;
+
+export default AddWatermark as ToolComponent;

frontend/src/tools/Automate.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useFileContext } from "../contexts/FileContext";
+import { useFileSelection } from "../contexts/FileContext";
+
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
+import { createFilesToolStep } from "../components/tools/shared/FilesToolStep";
+import AutomationSelection from "../components/tools/automate/AutomationSelection";
+import AutomationCreation from "../components/tools/automate/AutomationCreation";
+import AutomationRun from "../components/tools/automate/AutomationRun";
+
+import { useAutomateOperation } from "../hooks/tools/automate/useAutomateOperation";
+import { BaseToolProps } from "../types/tool";
+import { useFlatToolRegistry } from "../data/useTranslatedToolRegistry";
+import { useSavedAutomations } from "../hooks/tools/automate/useSavedAutomations";
+import { AutomationConfig, AutomationStepData, AutomationMode } from "../types/automation";
+import { AUTOMATION_STEPS } from "../constants/automation";
+
+const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { selectedFiles } = useFileSelection();
+
+  const [currentStep, setCurrentStep] = useState<'selection' | 'creation' | 'run'>(AUTOMATION_STEPS.SELECTION);
+  const [stepData, setStepData] = useState<AutomationStepData>({ step: AUTOMATION_STEPS.SELECTION });
+
+  const automateOperation = useAutomateOperation();
+  const toolRegistry = useFlatToolRegistry();
+  const hasResults = automateOperation.files.length > 0 || automateOperation.downloadUrl !== null;
+  const { savedAutomations, deleteAutomation, refreshAutomations } = useSavedAutomations();
+
+  const handleStepChange = (data: AutomationStepData) => {
+    // If navigating away from run step, reset automation results
+    if (currentStep === AUTOMATION_STEPS.RUN && data.step !== AUTOMATION_STEPS.RUN) {
+      automateOperation.resetResults();
+    }
+    
+    // If navigating to run step with a different automation, reset results
+    if (data.step === AUTOMATION_STEPS.RUN && data.automation && 
+        stepData.automation && data.automation.id !== stepData.automation.id) {
+      automateOperation.resetResults();
+    }
+    
+    setStepData(data);
+    setCurrentStep(data.step);
+  };
+
+  const handleComplete = () => {
+    // Reset automation results when completing
+    automateOperation.resetResults();
+    
+    // Reset to selection step
+    setCurrentStep(AUTOMATION_STEPS.SELECTION);
+    setStepData({ step: AUTOMATION_STEPS.SELECTION });
+    onComplete?.([]); // Pass empty array since automation creation doesn't produce files
+  };
+
+  const renderCurrentStep = () => {
+    switch (currentStep) {
+      case 'selection':
+        return (
+          <AutomationSelection
+            savedAutomations={savedAutomations}
+            onCreateNew={() => handleStepChange({ step: AUTOMATION_STEPS.CREATION, mode: AutomationMode.CREATE })}
+            onRun={(automation: AutomationConfig) => handleStepChange({ step: AUTOMATION_STEPS.RUN, automation })}
+            onEdit={(automation: AutomationConfig) => handleStepChange({ step: AUTOMATION_STEPS.CREATION, mode: AutomationMode.EDIT, automation })}
+            onDelete={async (automation: AutomationConfig) => {
+              try {
+                await deleteAutomation(automation.id);
+              } catch (error) {
+                console.error('Failed to delete automation:', error);
+                onError?.(`Failed to delete automation: ${automation.name}`);
+              }
+            }}
+          />
+        );
+
+      case 'creation':
+        if (!stepData.mode) {
+          console.error('Creation mode is undefined');
+          return null;
+        }
+        return (
+          <AutomationCreation
+            mode={stepData.mode}
+            existingAutomation={stepData.automation}
+            onBack={() => handleStepChange({ step: AUTOMATION_STEPS.SELECTION })}
+            onComplete={() => {
+              refreshAutomations();
+              handleStepChange({ step: AUTOMATION_STEPS.SELECTION });
+            }}
+            toolRegistry={toolRegistry}
+          />
+        );
+
+      case 'run':
+        if (!stepData.automation) {
+          console.error('Automation config is undefined');
+          return null;
+        }
+        return (
+          <AutomationRun
+            automation={stepData.automation}
+            onComplete={handleComplete}
+            automateOperation={automateOperation}
+          />
+        );
+
+      default:
+        return <div>{t('automate.invalidStep', 'Invalid step')}</div>;
+    }
+  };
+
+  const createStep = (title: string, props: any, content?: React.ReactNode) => ({
+    title,
+    ...props,
+    content
+  });
+
+  // Always create files step to avoid conditional hook calls
+  const filesStep = createFilesToolStep(createStep, {
+    selectedFiles,
+    isCollapsed: hasResults,
+    placeholder: t('automate.files.placeholder', 'Select files to process with this automation')
+  });
+
+  const automationSteps = [
+    createStep(t('automate.selection.title', 'Automation Selection'), {
+      isVisible: true,
+      isCollapsed: currentStep !== AUTOMATION_STEPS.SELECTION,
+      onCollapsedClick: () => setCurrentStep(AUTOMATION_STEPS.SELECTION)
+    }, currentStep === AUTOMATION_STEPS.SELECTION ? renderCurrentStep() : null),
+
+    createStep(stepData.mode === AutomationMode.EDIT
+      ? t('automate.creation.editTitle', 'Edit Automation')
+      : t('automate.creation.createTitle', 'Create Automation'), {
+      isVisible: currentStep === AUTOMATION_STEPS.CREATION,
+      isCollapsed: false
+    }, currentStep === AUTOMATION_STEPS.CREATION ? renderCurrentStep() : null),
+
+    // Files step - only visible during run mode
+    {
+      ...filesStep,
+      isVisible: currentStep === AUTOMATION_STEPS.RUN
+    },
+
+    // Run step
+    createStep(t('automate.run.title', 'Run Automation'), {
+      isVisible: currentStep === AUTOMATION_STEPS.RUN,
+      isCollapsed: hasResults,
+    }, currentStep === AUTOMATION_STEPS.RUN ? renderCurrentStep() : null)
+  ];
+
+  return createToolFlow({
+    files: {
+      selectedFiles: currentStep === AUTOMATION_STEPS.RUN ? selectedFiles : [],
+      isCollapsed: currentStep !== AUTOMATION_STEPS.RUN || hasResults,
+      isVisible: false, // Hide the default files step since we add our own
+    },
+    steps: automationSteps,
+    review: {
+      isVisible: hasResults,
+      operation: automateOperation,
+      title: t('automate.reviewTitle', 'Automation Results')
+    }
+  });
+};
+
+export default Automate;

frontend/src/tools/ChangePermissions.tsx

@@ -11,7 +11,7 @@ import ChangePermissionsSettings from "../components/tools/changePermissions/Cha
 import { useChangePermissionsParameters } from "../hooks/tools/changePermissions/useChangePermissionsParameters";
 import { useChangePermissionsOperation } from "../hooks/tools/changePermissions/useChangePermissionsOperation";
 import { useChangePermissionsTips } from "../components/tooltips/useChangePermissionsTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -95,4 +95,7 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
   });
 };
 
-export default ChangePermissions;
+// Static method to get the operation hook for automation
+ChangePermissions.tool = () => useChangePermissionsOperation;
+
+export default ChangePermissions as ToolComponent;

frontend/src/tools/Compress.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { use, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileSelection } from "../contexts/FileContext";
@@ -10,7 +10,7 @@ import CompressSettings from "../components/tools/compress/CompressSettings";
 
 import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
 import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 import { useCompressTips } from "../components/tooltips/useCompressTips";
 
 const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
@@ -94,4 +94,5 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Compress;
+
+export default Compress as ToolComponent;

frontend/src/tools/Convert.tsx

@@ -10,7 +10,7 @@ import ConvertSettings from "../components/tools/convert/ConvertSettings";
 
 import { useConvertParameters } from "../hooks/tools/convert/useConvertParameters";
 import { useConvertOperation } from "../hooks/tools/convert/useConvertOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -133,4 +133,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Convert;
+// Static method to get the operation hook for automation
+Convert.tool = () => useConvertOperation;
+
+export default Convert as ToolComponent;

frontend/src/tools/OCR.tsx

@@ -11,7 +11,7 @@ import AdvancedOCRSettings from "../components/tools/ocr/AdvancedOCRSettings";
 
 import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
 import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 import { useOCRTips } from "../components/tooltips/useOCRTips";
 
 const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
@@ -134,4 +134,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default OCR;
+// Static method to get the operation hook for automation
+OCR.tool = () => useOCROperation;
+
+export default OCR as ToolComponent;

frontend/src/tools/RemoveCertificateSign.tsx

@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useRemoveCertificateSignParameters } from "../hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters";
 import { useRemoveCertificateSignOperation } from "../hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const RemoveCertificateSign = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const RemoveCertificateSign = ({ onPreviewFile, onComplete, onError }: BaseToolP
   });
 };
 
-export default RemoveCertificateSign;
+// Static method to get the operation hook for automation
+RemoveCertificateSign.tool = () => useRemoveCertificateSignOperation;
+
+export default RemoveCertificateSign as ToolComponent;

frontend/src/tools/RemovePassword.tsx

@@ -11,7 +11,7 @@ import RemovePasswordSettings from "../components/tools/removePassword/RemovePas
 import { useRemovePasswordParameters } from "../hooks/tools/removePassword/useRemovePasswordParameters";
 import { useRemovePasswordOperation } from "../hooks/tools/removePassword/useRemovePasswordOperation";
 import { useRemovePasswordTips } from "../components/tooltips/useRemovePasswordTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -94,4 +94,7 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   });
 };
 
-export default RemovePassword;
+// Static method to get the operation hook for automation
+RemovePassword.tool = () => useRemovePasswordOperation;
+
+export default RemovePassword as ToolComponent;

frontend/src/tools/Repair.tsx

@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useRepairParameters } from "../hooks/tools/repair/useRepairParameters";
 import { useRepairOperation } from "../hooks/tools/repair/useRepairOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Repair;
+// Static method to get the operation hook for automation
+Repair.tool = () => useRepairOperation;
+
+export default Repair as ToolComponent;

frontend/src/tools/Sanitize.tsx

@@ -2,20 +2,18 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileSelection } from "../contexts/FileContext";
-import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import SanitizeSettings from "../components/tools/sanitize/SanitizeSettings";
 
 import { useSanitizeParameters } from "../hooks/tools/sanitize/useSanitizeParameters";
 import { useSanitizeOperation } from "../hooks/tools/sanitize/useSanitizeOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
 
   const { selectedFiles } = useFileSelection();
-  const { actions } = useNavigationActions();
 
   const sanitizeParams = useSanitizeParameters();
   const sanitizeOperation = useSanitizeOperation();
@@ -91,4 +89,7 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Sanitize;
+// Static method to get the operation hook for automation
+Sanitize.tool = () => useSanitizeOperation;
+
+export default Sanitize as ToolComponent;

frontend/src/tools/SingleLargePage.tsx

@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useSingleLargePageParameters } from "../hooks/tools/singleLargePage/useSingleLargePageParameters";
 import { useSingleLargePageOperation } from "../hooks/tools/singleLargePage/useSingleLargePageOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const SingleLargePage = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const SingleLargePage = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
   });
 };
 
-export default SingleLargePage;
+// Static method to get the operation hook for automation
+SingleLargePage.tool = () => useSingleLargePageOperation;
+
+export default SingleLargePage as ToolComponent;

frontend/src/tools/Split.tsx

@@ -9,7 +9,7 @@ import SplitSettings from "../components/tools/split/SplitSettings";
 
 import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
 import { useSplitOperation } from "../hooks/tools/split/useSplitOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -90,4 +90,4 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Split;
+export default Split as ToolComponent;

frontend/src/tools/UnlockPdfForms.tsx

@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useUnlockPdfFormsParameters } from "../hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters";
 import { useUnlockPdfFormsOperation } from "../hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const UnlockPdfForms = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const UnlockPdfForms = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   });
 };
 
-export default UnlockPdfForms;
+// Static method to get the operation hook for automation
+UnlockPdfForms.tool = () => useUnlockPdfFormsOperation;
+
+export default UnlockPdfForms as ToolComponent;