Redesign tool config types to avoid any typing (Stirling-Tools#6582)

# Description of Changes
Fixes one of the main causes of `any` typing left in tools, the way that
we register tool parameters in the registry. Currently, it just accepts
tool params via `any`, but instead we can explicitly change them to
`Record<string, unknown)`, so on the way back out they can more safely
be cast back to their correct type when known.

One consequence of this is that I had to redesign the way we
special-case the Convert tool, which previously was a different shape
than all the other param types. Now it's just got optional parameters on
it, which isn't quite as type-safe as before, but it does mean all tools
are a consistent shape now, which I think is worth the tradeoff.

Author: jbrunton96

frontend/editor/src/core/components/tools/automate/ToolConfigurationModal.tsx

@@ -17,16 +17,16 @@ import CloseIcon from "@mui/icons-material/Close";
 import WarningIcon from "@mui/icons-material/Warning";
 import { ToolRegistry } from "@app/data/toolsTaxonomy";
 import { ToolId } from "@app/types/toolId";
-import { getAvailableToExtensions } from "@app/utils/convertUtils";
+import { ErasedToolParams } from "@app/hooks/tools/shared/toolOperationTypes";
 interface ToolConfigurationModalProps {
   opened: boolean;
   tool: {
     id: string;
     operation: string;
     name: string;
-    parameters?: any;
+    parameters?: ErasedToolParams;
   };
-  onSave: (parameters: any) => void;
+  onSave: (parameters: ErasedToolParams) => void;
   onCancel: () => void;
   toolRegistry: Partial<ToolRegistry>;
 }
@@ -40,7 +40,7 @@ export default function ToolConfigurationModal({
 }: ToolConfigurationModalProps) {
   const { t } = useTranslation();
 
-  const [parameters, setParameters] = useState<any>({});
+  const [parameters, setParameters] = useState<ErasedToolParams>({});
 
   // Get tool info from registry
   const toolInfo = toolRegistry[tool.operation as ToolId];
@@ -74,26 +74,11 @@ export default function ToolConfigurationModal({
       );
     }
 
-    // Special handling for ConvertSettings which needs additional props
-    if (tool.operation === "convert") {
-      return (
-        <SettingsComponent
-          parameters={parameters}
-          onParameterChange={(key: string, value: any) => {
-            setParameters((prev: any) => ({ ...prev, [key]: value }));
-          }}
-          getAvailableToExtensions={getAvailableToExtensions}
-          selectedFiles={[]}
-          disabled={false}
-        />
-      );
-    }
-
     return (
       <SettingsComponent
         parameters={parameters}
-        onParameterChange={(key: string, value: any) => {
-          setParameters((prev: any) => ({ ...prev, [key]: value }));
+        onParameterChange={(key, value) => {
+          setParameters((prev) => ({ ...prev, [key]: value }));
         }}
         disabled={false}
       />

frontend/editor/src/core/components/tools/automate/ToolList.tsx

@@ -18,7 +18,7 @@ interface ToolListProps {
   onToolConfigure: (index: number) => void;
   onToolAdd: () => void;
   getToolName: (operation: string) => string;
-  getToolDefaultParameters: (operation: string) => Record<string, any>;
+  getToolDefaultParameters: (operation: string) => Record<string, unknown>;
 }
 
 export default function ToolList({

frontend/editor/src/core/components/tools/convert/ConvertSettings.tsx

@@ -10,7 +10,11 @@ import {
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useTranslation } from "react-i18next";
 import { useMultipleEndpointsEnabled } from "@app/hooks/useEndpointConfig";
-import { isImageFormat, isWebFormat } from "@app/utils/convertUtils";
+import {
+  isImageFormat,
+  isWebFormat,
+  getAvailableToExtensions as defaultGetAvailableToExtensions,
+} from "@app/utils/convertUtils";
 import { getConversionEndpoints } from "@app/data/toolsTaxonomy";
 import { useFileSelection } from "@app/contexts/FileContext";
 import { useFileState } from "@app/contexts/FileContext";
@@ -47,18 +51,18 @@ interface ConvertSettingsProps {
     key: K,
     value: ConvertParameters[K],
   ) => void;
-  getAvailableToExtensions: (
+  getAvailableToExtensions?: (
     fromExtension: string,
   ) => Array<{ value: string; label: string; group: string }>;
-  selectedFiles: StirlingFile[];
+  selectedFiles?: StirlingFile[];
   disabled?: boolean;
 }
 
 const ConvertSettings = ({
   parameters,
   onParameterChange,
-  getAvailableToExtensions,
-  selectedFiles,
+  getAvailableToExtensions = defaultGetAvailableToExtensions,
+  selectedFiles = [],
   disabled = false,
 }: ConvertSettingsProps) => {
   const { t } = useTranslation();

frontend/editor/src/core/components/tools/shared/FilesToolStep.tsx

@@ -10,14 +10,20 @@ export interface FilesToolStepProps {
   minFiles?: number;
 }
 
-export function createFilesToolStep(
+interface StepBaseProps {
+  isVisible?: boolean;
+  isCollapsed?: boolean;
+  onCollapsedClick?: () => void;
+}
+
+export function createFilesToolStep<T>(
   createStep: (
     title: string,
-    props: any,
+    props: StepBaseProps,
     children?: React.ReactNode,
-  ) => React.ReactElement,
+  ) => T,
   props: FilesToolStepProps,
-): React.ReactElement {
+): T {
   return createStep(
     i18n.t("files.title", "Files"),
     {

frontend/editor/src/core/data/toolsTaxonomy.ts

@@ -1,6 +1,10 @@
 import { type TFunction } from "i18next";
 import React from "react";
-import { ToolOperationConfig } from "@app/hooks/tools/shared/toolOperationTypes";
+import {
+  type ErasedToolParams,
+  type ToolAutomationSettingsProps,
+  ToolOperationConfig,
+} from "@app/hooks/tools/shared/toolOperationTypes";
 import { BaseToolProps } from "@app/types/tool";
 import { WorkbenchType } from "@app/types/workbench";
 import {
@@ -58,10 +62,13 @@ export type ToolRegistryEntry = {
   kind?: ToolKind;
   // Workbench type for navigation
   workbench?: WorkbenchType;
-  // Operation configuration for automation
-  operationConfig?: ToolOperationConfig<any>;
-  // Settings component for automation configuration
-  automationSettings: React.ComponentType<any> | null;
+  // Operation configuration for automation. TParams is erased at the registry
+  // boundary; tools are authored type-safely via defineToolAutomation.
+  operationConfig?: ToolOperationConfig<ErasedToolParams>;
+  // Settings component for automation configuration.
+  automationSettings: React.ComponentType<
+    ToolAutomationSettingsProps<ErasedToolParams>
+  > | null;
   // Whether this tool supports automation (defaults to true)
   supportsAutomate?: boolean;
   // Synonyms for search (optional)