* Added proper dark mode support for buttons, and converted buttons to use CVA for better maintainable variant styling. * Added animations to buttons. * Added cva types to buttonbase type since thats imported in different places * Fixed issue with styled buttons when false was pas for disabled instead of undefined. Added a small util function that now accepts arrays of variants, and creates all the possible combinations. This way we have less duplicate compoundvariants defined. This fixes the styles in the eventsinglelayout component. * Undo disabling of api jest tests. * Fixed remaining buttons using combined prop, which is replace by button group. Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
|
|
import { Dialog } from "@calcom/ui/Dialog";
|
|
import { ButtonProps } from "@calcom/ui/components/button";
|
|
import showToast from "@calcom/ui/v2/core/notifications";
|
|
|
|
export default function DisconnectIntegration(props: {
|
|
/** Integration credential id */
|
|
id: number;
|
|
externalId?: string;
|
|
render: (renderProps: ButtonProps) => JSX.Element;
|
|
onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
|
|
}) {
|
|
const { id, externalId = "" } = props;
|
|
const { t } = useLocale();
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
|
|
const mutation = trpc.viewer.deleteCredential.useMutation({
|
|
onSettled: async () => {
|
|
await props.onOpenChange(modalOpen);
|
|
},
|
|
onSuccess: () => {
|
|
showToast("Integration deleted successfully", "success");
|
|
setModalOpen(false);
|
|
},
|
|
onError: () => {
|
|
throw new Error("Something went wrong");
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
|
<ConfirmationDialogContent
|
|
variety="danger"
|
|
title={t("remove_app")}
|
|
confirmBtnText={t("yes_remove_app")}
|
|
cancelBtnText="Cancel"
|
|
onConfirm={() => {
|
|
mutation.mutate({ id, externalId });
|
|
}}>
|
|
{t("are_you_sure_you_want_to_remove_this_app")}
|
|
</ConfirmationDialogContent>
|
|
</Dialog>
|
|
{props.render({
|
|
onClick() {
|
|
setModalOpen(true);
|
|
},
|
|
disabled: modalOpen,
|
|
loading: mutation.isLoading,
|
|
})}
|
|
</>
|
|
);
|
|
}
|