From 902cef78a111bf4a9cc90667e3e3071d559d6e23 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Sun, 27 Apr 2025 22:17:06 +0530
Subject: [PATCH] Add Logout Confirmation Popup When Changing Workspace
 Subdomain (#11756)

This PR implements a confirmation popup on the Domain settings page when
a user attempts to save a subdomain change.
- When the user saves the updated subdomain, a confirmation modal is
shown.
- The modal informs the user that changing the subdomain will log them
and all other users out.
- If the user confirms, the subdomain change proceeds as normal.
- If the user cancels, the update is aborted and no changes are made.

### Demo


https://github.com/user-attachments/assets/dcea51c8-ffd2-40ca-bc75-0c0228df5344


Related Issue
Closes #11741
---
 .../settings/workspace/SettingsDomain.tsx     | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
index dcf5720dc..d2a8a3fdc 100644
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
@@ -8,11 +8,13 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { SettingsPath } from '@/types/SettingsPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { ApolloError } from '@apollo/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -71,6 +73,11 @@ export const SettingsDomain = () => {
     currentWorkspaceState,
   );
 
+  const [
+    isSubdomainChangeConfirmationModalOpen,
+    setIsSubdomainChangeConfirmationModalOpen,
+  ] = useState(false);
+
   const form = useForm<{
     subdomain: string;
     customDomain: string | null;
@@ -194,7 +201,8 @@ export const SettingsDomain = () => {
       isDefined(values.subdomain) &&
       values.subdomain !== currentWorkspace.subdomain
     ) {
-      return updateSubdomain(values.subdomain, currentWorkspace);
+      setIsSubdomainChangeConfirmationModalOpen(true);
+      return;
     }
 
     if (values.customDomain !== currentWorkspace.customDomain) {
@@ -231,6 +239,17 @@ export const SettingsDomain = () => {
             {isCustomDomainEnabled && <SettingsCustomDomain />}
           </SettingsPageContainer>
         </SubMenuTopBarContainer>
+        <ConfirmationModal
+          isOpen={isSubdomainChangeConfirmationModalOpen}
+          title={t`Change subdomain?`}
+          subtitle={t`You're about to change your workspace subdomain. This action will log out all users.`}
+          setIsOpen={setIsSubdomainChangeConfirmationModalOpen}
+          onConfirmClick={() => {
+            const values = form.getValues();
+            currentWorkspace &&
+              updateSubdomain(values.subdomain, currentWorkspace);
+          }}
+        />
       </FormProvider>
     </form>
   );