feat(console): add leave tenant button in tenant settings (#5600)

packages/console/src/pages/TenantSettings/TenantBasicSettings/LeaveCard/index.module.scss

@@ -0,0 +1,15 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-divider);
+  border-radius: _.unit(2);
+  padding: _.unit(4);
+
+  .description {
+    flex: 1;
+    margin-right: _.unit(2);
+    font: var(--font-body-2);
+  }
+}

packages/console/src/pages/TenantSettings/TenantBasicSettings/LeaveCard/index.tsx

@@ -0,0 +1,64 @@
+import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
+import FormCard from '@/components/FormCard';
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import Button from '@/ds-components/Button';
+import FormField from '@/ds-components/FormField';
+import { useConfirmModal } from '@/hooks/use-confirm-modal';
+import useCurrentUser from '@/hooks/use-current-user';
+
+import * as styles from './index.module.scss';
+
+function LeaveCard() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { show: showModal } = useConfirmModal();
+  const api = useAuthedCloudApi();
+  const { currentTenantId, removeTenant, navigateTenant } = useContext(TenantsContext);
+  const { user } = useCurrentUser();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClickLeave = async () => {
+    const [confirm] = await showModal({
+      ModalContent: t('tenants.leave_tenant_modal.description'),
+      type: 'confirm',
+      confirmButtonText: 'tenants.leave_tenant_modal.leave_button',
+    });
+
+    if (!confirm || !user) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await api.delete(`/api/tenants/:tenantId/members/:userId`, {
+        params: { tenantId: currentTenantId, userId: user.id },
+      });
+      removeTenant(currentTenantId);
+      navigateTenant('');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <FormCard title="tenants.leave_tenant_card.leave_tenant">
+      <FormField title="tenants.leave_tenant_card.leave_tenant">
+        <div className={styles.container}>
+          <div className={styles.description}>
+            {t('tenants.leave_tenant_card.leave_tenant_description')}
+          </div>
+          <Button
+            type="default"
+            title="tenants.leave_tenant_card.leave_tenant"
+            isLoading={isLoading}
+            onClick={onClickLeave}
+          />
+        </div>
+      </FormField>
+    </FormCard>
+  );
+}
+
+export default LeaveCard;

packages/console/src/pages/TenantSettings/TenantBasicSettings/index.module.scss

@@ -4,15 +4,13 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  padding-bottom: _.unit(2);
+  padding-bottom: _.unit(4);
   min-width: 540px;
+  gap: _.unit(4);
 
   &.withSubmitActionBar {
     padding-bottom: 0;
-  }
-
-  >:not(:first-child) {
-    margin-top: _.unit(4);
+    margin-bottom: 0;
   }
 
   .fields {

packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx

@@ -17,6 +17,7 @@ import { trySubmitSafe } from '@/utils/form';
 
 import DeleteCard from './DeleteCard';
 import DeleteModal from './DeleteModal';
+import LeaveCard from './LeaveCard';
 import ProfileForm from './ProfileForm';
 import * as styles from './index.module.scss';
 import { type TenantSettingsForm } from './types.js';
@@ -122,6 +123,7 @@ function TenantBasicSettings() {
         <FormProvider {...methods}>
           <div className={styles.fields}>
             <ProfileForm currentTenantId={currentTenantId} />
+            <LeaveCard />
             {canManageTenant && (
               <DeleteCard currentTenantId={currentTenantId} onClick={onClickDeletionButton} />
             )}