[WEB-4479] feat: enable/disable SMTP configuration (#7393)

* feat: api update instance configuration * chore: add enable_smtp key * fix: empty string for enable_smtp key * chore: update email_port and email_from * fix: handled smtp enable disable * fix: error handling * fix: refactor * fix: removed enabled toast * fix: refactor --------- Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
2025-07-16 01:04:18 +05:30 · 2025-07-16 01:04:18 +05:30 · 99127ff8e4
commit 99127ff8e4
parent da5390fa03
9 changed files with 155 additions and 24 deletions
--- a/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
@ -49,9 +49,9 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
      EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
      EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
      EMAIL_FROM: config["EMAIL_FROM"],
+      ENABLE_SMTP: config["ENABLE_SMTP"],
    },
  });
-
  const emailFormFields: TControllerInputFormField[] = [
    {
      key: "EMAIL_HOST",
@ -101,7 +101,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
  ];

  const onSubmit = async (formData: EmailFormValues) => {
-    const payload: Partial<EmailFormValues> = { ...formData };
+    const payload: Partial<EmailFormValues> = { ...formData, ENABLE_SMTP: "1" };

    await updateInstanceConfigurations(payload)
      .then(() =>
--- a/apps/admin/app/(all)/(dashboard)/email/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/page.tsx
@ -1,8 +1,9 @@
 "use client";

+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-import { Loader } from "@plane/ui";
+import { Loader, setToast, TOAST_TYPE, ToggleSwitch } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
@ -10,36 +11,80 @@ import { InstanceEmailForm } from "./email-config-form";

 const InstanceEmailPage = observer(() => {
  // store
-  const { fetchInstanceConfigurations, formattedConfig } = useInstance();
+  const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();

-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+  const { isLoading } = useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSMTPEnabled, setIsSMTPEnabled] = useState(false);
+
+  const handleToggle = async () => {
+    if (isSMTPEnabled) {
+      setIsSubmitting(true);
+      try {
+        await disableEmail();
+        setIsSMTPEnabled(false);
+        setToast({
+          title: "Email feature disabled",
+          message: "Email feature has been disabled",
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (error) {
+        setToast({
+          title: "Error disabling email",
+          message: "Failed to disable email feature. Please try again.",
+          type: TOAST_TYPE.ERROR,
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+      return;
+    }
+    setIsSMTPEnabled(true);
+  };
+  useEffect(() => {
+    if (formattedConfig) {
+      setIsSMTPEnabled(formattedConfig.ENABLE_SMTP === "1");
+    }
+  }, [formattedConfig]);

  return (
    <>
      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
-          <div className="text-sm font-normal text-custom-text-300">
-            Plane can send useful emails to you and your users from your own instance without talking to the Internet.
+        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="py-4 space-y-1 flex-shrink-0">
+            <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
            <div className="text-sm font-normal text-custom-text-300">
-              Set it up below and please test your settings before you save them.&nbsp;
-              <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
+              Plane can send useful emails to you and your users from your own instance without talking to the Internet.
+              <div className="text-sm font-normal text-custom-text-300">
+                Set it up below and please test your settings before you save them.&nbsp;
+                <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
+              </div>
            </div>
          </div>
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceEmailForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-10">
-              <Loader.Item height="50px" width="75%" />
-              <Loader.Item height="50px" width="75%" />
-              <Loader.Item height="50px" width="40%" />
-              <Loader.Item height="50px" width="40%" />
-              <Loader.Item height="50px" width="20%" />
+          {isLoading ? (
+            <Loader>
+              <Loader.Item width="24px" height="16px" className="rounded-full" />
            </Loader>
+          ) : (
+            <ToggleSwitch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
          )}
        </div>
+        {isSMTPEnabled && !isLoading && (
+          <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+            {formattedConfig ? (
+              <InstanceEmailForm config={formattedConfig} />
+            ) : (
+              <Loader className="space-y-10">
+                <Loader.Item height="50px" width="75%" />
+                <Loader.Item height="50px" width="75%" />
+                <Loader.Item height="50px" width="40%" />
+                <Loader.Item height="50px" width="40%" />
+                <Loader.Item height="50px" width="20%" />
+              </Loader>
+            )}
+          </div>
+        )}
      </div>
    </>
  );
--- a/apps/admin/core/store/instance.store.ts
+++ b/apps/admin/core/store/instance.store.ts
@ -32,6 +32,7 @@ export interface IInstanceStore {
  fetchInstanceAdmins: () => Promise<IInstanceAdmin[] | undefined>;
  fetchInstanceConfigurations: () => Promise<IInstanceConfiguration[] | undefined>;
  updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
+  disableEmail: () => Promise<void>;
 }

 export class InstanceStore implements IInstanceStore {
@ -187,4 +188,30 @@ export class InstanceStore implements IInstanceStore {
      throw error;
    }
  };
+
+  disableEmail = async () => {
+    const instanceConfigurations = this.instanceConfigurations;
+    try {
+      runInAction(() => {
+        this.instanceConfigurations = this.instanceConfigurations?.map((config) => {
+          if (
+            [
+              "EMAIL_HOST",
+              "EMAIL_PORT",
+              "EMAIL_HOST_USER",
+              "EMAIL_HOST_PASSWORD",
+              "EMAIL_FROM",
+              "ENABLE_SMTP",
+            ].includes(config.key)
+          )
+            return { ...config, value: "" };
+          return config;
+        });
+      });
+      await this.instanceService.disableEmail();
+    } catch (error) {
+      console.error("Error disabling the email");
+      this.instanceConfigurations = instanceConfigurations;
+    }
+  };
 }
--- a/apps/api/plane/license/api/views/init.py
+++ b/apps/api/plane/license/api/views/init.py
@ -1,7 +1,11 @@
 from .instance import InstanceEndpoint, SignUpScreenVisitedEndpoint


-from .configuration import EmailCredentialCheckEndpoint, InstanceConfigurationEndpoint
+from .configuration import (
+    EmailCredentialCheckEndpoint,
+    InstanceConfigurationEndpoint,
+    DisableEmailFeatureEndpoint,
+)


 from .admin import (
--- a/apps/api/plane/license/api/views/configuration.py
+++ b/apps/api/plane/license/api/views/configuration.py
@ -9,6 +9,7 @@ from smtplib import (

 # Django imports
 from django.core.mail import BadHeaderError, EmailMultiAlternatives, get_connection
+from django.db.models import Q, Case, When, Value

 # Third party imports
 from rest_framework import status
@ -57,6 +58,34 @@ class InstanceConfigurationEndpoint(BaseAPIView):
        return Response(serializer.data, status=status.HTTP_200_OK)


+class DisableEmailFeatureEndpoint(BaseAPIView):
+    permission_classes = [InstanceAdminPermission]
+
+    @invalidate_cache(path="/api/instances/", user=False)
+    def delete(self, request):
+        try:
+            InstanceConfiguration.objects.filter(
+                Q(
+                    key__in=[
+                        "EMAIL_HOST",
+                        "EMAIL_HOST_USER",
+                        "EMAIL_HOST_PASSWORD",
+                        "ENABLE_SMTP",
+                        "EMAIL_PORT",
+                        "EMAIL_FROM",
+                    ]
+                )
+            ).update(
+                value=Case(When(key="ENABLE_SMTP", then=Value("0")), default=Value(""))
+            )
+            return Response(status=status.HTTP_200_OK)
+        except Exception:
+            return Response(
+                {"error": "Failed to disable email configuration"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
 class EmailCredentialCheckEndpoint(BaseAPIView):
    def post(self, request):
        receiver_email = request.data.get("receiver_email", False)
--- a/apps/api/plane/license/management/commands/configure_instance.py
+++ b/apps/api/plane/license/management/commands/configure_instance.py
@ -89,6 +89,12 @@ class Command(BaseCommand):
                "category": "GITLAB",
                "is_encrypted": False,
            },
+            {
+                "key": "ENABLE_SMTP",
+                "value": os.environ.get("ENABLE_SMTP", "0"),
+                "category": "SMTP",
+                "is_encrypted": False,
+            },
            {
                "key": "GITLAB_CLIENT_SECRET",
                "value": os.environ.get("GITLAB_CLIENT_SECRET"),
--- a/apps/api/plane/license/urls.py
+++ b/apps/api/plane/license/urls.py
@ -6,6 +6,7 @@ from plane.license.api.views import (
    InstanceAdminSignInEndpoint,
    InstanceAdminSignUpEndpoint,
    InstanceConfigurationEndpoint,
+    DisableEmailFeatureEndpoint,
    InstanceEndpoint,
    SignUpScreenVisitedEndpoint,
    InstanceAdminUserMeEndpoint,
@ -35,6 +36,11 @@ urlpatterns = [
        InstanceConfigurationEndpoint.as_view(),
        name="instance-configuration",
    ),
+    path(
+        "configurations/disable-email-feature/",
+        DisableEmailFeatureEndpoint.as_view(),
+        name="disable-email-configuration",
+    ),
    path(
        "admins/sign-in/",
        InstanceAdminSignInEndpoint.as_view(),
--- a/packages/services/src/instance/instance.service.ts
+++ b/packages/services/src/instance/instance.service.ts
@ -122,4 +122,17 @@ export class InstanceService extends APIService {
        throw error?.response?.data;
      });
  }
+
+  /**
+   * Disables the email configuration
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the API request fails
+   */
+  async disableEmail(): Promise<void> {
+    return this.delete("/api/instances/configurations/disable-email-feature/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
--- a/packages/types/src/instance/email.ts
+++ b/packages/types/src/instance/email.ts
@ -5,4 +5,5 @@ export type TInstanceEmailConfigurationKeys =
  | "EMAIL_HOST_PASSWORD"
  | "EMAIL_USE_TLS"
  | "EMAIL_USE_SSL"
-  | "EMAIL_FROM";
+  | "EMAIL_FROM"
+  | "ENABLE_SMTP";