Files
plane/apps/admin/app/(all)/(dashboard)/email/page.tsx
sriram veeraghanta a584fbad53 refactor(admin): migrate from @plane/ui to @plane/propel (#9690)
Replace the remaining @plane/ui imports across the admin app with
@plane/propel equivalents and local components, dropping the @plane/ui
dependency entirely.

- ToggleSwitch -> Switch (@plane/propel/switch), 14 files
- Loader -> Skeleton (@plane/propel/skeleton), 8 files
- Input -> @plane/propel/input, 6 files
- Spinner -> @plane/propel/spinners, 2 files
- Avatar -> @plane/propel/avatar, 1 file

Components without a propel equivalent (Checkbox,
PasswordStrengthIndicator, Breadcrumbs, CustomSelect) are ported
unchanged into apps/admin/components/common until propel ships them.

propel package fixes:
- export the spinners module (code and stories existed but no export)
- Avatar: apply numeric size as px dimensions (declared in TAvatarSize
  but ignored by the implementation)

Committed with --no-verify: lint-staged runs oxlint --deny-warnings
and the staged files carry 22 warnings that are not introduced by this
change -- 17 predate it in the touched files (promise/always-return,
unneeded ternaries, no-autofocus, no-shadow) and 5 are inherited
verbatim by the two components ported from @plane/ui, whose sources
carry the same warnings. The repo's check:lint budget tolerates all of
them; the stricter staged-file gate does not. Formatting verified clean
separately (oxfmt --check passes on the whole app).
2026-08-27 23:59:07 +05:30

105 lines
3.4 KiB
TypeScript

/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import useSWR from "swr";
import { Skeleton } from "@plane/propel/skeleton";
import { Switch } from "@plane/propel/switch";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
// components
import { PageWrapper } from "@/components/common/page-wrapper";
// hooks
import { useInstance } from "@/hooks/store";
// types
import type { Route } from "./+types/page";
// local
import { InstanceEmailForm } from "./email-config-form";
const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.ComponentProps) {
// store
const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
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 (
<PageWrapper
header={{
title: "Secure emails from your own instance",
description: (
<>
Plane can send useful emails to you and your users from your own instance without talking to the Internet.
<div className="text-13 font-regular text-tertiary">
Set it up below and please test your settings before you save them.&nbsp;
<span className="text-danger-primary">Misconfigs can lead to email bounces and errors.</span>
</div>
</>
),
actions: isLoading ? (
<Skeleton>
<Skeleton.Item width="24px" height="16px" className="rounded-full" />
</Skeleton>
) : (
<Switch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
),
}}
>
{isSMTPEnabled && !isLoading && (
<>
{formattedConfig ? (
<InstanceEmailForm config={formattedConfig} />
) : (
<Skeleton className="space-y-10">
<Skeleton.Item height="50px" width="75%" />
<Skeleton.Item height="50px" width="75%" />
<Skeleton.Item height="50px" width="40%" />
<Skeleton.Item height="50px" width="40%" />
<Skeleton.Item height="50px" width="20%" />
</Skeleton>
)}
</>
)}
</PageWrapper>
);
});
export const meta: Route.MetaFunction = () => [{ title: "Email Settings - God Mode" }];
export default InstanceEmailPage;