diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx index 69db0ad087a..a6ad2e8b989 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx @@ -4,6 +4,14 @@ import { useEffect } from 'react' import { SubmitHandler, useForm } from 'react-hook-form' import { toast } from 'sonner' import { + Button, + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogSection, + DialogSectionSeparator, + DialogTitle, Form, FormControl, FormField, @@ -11,7 +19,6 @@ import { InputGroupAddon, InputGroupInput, InputGroupText, - Modal, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import z from 'zod' @@ -31,6 +38,7 @@ const FormSchema = z.object({ (val) => { try { JSON.parse(val) + return true } catch { return false } @@ -80,69 +88,77 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) => }, [visible]) return ( - { - const values = form.getValues() - onSubmit(values) - }} - > - -
- + + + Add a message to the queue + + + + + + ( + + + + + + sec + + + + + )} + /> + ( + + + field.onChange(e)} + options={{ wordWrap: 'off', contextmenu: false }} + value={field.value} + /> + + + )} + /> + + + + + + + +
+ ) } diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/DeleteSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/DeleteSecretModal.tsx index cf844e0a540..7ff7934dc31 100644 --- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/DeleteSecretModal.tsx +++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/DeleteSecretModal.tsx @@ -1,7 +1,16 @@ import { parseAsString, useQueryState } from 'nuqs' import { useEffect } from 'react' import { toast } from 'sonner' -import { Modal } from 'ui' +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from 'ui' import { useVaultSecretDeleteMutation } from '@/data/vault/vault-secret-delete-mutation' import { useVaultSecretsQuery } from '@/data/vault/vault-secrets-query' @@ -18,11 +27,7 @@ export const DeleteSecretModal = () => { const [secretIdToDelete, setSelectedSecretToDelete] = useQueryState('delete', parseAsString) const selectedSecret = secrets.find((secret) => secret.id === secretIdToDelete) - const { - mutate: deleteSecret, - isPending: isDeleting, - isSuccess: isSuccessDelete, - } = useVaultSecretDeleteMutation({ + const { mutateAsync: deleteSecret, isSuccess: isSuccessDelete } = useVaultSecretDeleteMutation({ onSuccess: () => { toast.success(`Successfully deleted secret ${selectedSecret?.name}`) setSelectedSecretToDelete(null) @@ -51,27 +56,30 @@ export const DeleteSecretModal = () => { }, [isSuccess, isSuccessDelete, secretIdToDelete, selectedSecret, setSelectedSecretToDelete]) return ( - setSelectedSecretToDelete(null)} - onConfirm={onConfirmDeleteSecret} - > - -

- The following secret will be permanently removed and cannot be recovered. Are you sure? -

-
-

{selectedSecret?.description}

-

- ID: {selectedSecret?.id} -

-
-
-
+ setSelectedSecretToDelete(null)}> + + + Confirm to delete secret + +

+ The following secret will be permanently removed and cannot be recovered. Are you + sure? +

+
+

{selectedSecret?.description}

+

+ ID: {selectedSecret?.id} +

+
+
+
+ + Cancel + + Confirm + + +
+
) } diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/DeleteWrapperModal.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/DeleteWrapperModal.tsx index 56d3ca2692e..ca7418dcfd1 100644 --- a/apps/studio/components/interfaces/Integrations/Wrappers/DeleteWrapperModal.tsx +++ b/apps/studio/components/interfaces/Integrations/Wrappers/DeleteWrapperModal.tsx @@ -2,7 +2,16 @@ import { useParams } from 'common' import { parseAsString, useQueryState } from 'nuqs' import { useEffect, useMemo } from 'react' import { toast } from 'sonner' -import { Modal } from 'ui' +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from 'ui' import { INTEGRATIONS } from '../Landing/Integrations.constants' import { getWrapperMetaForWrapper, wrapperMetaComparator } from './Wrappers.utils' @@ -34,11 +43,7 @@ export const DeleteWrapperModal = () => { ) const selectedWrapper = wrappers.find((x) => x.id.toString() === selectedWrapperIdToDelete) - const { - mutate: deleteFDW, - isPending: isDeleting, - isSuccess: isSuccessDelete, - } = useFDWDeleteMutation({ + const { mutateAsync: deleteFDW, isSuccess: isSuccessDelete } = useFDWDeleteMutation({ onSuccess: () => { toast.success(`Successfully disabled ${selectedWrapper?.name} foreign data wrapper`) setSelectedWrapperToDelete(null) @@ -51,7 +56,7 @@ export const DeleteWrapperModal = () => { if (!selectedWrapper) return console.error('Wrapper is required') if (!wrapperMeta) return console.error('Wrapper meta is required') - deleteFDW({ + await deleteFDW({ projectRef: project?.ref, connectionString: project?.connectionString, wrapper: selectedWrapper, @@ -73,22 +78,25 @@ export const DeleteWrapperModal = () => { ]) return ( - setSelectedWrapperToDelete(null)} - onConfirm={() => onConfirmDelete()} - header={`Confirm to disable ${selectedWrapper?.name}`} + setSelectedWrapperToDelete(null)} > - -

- Are you sure you want to disable {selectedWrapper?.name}? This will also remove all tables - created with this wrapper. -

-
-
+ + + {`Confirm to disable ${selectedWrapper?.name}`} + + Are you sure you want to disable {selectedWrapper?.name}? This will also remove all + tables created with this wrapper. + + + + Cancel + + Confirm + + + + ) }