Root: ui|v2.5|src|components|Images: DeleteImagesDialog.tsx

DeleteImagesDialog.tsx

The DeleteImagesDialog.tsx file contains a React component that renders a modal dialog for confirming the deletion of multiple images. It allows users to select whether they want to delete the associated files and generated supporting files along with the images.

1. Component Props:

   • IDeleteImageDialogProps interface defines the props expected by the DeleteImagesDialog component.
   • Props include selected (array of selected images to delete) and onClose (callback function invoked when the dialog is closed).

2. Internationalization:

   • Utilizes the useIntl hook from react-intl to internationalize strings displayed in the dialog, such as titles, messages, and button labels.

3. Configuration Context:

   • Consumes the ConfigurationContext to access default configuration values for deleting files and generated supporting files.

4. State Management:

   • Manages state using React's useState hook for toggling options to delete files and generated supporting files.
   • isDeleting state is used to track the network operation status (deletion process).

5. Delete Operation:

   • Utilizes the useImagesDestroy hook from StashService to perform the deletion operation.
   • onDelete function handles the deletion process, updating the UI and displaying toast messages based on the operation's result.

6. Alert for Deleting Files:

   • Renders an alert if the option to delete associated files is enabled (deleteFile is true).
   • Lists the files that will be deleted along with the images, with a limit of 5 files shown to avoid clutter.

7. Modal Component:

   • Utilizes the ModalComponent from "src/components/Shared/Modal" to render the modal dialog.
   • Configures accept and cancel buttons with corresponding actions and labels.

Example Modification:

Let's say you want to add an additional checkbox to allow users to confirm the deletion operation. Here's how you can modify the DeleteImagesDialog component:

// Add state for confirming the deletion
const [confirmDelete, setConfirmDelete] = useState<boolean>(false);

// Modify the return statement to include the confirmation checkbox
<Form.Check
  id="confirm-delete"
  checked={confirmDelete}
  label={intl.formatMessage({ id: "actions.confirm_delete" })}
  onChange={() => setConfirmDelete(!confirmDelete)}
/>

// Update the accept button to conditionally enable based on the confirmation state
accept={{
  variant: "danger",
  onClick: onDelete,
  text: intl.formatMessage({ id: "actions.delete" }),
  disabled: !confirmDelete, // Disable if confirmation is not checked
}}

Explanation:

1. State for Confirmation:

• Adds state (confirmDelete) to manage whether the user has confirmed the deletion operation.

2. Confirmation Checkbox:

• Adds a checkbox (<Form.Check>) to allow users to confirm the deletion.
• The label is internationalized using intl.formatMessage.

3. Accept Button Update:

• Updates the accept button configuration to conditionally enable/disable based on the confirmation state.
• The button is disabled (disabled: true) if the confirmation checkbox is not checked (!confirmDelete).

This modification adds an additional confirmation step to the deletion process, ensuring users explicitly confirm their intent before proceeding with the deletion operation.