supabase/studio/components/to-be-cleaned/Storage/StorageExplorer/MoveItemsModal.js

import { useEffect, useState } from 'react'
import { Modal, Button, Input, Space } from 'ui'

const MoveItemsModal = ({
  bucketName = '',
  visible = false,
  selectedItemsToMove = [],
  onSelectCancel = () => {},
  onSelectMove = () => {},
}) => {
  const [moving, setMoving] = useState(false)
  const [newPath, setNewPath] = useState('')

  useEffect(() => {
    setMoving(false)
    setNewPath('')
  }, [visible])

  const multipleFiles = selectedItemsToMove.length > 1

  const title = multipleFiles
    ? `Moving ${selectedItemsToMove.length} items within ${bucketName}`
    : selectedItemsToMove.length === 1
    ? `Moving ${selectedItemsToMove[0].name} within ${bucketName}`
    : ``

  const description = `Enter the path to where you'd like to move the file${
    multipleFiles ? 's' : ''
  } to.`

  const onConfirmMove = (event) => {
    if (event) {
      event.preventDefault()
    }
    setMoving(true)
    const formattedPath = newPath[0] === '/' ? newPath.slice(1) : newPath
    onSelectMove(formattedPath)
  }

  return (
    <Modal
      visible={visible}
      header={title}
      description={description}
      size="medium"
      onCancel={onSelectCancel}
      customFooter={
        <div className="flex items-center gap-2">
          <Button type="default" onClick={onSelectCancel}>
            Cancel
          </Button>
          <Button type="primary" loading={moving} onClick={onConfirmMove}>
            {moving ? 'Moving files' : 'Move files'}
          </Button>
        </div>
      }
    >
      <Modal.Content>
        <form className="my-4">
          <div className="relative flex items-center">
            <Input
              autoFocus
              label={`Path to new directory in ${bucketName}`}
              type="text"
              className="w-full"
              placeholder="e.g folder1/subfolder2"
              value={newPath}
              descriptionText="Leave blank to move items to the root of the bucket"
              onChange={(event) => setNewPath(event.target.value)}
            />
          </div>

          <button className="hidden" type="submit" onClick={onConfirmMove} />
        </form>
      </Modal.Content>
    </Modal>
  )
}

export default MoveItemsModal