supabase/studio/components/ui/Modals/TextConfirmModal.tsx

import { FC, ReactNode } from 'react'
import { Modal, Button, Typography, Input, Alert, Form } from '@supabase/ui'

interface Props {
  loading: boolean
  visible: boolean
  title: string
  confirmLabel: string
  confirmPlaceholder: string
  confirmString: string
  alert: string
  text: string | ReactNode
  onConfirm: () => void
  onCancel: () => void
}

const TextConfirmModal: FC<Props> = ({
  title,
  onConfirm,
  visible,
  onCancel,
  loading,
  confirmLabel,
  confirmPlaceholder,
  confirmString,
  alert,
  text,
}) => {
  // [Joshen] Have to keep the loading prop here as this component itself doesn't
  // directly trigger any potential async job that follows onConfirm. It only triggers
  // the onConfirm callback function, and hence if anything fails in the callback,
  // have to depend on loading prop to unfreeze the UI state

  const validate = (values: any) => {
    const errors: any = {}
    if (values.confirmValue.length === 0) {
      errors.confirmValue = 'Enter the required value.'
    } else if (values.confirmValue !== confirmString) {
      errors.confirmValue = 'Value entered does not match.'
    }
    return errors
  }

  return (
    <Modal hideFooter closable size="small" visible={visible} header={title} onCancel={onCancel}>
      <Form
        validateOnBlur
        initialValues={{ confirmValue: '' }}
        validate={validate}
        onSubmit={onConfirm}
      >
        {() => (
          <div className="w-full py-4">
            <div className="space-y-4">
              {alert && (
                <Modal.Content>
                  <Alert variant="warning" withIcon title={alert} />
                </Modal.Content>
              )}
              <Modal.Content>
                <Typography.Text className="block">
                  <p className="mb-2 text-sm">{text}</p>
                </Typography.Text>
              </Modal.Content>
              <Modal.Seperator />
              <Modal.Content>
                <Input
                  id="confirmValue"
                  label={
                    <span>
                      Type <span className="text-scale-1200">{confirmString}</span> to confirm.
                    </span>
                  }
                  placeholder={confirmPlaceholder}
                />
              </Modal.Content>
              <Modal.Seperator />
              <Modal.Content>
                <Button
                  block
                  type="danger"
                  size="medium"
                  htmlType="submit"
                  loading={loading}
                  disabled={loading}
                >
                  {confirmLabel}
                </Button>
              </Modal.Content>
            </div>
          </div>
        )}
      </Form>
    </Modal>
  )
}

export default TextConfirmModal