Add confirmation modal when deleting/ regenerating api keys, deleting webhook (#4035)

* fix: confirmation modal style

* add confirmation modal when delete/ regenerating an api key

* add confirmation modal when deleting webhook

* fix: remove line break

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -42,6 +42,10 @@ const StyledCenteredTitle = styled.div`
   text-align: center;
 `;
 
+const StyledSection = styled(Section)`
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const StyledConfirmationButton = styled(StyledCenteredButton)`
   border-color: ${({ theme }) => theme.border.color.danger};
   box-shadow: none;
@@ -94,12 +98,12 @@ export const ConfirmationModal = ({
           <StyledCenteredTitle>
             <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
           </StyledCenteredTitle>
-          <Section
+          <StyledSection
             alignment={SectionAlignment.Center}
             fontColor={SectionFontColor.Primary}
           >
             {subtitle}
-          </Section>
+          </StyledSection>
           {confirmationValue && (
             <Section>
               <TextInput
@@ -111,6 +115,12 @@ export const ConfirmationModal = ({
               />
             </Section>
           )}
+          <StyledCenteredButton
+            onClick={() => setIsOpen(false)}
+            variant="secondary"
+            title="Cancel"
+            fullWidth
+          />
           <StyledCenteredButton
             onClick={onConfirmClick}
             variant="secondary"
@@ -119,12 +129,6 @@ export const ConfirmationModal = ({
             disabled={!isValidValue}
             fullWidth
           />
-          <StyledCenteredButton
-            onClick={() => setIsOpen(false)}
-            variant="secondary"
-            title="Cancel"
-            fullWidth
-          />
         </StyledConfirmationModal>
       </LayoutGroup>
     </AnimatePresence>

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
@@ -20,6 +20,7 @@ import { IconRepeat, IconSettings, IconTrash } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
@@ -40,6 +41,10 @@ const StyledInputContainer = styled.div`
 `;
 
 export const SettingsDevelopersApiKeyDetail = () => {
+  const [isRegenerateKeyModalOpen, setIsRegenerateKeyModalOpen] =
+    useState(false);
+  const [isDeleteApiKeyModalOpen, setIsDeleteApiKeyModalOpen] = useState(false);
+
   const navigate = useNavigate();
   const { apiKeyId = '' } = useParams();
 
@@ -154,7 +159,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
                     <Button
                       title="Regenerate Key"
                       Icon={IconRepeat}
-                      onClick={regenerateApiKey}
+                      onClick={() => setIsRegenerateKeyModalOpen(true)}
                     />
                     <StyledInfo>
                       {formatExpiration(
@@ -186,12 +191,43 @@ export const SettingsDevelopersApiKeyDetail = () => {
                 variant="secondary"
                 title="Disable"
                 Icon={IconTrash}
-                onClick={() => deleteIntegration()}
+                onClick={() => setIsDeleteApiKeyModalOpen(true)}
               />
             </Section>
           </SettingsPageContainer>
         </SubMenuTopBarContainer>
       )}
+      <ConfirmationModal
+        confirmationPlaceholder="yes"
+        confirmationValue="yes"
+        isOpen={isDeleteApiKeyModalOpen}
+        setIsOpen={setIsDeleteApiKeyModalOpen}
+        title="Delete Api key"
+        subtitle={
+          <>
+            Please type "yes" to confirm you want to delete this API Key. Be
+            aware that any script using this key will stop working.
+          </>
+        }
+        onConfirmClick={deleteIntegration}
+        deleteButtonText="Delete"
+      />
+      <ConfirmationModal
+        confirmationPlaceholder="yes"
+        confirmationValue="yes"
+        isOpen={isRegenerateKeyModalOpen}
+        setIsOpen={setIsRegenerateKeyModalOpen}
+        title="Regenerate an Api key"
+        subtitle={
+          <>
+            If you’ve lost this key, you can regenerate it, but be aware that
+            any script using this key will need to be updated. Please type "yes"
+            to confirm.
+          </>
+        }
+        onConfirmClick={regenerateApiKey}
+        deleteButtonText="Regenerate key"
+      />
     </>
   );
 };

packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -9,11 +10,14 @@ import { IconSettings, IconTrash } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsDevelopersWebhooksDetail = () => {
+  const [isDeleteWebhookModalOpen, setIsDeleteWebhookModalOpen] =
+    useState(false);
   const navigate = useNavigate();
   const { webhookId = '' } = useParams();
   const { record: webhookData } = useFindOneRecord({
@@ -62,7 +66,22 @@ export const SettingsDevelopersWebhooksDetail = () => {
                 variant="secondary"
                 title="Disable"
                 Icon={IconTrash}
-                onClick={() => deleteWebhook()}
+                onClick={() => setIsDeleteWebhookModalOpen(true)}
+              />
+              <ConfirmationModal
+                confirmationPlaceholder="yes"
+                confirmationValue="yes"
+                isOpen={isDeleteWebhookModalOpen}
+                setIsOpen={setIsDeleteWebhookModalOpen}
+                title="Delete webhook"
+                subtitle={
+                  <>
+                    Please type "yes" to confirm you want to delete this
+                    webhook.
+                  </>
+                }
+                onConfirmClick={deleteWebhook}
+                deleteButtonText="Delete webhook"
               />
             </Section>
           </SettingsPageContainer>