From 675718f7cd662fa718f975dac27288299af268d5 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Thu, 14 Aug 2025 15:05:28 +0100
Subject: [PATCH] Updated new tools

---
 frontend/src/tools/AddPassword.tsx       | 154 +++++++----------------
 frontend/src/tools/ChangePermissions.tsx | 143 ++++++---------------
 2 files changed, 78 insertions(+), 219 deletions(-)

diff --git a/frontend/src/tools/AddPassword.tsx b/frontend/src/tools/AddPassword.tsx
index 773fb4d1c..667252680 100644
--- a/frontend/src/tools/AddPassword.tsx
+++ b/frontend/src/tools/AddPassword.tsx
@@ -1,16 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
-import { Box, Button, Stack, Text } from "@mantine/core";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import DownloadIcon from "@mui/icons-material/Download";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
 import { useToolFileSelection } from "../contexts/FileSelectionContext";
 
-import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
-import OperationButton from "../components/tools/shared/OperationButton";
-import ErrorNotification from "../components/tools/shared/ErrorNotification";
-import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
-import ResultsPreview from "../components/tools/shared/ResultsPreview";
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import AddPasswordSettings from "../components/tools/addPassword/AddPasswordSettings";
 import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings";
@@ -37,7 +31,7 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   useEffect(() => {
     addPasswordOperation.resetResults();
     onPreviewFile?.(null);
-  }, [addPasswordParams.parameters, selectedFiles]);
+  }, [addPasswordParams.parameters]);
 
   const handleAddPassword = async () => {
     try {
@@ -69,121 +63,57 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
   const hasFiles = selectedFiles.length > 0;
   const hasResults = addPasswordOperation.files.length > 0 || addPasswordOperation.downloadUrl !== null;
-  const filesCollapsed = hasFiles;
-  const passwordsCollapsed = hasResults;
+  const passwordsCollapsed = !hasFiles || hasResults;
   const permissionsCollapsed = collapsedPermissions || hasResults;
 
-  const previewResults = useMemo(() =>
-    addPasswordOperation.files?.map((file, index) => ({
-      file,
-      thumbnail: addPasswordOperation.thumbnails[index]
-    })) || [],
-    [addPasswordOperation.files, addPasswordOperation.thumbnails]
-  );
-
-  return (
-    <ToolStepContainer>
-      <Stack gap="sm" h="94vh" p="sm" style={{ overflow: 'auto' }}>
-        {/* Files Step */}
-        <ToolStep
-          title={t('files.title', 'Files')}
-          isVisible={true}
-          isCollapsed={filesCollapsed}
-          isCompleted={filesCollapsed}
-          completedMessage={hasFiles ?
-            selectedFiles.length === 1
-              ? t('files.selected.single', 'Selected: {{filename}}', { filename: selectedFiles[0].name })
-              : t('files.selected.multiple', 'Selected: {{count}} files', { count: selectedFiles.length })
-            : undefined}
-        >
-          <FileStatusIndicator
-            selectedFiles={selectedFiles}
-            placeholder={t('files.placeholder', 'Select a PDF file in the main view to get started')}
-          />
-        </ToolStep>
-
-        {/* Passwords & Encryption Step */}
-        <ToolStep
-          title={t('addPassword.passwords.stepTitle', 'Passwords & Encryption')}
-          isVisible={hasFiles}
-          isCollapsed={passwordsCollapsed}
-          isCompleted={passwordsCollapsed}
-          onCollapsedClick={hasResults ? handleSettingsReset : undefined}
-          completedMessage={passwordsCollapsed ? t('addPassword.passwords.completed', 'Passwords configured') : undefined}
-          tooltip={addPasswordTips}
-        >
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles && !hasResults,
+    },
+    steps: [
+      {
+        title: t('addPassword.passwords.stepTitle', 'Passwords & Encryption'),
+        isVisible: hasFiles,
+        isCollapsed: passwordsCollapsed,
+        onCollapsedClick: hasResults ? handleSettingsReset : undefined,
+        tooltip: addPasswordTips,
+        content: (
           <AddPasswordSettings
             parameters={addPasswordParams.parameters}
             onParameterChange={addPasswordParams.updateParameter}
             disabled={endpointLoading}
           />
-        </ToolStep>
-
-        {/* Permissions Step */}
-        <ToolStep
-          title={t('addPassword.permissions.stepTitle', 'Document Permissions')}
-          isVisible={hasFiles}
-          isCollapsed={permissionsCollapsed}
-          isCompleted={permissionsCollapsed}
-          onCollapsedClick={hasResults ? handleSettingsReset : () => setCollapsedPermissions(!collapsedPermissions)}
-        >
+        )
+      },
+      {
+        title: t('addPassword.permissions.stepTitle', 'Document Permissions'),
+        isVisible: hasFiles,
+        isCollapsed: permissionsCollapsed,
+        onCollapsedClick: hasResults ? handleSettingsReset : () => setCollapsedPermissions(!collapsedPermissions),
+        content: (
           <ChangePermissionsSettings
             parameters={addPasswordParams.permissions.parameters}
             onParameterChange={addPasswordParams.permissions.updateParameter}
             disabled={endpointLoading}
           />
-        </ToolStep>
-
-        <Box mt="md">
-          <OperationButton
-            onClick={handleAddPassword}
-            isLoading={addPasswordOperation.isLoading}
-            disabled={!addPasswordParams.validateParameters() || !hasFiles || !endpointEnabled}
-            loadingText={t('loading')}
-            submitText={t('addPassword.submit', 'Encrypt')}
-          />
-        </Box>
-
-        {/* Results Step */}
-        <ToolStep
-          title={t('results.title', 'Results')}
-          isVisible={hasResults}
-        >
-          <Stack gap="sm">
-            {addPasswordOperation.status && (
-              <Text size="sm" c="dimmed">{addPasswordOperation.status}</Text>
-            )}
-
-            <ErrorNotification
-              error={addPasswordOperation.errorMessage}
-              onClose={addPasswordOperation.clearError}
-            />
-
-            {addPasswordOperation.downloadUrl && (
-              <Button
-                component="a"
-                href={addPasswordOperation.downloadUrl}
-                download={addPasswordOperation.downloadFilename}
-                leftSection={<DownloadIcon />}
-                color="green"
-                fullWidth
-                mb="md"
-              >
-                {t("download", "Download")}
-              </Button>
-            )}
-
-            <ResultsPreview
-              files={previewResults}
-              onFileClick={handleThumbnailClick}
-              isGeneratingThumbnails={addPasswordOperation.isGeneratingThumbnails}
-              title={t('addPassword.results.title', 'Encrypted PDFs')}
-            />
-          </Stack>
-        </ToolStep>
-      </Stack>
-    </ToolStepContainer>
-  );
+        )
+      }
+    ],
+    executeButton: {
+      text: t('addPassword.submit', 'Encrypt'),
+      isVisible: !hasResults,
+      loadingText: t('loading'),
+      onClick: handleAddPassword,
+      disabled: !addPasswordParams.validateParameters() || !hasFiles || !endpointEnabled
+    },
+    review: {
+      isVisible: hasResults,
+      operation: addPasswordOperation,
+      title: t('addPassword.results.title', 'Encrypted PDFs'),
+      onFileClick: handleThumbnailClick
+    }
+  });
 }
 
 export default AddPassword;
