From c7a276eb1d83824a5bd01bca10a3fdecf4c19c73 Mon Sep 17 00:00:00 2001
From: Ujwal Kumar <ujwalkumar95@gmail.com>
Date: Fri, 21 Jul 2023 14:16:16 +0530
Subject: [PATCH] fix: remove app dialog while removing installed calendar
 (#10234)

* Fix remove app dialog while removing installed calendar

* fix: dialog in webhook, otp

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: more dialogs

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: margin

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 .../routing-forms/components/FormActions.tsx  |  2 +-
 .../apps/components/DisconnectIntegration.tsx | 25 ++++++++-----------
 .../components/MemberChangeRoleModal.tsx      |  2 +-
 .../components/WorkflowStepContainer.tsx      |  6 ++---
 .../eventtypes/components/DuplicateDialog.tsx |  2 +-
 .../webhooks/components/WebhookForm.tsx       | 16 +++++++++---
 6 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index bdad562f7b..f705995660 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -145,7 +145,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
               />
             )}
           </div>
-          <DialogFooter showDivider className="mt-12 flex flex-row-reverse gap-x-2">
+          <DialogFooter showDivider className="mt-12">
             <DialogClose />
             <Button loading={mutation.isLoading} data-testid="add-form" type="submit">
               {t("continue")}
diff --git a/packages/features/apps/components/DisconnectIntegration.tsx b/packages/features/apps/components/DisconnectIntegration.tsx
index 65f210775b..fc071e5d62 100644
--- a/packages/features/apps/components/DisconnectIntegration.tsx
+++ b/packages/features/apps/components/DisconnectIntegration.tsx
@@ -5,14 +5,12 @@ import { trpc } from "@calcom/trpc/react";
 import type { ButtonProps } from "@calcom/ui";
 import {
   Button,
+  ConfirmationDialogContent,
   Dialog,
-  DialogContent,
   DialogTrigger,
   showToast,
-  DialogFooter,
-  DialogClose,
 } from "@calcom/ui";
-import { Trash, AlertCircle } from "@calcom/ui/components/icon";
+import { Trash } from "@calcom/ui/components/icon";
 
 export default function DisconnectIntegration({
   credentialId,
@@ -62,18 +60,15 @@ export default function DisconnectIntegration({
             {label && label}
           </Button>
         </DialogTrigger>
-        <DialogContent
+        <ConfirmationDialogContent
+          variety="danger"
           title={t("remove_app")}
-          description={t("are_you_sure_you_want_to_remove_this_app")}
-          type="confirmation"
-          Icon={AlertCircle}>
-          <DialogFooter>
-            <DialogClose onClick={() => setModalOpen(false)} />
-            <DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>
-              {t("yes_remove_app")}
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
+          confirmBtnText={t("yes_remove_app")}
+          onConfirm={() => {
+            mutation.mutate({ id: credentialId });
+          }}>
+          <p className="mt-5">{t("are_you_sure_you_want_to_remove_this_app")}</p>
+        </ConfirmationDialogContent>
       </Dialog>
     </>
   );
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index 4a28135c7c..4c04a58b0d 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -102,7 +102,7 @@ export default function MemberChangeRoleModal(props: {
                 {errorMessage}
               </p>
             )}
-            <DialogFooter className="mt-12 sm:flex sm:flex-row-reverse">
+            <DialogFooter className="mt-12">
               <Button type="button" color="secondary" onClick={props.onExit}>
                 {t("cancel")}
               </Button>
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index dd9516b00f..a0afc3f517 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -945,8 +945,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           </ConfirmationDialogContent>
         </Dialog> */}
         <Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
-          <DialogContent type="creation" className="sm:max-w-[610px]">
-            <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
+          <DialogContent enableOverflow type="creation" className="sm:max-w-[610px]">
+            <div>
               <h1 className="w-full text-xl font-semibold ">{t("how_booking_questions_as_variables")}</h1>
               <div className="bg-muted-3 mb-6 rounded-md sm:p-4">
                 <p className="test-sm font-medium">{t("format")}</p>
@@ -994,7 +994,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               </div>
             </div>
-            <DialogFooter showDivider className="flex flex-row-reverse">
+            <DialogFooter showDivider>
               <DialogClose color="primary" />
             </DialogFooter>
           </DialogContent>
diff --git a/packages/features/eventtypes/components/DuplicateDialog.tsx b/packages/features/eventtypes/components/DuplicateDialog.tsx
index 6fd36c1042..03e3dd663b 100644
--- a/packages/features/eventtypes/components/DuplicateDialog.tsx
+++ b/packages/features/eventtypes/components/DuplicateDialog.tsx
@@ -149,7 +149,7 @@ const DuplicateDialog = () => {
               />
             </div>
           </div>
-          <DialogFooter showDivider className="mt-10 flex-row-reverse gap-x-2">
+          <DialogFooter showDivider className="mt-10">
             <DialogClose />
             <Button type="submit" loading={duplicateMutation.isLoading}>
               {t("continue")}
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 50faa37690..6c995d5435 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -5,7 +5,17 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { WebhookTriggerEvents } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { Button, Form, Label, Select, Switch, TextArea, TextField, ToggleGroup } from "@calcom/ui";
+import {
+  Button,
+  Form,
+  Label,
+  Select,
+  Switch,
+  TextArea,
+  TextField,
+  ToggleGroup,
+  DialogFooter,
+} from "@calcom/ui";
 
 import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
 import WebhookTestDisclosure from "./WebhookTestDisclosure";
@@ -259,7 +269,7 @@ const WebhookForm = (props: {
           <WebhookTestDisclosure />
         </div>
 
-        <div className="mt-12 flex place-content-end space-x-4">
+        <DialogFooter showDivider>
           <Button
             type="button"
             color="minimal"
@@ -270,7 +280,7 @@ const WebhookForm = (props: {
           <Button type="submit" loading={formMethods.formState.isSubmitting}>
             {props?.webhook?.id ? t("save") : t("create_webhook")}
           </Button>
-        </div>
+        </DialogFooter>
       </Form>
     </>
   );