Tidy

frontend/src/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx

@@ -5,7 +5,6 @@ import { useMetadataExtraction } from "../../../hooks/tools/changeMetadata/useMe
 import DeleteAllStep from "./steps/DeleteAllStep";
 import StandardMetadataStep from "./steps/StandardMetadataStep";
 import DocumentDatesStep from "./steps/DocumentDatesStep";
-import CustomMetadataStep from "./steps/CustomMetadataStep";
 import AdvancedOptionsStep from "./steps/AdvancedOptionsStep";
 
 interface ChangeMetadataSingleStepProps {
@@ -27,17 +26,10 @@ const ChangeMetadataSingleStep = ({
 }: ChangeMetadataSingleStepProps) => {
   const { t } = useTranslation();
 
-  // Create a params object that matches the hook interface
-  const paramsHook = {
-    parameters,
-    updateParameter: onParameterChange,
-    addCustomMetadata,
-    removeCustomMetadata,
-    updateCustomMetadata,
-  };
-
   // Extract metadata from uploaded files
-  const { isExtractingMetadata } = useMetadataExtraction(paramsHook);
+  const { isExtractingMetadata } = useMetadataExtraction({
+    updateParameter: onParameterChange,
+  });
 
   const isDeleteAllEnabled = parameters.deleteAll;
   const fieldsDisabled = disabled || isDeleteAllEnabled || isExtractingMetadata;
@@ -86,23 +78,6 @@ const ChangeMetadataSingleStep = ({
 
       <Divider />
 
-      {/* Custom Metadata */}
-      <Stack gap="md">
-        <Text size="sm" fw={500}>
-          {t('changeMetadata.customFields.title', 'Custom Metadata')}
-        </Text>
-        <CustomMetadataStep
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={fieldsDisabled}
-          addCustomMetadata={addCustomMetadata}
-          removeCustomMetadata={removeCustomMetadata}
-          updateCustomMetadata={updateCustomMetadata}
-        />
-      </Stack>
-
-      <Divider />
-
       {/* Advanced Options */}
       <Stack gap="md">
         <Text size="sm" fw={500}>
@@ -112,6 +87,9 @@ const ChangeMetadataSingleStep = ({
           parameters={parameters}
           onParameterChange={onParameterChange}
           disabled={fieldsDisabled}
+          addCustomMetadata={addCustomMetadata}
+          removeCustomMetadata={removeCustomMetadata}
+          updateCustomMetadata={updateCustomMetadata}
         />
       </Stack>
     </Stack>

frontend/src/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx

@@ -1,38 +1,60 @@
-import { Select } from "@mantine/core";
+import { Stack, Select, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "../../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
 import { TrappedStatus } from "../../../../types/metadata";
+import CustomMetadataStep from "./CustomMetadataStep";
 
 interface AdvancedOptionsStepProps {
   parameters: ChangeMetadataParameters;
   onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
   disabled?: boolean;
+  addCustomMetadata: (key?: string, value?: string) => void;
+  removeCustomMetadata: (id: string) => void;
+  updateCustomMetadata: (id: string, key: string, value: string) => void;
 }
 
 const AdvancedOptionsStep = ({
   parameters,
   onParameterChange,
-  disabled = false
+  disabled = false,
+  addCustomMetadata,
+  removeCustomMetadata,
+  updateCustomMetadata
 }: AdvancedOptionsStepProps) => {
   const { t } = useTranslation();
 
   return (
-    <Select
-      label={t('changeMetadata.trapped.label', 'Trapped Status')}
-      description={t('changeMetadata.trapped.description', 'Indicates whether the document has been trapped for high-quality printing')}
-      value={parameters.trapped}
-      onChange={(value) => {
-        if (value) {
-          onParameterChange('trapped', value as TrappedStatus);
-        }
-      }}
-      disabled={disabled || parameters.deleteAll}
-      data={[
-        { value: TrappedStatus.UNKNOWN, label: t('changeMetadata.trapped.unknown', 'Unknown') },
-        { value: TrappedStatus.TRUE, label: t('changeMetadata.trapped.true', 'True') },
-        { value: TrappedStatus.FALSE, label: t('changeMetadata.trapped.false', 'False') }
-      ]}
-    />
+    <Stack gap="md">
+      {/* Trapped Status */}
+      <Select
+        label={t('changeMetadata.trapped.label', 'Trapped Status')}
+        description={t('changeMetadata.trapped.description', 'Indicates whether the document has been trapped for high-quality printing')}
+        value={parameters.trapped}
+        onChange={(value) => {
+          if (value) {
+            onParameterChange('trapped', value as TrappedStatus);
+          }
+        }}
+        disabled={disabled || parameters.deleteAll}
+        data={[
+          { value: TrappedStatus.UNKNOWN, label: t('changeMetadata.trapped.unknown', 'Unknown') },
+          { value: TrappedStatus.TRUE, label: t('changeMetadata.trapped.true', 'True') },
+          { value: TrappedStatus.FALSE, label: t('changeMetadata.trapped.false', 'False') }
+        ]}
+      />
+
+      <Divider />
+
+      {/* Custom Metadata */}
+      <CustomMetadataStep
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+        addCustomMetadata={addCustomMetadata}
+        removeCustomMetadata={removeCustomMetadata}
+        updateCustomMetadata={updateCustomMetadata}
+      />
+    </Stack>
   );
 };
 

frontend/src/components/tools/changeMetadata/steps/DeleteAllStep.tsx

@@ -26,4 +26,4 @@ const DeleteAllStep = ({
   );
 };
 
-export default DeleteAllStep;
+export default DeleteAllStep;

frontend/src/components/tooltips/useChangeMetadataTips.ts

@@ -98,6 +98,15 @@ export const useAdvancedOptionsTips = (): TooltipContent => {
           t("changeMetadata.tooltip.advanced.trapped.bullet2", "False: Document has not been trapped"),
           t("changeMetadata.tooltip.advanced.trapped.bullet3", "Unknown: Trapped status is not specified")
         ]
+      },
+      {
+        title: t("changeMetadata.tooltip.customFields.title", "Custom Metadata"),
+        description: t("changeMetadata.tooltip.customFields.text", "Add your own custom key-value metadata pairs."),
+        bullets: [
+          t("changeMetadata.tooltip.customFields.bullet1", "Add any custom fields relevant to your document"),
+          t("changeMetadata.tooltip.customFields.bullet2", "Examples: Department, Project, Version, Status"),
+          t("changeMetadata.tooltip.customFields.bullet3", "Both key and value are required for each entry")
+        ]
       }
     ]
   };

frontend/src/hooks/tools/changeMetadata/useMetadataExtraction.ts

@@ -1,53 +1,63 @@
-import { useState, useEffect } from "react";
-import { PDFMetadataService } from "../../../services/pdfMetadataService";
+import { useState, useEffect, useRef } from "react";
+import { extractPDFMetadata } from "../../../services/pdfMetadataService";
 import { useSelectedFiles } from "../../../contexts/file/fileHooks";
-import { ChangeMetadataParametersHook } from "./useChangeMetadataParameters";
+import { ChangeMetadataParameters } from "./useChangeMetadataParameters";
 
-export const useMetadataExtraction = (params: ChangeMetadataParametersHook) => {
+interface MetadataExtractionParams {
+  updateParameter: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
+}
+
+export const useMetadataExtraction = (params: MetadataExtractionParams) => {
   const { selectedFiles } = useSelectedFiles();
   const [isExtractingMetadata, setIsExtractingMetadata] = useState(false);
   const [hasExtractedMetadata, setHasExtractedMetadata] = useState(false);
+  const previousFileCountRef = useRef(0);
+
+  // Reset extraction state only when files are cleared (length goes to 0)
+  useEffect(() => {
+    if (previousFileCountRef.current > 0 && selectedFiles.length === 0) {
+      setHasExtractedMetadata(false);
+    }
+    previousFileCountRef.current = selectedFiles.length;
+  }, [selectedFiles]);
 
   // Extract metadata from first file when files change
   useEffect(() => {
     const extractMetadata = async () => {
-      if (selectedFiles.length === 0 || hasExtractedMetadata) {
+      if (selectedFiles.length === 0) {
         return;
       }
-
       const firstFile = selectedFiles[0];
-      if (!firstFile) {
+
+      if (hasExtractedMetadata) {
         return;
       }
 
       setIsExtractingMetadata(true);
-      try {
-        const result = await PDFMetadataService.extractMetadata(firstFile);
 
-        if (result.success) {
-          const metadata = result.metadata;
+      const result = await extractPDFMetadata(firstFile);
 
-          // Pre-populate all fields with extracted metadata
-          params.updateParameter('title', metadata.title);
-          params.updateParameter('author', metadata.author);
-          params.updateParameter('subject', metadata.subject);
-          params.updateParameter('keywords', metadata.keywords);
-          params.updateParameter('creator', metadata.creator);
-          params.updateParameter('producer', metadata.producer);
-          params.updateParameter('creationDate', metadata.creationDate);
-          params.updateParameter('modificationDate', metadata.modificationDate);
-          params.updateParameter('trapped', metadata.trapped);
+      if (result.success) {
+        const metadata = result.metadata;
 
-          // Set custom metadata entries directly to avoid state update timing issues
-          params.updateParameter('customMetadata', metadata.customMetadata);
+        // Pre-populate all fields with extracted metadata
+        params.updateParameter('title', metadata.title);
+        params.updateParameter('author', metadata.author);
+        params.updateParameter('subject', metadata.subject);
+        params.updateParameter('keywords', metadata.keywords);
+        params.updateParameter('creator', metadata.creator);
+        params.updateParameter('producer', metadata.producer);
+        params.updateParameter('creationDate', metadata.creationDate);
+        params.updateParameter('modificationDate', metadata.modificationDate);
+        params.updateParameter('trapped', metadata.trapped);
+        params.updateParameter('customMetadata', metadata.customMetadata);
 
-          setHasExtractedMetadata(true);
-        }
-      } catch (error) {
-        console.warn('Failed to extract metadata:', error);
-      } finally {
-        setIsExtractingMetadata(false);
+        setHasExtractedMetadata(true);
+      } else {
+        console.warn('Failed to extract metadata:', result.error);
       }
+
+      setIsExtractingMetadata(false);
     };
 
     extractMetadata();

frontend/src/services/pdfMetadataService.ts

@@ -1,6 +1,7 @@
 import { pdfWorkerManager } from './pdfWorkerManager';
 import { FileAnalyzer } from './fileAnalyzer';
 import { TrappedStatus, CustomMetadataEntry, ExtractedPDFMetadata } from '../types/metadata';
+import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
 
 export interface MetadataExtractionResult {
   success: true;
@@ -18,49 +19,45 @@ export type MetadataExtractionResponse = MetadataExtractionResult | MetadataExtr
  * Utility to format PDF date strings to required format (yyyy/MM/dd HH:mm:ss)
  * Handles PDF date format: "D:YYYYMMDDHHmmSSOHH'mm'" or standard date strings
  */
-function formatPDFDate(dateString: unknown): string {
-  if (!dateString || typeof dateString !== 'string') {
+function formatPDFDate(dateString: string): string {
+  if (!dateString) {
     return '';
   }
 
-  try {
-    let date: Date;
+  let date: Date;
 
-    // Check if it's a PDF date format (starts with "D:")
-    if (dateString.startsWith('D:')) {
-      // Parse PDF date format: D:YYYYMMDDHHmmSSOHH'mm'
-      const dateStr = dateString.substring(2); // Remove "D:"
+  // Check if it's a PDF date format (starts with "D:")
+  if (dateString.startsWith('D:')) {
+    // Parse PDF date format: D:YYYYMMDDHHmmSSOHH'mm'
+    const dateStr = dateString.substring(2); // Remove "D:"
 
-      // Extract date parts
-      const year = parseInt(dateStr.substring(0, 4));
-      const month = parseInt(dateStr.substring(4, 6));
-      const day = parseInt(dateStr.substring(6, 8));
-      const hour = parseInt(dateStr.substring(8, 10)) || 0;
-      const minute = parseInt(dateStr.substring(10, 12)) || 0;
-      const second = parseInt(dateStr.substring(12, 14)) || 0;
+    // Extract date parts
+    const year = parseInt(dateStr.substring(0, 4));
+    const month = parseInt(dateStr.substring(4, 6));
+    const day = parseInt(dateStr.substring(6, 8));
+    const hour = parseInt(dateStr.substring(8, 10)) || 0;
+    const minute = parseInt(dateStr.substring(10, 12)) || 0;
+    const second = parseInt(dateStr.substring(12, 14)) || 0;
 
-      // Create date object (month is 0-indexed)
-      date = new Date(year, month - 1, day, hour, minute, second);
-    } else {
-      // Try parsing as regular date string
-      date = new Date(dateString);
-    }
+    // Create date object (month is 0-indexed)
+    date = new Date(year, month - 1, day, hour, minute, second);
+  } else {
+    // Try parsing as regular date string
+    date = new Date(dateString);
+  }
 
-    if (isNaN(date.getTime())) {
-      return '';
-    }
-
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-
-    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
-  } catch {
+  if (isNaN(date.getTime())) {
     return '';
   }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
 }
 
 /**
@@ -80,14 +77,14 @@ function convertTrappedStatus(trapped: unknown): TrappedStatus {
  * Extract custom metadata fields from PDF.js info object
  * Custom metadata is nested under the "Custom" key
  */
-function extractCustomMetadata(info: Record<string, unknown>): CustomMetadataEntry[] {
+function extractCustomMetadata(custom: unknown): CustomMetadataEntry[] {
   const customMetadata: CustomMetadataEntry[] = [];
   let customIdCounter = 1;
 
 
   // Check if there's a Custom object containing the custom metadata
-  if (info.Custom && typeof info.Custom === 'object' && info.Custom !== null) {
-    const customObj = info.Custom as Record<string, unknown>;
+  if (typeof custom === 'object' && custom !== null) {
+    const customObj = custom as Record<string, unknown>;
 
     Object.entries(customObj).forEach(([key, value]) => {
       if (value != null && value !== '') {
@@ -105,71 +102,80 @@ function extractCustomMetadata(info: Record<string, unknown>): CustomMetadataEnt
 }
 
 /**
- * Service to extract metadata from PDF files using PDF.js
+ * Safely cleanup PDF document with error handling
  */
-export class PDFMetadataService {
-  /**
-   * Extract all metadata from a PDF file
-   * Returns a result object with success/error state
-   */
-  static async extractMetadata(file: File): Promise<MetadataExtractionResponse> {
-    // Use existing PDF validation
-    const isValidPDF = await FileAnalyzer.isValidPDF(file);
-    if (!isValidPDF) {
-      return {
-        success: false,
-        error: 'File is not a valid PDF'
-      };
-    }
-
-    let pdfDoc: any = null;
-
+function cleanupPdfDocument(pdfDoc: PDFDocumentProxy | null): void {
+  if (pdfDoc) {
     try {
-      const arrayBuffer = await file.arrayBuffer();
-      pdfDoc = await pdfWorkerManager.createDocument(arrayBuffer, {
-        disableAutoFetch: true,
-        disableStream: true
-      });
-
-      const metadata = await pdfDoc.getMetadata();
-      const info = metadata.info || {};
-
-      // Safely extract metadata with proper type checking
-      const extractedMetadata: ExtractedPDFMetadata = {
-        title: typeof info.Title === 'string' ? info.Title : '',
-        author: typeof info.Author === 'string' ? info.Author : '',
-        subject: typeof info.Subject === 'string' ? info.Subject : '',
-        keywords: typeof info.Keywords === 'string' ? info.Keywords : '',
-        creator: typeof info.Creator === 'string' ? info.Creator : '',
-        producer: typeof info.Producer === 'string' ? info.Producer : '',
-        creationDate: formatPDFDate(info.CreationDate),
-        modificationDate: formatPDFDate(info.ModDate),
-        trapped: convertTrappedStatus(info.Trapped),
-        customMetadata: extractCustomMetadata(info)
-      };
-
-      return {
-        success: true,
-        metadata: extractedMetadata
-      };
-
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-
-      return {
-        success: false,
-        error: `Failed to extract PDF metadata: ${errorMessage}`
-      };
-
-    } finally {
-      // Ensure cleanup even if extraction fails
-      if (pdfDoc) {
-        try {
-          pdfWorkerManager.destroyDocument(pdfDoc);
-        } catch (cleanupError) {
-          console.warn('Failed to cleanup PDF document:', cleanupError);
-        }
-      }
+      pdfWorkerManager.destroyDocument(pdfDoc);
+    } catch (cleanupError) {
+      console.warn('Failed to cleanup PDF document:', cleanupError);
     }
   }
 }
+
+function getStringMetadata(info: Record<string, unknown>, key: string): string {
+  if (typeof info[key] === 'string') {
+    return info[key];
+  } else {
+    return '';
+  }
+}
+
+/**
+ * Extract all metadata from a PDF file
+ * Returns a result object with success/error state
+ */
+export async function extractPDFMetadata(file: File): Promise<MetadataExtractionResponse> {
+  // Use existing PDF validation
+  const isValidPDF = await FileAnalyzer.isValidPDF(file);
+  if (!isValidPDF) {
+    return {
+      success: false,
+      error: 'File is not a valid PDF'
+    };
+  }
+
+  let pdfDoc: PDFDocumentProxy | null = null;
+  let arrayBuffer: ArrayBuffer;
+  let metadata;
+
+  try {
+    arrayBuffer = await file.arrayBuffer();
+    pdfDoc = await pdfWorkerManager.createDocument(arrayBuffer, {
+      disableAutoFetch: true,
+      disableStream: true
+    });
+    metadata = await pdfDoc.getMetadata();
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    cleanupPdfDocument(pdfDoc);
+    return {
+      success: false,
+      error: `Failed to read PDF: ${errorMessage}`
+    };
+  }
+
+  const info = metadata.info as Record<string, unknown>;
+
+  // Safely extract metadata with proper type checking
+  const extractedMetadata: ExtractedPDFMetadata = {
+    title: getStringMetadata(info, 'Title'),
+    author: getStringMetadata(info, 'Author'),
+    subject: getStringMetadata(info, 'Subject'),
+    keywords: getStringMetadata(info, 'Keywords'),
+    creator: getStringMetadata(info, 'Creator'),
+    producer: getStringMetadata(info, 'Producer'),
+    creationDate: formatPDFDate(getStringMetadata(info, 'CreationDate')),
+    modificationDate: formatPDFDate(getStringMetadata(info, 'ModDate')),
+    trapped: convertTrappedStatus(info.Trapped),
+    customMetadata: extractCustomMetadata(info.Custom),
+  };
+
+  cleanupPdfDocument(pdfDoc);
+
+  return {
+    success: true,
+    metadata: extractedMetadata
+  };
+}

frontend/src/services/pdfWorkerManager.ts

@@ -6,11 +6,12 @@
  */
 
 import * as pdfjsLib from 'pdfjs-dist';
+import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
 const { getDocument, GlobalWorkerOptions } = pdfjsLib;
 
 class PDFWorkerManager {
   private static instance: PDFWorkerManager;
-  private activeDocuments = new Set<any>();
+  private activeDocuments = new Set<PDFDocumentProxy>();
   private workerCount = 0;
   private maxWorkers = 10; // Limit concurrent workers
   private isInitialized = false;
@@ -48,7 +49,7 @@ class PDFWorkerManager {
       stopAtErrors?: boolean;
       verbosity?: number;
     } = {}
-  ): Promise<any> {
+  ): Promise<PDFDocumentProxy> {
     // Wait if we've hit the worker limit
     if (this.activeDocuments.size >= this.maxWorkers) {
       await this.waitForAvailableWorker();
@@ -104,7 +105,7 @@ class PDFWorkerManager {
   /**
    * Properly destroy a PDF document and clean up resources
    */
-  destroyDocument(pdf: any): void {
+  destroyDocument(pdf: PDFDocumentProxy): void {
     if (this.activeDocuments.has(pdf)) {
       try {
         pdf.destroy();

frontend/src/tools/ChangeMetadata.tsx

@@ -1,39 +1,35 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import DeleteAllStep from "../components/tools/changeMetadata/steps/DeleteAllStep";
 import StandardMetadataStep from "../components/tools/changeMetadata/steps/StandardMetadataStep";
 import DocumentDatesStep from "../components/tools/changeMetadata/steps/DocumentDatesStep";
-import CustomMetadataStep from "../components/tools/changeMetadata/steps/CustomMetadataStep";
 import AdvancedOptionsStep from "../components/tools/changeMetadata/steps/AdvancedOptionsStep";
 import { useChangeMetadataParameters } from "../hooks/tools/changeMetadata/useChangeMetadataParameters";
 import { useChangeMetadataOperation } from "../hooks/tools/changeMetadata/useChangeMetadataOperation";
 import { useMetadataExtraction } from "../hooks/tools/changeMetadata/useMetadataExtraction";
 import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
 import { BaseToolProps, ToolComponent } from "../types/tool";
-import { 
+import {
   useDeleteAllTips,
   useStandardMetadataTips,
   useDocumentDatesTips,
-  useCustomMetadataTips,
   useAdvancedOptionsTips
 } from "../components/tooltips/useChangeMetadataTips";
 
 const ChangeMetadata = (props: BaseToolProps) => {
   const { t } = useTranslation();
-  
+
   // Individual tooltips for each step
   const deleteAllTips = useDeleteAllTips();
   const standardMetadataTips = useStandardMetadataTips();
   const documentDatesTips = useDocumentDatesTips();
-  const customMetadataTips = useCustomMetadataTips();
   const advancedOptionsTips = useAdvancedOptionsTips();
 
   // Individual step collapse states
   const [deleteAllCollapsed, setDeleteAllCollapsed] = useState(false);
   const [standardMetadataCollapsed, setStandardMetadataCollapsed] = useState(false);
   const [documentDatesCollapsed, setDocumentDatesCollapsed] = useState(true);
-  const [customMetadataCollapsed, setCustomMetadataCollapsed] = useState(true);
   const [advancedOptionsCollapsed, setAdvancedOptionsCollapsed] = useState(true);
 
   const base = useBaseTool(
@@ -102,24 +98,6 @@ const ChangeMetadata = (props: BaseToolProps) => {
           />
         ),
       },
-      {
-        title: t("changeMetadata.customFields.title", "Custom Metadata"),
-        isCollapsed: getActualCollapsedState(customMetadataCollapsed),
-        onCollapsedClick: base.hasResults
-          ? (base.settingsCollapsed ? base.handleSettingsReset : undefined)
-          : () => setCustomMetadataCollapsed(!customMetadataCollapsed),
-        tooltip: customMetadataTips,
-        content: (
-          <CustomMetadataStep
-            parameters={base.params.parameters}
-            onParameterChange={base.params.updateParameter}
-            disabled={base.endpointLoading || base.params.parameters.deleteAll || isExtractingMetadata}
-            addCustomMetadata={base.params.addCustomMetadata}
-            removeCustomMetadata={base.params.removeCustomMetadata}
-            updateCustomMetadata={base.params.updateCustomMetadata}
-          />
-        ),
-      },
       {
         title: t("changeMetadata.advanced.title", "Advanced Options"),
         isCollapsed: getActualCollapsedState(advancedOptionsCollapsed),
@@ -132,6 +110,9 @@ const ChangeMetadata = (props: BaseToolProps) => {
             parameters={base.params.parameters}
             onParameterChange={base.params.updateParameter}
             disabled={base.endpointLoading || isExtractingMetadata}
+            addCustomMetadata={base.params.addCustomMetadata}
+            removeCustomMetadata={base.params.removeCustomMetadata}
+            updateCustomMetadata={base.params.updateCustomMetadata}
           />
         ),
       },