diff --git a/frontend/src/tools/ChangePermissions.tsx b/frontend/src/tools/ChangePermissions.tsx
index 58cb32474..19e3d859f 100644
--- a/frontend/src/tools/ChangePermissions.tsx
+++ b/frontend/src/tools/ChangePermissions.tsx
@@ -1,16 +1,10 @@
-import { useEffect, useMemo } from "react";
-import { Button, Stack, Text } from "@mantine/core";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import DownloadIcon from "@mui/icons-material/Download";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
 import { useToolFileSelection } from "../contexts/FileSelectionContext";
 
-import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
-import OperationButton from "../components/tools/shared/OperationButton";
-import ErrorNotification from "../components/tools/shared/ErrorNotification";
-import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
-import ResultsPreview from "../components/tools/shared/ResultsPreview";
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings";
 
@@ -34,7 +28,7 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
   useEffect(() => {
     changePermissionsOperation.resetResults();
     onPreviewFile?.(null);
-  }, [changePermissionsParams.parameters, selectedFiles]);
+  }, [changePermissionsParams.parameters]);
 
   const handleChangePermissions = async () => {
     try {
@@ -66,105 +60,40 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
 
   const hasFiles = selectedFiles.length > 0;
   const hasResults = changePermissionsOperation.files.length > 0 || changePermissionsOperation.downloadUrl !== null;
-  const filesCollapsed = hasFiles;
-  const settingsCollapsed = hasResults;
+  const settingsCollapsed = !hasFiles || hasResults;
 
-  const previewResults = useMemo(() =>
-    changePermissionsOperation.files?.map((file, index) => ({
-      file,
-      thumbnail: changePermissionsOperation.thumbnails[index]
-    })) || [],
-    [changePermissionsOperation.files, changePermissionsOperation.thumbnails]
-  );
-
-  return (
-    <ToolStepContainer>
-      <Stack gap="sm" h="94vh" p="sm" style={{ overflow: 'auto' }}>
-        {/* Files Step */}
-        <ToolStep
-          title={t('files.title', 'Files')}
-          isVisible={true}
-          isCollapsed={filesCollapsed}
-          isCompleted={filesCollapsed}
-          completedMessage={hasFiles ?
-            selectedFiles.length === 1
-              ? t('files.selected.single', 'Selected: {{filename}}', { filename: selectedFiles[0].name })
-              : t('files.selected.multiple', 'Selected: {{count}} files', { count: selectedFiles.length })
-            : undefined}
-        >
-          <FileStatusIndicator
-            selectedFiles={selectedFiles}
-            placeholder={t('files.placeholder', 'Select a PDF file in the main view to get started')}
-          />
-        </ToolStep>
-
-        {/* Settings Step */}
-        <ToolStep
-          title={t('settings.title', 'Settings')}
-          isVisible={hasFiles}
-          isCollapsed={settingsCollapsed}
-          isCompleted={settingsCollapsed}
-          onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
-          completedMessage={settingsCollapsed ? t('changePermissions.completed', 'Permissions changed') : undefined}
-          tooltip={changePermissionsTips}
-        >
-          <Stack gap="sm">
-            <ChangePermissionsSettings
-              parameters={changePermissionsParams.parameters}
-              onParameterChange={changePermissionsParams.updateParameter}
-              disabled={endpointLoading}
-            />
-
-            <OperationButton
-              onClick={handleChangePermissions}
-              isLoading={changePermissionsOperation.isLoading}
-              disabled={!changePermissionsParams.validateParameters() || !hasFiles || !endpointEnabled}
-              loadingText={t('loading')}
-              submitText={t('changePermissions.submit', 'Change Permissions')}
-            />
-          </Stack>
-        </ToolStep>
-
-        {/* Results Step */}
-        <ToolStep
-          title={t('results.title', 'Results')}
-          isVisible={hasResults}
-        >
-          <Stack gap="sm">
-            {changePermissionsOperation.status && (
-              <Text size="sm" c="dimmed">{changePermissionsOperation.status}</Text>
-            )}
-
-            <ErrorNotification
-              error={changePermissionsOperation.errorMessage}
-              onClose={changePermissionsOperation.clearError}
-            />
-
-            {changePermissionsOperation.downloadUrl && (
-              <Button
-                component="a"
-                href={changePermissionsOperation.downloadUrl}
-                download={changePermissionsOperation.downloadFilename}
-                leftSection={<DownloadIcon />}
-                color="green"
-                fullWidth
-                mb="md"
-              >
-                {t("download", "Download")}
-              </Button>
-            )}
-
-            <ResultsPreview
-              files={previewResults}
-              onFileClick={handleThumbnailClick}
-              isGeneratingThumbnails={changePermissionsOperation.isGeneratingThumbnails}
-              title={t('changePermissions.results.title', 'Modified PDFs')}
-            />
-          </Stack>
-        </ToolStep>
-      </Stack>
-    </ToolStepContainer>
-  );
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles && !hasResults,
+    },
+    steps: [{
+      title: t('settings.title', 'Settings'),
+      isCollapsed: settingsCollapsed,
+      onCollapsedClick: settingsCollapsed ? handleSettingsReset : undefined,
+      tooltip: changePermissionsTips,
+      content: (
+        <ChangePermissionsSettings
+          parameters={changePermissionsParams.parameters}
+          onParameterChange={changePermissionsParams.updateParameter}
+          disabled={endpointLoading}
+        />
+      )
+    }],
+    executeButton: {
+      text: t('changePermissions.submit', 'Change Permissions'),
+      isVisible: !hasResults,
+      loadingText: t('loading'),
+      onClick: handleChangePermissions,
+      disabled: !changePermissionsParams.validateParameters() || !hasFiles || !endpointEnabled
+    },
+    review: {
+      isVisible: hasResults,
+      operation: changePermissionsOperation,
+      title: t('changePermissions.results.title', 'Modified PDFs'),
+      onFileClick: handleThumbnailClick
+    }
+  });
 }
 
 export default ChangePermissions;