diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx
new file mode 100644
index 0000000000..4351be5346
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const GeneralWorkspaceSettingsHeader = observer(function GeneralWorkspaceSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = WORKSPACE_SETTINGS.general;
+ const Icon = WORKSPACE_SETTINGS_ICONS.general;
+
+ return (
+
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
deleted file mode 100644
index 89eb978fce..0000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { observer } from "mobx-react";
-// components
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
-import { PageHead } from "@/components/core/page-title";
-import IntegrationGuide from "@/components/integration/guide";
-// hooks
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
-import { SettingsHeading } from "@/components/settings/heading";
-import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useUserPermissions } from "@/hooks/store/user";
-
-function ImportsPage() {
- // router
- // store hooks
- const { currentWorkspace } = useWorkspace();
- const { allowPermissions } = useUserPermissions();
- // derived values
- const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
- const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Imports` : undefined;
-
- if (!isAdmin) return
{workspaceUserInfo && !isAuthorized ? (
+
+ setDeleteWebhookModal(false)} />
+ {
- setShowCreateWebhookModal(true);
- },
- }}
+ control={
+
+ }
/>
{Object.keys(webhooks).length > 0 ? (
-
+
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx
new file mode 100644
index 0000000000..34086c6b06
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const EstimatesProjectSettingsHeader = observer(function EstimatesProjectSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = PROJECT_SETTINGS.estimates;
+ const Icon = PROJECT_SETTINGS_ICONS.estimates;
+
+ return (
+
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
index 2d446ae7ca..44fc12c7d4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
@@ -4,11 +4,13 @@ import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
import { PageHead } from "@/components/core/page-title";
import { EstimateRoot } from "@/components/estimates";
-// hooks
import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
import { useProject } from "@/hooks/store/use-project";
import { useUserPermissions } from "@/hooks/store/user";
+// local imports
import type { Route } from "./+types/page";
+import { EstimatesProjectSettingsHeader } from "./header";
function EstimatesSettingsPage({ params }: Route.ComponentProps) {
const { workspaceSlug, projectId } = params;
@@ -25,7 +27,7 @@ function EstimatesSettingsPage({ params }: Route.ComponentProps) {
}
return (
-
+
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx
new file mode 100644
index 0000000000..a943c15096
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx
@@ -0,0 +1,58 @@
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { ProjectSettingsFeatureControlItem } from "@/components/settings/project/content/feature-control-item";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { Route } from "./+types/page";
+import { FeaturesCyclesProjectSettingsHeader } from "./header";
+import { SettingsHeading } from "@/components/settings/heading";
+
+function FeaturesCyclesSettingsPage({ params }: Route.ComponentProps) {
+ const { workspaceSlug, projectId } = params;
+ // store hooks
+ const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+ const { currentProjectDetails } = useProject();
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const pageTitle = currentProjectDetails?.name
+ ? `${currentProjectDetails?.name} settings - ${t("project_settings.features.cycles.short_title")}`
+ : undefined;
+ const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+ if (workspaceUserInfo && !canPerformProjectAdminActions) {
+ return
+
+
+ );
+}
+
+export default observer(FeaturesCyclesSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx
new file mode 100644
index 0000000000..0bbff98579
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const FeaturesIntakeProjectSettingsHeader = observer(function FeaturesIntakeProjectSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = PROJECT_SETTINGS.features_intake;
+ const Icon = PROJECT_SETTINGS_ICONS.features_intake;
+
+ return (
+
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx
new file mode 100644
index 0000000000..a8ac0adebf
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx
@@ -0,0 +1,58 @@
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { ProjectSettingsFeatureControlItem } from "@/components/settings/project/content/feature-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { Route } from "./+types/page";
+import { FeaturesIntakeProjectSettingsHeader } from "./header";
+
+function FeaturesIntakeSettingsPage({ params }: Route.ComponentProps) {
+ const { workspaceSlug, projectId } = params;
+ // store hooks
+ const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+ const { currentProjectDetails } = useProject();
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const pageTitle = currentProjectDetails?.name
+ ? `${currentProjectDetails?.name} settings - ${t("project_settings.features.intake.short_title")}`
+ : undefined;
+ const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+ if (workspaceUserInfo && !canPerformProjectAdminActions) {
+ return
-
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
index 7f8e32fec1..9c869de32a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
@@ -13,7 +13,6 @@ import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view
import { CountChip } from "@/components/common/count-chip";
import { PageHead } from "@/components/core/page-title";
import { MemberListFiltersDropdown } from "@/components/project/dropdowns/filters/member-list";
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { WorkspaceMembersList } from "@/components/workspace/settings/members-list";
// hooks
import { useMember } from "@/hooks/store/use-member";
@@ -22,7 +21,10 @@ import { useUserPermissions } from "@/hooks/store/user";
// plane web components
import { BillingActionsButton } from "@/plane-web/components/workspace/billing/billing-actions-button";
import { SendWorkspaceInvitationModal, MembersActivityButton } from "@/plane-web/components/workspace/members";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// local imports
import type { Route } from "./+types/page";
+import { MembersWorkspaceSettingsHeader } from "./header";
const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
// states
@@ -93,7 +95,7 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
}
return (
- {
-
-
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx
new file mode 100644
index 0000000000..72a12a71d2
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const MembersWorkspaceSettingsHeader = observer(function MembersWorkspaceSettingsHeader() {
+ // plane hooks
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = WORKSPACE_SETTINGS.members;
+ const Icon = WORKSPACE_SETTINGS_ICONS.members;
+
+ return (
+
+
)}
+
+
-
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
index 441ae6662f..26f506275c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
@@ -14,7 +14,9 @@ import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/compone
import { useWebhook } from "@/hooks/store/use-webhook";
import { useWorkspace } from "@/hooks/store/use-workspace";
import { useUserPermissions } from "@/hooks/store/user";
+// local imports
import type { Route } from "./+types/page";
+import { WebhookDetailsWorkspaceSettingsHeader } from "./header";
function WebhookDetailsPage({ params }: Route.ComponentProps) {
// states
@@ -87,7 +89,7 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
);
return (
-
+
{t("workspace_settings.settings.members.title")}
{workspaceMemberIds && workspaceMemberIds.length > 0 && (
+
);
}
-export default observer(WorkspaceSettingsPage);
+export default observer(GeneralWorkspaceSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
deleted file mode 100644
index d4f6aed1a6..0000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useParams, usePathname } from "next/navigation";
-import { ArrowUpToLine, Building, CreditCard, Users, Webhook } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-// plane imports
-import {
- EUserPermissionsLevel,
- EUserPermissions,
- GROUPED_WORKSPACE_SETTINGS,
- WORKSPACE_SETTINGS_CATEGORIES,
- WORKSPACE_SETTINGS_CATEGORY,
-} from "@plane/constants";
-import type { WORKSPACE_SETTINGS } from "@plane/constants";
-import type { ISvgIcons } from "@plane/propel/icons";
-import type { EUserWorkspaceRoles } from "@plane/types";
-// components
-import { SettingsSidebar } from "@/components/settings/sidebar";
-// hooks
-import { useUserPermissions } from "@/hooks/store/user";
-// plane web imports
-import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
-
-export const WORKSPACE_SETTINGS_ICONS: Record> = {
- general: Building,
- members: Users,
- export: ArrowUpToLine,
- "billing-and-plans": CreditCard,
- webhooks: Webhook,
-};
-
-export function WorkspaceActionIcons({ type, size, className }: { type: string; size?: number; className?: string }) {
- if (type === undefined) return null;
- const Icon = WORKSPACE_SETTINGS_ICONS[type as keyof typeof WORKSPACE_SETTINGS_ICONS];
- if (!Icon) return null;
- return
- isAdmin || ![WORKSPACE_SETTINGS_CATEGORY.FEATURES, WORKSPACE_SETTINGS_CATEGORY.DEVELOPER].includes(category)
- )}
- groupedSettings={GROUPED_WORKSPACE_SETTINGS}
- workspaceSlug={workspaceSlug.toString()}
- isActive={(data: { href: string }) =>
- data.href === "/settings"
- ? pathname === `/${workspaceSlug}${data.href}/`
- : new RegExp(`^/${workspaceSlug}${data.href}/`).test(pathname)
- }
- shouldRender={(data: { key: string; access?: EUserWorkspaceRoles[] | undefined }) =>
- data.access
- ? shouldRenderSettingLink(workspaceSlug.toString(), data.key) &&
- allowPermissions(data.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())
- : false
- }
- actionIcons={WorkspaceActionIcons}
- />
- );
-}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx
new file mode 100644
index 0000000000..efd2f9fe78
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const WebhookDetailsWorkspaceSettingsHeader = observer(function WebhookDetailsWorkspaceSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = WORKSPACE_SETTINGS.webhooks;
+ const Icon = WORKSPACE_SETTINGS_ICONS.webhooks;
+
+ return (
+
+
+
+
- {WORKSPACE_SETTINGS_LINKS.map(
- (item, index) =>
- shouldRenderSettingLink(workspaceSlug.toString(), item.key) &&
- allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString()) && (
-
- );
-});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
index f7aa43fdea..3025c521b9 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
@@ -7,8 +7,10 @@ import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { WorkspaceDetails } from "@/components/workspace/settings/workspace-details";
// hooks
import { useWorkspace } from "@/hooks/store/use-workspace";
+// local imports
+import { GeneralWorkspaceSettingsHeader } from "./header";
-function WorkspaceSettingsPage() {
+function GeneralWorkspaceSettingsPage() {
// store hooks
const { currentWorkspace } = useWorkspace();
const { t } = useTranslation();
@@ -18,11 +20,11 @@ function WorkspaceSettingsPage() {
: undefined;
return (
- router.push(`/${workspaceSlug}${item.href}`)}
- >
- {t(item.i18n_label)}
-
- )
- )}
-
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx
new file mode 100644
index 0000000000..1136eb2b87
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+
+export const WebhooksWorkspaceSettingsHeader = observer(function WebhooksWorkspaceSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = WORKSPACE_SETTINGS.webhooks;
+ const Icon = WORKSPACE_SETTINGS_ICONS.webhooks;
+
+ return (
+
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
index 41ef5af4f6..096403de22 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
@@ -4,19 +4,22 @@ import useSWR from "swr";
// plane imports
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
// components
import { EmptyStateCompact } from "@plane/propel/empty-state";
import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
import { PageHead } from "@/components/core/page-title";
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { SettingsHeading } from "@/components/settings/heading";
import { WebhookSettingsLoader } from "@/components/ui/loader/settings/web-hook";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { WebhooksList, CreateWebhookModal } from "@/components/web-hooks";
// hooks
import { useWebhook } from "@/hooks/store/use-webhook";
import { useWorkspace } from "@/hooks/store/use-workspace";
import { useUserPermissions } from "@/hooks/store/user";
+// local imports
import type { Route } from "./+types/page";
+import { WebhooksWorkspaceSettingsHeader } from "./header";
function WebhooksListPage({ params }: Route.ComponentProps) {
// states
@@ -53,7 +56,7 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
if (!webhooks) return
+
({ defaultValues });
- // derived values
- const oldPassword = watch("old_password");
- const password = watch("new_password");
- const confirmPassword = watch("confirm_password");
- const oldPasswordRequired = !currentUser?.is_password_autoset;
- // i18n
- const { t } = useTranslation();
-
- const isNewPasswordSameAsOldPassword = oldPassword !== "" && password !== "" && password === oldPassword;
-
- const handleShowPassword = (key: keyof typeof showPassword) =>
- setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
-
- const handleChangePassword = async (formData: FormValues) => {
- const { old_password, new_password } = formData;
- try {
- const csrfToken = await authService.requestCSRFToken().then((data) => data?.csrf_token);
- if (!csrfToken) throw new Error("csrf token not found");
-
- await changePassword(csrfToken, {
- ...(oldPasswordRequired && { old_password }),
- new_password,
- });
-
- reset(defaultValues);
- setShowPassword(defaultShowPassword);
- setToast({
- type: TOAST_TYPE.SUCCESS,
- title: t("auth.common.password.toast.change_password.success.title"),
- message: t("auth.common.password.toast.change_password.success.message"),
- });
- } catch (error: unknown) {
- let errorInfo = undefined;
- if (error instanceof Error) {
- const err = error as Error & { error_code?: string };
- const code = err.error_code?.toString();
- errorInfo = code ? authErrorHandler(code as EAuthenticationErrorCodes) : undefined;
- }
-
- setToast({
- type: TOAST_TYPE.ERROR,
- title: errorInfo?.title ?? t("auth.common.password.toast.error.title"),
- message:
- typeof errorInfo?.message === "string" ? errorInfo.message : t("auth.common.password.toast.error.message"),
- });
- }
- };
-
- const isButtonDisabled =
- getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID ||
- (oldPasswordRequired && oldPassword.trim() === "") ||
- password.trim() === "" ||
- confirmPassword.trim() === "" ||
- password !== confirmPassword ||
- password === oldPassword;
-
- const passwordSupport = password.length > 0 &&
- getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
- pathname === `/${workspaceSlug}${data.href}/`}
- customHeader={
-
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
index 3607757553..657a78c961 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
@@ -1,21 +1,22 @@
import { observer } from "mobx-react";
+// plane imports
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IProject } from "@plane/types";
-// ui
-// components
import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
import { PageHead } from "@/components/core/page-title";
-// hooks
import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { SettingsHeading } from "@/components/settings/heading";
+// hooks
import { useProject } from "@/hooks/store/use-project";
import { useUserPermissions } from "@/hooks/store/user";
// plane web imports
import { CustomAutomationsRoot } from "@/plane-web/components/automations/root";
+// local imports
import type { Route } from "./+types/page";
+import { AutomationsProjectSettingsHeader } from "./header";
function AutomationSettingsPage({ params }: Route.ComponentProps) {
// router
@@ -51,15 +52,17 @@ function AutomationSettingsPage({ params }: Route.ComponentProps) {
}
return (
-
- setIsCreateTokenModalOpen(false)} />
-
- {tokens.length > 0 ? (
- <>
- {
- setIsCreateTokenModalOpen(true);
- },
- }}
- />
-
-
- );
-}
-
-export default observer(ApiTokensPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
deleted file mode 100644
index 25d737300b..0000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
-import { Outlet } from "react-router";
-// components
-import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
-import { getProfileActivePath } from "@/components/settings/helper";
-import { SettingsMobileNav } from "@/components/settings/mobile";
-// local imports
-import { ProfileSidebar } from "./sidebar";
-
-function ProfileSettingsLayout() {
- // router
- const pathname = usePathname();
-
- return (
- <>
-
- {tokens.map((token) => (
-
-
- ) : (
-
- {
- setIsCreateTokenModalOpen(true);
- },
- }}
- />
-
- {
- setIsCreateTokenModalOpen(true);
- },
- },
- ]}
- align="start"
- rootClassName="py-20"
- />
-
- )}
-
-
-
- );
-}
-
-export default observer(ProfileSettingsLayout);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
deleted file mode 100644
index f3098f675a..0000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { observer } from "mobx-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-// components
-import { PageHead } from "@/components/core/page-title";
-import { PreferencesList } from "@/components/preferences/list";
-import { LanguageTimezone } from "@/components/profile/preferences/language-timezone";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { SettingsHeading } from "@/components/settings/heading";
-// hooks
-import { useUserProfile } from "@/hooks/store/user";
-
-const ProfileAppearancePage = observer(() => {
- const { t } = useTranslation();
- // hooks
- const { data: userProfile } = useUserProfile();
-
- if (!userProfile) return <>;
- return (
- <>
-
-
-
-
-
-
-
-
-
- );
-});
-
-export default ProfileAppearancePage;
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
deleted file mode 100644
index cd03a7ca01..0000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import { Controller, useForm } from "react-hook-form";
-import { Eye, EyeOff } from "lucide-react";
-// plane imports
-import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Input, PasswordStrengthIndicator } from "@plane/ui";
-import { getPasswordStrength } from "@plane/utils";
-// components
-import { PageHead } from "@/components/core/page-title";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-// helpers
-import { authErrorHandler } from "@/helpers/authentication.helper";
-import type { EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
-// hooks
-import { useUser } from "@/hooks/store/user";
-// services
-import { AuthService } from "@/services/auth.service";
-
-export interface FormValues {
- old_password: string;
- new_password: string;
- confirm_password: string;
-}
-
-const defaultValues: FormValues = {
- old_password: "",
- new_password: "",
- confirm_password: "",
-};
-
-const authService = new AuthService();
-
-const defaultShowPassword = {
- oldPassword: false,
- password: false,
- confirmPassword: false,
-};
-
-function SecurityPage() {
- // store
- const { data: currentUser, changePassword } = useUser();
- // states
- const [showPassword, setShowPassword] = useState(defaultShowPassword);
- const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
- const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
-
- // use form
- const {
- control,
- handleSubmit,
- watch,
- formState: { errors, isSubmitting },
- reset,
- } = useForm
-
-
-
-
-
- }
- actionIcons={ProjectActionIcons}
- shouldRender
- />
- );
-});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx
new file mode 100644
index 0000000000..e736d892bd
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const AutomationsProjectSettingsHeader = observer(function AutomationsProjectSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = PROJECT_SETTINGS.automations;
+ const Icon = PROJECT_SETTINGS_ICONS.automations;
+
+ return (
+
- {!currentUser?.avatar_url || currentUser?.avatar_url === "" ? (
-
-
-
- ) : (
-
- })
-
- )}
-
-
- {currentUser?.display_name}
- {currentUser?.email}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/apps/web/app/(all)/[workspaceSlug]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/layout.tsx
index 0e489644d4..854e6bbaf2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/layout.tsx
@@ -2,14 +2,19 @@ import { Outlet } from "react-router";
import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
import { WorkspaceContentWrapper } from "@/plane-web/components/workspace/content-wrapper";
import { AppRailVisibilityProvider } from "@/plane-web/hooks/app-rail";
+import { GlobalModals } from "@/plane-web/components/common/modal/global";
import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
+import type { Route } from "./+types/layout";
+
+export default function WorkspaceLayout(props: Route.ComponentProps) {
+ const { workspaceSlug } = props.params;
-export default function WorkspaceLayout() {
return (
+
diff --git a/apps/web/app/(all)/profile/activity/page.tsx b/apps/web/app/(all)/profile/activity/page.tsx
deleted file mode 100644
index e3956258ff..0000000000
--- a/apps/web/app/(all)/profile/activity/page.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-// assets
-import darkActivityAsset from "@/app/assets/empty-state/profile/activity-dark.webp?url";
-import lightActivityAsset from "@/app/assets/empty-state/profile/activity-light.webp?url";
-// components
-import { PageHead } from "@/components/core/page-title";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
-import { ProfileActivityListPage } from "@/components/profile/activity/profile-activity-list";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-
-const PER_PAGE = 100;
-
-function ProfileActivityPage() {
- // states
- const [pageCount, setPageCount] = useState(1);
- const [totalPages, setTotalPages] = useState(0);
- const [resultsCount, setResultsCount] = useState(0);
- const [isEmpty, setIsEmpty] = useState(false);
- // theme hook
- const { resolvedTheme } = useTheme();
- // plane hooks
- const { t } = useTranslation();
- // derived values
- const resolvedPath = resolvedTheme === "light" ? lightActivityAsset : darkActivityAsset;
-
- const updateTotalPages = (count: number) => setTotalPages(count);
-
- const updateResultsCount = (count: number) => setResultsCount(count);
-
- const updateEmptyState = (isEmpty: boolean) => setIsEmpty(isEmpty);
-
- const handleLoadMore = () => setPageCount((prev) => prev + 1);
-
- const activityPages: React.ReactNode[] = [];
- for (let i = 0; i < pageCount; i++)
- activityPages.push(
-
-
-
- );
-}
-
-export default observer(ProfileActivityPage);
diff --git a/apps/web/app/(all)/profile/appearance/page.tsx b/apps/web/app/(all)/profile/appearance/page.tsx
deleted file mode 100644
index d0d05588d8..0000000000
--- a/apps/web/app/(all)/profile/appearance/page.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
-// plane imports
-import type { I_THEME_OPTION } from "@plane/constants";
-import { THEME_OPTIONS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { setPromiseToast } from "@plane/propel/toast";
-import { applyCustomTheme } from "@plane/utils";
-// components
-import { LogoSpinner } from "@/components/common/logo-spinner";
-import { PageHead } from "@/components/core/page-title";
-import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
-import { ThemeSwitch } from "@/components/core/theme/theme-switch";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-// hooks
-import { useUserProfile } from "@/hooks/store/user";
-
-function ProfileAppearancePage() {
- // store hooks
- const { data: userProfile, updateUserTheme } = useUserProfile();
- // theme
- const { setTheme } = useTheme();
- // translation
- const { t } = useTranslation();
- // derived values
- const currentTheme = useMemo(() => {
- const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
- return userThemeOption || null;
- }, [userProfile?.theme?.theme]);
-
- const handleThemeChange = useCallback(
- async (themeOption: I_THEME_OPTION) => {
- setTheme(themeOption.value);
-
- // If switching to custom theme and user has saved custom colors, apply them immediately
- if (
- themeOption.value === "custom" &&
- userProfile?.theme?.primary &&
- userProfile?.theme?.background &&
- userProfile?.theme?.darkPalette !== undefined
- ) {
- applyCustomTheme(
- userProfile.theme.primary,
- userProfile.theme.background,
- userProfile.theme.darkPalette ? "dark" : "light"
- );
- }
-
- const updateCurrentUserThemePromise = updateUserTheme({ theme: themeOption.value });
- setPromiseToast(updateCurrentUserThemePromise, {
- loading: "Updating theme...",
- success: {
- title: "Theme updated",
- message: () => "Reloading to apply changes...",
- },
- error: {
- title: "Error!",
- message: () => "Failed to update theme. Please try again.",
- },
- });
- // Wait for the promise to resolve, then reload after showing toast
- try {
- await updateCurrentUserThemePromise;
- window.location.reload();
- } catch (error) {
- // Error toast already shown by setPromiseToast
- console.error("Error updating theme:", error);
- }
- },
- [setTheme, updateUserTheme, userProfile]
- );
-
- return (
- <>
-
-
- ) : (
-
-
-
- );
-}
diff --git a/apps/web/app/(all)/profile/page.tsx b/apps/web/app/(all)/profile/page.tsx
deleted file mode 100644
index 9b6f8f083c..0000000000
--- a/apps/web/app/(all)/profile/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { observer } from "mobx-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-// components
-import { LogoSpinner } from "@/components/common/logo-spinner";
-import { PageHead } from "@/components/core/page-title";
-import { ProfileForm } from "@/components/profile/form";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-// hooks
-import { useUser } from "@/hooks/store/user";
-
-function ProfileSettingsPage() {
- const { t } = useTranslation();
- // store hooks
- const { data: currentUser, userProfile } = useUser();
-
- if (!currentUser)
- return (
-
-
-
- );
-}
-
-export default observer(ProfileSettingsPage);
diff --git a/apps/web/app/(all)/profile/sidebar.tsx b/apps/web/app/(all)/profile/sidebar.tsx
deleted file mode 100644
index c4ded1df24..0000000000
--- a/apps/web/app/(all)/profile/sidebar.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-// icons
-import { LogOut, MoveLeft, Activity, Bell, CircleUser, KeyRound, Settings2, CirclePlus, Mails } from "lucide-react";
-// plane imports
-import { PROFILE_ACTION_LINKS } from "@plane/constants";
-import { useOutsideClickDetector } from "@plane/hooks";
-import { useTranslation } from "@plane/i18n";
-import { ChevronLeftIcon } from "@plane/propel/icons";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Tooltip } from "@plane/propel/tooltip";
-import { cn, getFileURL } from "@plane/utils";
-// components
-import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
-// hooks
-import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useUser, useUserSettings } from "@/hooks/store/user";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-
-const WORKSPACE_ACTION_LINKS = [
- {
- key: "create_workspace",
- Icon: CirclePlus,
- i18n_label: "create_workspace",
- href: "/create-workspace",
- },
- {
- key: "invitations",
- Icon: Mails,
- i18n_label: "workspace_invites",
- href: "/invitations",
- },
-];
-
-function ProjectActionIcons({ type, size, className = "" }: { type: string; size?: number; className?: string }) {
- const icons = {
- profile: CircleUser,
- security: KeyRound,
- activity: Activity,
- preferences: Settings2,
- notifications: Bell,
- "api-tokens": KeyRound,
- };
-
- if (type === undefined) return null;
- const Icon = icons[type as keyof typeof icons];
- if (!Icon) return null;
- return (null);
-
- useOutsideClickDetector(ref, () => {
- if (sidebarCollapsed === false) {
- if (window.innerWidth < 768) {
- toggleSidebar();
- }
- }
- });
-
- useEffect(() => {
- const handleResize = () => {
- if (window.innerWidth <= 768) {
- toggleSidebar(true);
- }
- };
- handleResize();
- window.addEventListener("resize", handleResize);
- return () => {
- window.removeEventListener("resize", handleResize);
- };
- }, [toggleSidebar]);
-
- const handleItemClick = () => {
- if (window.innerWidth < 768) {
- toggleSidebar();
- }
- };
-
- const handleSignOut = async () => {
- setIsSigningOut(true);
- await signOut()
- .catch(() =>
- setToast({
- type: TOAST_TYPE.ERROR,
- title: t("sign_out.toast.error.title"),
- message: t("sign_out.toast.error.message"),
- })
- )
- .finally(() => setIsSigningOut(false));
- };
-
- return (
-
- {
+ void handleThemeChange(themeOption);
+ }}
+ />
}
/>
{userProfile.theme?.theme === "custom" &&
-
-
-
+ (null);
- const [archiveProject, setArchiveProject] = useState(false);
// router
const { workspaceSlug, projectId } = params;
// store hooks
@@ -31,25 +26,8 @@ function ProjectSettingsPage({ params }: Route.ComponentProps) {
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - General Settings` : undefined;
return (
-
+ setArchiveProject(false)}
- archive
- />
- setSelectedProject(null)}
- />
-
- )}
-
);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx
new file mode 100644
index 0000000000..f69d22922b
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const StatesProjectSettingsHeader = observer(function StatesProjectSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = PROJECT_SETTINGS.states;
+ const Icon = PROJECT_SETTINGS_ICONS.states;
+
+ return (
+
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
index 31d8ccbc1a..ff3309d458 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
@@ -5,12 +5,14 @@ import { useTranslation } from "@plane/i18n";
import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
import { PageHead } from "@/components/core/page-title";
import { ProjectStateRoot } from "@/components/project-states";
-// hook
import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { SettingsHeading } from "@/components/settings/heading";
+// hook
import { useProject } from "@/hooks/store/use-project";
import { useUserPermissions } from "@/hooks/store/user";
+// local imports
import type { Route } from "./+types/page";
+import { StatesProjectSettingsHeader } from "./header";
function StatesSettingsPage({ params }: Route.ComponentProps) {
const { workspaceSlug, projectId } = params;
@@ -33,14 +35,16 @@ function StatesSettingsPage({ params }: Route.ComponentProps) {
}
return (
- {projectId &&
-
-
+
+
+
+ }
+ />
+ );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
index 3bdf8e9991..21141c14ca 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
@@ -5,17 +5,19 @@ import { useTranslation } from "@plane/i18n";
// components
import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
import { PageHead } from "@/components/core/page-title";
-// hooks
import { ProjectMemberList } from "@/components/project/member-list";
import { ProjectSettingsMemberDefaults } from "@/components/project/project-settings-member-defaults";
import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
import { SettingsHeading } from "@/components/settings/heading";
+// hooks
import { useProject } from "@/hooks/store/use-project";
import { useUserPermissions } from "@/hooks/store/user";
// plane web imports
import { ProjectTeamspaceList } from "@/plane-web/components/projects/teamspaces/teamspace-list";
import { getProjectSettingsPageLabelI18nKey } from "@/plane-web/helpers/project-settings";
+// local imports
import type { Route } from "./+types/page";
+import { MembersProjectSettingsHeader } from "./header";
function MembersSettingsPage({ params }: Route.ComponentProps) {
// router
@@ -39,7 +41,7 @@ function MembersSettingsPage({ params }: Route.ComponentProps) {
}
return (
-
+
);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx
new file mode 100644
index 0000000000..c9a2348fb0
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/header.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+// plane imports
+import { PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SettingsPageHeader } from "@/components/settings/page-header";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+
+export const MembersProjectSettingsHeader = observer(function MembersProjectSettingsHeader() {
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const settingsDetails = PROJECT_SETTINGS.members;
+ const Icon = PROJECT_SETTINGS_ICONS.members;
+
+ return (
+
+
+
+
+
-
+
{currentProjectDetails ? (
setArchiveProject(true)}
- />
- setSelectedProject(currentProjectDetails.id ?? null)}
- />
-
- )}
+ {isAdmin &&
+
-
-
- )}
-
-
- {userProfile?.theme?.theme === "custom" &&
-
- {t("theme")}
-{t("select_or_customize_your_interface_color_scheme")}
-
-
-
-
- )}
-
- );
-}
-
-export default observer(ProfileAppearancePage);
diff --git a/apps/web/app/(all)/profile/notifications/page.tsx b/apps/web/app/(all)/profile/notifications/page.tsx
deleted file mode 100644
index 725117e5c2..0000000000
--- a/apps/web/app/(all)/profile/notifications/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import useSWR from "swr";
-// components
-import { useTranslation } from "@plane/i18n";
-import { PageHead } from "@/components/core/page-title";
-import { EmailNotificationForm } from "@/components/profile/notification/email-notification-form";
-import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
-import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
-import { EmailSettingsLoader } from "@/components/ui/loader/settings/email";
-// services
-import { UserService } from "@/services/user.service";
-
-const userService = new UserService();
-
-export default function ProfileNotificationPage() {
- const { t } = useTranslation();
- // fetching user email notification settings
- const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
- userService.currentUserEmailNotificationSettings()
- );
-
- if (!data || isLoading) {
- return
-
- );
-
- return (
- <>
-
-
- );
-});
diff --git a/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
new file mode 100644
index 0000000000..6b481d8189
--- /dev/null
+++ b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
@@ -0,0 +1,55 @@
+import { observer } from "mobx-react";
+// plane imports
+import { PROFILE_SETTINGS_TABS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TProfileSettingsTabs } from "@plane/types";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { ProfileSettingsContent } from "@/components/settings/profile/content";
+import { ProfileSettingsSidebarRoot } from "@/components/settings/profile/sidebar";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local imports
+import type { Route } from "../+types/layout";
+
+function ProfileSettingsPage(props: Route.ComponentProps) {
+ const { profileTabId } = props.params;
+ // router
+ const router = useAppRouter();
+ // store hooks
+ const { data: currentUser } = useUser();
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const isAValidTab = PROFILE_SETTINGS_TABS.includes(profileTabId as TProfileSettingsTabs);
+
+ if (!currentUser || !isAValidTab)
+ return (
+
-
-
-
-
-
-
- {t("profile_settings")}
- )} -
- {!sidebarCollapsed && (
-
- {t("your_account")}
- )} -
- {PROFILE_ACTION_LINKS.map((link) => {
- if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
-
- return (
-
-
-
-
-
-
- );
- })}
-
-
-
- {t(link.i18n_label)}
} -
- {!sidebarCollapsed && (
-
- {t("workspaces")}
- )} - {workspacesList && workspacesList.length > 0 && ( -
- {workspacesList.map((workspace) => (
-
-
-
- {workspace?.logo_url && workspace.logo_url !== "" ? (
- })
- ) : (
- (workspace?.name?.charAt(0) ?? "...")
- )}
-
- {!sidebarCollapsed &&
- )}
- {workspace.name}
} - - - ))} -
- {WORKSPACE_ACTION_LINKS.map((link) => (
-
-
-
-
- ))}
-
-
- {
-
-
-
-
-
-
-
-
+
+ );
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default observer(ProfileSettingsPage);
diff --git a/apps/web/app/(all)/profile/layout.tsx b/apps/web/app/(all)/settings/profile/layout.tsx
similarity index 56%
rename from apps/web/app/(all)/profile/layout.tsx
rename to apps/web/app/(all)/settings/profile/layout.tsx
index f5aebbfbbb..38311cb08d 100644
--- a/apps/web/app/(all)/profile/layout.tsx
+++ b/apps/web/app/(all)/settings/profile/layout.tsx
@@ -1,20 +1,17 @@
-// components
import { Outlet } from "react-router";
-// wrappers
+// components
import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider";
+// lib
import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
-// layout
-import { ProfileLayoutSidebar } from "./sidebar";
export default function ProfileSettingsLayout() {
return (
<>
+ router.push(`/settings/profile/${tab}`)}
+ />
+
+
-
-
- {
- void handleThemeChange(themeOption);
- }}
- />
-
+
+
diff --git a/apps/web/ce/components/preferences/config.ts b/apps/web/ce/components/preferences/config.ts
deleted file mode 100644
index 1a67ab7d34..0000000000
--- a/apps/web/ce/components/preferences/config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { StartOfWeekPreference } from "@/components/profile/start-of-week-preference";
-import { ThemeSwitcher } from "./theme-switcher";
-
-export const PREFERENCE_COMPONENTS = {
- theme: ThemeSwitcher,
- start_of_week: StartOfWeekPreference,
-};
diff --git a/apps/web/ce/components/preferences/theme-switcher.tsx b/apps/web/ce/components/preferences/theme-switcher.tsx
index d6e6dc252c..b2c2008b1a 100644
--- a/apps/web/ce/components/preferences/theme-switcher.tsx
+++ b/apps/web/ce/components/preferences/theme-switcher.tsx
@@ -10,8 +10,7 @@ import { applyCustomTheme } from "@plane/utils";
// components
import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
import { ThemeSwitch } from "@/components/core/theme/theme-switch";
-// helpers
-import { PreferencesSection } from "@/components/preferences/section";
+import { SettingsControlItem } from "@/components/settings/control-item";
// hooks
import { useUserProfile } from "@/hooks/store/user";
@@ -79,18 +78,16 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
return (
<>
-
+
+
diff --git a/apps/web/app/routes/core.ts b/apps/web/app/routes/core.ts
index ccb9d78d37..daa83c95f8 100644
--- a/apps/web/app/routes/core.ts
+++ b/apps/web/app/routes/core.ts
@@ -278,34 +278,6 @@ export const coreRoutes: RouteConfigEntry[] = [
),
]),
- // --------------------------------------------------------------------
- // ACCOUNT SETTINGS
- // --------------------------------------------------------------------
-
- layout("./(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx", [
- route(":workspaceSlug/settings/account", "./(all)/[workspaceSlug]/(settings)/settings/account/page.tsx"),
- route(
- ":workspaceSlug/settings/account/activity",
- "./(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx"
- ),
- route(
- ":workspaceSlug/settings/account/preferences",
- "./(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx"
- ),
- route(
- ":workspaceSlug/settings/account/notifications",
- "./(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx"
- ),
- route(
- ":workspaceSlug/settings/account/security",
- "./(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx"
- ),
- route(
- ":workspaceSlug/settings/account/api-tokens",
- "./(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx"
- ),
- ]),
-
// --------------------------------------------------------------------
// PROJECT SETTINGS
// --------------------------------------------------------------------
@@ -326,8 +298,24 @@ export const coreRoutes: RouteConfigEntry[] = [
),
// Project Features
route(
- ":workspaceSlug/settings/projects/:projectId/features",
- "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx"
+ ":workspaceSlug/settings/projects/:projectId/features/cycles",
+ "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx"
+ ),
+ route(
+ ":workspaceSlug/settings/projects/:projectId/features/modules",
+ "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/page.tsx"
+ ),
+ route(
+ ":workspaceSlug/settings/projects/:projectId/features/views",
+ "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/page.tsx"
+ ),
+ route(
+ ":workspaceSlug/settings/projects/:projectId/features/pages",
+ "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/page.tsx"
+ ),
+ route(
+ ":workspaceSlug/settings/projects/:projectId/features/intake",
+ "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx"
),
// Project States
route(
@@ -363,12 +351,8 @@ export const coreRoutes: RouteConfigEntry[] = [
// PROFILE SETTINGS
// --------------------------------------------------------------------
- layout("./(all)/profile/layout.tsx", [
- route("profile", "./(all)/profile/page.tsx"),
- route("profile/activity", "./(all)/profile/activity/page.tsx"),
- route("profile/appearance", "./(all)/profile/appearance/page.tsx"),
- route("profile/notifications", "./(all)/profile/notifications/page.tsx"),
- route("profile/security", "./(all)/profile/security/page.tsx"),
+ layout("./(all)/settings/profile/layout.tsx", [
+ route("settings/profile/:profileTabId", "./(all)/settings/profile/[profileTabId]/page.tsx"),
]),
]),
@@ -389,7 +373,7 @@ export const coreRoutes: RouteConfigEntry[] = [
route(":workspaceSlug/analytics", "routes/redirects/core/analytics.tsx"),
// API tokens redirect: /:workspaceSlug/settings/api-tokens
- // → /:workspaceSlug/settings/account/api-tokens
+ // → /settings/profile/api-tokens
route(":workspaceSlug/settings/api-tokens", "routes/redirects/core/api-tokens.tsx"),
// Inbox redirect: /:workspaceSlug/projects/:projectId/inbox
@@ -406,4 +390,10 @@ export const coreRoutes: RouteConfigEntry[] = [
// Register redirect
route("register", "routes/redirects/core/register.tsx"),
+
+ // Profile settings redirects
+ route("profile/*", "routes/redirects/core/profile-settings.tsx"),
+
+ // Account settings redirects
+ route(":workspaceSlug/settings/account/*", "routes/redirects/core/workspace-account-settings.tsx"),
] satisfies RouteConfig;
diff --git a/apps/web/app/routes/redirects/core/api-tokens.tsx b/apps/web/app/routes/redirects/core/api-tokens.tsx
index 68007aa416..d97413084b 100644
--- a/apps/web/app/routes/redirects/core/api-tokens.tsx
+++ b/apps/web/app/routes/redirects/core/api-tokens.tsx
@@ -1,9 +1,7 @@
import { redirect } from "react-router";
-import type { Route } from "./+types/api-tokens";
-export const clientLoader = ({ params }: Route.ClientLoaderArgs) => {
- const { workspaceSlug } = params;
- throw redirect(`/${workspaceSlug}/settings/account/api-tokens/`);
+export const clientLoader = () => {
+ throw redirect(`/settings/profile/api-tokens/`);
};
export default function ApiTokens() {
diff --git a/apps/web/app/routes/redirects/core/index.ts b/apps/web/app/routes/redirects/core/index.ts
index efd3ae40f8..480386bf62 100644
--- a/apps/web/app/routes/redirects/core/index.ts
+++ b/apps/web/app/routes/redirects/core/index.ts
@@ -14,7 +14,7 @@ export const coreRedirectRoutes: RouteConfigEntry[] = [
route(":workspaceSlug/analytics", "routes/redirects/core/analytics.tsx"),
// API tokens redirect: /:workspaceSlug/settings/api-tokens
- // → /:workspaceSlug/settings/account/api-tokens
+ // → /settings/profile/api-tokens
route(":workspaceSlug/settings/api-tokens", "routes/redirects/core/api-tokens.tsx"),
// Inbox redirect: /:workspaceSlug/projects/:projectId/inbox
diff --git a/apps/web/app/routes/redirects/core/profile-settings.tsx b/apps/web/app/routes/redirects/core/profile-settings.tsx
new file mode 100644
index 0000000000..7e8a0c15a2
--- /dev/null
+++ b/apps/web/app/routes/redirects/core/profile-settings.tsx
@@ -0,0 +1,12 @@
+import { redirect } from "react-router";
+import type { Route } from "./+types/profile-settings";
+
+export const clientLoader = ({ params, request }: Route.ClientLoaderArgs) => {
+ const searchParams = new URL(request.url).searchParams;
+ const splat = params["*"] || "";
+ throw redirect(`/settings/profile/${splat || "general"}?${searchParams.toString()}`);
+};
+
+export default function ProfileSettings() {
+ return null;
+}
diff --git a/apps/web/app/routes/redirects/core/workspace-account-settings.tsx b/apps/web/app/routes/redirects/core/workspace-account-settings.tsx
new file mode 100644
index 0000000000..10d375e9a1
--- /dev/null
+++ b/apps/web/app/routes/redirects/core/workspace-account-settings.tsx
@@ -0,0 +1,12 @@
+import { redirect } from "react-router";
+import type { Route } from "./+types/workspace-account-settings";
+
+export const clientLoader = ({ params, request }: Route.ClientLoaderArgs) => {
+ const searchParams = new URL(request.url).searchParams;
+ const splat = params["*"] || "";
+ throw redirect(`/settings/profile/${splat || "general"}?${searchParams.toString()}`);
+};
+
+export default function WorkspaceAccountSettings() {
+ return null;
+}
diff --git a/apps/web/ce/components/common/modal/global.tsx b/apps/web/ce/components/common/modal/global.tsx
new file mode 100644
index 0000000000..76b859c3e8
--- /dev/null
+++ b/apps/web/ce/components/common/modal/global.tsx
@@ -0,0 +1,26 @@
+import { lazy, Suspense } from "react";
+import { observer } from "mobx-react";
+
+const ProfileSettingsModal = lazy(() =>
+ import("@/components/settings/profile/modal").then((module) => ({
+ default: module.ProfileSettingsModal,
+ }))
+);
+
+type TGlobalModalsProps = {
+ workspaceSlug: string;
+};
+
+/**
+ * GlobalModals component manages all workspace-level modals across Plane applications.
+ *
+ * This includes:
+ * - Profile settings modal
+ */
+export const GlobalModals = observer(function GlobalModals(_props: TGlobalModalsProps) {
+ return (
+
+
+ );
+});
diff --git a/apps/web/ce/components/navigations/top-navigation-root.tsx b/apps/web/ce/components/navigations/top-navigation-root.tsx
index 9035e3147e..1ee0d9e192 100644
--- a/apps/web/ce/components/navigations/top-navigation-root.tsx
+++ b/apps/web/ce/components/navigations/top-navigation-root.tsx
@@ -74,7 +74,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
-
- ;
-}[] = [
- PROJECT_SETTINGS["general"],
- PROJECT_SETTINGS["members"],
- PROJECT_SETTINGS["features"],
- PROJECT_SETTINGS["states"],
- PROJECT_SETTINGS["labels"],
- PROJECT_SETTINGS["estimates"],
- PROJECT_SETTINGS["automations"],
-];
diff --git a/apps/web/core/components/appearance/index.ts b/apps/web/core/components/appearance/index.ts
new file mode 100644
index 0000000000..1d07ba69ea
--- /dev/null
+++ b/apps/web/core/components/appearance/index.ts
@@ -0,0 +1 @@
+export * from "./theme-switcher";
diff --git a/apps/web/core/components/appearance/theme-switcher.tsx b/apps/web/core/components/appearance/theme-switcher.tsx
new file mode 100644
index 0000000000..993a06df58
--- /dev/null
+++ b/apps/web/core/components/appearance/theme-switcher.tsx
@@ -0,0 +1,70 @@
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+// plane imports
+import type { I_THEME_OPTION } from "@plane/constants";
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { setPromiseToast } from "@plane/propel/toast";
+// components
+import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
+import { ThemeSwitch } from "@/components/core/theme/theme-switch";
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
+ option: {
+ id: string;
+ title: string;
+ description: string;
+ };
+}) {
+ // store hooks
+ const { data: userProfile, updateUserTheme } = useUserProfile();
+ // theme
+ const { setTheme } = useTheme();
+ // translation
+ const { t } = useTranslation();
+ // derived values
+ const currentTheme = useMemo(() => {
+ const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
+ return userThemeOption || null;
+ }, [userProfile?.theme?.theme]);
+
+ const handleThemeChange = useCallback(
+ (themeOption: I_THEME_OPTION) => {
+ try {
+ setTheme(themeOption.value);
+ const updatePromise = updateUserTheme({ theme: themeOption.value });
+ setPromiseToast(updatePromise, {
+ loading: "Updating theme...",
+ success: {
+ title: "Success!",
+ message: () => "Theme updated successfully!",
+ },
+ error: {
+ title: "Error!",
+ message: () => "Failed to update the theme",
+ },
+ });
+ } catch (error) {
+ console.error("Error updating theme:", error);
+ }
+ },
+ [updateUserTheme]
+ );
+
+ if (!userProfile) return null;
+
+ return (
+ <>
+
-
-
-
+
-
-
-
- Community
-
- Unlimited projects, issues, cycles, modules, pages, and storage
-
-
+
- All plans
+
);
});
diff --git a/apps/web/ce/components/workspace/delete-workspace-section.tsx b/apps/web/ce/components/workspace/delete-workspace-section.tsx
index 8fb5999291..cc4ab51ecc 100644
--- a/apps/web/ce/components/workspace/delete-workspace-section.tsx
+++ b/apps/web/ce/components/workspace/delete-workspace-section.tsx
@@ -1,15 +1,14 @@
import { useState } from "react";
import { observer } from "mobx-react";
-// types
+// plane imports
import { WORKSPACE_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
-import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
import type { IWorkspace } from "@plane/types";
-// ui
-import { Collapsible } from "@plane/ui";
-import { DeleteWorkspaceModal } from "./delete-workspace-modal";
// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// local imports
+import { DeleteWorkspaceModal } from "./delete-workspace-modal";
type TDeleteWorkspace = {
workspace: IWorkspace | null;
@@ -18,8 +17,8 @@ type TDeleteWorkspace = {
export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(props: TDeleteWorkspace) {
const { workspace } = props;
// states
- const [isOpen, setIsOpen] = useState(false);
const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+ // translation
const { t } = useTranslation();
return (
@@ -29,40 +28,19 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
isOpen={deleteWorkspaceModal}
onClose={() => setDeleteWorkspaceModal(false)}
/>
- All plans
+
-
+ {t("delete")}
+
+ }
+ />
);
});
diff --git a/apps/web/ce/constants/project/settings/index.ts b/apps/web/ce/constants/project/settings/index.ts
index a6a842e7be..0e849261ac 100644
--- a/apps/web/ce/constants/project/settings/index.ts
+++ b/apps/web/ce/constants/project/settings/index.ts
@@ -1,2 +1 @@
export * from "./features";
-export * from "./tabs";
diff --git a/apps/web/ce/constants/project/settings/tabs.ts b/apps/web/ce/constants/project/settings/tabs.ts
deleted file mode 100644
index f78b51a74f..0000000000
--- a/apps/web/ce/constants/project/settings/tabs.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-// icons
-import { EUserPermissions } from "@plane/constants";
-import { SettingIcon } from "@/components/icons/attachment";
-// types
-import type { Props } from "@/components/icons/types";
-// constants
-
-export const PROJECT_SETTINGS = {
- general: {
- key: "general",
- i18n_label: "common.general",
- href: ``,
- access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
- highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
- Icon: SettingIcon,
- },
- members: {
- key: "members",
- i18n_label: "common.members",
- href: `/members`,
- access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
- highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/members/`,
- Icon: SettingIcon,
- },
- features: {
- key: "features",
- i18n_label: "common.features",
- href: `/features`,
- access: [EUserPermissions.ADMIN],
- highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/`,
- Icon: SettingIcon,
- },
- states: {
- key: "states",
- i18n_label: "common.states",
- href: `/states`,
- access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
- highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/states/`,
- Icon: SettingIcon,
- },
- labels: {
- key: "labels",
- i18n_label: "common.labels",
- href: `/labels`,
- access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
- highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/labels/`,
- Icon: SettingIcon,
- },
- estimates: {
- key: "estimates",
- i18n_label: "common.estimates",
- href: `/estimates`,
- access: [EUserPermissions.ADMIN],
- highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/estimates/`,
- Icon: SettingIcon,
- },
- automations: {
- key: "automations",
- i18n_label: "project_settings.automations.label",
- href: `/automations`,
- access: [EUserPermissions.ADMIN],
- highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/automations/`,
- Icon: SettingIcon,
- },
-};
-
-export const PROJECT_SETTINGS_LINKS: {
- key: string;
- i18n_label: string;
- href: string;
- access: EUserPermissions[];
- highlight: (pathname: string, baseUrl: string) => boolean;
- Icon: React.FC
- setIsOpen(!isOpen)}
- className="w-full"
- buttonClassName="flex w-full items-center justify-between py-4"
- title={
- <>
-
- {t("workspace_settings.settings.general.delete_workspace")}
-
- {isOpen ? setDeleteWorkspaceModal(true)}
+ data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
>
-
-
-
-
- {t("workspace_settings.settings.general.delete_workspace_description")}
-
-
-
-
-
-
-
-
-
-
-
-
+ {t("project_settings.automations.auto-archive.title")}
-- {t("project_settings.automations.auto-archive.description")} -
-
+
+
-
{currentProjectDetails ? (
autoArchiveStatus && (
-
+
-
+
+
)}
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index 6b9e7a8d42..7ceaba3b02 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -1,18 +1,15 @@
import { useMemo, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
-// icons
import { ArchiveX } from "lucide-react";
-// types
+// plane imports
import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel, EIconSize } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { StateGroupIcon, StatePropertyIcon } from "@plane/propel/icons";
import type { IProject } from "@plane/types";
-// ui
import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui";
-// component
import { SelectMonthModal } from "@/components/automation";
-// constants
+import { SettingsControlItem } from "@/components/settings/control-item";
// hooks
import { useProject } from "@/hooks/store/use-project";
import { useProjectState } from "@/hooks/store/use-project-state";
@@ -82,36 +79,34 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
handleClose={() => setmonthModal(false)}
handleChange={handleChange}
/>
-
{t("project_settings.automations.auto-archive.duration")}
@@ -90,9 +87,7 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
label={`${currentProjectDetails?.archive_in} ${
currentProjectDetails?.archive_in === 1 ? "month" : "months"
}`}
- onChange={(val: number) => {
- handleChange({ archive_in: val });
- }}
+ onChange={(val: number) => void handleChange({ archive_in: val })}
input
disabled={!isAdmin}
>
@@ -117,7 +112,7 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
)
) : (
-
-
-
-
-
-
-
+ {t("project_settings.automations.auto-close.title")}
-- {t("project_settings.automations.auto-close.description")} -
-
+
+ {
- if (currentProjectDetails?.close_in === 0) {
- await handleChange({ close_in: 1, default_state: defaultState });
- } else {
- await handleChange({ close_in: 0, default_state: null });
- }
- }}
- size="sm"
- disabled={!isAdmin}
+ {
+ if (currentProjectDetails?.close_in === 0) {
+ void handleChange({ close_in: 1, default_state: defaultState });
+ } else {
+ void handleChange({ close_in: 0, default_state: null });
+ }
+ }}
+ size="sm"
+ disabled={!isAdmin}
+ />
+ }
/>
{currentProjectDetails ? (
autoCloseStatus && (
-
+
-
+
)
) : (
-
+
)}
diff --git a/apps/web/core/components/core/theme/color-inputs.tsx b/apps/web/core/components/core/theme/color-inputs.tsx
new file mode 100644
index 0000000000..3459a203a0
--- /dev/null
+++ b/apps/web/core/components/core/theme/color-inputs.tsx
@@ -0,0 +1,92 @@
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import type { IUserTheme } from "@plane/types";
+import { InputColorPicker } from "@plane/ui";
+
+type Props = {
+ control: Control;
+};
+
+export const CustomThemeColorInputs = observer(function CustomThemeColorInputs(props: Props) {
+ const { control } = props;
+
+ const handleValueChange = (val: string | undefined, onChange: (...args: unknown[]) => void) => {
+ let hex = val;
+ // prepend a hashtag if it doesn't exist
+ if (val && val[0] !== "#") hex = `#${val}`;
+ onChange(hex);
+ };
+
+ return (
+ ({
- defaultValues: getSavedTheme(),
+ defaultValues: savedTheme,
});
const handleUpdateTheme = async (formData: IUserTheme) => {
- if (!formData.primary || !formData.background || formData.darkPalette === undefined) return;
+ if (!formData.primary || !formData.background) return;
try {
setIsLoadingPalette(true);
@@ -90,109 +92,29 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
}
};
- const handleValueChange = (val: string | undefined, onChange: (...args: unknown[]) => void) => {
- let hex = val;
- // prepend a hashtag if it doesn't exist
- if (val && val[0] !== "#") hex = `#${val}`;
- onChange(hex);
- };
-
return (
-
);
diff --git a/apps/web/core/components/core/theme/download-config-button.tsx b/apps/web/core/components/core/theme/download-config-button.tsx
new file mode 100644
index 0000000000..0a80a2aa2a
--- /dev/null
+++ b/apps/web/core/components/core/theme/download-config-button.tsx
@@ -0,0 +1,59 @@
+import { observer } from "mobx-react";
+import type { UseFormGetValues } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+ getValues: UseFormGetValues;
+};
+
+export const CustomThemeDownloadConfigButton = observer(function CustomThemeDownloadConfigButton(props: Props) {
+ const { getValues } = props;
+ // translation
+ const { t } = useTranslation();
+
+ const handleDownloadConfig = () => {
+ try {
+ const currentValues = getValues();
+ const config = {
+ version: "1.0",
+ themeName: "Custom Theme",
+ primary: currentValues.primary,
+ background: currentValues.background,
+ darkPalette: currentValues.darkPalette,
+ };
+
+ const blob = new Blob([JSON.stringify(config, null, 2)], { type: "application/json" });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = `plane-theme-${Date.now()}.json`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+
+ setToast({
+ type: TOAST_TYPE.SUCCESS,
+ title: t("success"),
+ message: "Theme configuration downloaded successfully.",
+ });
+ } catch (error) {
+ console.error("Failed to download config:", error);
+ setToast({
+ type: TOAST_TYPE.ERROR,
+ title: t("error"),
+ message: "Failed to download theme configuration.",
+ });
+ }
+ };
+
+ return (
+
+ );
+});
diff --git a/apps/web/core/components/core/theme/config-handler.tsx b/apps/web/core/components/core/theme/import-config-button.tsx
similarity index 62%
rename from apps/web/core/components/core/theme/config-handler.tsx
rename to apps/web/core/components/core/theme/import-config-button.tsx
index a426c75079..c585e3c507 100644
--- a/apps/web/core/components/core/theme/config-handler.tsx
+++ b/apps/web/core/components/core/theme/import-config-button.tsx
@@ -1,6 +1,6 @@
import { useRef } from "react";
import { observer } from "mobx-react";
-import type { UseFormGetValues, UseFormSetValue } from "react-hook-form";
+import type { UseFormSetValue } from "react-hook-form";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
@@ -8,54 +8,17 @@ import { setToast, TOAST_TYPE } from "@plane/propel/toast";
import type { IUserTheme } from "@plane/types";
type Props = {
- getValues: UseFormGetValues;
handleUpdateTheme: (formData: IUserTheme) => Promise;
setValue: UseFormSetValue;
};
-export const CustomThemeConfigHandler = observer(function CustomThemeConfigHandler(props: Props) {
- const { getValues, handleUpdateTheme, setValue } = props;
+export const CustomThemeImportConfigButton = observer(function CustomThemeImportConfigButton(props: Props) {
+ const { handleUpdateTheme, setValue } = props;
// refs
const fileInputRef = useRef(null);
// translation
const { t } = useTranslation();
- const handleDownloadConfig = () => {
- try {
- const currentValues = getValues();
- const config = {
- version: "1.0",
- themeName: "Custom Theme",
- primary: currentValues.primary,
- background: currentValues.background,
- darkPalette: currentValues.darkPalette,
- };
-
- const blob = new Blob([JSON.stringify(config, null, 2)], { type: "application/json" });
- const url = URL.createObjectURL(blob);
- const link = document.createElement("a");
- link.href = url;
- link.download = `plane-theme-${Date.now()}.json`;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- URL.revokeObjectURL(url);
-
- setToast({
- type: TOAST_TYPE.SUCCESS,
- title: t("success"),
- message: "Theme configuration downloaded successfully.",
- });
- } catch (error) {
- console.error("Failed to download config:", error);
- setToast({
- type: TOAST_TYPE.ERROR,
- title: t("error"),
- message: "Failed to download theme configuration.",
- });
- }
- };
-
const handleUploadConfig = async (event: React.ChangeEvent) => {
const file = event.target.files?.[0];
if (!file) return;
@@ -122,14 +85,11 @@ export const CustomThemeConfigHandler = observer(function CustomThemeConfigHandl
};
return (
- ;
+};
+
+export const CustomThemeModeSelector = observer(function CustomThemeModeSelector(props: Props) {
+ const { control } = props;
+
+ return (
+ {
+ if (currentEstimate.type === EEstimateSystem.TIME) {
+ return convertMinutesToHoursMinutesString(Number(estimatePointValue));
+ }
+ return estimatePointValue;
+ })
+ .join(", ")}
+ control={
@@ -123,9 +118,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
label={`${currentProjectDetails?.close_in} ${
currentProjectDetails?.close_in === 1 ? "month" : "months"
}`}
- onChange={(val: number) => {
- handleChange({ close_in: val });
- }}
+ onChange={(val: number) => void handleChange({ close_in: val })}
input
disabled={!isAdmin}
>
@@ -176,9 +169,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
: (currentDefaultState?.name ?? {t("state")})}
}
- onChange={(val: string) => {
- handleChange({ default_state: val });
- }}
+ onChange={(val: string) => void handleChange({ default_state: val })}
options={options}
disabled={!multipleOptions}
input
@@ -189,7 +180,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
+ {/* Neutral Color */}
+
+ );
+});
diff --git a/apps/web/core/components/core/theme/custom-theme-selector.tsx b/apps/web/core/components/core/theme/custom-theme-selector.tsx
index 1091966e1c..e498840b69 100644
--- a/apps/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -1,17 +1,21 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
import { observer } from "mobx-react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IUserTheme } from "@plane/types";
-import { InputColorPicker, ToggleSwitch } from "@plane/ui";
import { applyCustomTheme } from "@plane/utils";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
// hooks
import { useUserProfile } from "@/hooks/store/user";
// local imports
-import { CustomThemeConfigHandler } from "./config-handler";
+import { CustomThemeColorInputs } from "./color-inputs";
+import { CustomThemeDownloadConfigButton } from "./download-config-button";
+import { CustomThemeImportConfigButton } from "./import-config-button";
+import { CustomThemeModeSelector } from "./theme-mode-selector";
export const CustomThemeSelector = observer(function CustomThemeSelector() {
// store hooks
@@ -23,18 +27,17 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
const [isLoadingPalette, setIsLoadingPalette] = useState(false);
// Load saved theme from userProfile (fallback to defaults)
- const getSavedTheme = (): IUserTheme => {
- if (userProfile?.theme) {
- const theme = userProfile.theme;
- if (theme.primary && theme.background && theme.darkPalette !== undefined) {
- return {
- theme: "custom",
- primary: theme.primary,
- background: theme.background,
- darkPalette: theme.darkPalette,
- };
- }
+ const savedTheme = useMemo((): IUserTheme => {
+ const theme = userProfile?.theme;
+ if (theme && theme.primary && theme.background) {
+ return {
+ theme: "custom",
+ primary: theme.primary,
+ background: theme.background,
+ darkPalette: !!theme.darkPalette,
+ };
}
+
// Fallback to defaults
return {
theme: "custom",
@@ -42,21 +45,20 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
background: "#1a1a1a",
darkPalette: false,
};
- };
+ }, [userProfile?.theme]);
const {
control,
formState: { isSubmitting },
handleSubmit,
getValues,
- watch,
setValue,
} = useForm
+
+ {/* Brand Color */}
+ + Neutral color* +
+
+ (
+ handleValueChange(val, onChange)}
+ placeholder="#1a1a1a"
+ className="w-full placeholder:text-placeholder"
+ style={{
+ backgroundColor: value,
+ color: "#ffffff",
+ }}
+ hasError={false}
+ />
+ )}
+ />
+
+
+
+ + Brand color* +
+
+ (
+ handleValueChange(val, onChange)}
+ placeholder="#3f76ff"
+ className="w-full placeholder:text-placeholder"
+ style={{
+ backgroundColor: value,
+ color: "#ffffff",
+ }}
+ hasError={false}
+ />
+ )}
+ />
+
+
+ <>
-
+
);
});
diff --git a/apps/web/core/components/core/theme/theme-mode-selector.tsx b/apps/web/core/components/core/theme/theme-mode-selector.tsx
new file mode 100644
index 0000000000..d791a14864
--- /dev/null
+++ b/apps/web/core/components/core/theme/theme-mode-selector.tsx
@@ -0,0 +1,51 @@
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+ control: Control
+ (
+
+ );
+});
diff --git a/apps/web/core/components/core/theme/theme-switch.tsx b/apps/web/core/components/core/theme/theme-switch.tsx
index a6cd5cb41f..d0a0ac3b6d 100644
--- a/apps/web/core/components/core/theme/theme-switch.tsx
+++ b/apps/web/core/components/core/theme/theme-switch.tsx
@@ -50,6 +50,7 @@ export function ThemeSwitch(props: Props) {
)
}
onChange={onChange}
+ buttonClassName="border border-subtle-1"
placement="bottom-end"
input
>
diff --git a/apps/web/core/components/estimates/estimate-list-item.tsx b/apps/web/core/components/estimates/estimate-list-item.tsx
index b8f951192b..0ae6888866 100644
--- a/apps/web/core/components/estimates/estimate-list-item.tsx
+++ b/apps/web/core/components/estimates/estimate-list-item.tsx
@@ -1,12 +1,13 @@
-import type { FC } from "react";
import { observer } from "mobx-react";
+// plane imports
import { EEstimateSystem } from "@plane/constants";
-import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
-// helpers
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
// hooks
import { useProjectEstimates } from "@/hooks/store/estimates";
import { useEstimate } from "@/hooks/store/estimates/use-estimate";
-// plane web components
+// plane web imports
import { EstimateListItemButtons } from "@/plane-web/components/estimates";
type TEstimateListItem = {
@@ -19,40 +20,31 @@ type TEstimateListItem = {
};
export const EstimateListItem = observer(function EstimateListItem(props: TEstimateListItem) {
- const { estimateId, isAdmin, isEstimateEnabled, isEditable } = props;
- // hooks
+ const { estimateId } = props;
+ // store hooks
const { estimateById } = useProjectEstimates();
const { estimatePointIds, estimatePointById } = useEstimate(estimateId);
const currentEstimate = estimateById(estimateId);
-
// derived values
const estimatePointValues = estimatePointIds?.map((estimatePointId) => {
const estimatePoint = estimatePointById(estimatePointId);
if (estimatePoint) return estimatePoint.value;
});
- if (!currentEstimate) return <>;
+ if (!currentEstimate) return null;
+
return (
- + Choose color mode* +
+
+
+
+
+ )}
+ />
+
-
+
-
- {currentEstimate?.name}
-- {estimatePointValues - ?.map((estimatePointValue) => { - if (currentEstimate?.type === EEstimateSystem.TIME) { - return convertMinutesToHoursMinutesString(Number(estimatePointValue)); - } - return estimatePointValue; - }) - .join(", ")} -
-
- {loader === "init-loader" || isSWRLoading ? (
-
- {/* header */}
-
-
+ {/* header */}
+ setEstimateToDelete(undefined)}
/>
-
+
);
});
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
index c56e462b50..d71014bb24 100644
--- a/apps/web/core/components/exporter/export-form.tsx
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -21,6 +21,8 @@ import { CustomSearchSelect, CustomSelect } from "@plane/ui";
import { useProject } from "@/hooks/store/use-project";
import { useUser, useUserPermissions } from "@/hooks/store/user";
import { ProjectExportService } from "@/services/project/project-export.service";
+// local imports
+import { SettingsBoxedControlItem } from "../settings/boxed-control-item";
type Props = {
workspaceSlug: string;
@@ -134,68 +136,75 @@ export const ExportForm = observer(function ExportForm(props: Props) {
onSubmit={(e) => {
void handleSubmit(ExportCSVToMail)(e);
}}
- className="flex flex-col gap-4 mt-4"
+ className="flex flex-col gap-5"
>
-
{/* current active estimate section */}
{currentActiveEstimateId ? (
-
{/* CRUD modals */}
+ <>
{/* estimates activated deactivated section */}
- setEstimateToUpdate(estimateId)}
- onDeleteClick={(estimateId: string) => setEstimateToDelete(estimateId)}
+
+ {/* active estimates section */}
+
-
- {/* active estimates section */}
-
-
- {t("project_settings.estimates.title")}
-{t("project_settings.estimates.enable_description")}
-
+ setEstimateToUpdate(estimateId)}
+ onDeleteClick={(estimateId: string) => setEstimateToDelete(estimateId)}
+ />
+
+
) : (
-
- )}
-
+
-
+ Archived estimates
-- Estimates have gone through a change, these are the estimates you had in your older versions which - were not in use. Read more about them - - here. - -
-
+
+ Estimates have gone through a change, these are the estimates you had in your older versions which
+ were not in use. Read more about them
+
+ here.
+
+
+ }
+ variant="h6"
+ />
)}
+
{/* Project Selector */}
-
*/}
-
- (
- onChange(val)}
- options={options}
- input
- label={
- value && value.length > 0
- ? value
- .map((projectId) => {
- const projectDetails = getProjectById(projectId);
+ (
+ onChange(val)}
+ options={options}
+ input
+ label={
+ value && value.length > 0
+ ? value
+ .map((projectId) => {
+ const projectDetails = getProjectById(projectId);
- return projectDetails?.identifier;
- })
- .join(", ")
- : "All projects"
- }
- optionsClassName="max-w-48 sm:max-w-[532px]"
- placement="bottom-end"
- multiple
- />
- )}
- />
-
+ return projectDetails?.identifier;
+ })
+ .join(", ")
+ : "All projects"
+ }
+ optionsClassName="max-w-48 sm:max-w-[532px]"
+ placement="bottom-end"
+ multiple
+ />
+ )}
+ />
+ }
+ />
{/* Format Selector */}
-
- {t("workspace_settings.settings.exports.exporting_projects")}
-
-
- (
-
- {EXPORTERS_LIST.map((service) => (
-
- {t(service.i18n_title)}
-
- ))}
-
- )}
- />
+ (
+
+ {EXPORTERS_LIST.map((service) => (
+
+ {t(service.i18n_title)}
+
+ ))}
+
+ )}
+ />
+ }
+ />
+
{/* Rich Filters */}
@@ -241,11 +250,6 @@ export const ExportForm = observer(function ExportForm(props: Props) {
)}
/>
- {t("workspace_settings.settings.exports.format")}
-
-
+
-
-
);
});
diff --git a/apps/web/core/components/exporter/guide.tsx b/apps/web/core/components/exporter/guide.tsx
index b35a9125f0..7861f0d9b0 100644
--- a/apps/web/core/components/exporter/guide.tsx
+++ b/apps/web/core/components/exporter/guide.tsx
@@ -2,11 +2,13 @@ import { useState } from "react";
import { observer } from "mobx-react";
import { useParams, useSearchParams } from "next/navigation";
import { mutate } from "swr";
+// constants
import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
+// local imports
import { ExportForm } from "./export-form";
import { PrevExports } from "./prev-exports";
-const IntegrationGuide = observer(function IntegrationGuide() {
+export const ExportGuide = observer(function ExportGuide() {
// router
const { workspaceSlug } = useParams();
const searchParams = useSearchParams();
@@ -17,18 +19,14 @@ const IntegrationGuide = observer(function IntegrationGuide() {
return (
<>
-
- <>
- mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`))}
- />
-
+ mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`))}
+ />
+
);
});
-
-export default IntegrationGuide;
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index dbb8dbb73a..d777ef8a45 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -59,11 +59,9 @@ export const PrevExports = observer(function PrevExports(props: Props) {
return (
- (null);
- // router
- const { workspaceSlug } = useParams();
- const searchParams = useSearchParams();
- const provider = searchParams.get("provider");
- // store hooks
- const { data: currentUser } = useUser();
-
- const { t } = useTranslation();
-
- const { data: importerServices } = useSWR(
- workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug) : null,
- workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug) : null
- );
-
- const handleDeleteImport = (importService: IImporterService) => {
- setImportToDelete(importService);
- setDeleteImportModal(true);
- };
-
- return (
- <>
- setDeleteImportModal(false)}
- data={importToDelete}
- user={currentUser || null}
- />
- ();
-
- return (
- ();
-
- return (
- ();
-
- const { fields } = useFieldArray({
- control,
- name: "data.users",
- });
-
- const { data: members } = useSWR(
- workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug?.toString() ?? "") : null,
- workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug?.toString() ?? "") : null
- );
-
- const options = members
- ?.map((member) => {
- if (!member?.member) return;
- return {
- value: member.member.email,
- query: member.member.display_name ?? "",
- content: (
- >;
- setDisableTopBarAfter: React.Dispatch>;
-};
-
-// services
-const jiraImporterService = new JiraImporterService();
-
-export function JiraProjectDetail(props: Props) {
- const { setCurrentStep, setDisableTopBarAfter } = props;
-
- const {
- watch,
- setValue,
- control,
- formState: { errors },
- } = useFormContext();
-
- const { workspaceSlug } = useParams();
-
- const params: IJiraMetadata = {
- api_token: watch("metadata.api_token"),
- project_key: watch("metadata.project_key"),
- email: watch("metadata.email"),
- cloud_hostname: watch("metadata.cloud_hostname"),
- };
-
- const { data: projectInfo, error } = useSWR(
- workspaceSlug &&
- !errors.metadata?.api_token &&
- !errors.metadata?.project_key &&
- !errors.metadata?.email &&
- !errors.metadata?.cloud_hostname
- ? JIRA_IMPORTER_DETAIL(workspaceSlug.toString(), params)
- : null,
- workspaceSlug &&
- !errors.metadata?.api_token &&
- !errors.metadata?.project_key &&
- !errors.metadata?.email &&
- !errors.metadata?.cloud_hostname
- ? () => jiraImporterService.getJiraProjectInfo(workspaceSlug.toString(), params)
- : null
- );
-
- useEffect(() => {
- if (!projectInfo) return;
-
- setValue("data.total_issues", projectInfo.issues);
- setValue("data.total_labels", projectInfo.labels);
- setValue(
- "data.users",
- projectInfo.users?.map((user) => ({
- email: user.emailAddress,
- import: false,
- username: user.displayName,
- }))
- );
- setValue("data.total_states", projectInfo.states);
- setValue("data.total_modules", projectInfo.modules);
- }, [projectInfo, setValue]);
-
- useEffect(() => {
- if (error) setDisableTopBarAfter("display-import-data");
- else setDisableTopBarAfter(null);
- }, [error, setDisableTopBarAfter]);
-
- useEffect(() => {
- if (!projectInfo && !error) setDisableTopBarAfter("display-import-data");
- else if (!error) setDisableTopBarAfter(null);
- }, [projectInfo, error, setDisableTopBarAfter]);
-
- if (!projectInfo && !error) {
- return (
- ({
- state: "import-configure",
- });
- const [disableTopBarAfter, setDisableTopBarAfter] = useState(null);
-
- const router = useAppRouter();
- const { workspaceSlug } = useParams();
-
- const methods = useForm({
- defaultValues: jiraFormDefaultValues,
- mode: "all",
- reValidateMode: "onChange",
- });
-
- const isValid = methods.formState.isValid;
-
- const onSubmit = async (data: IJiraImporterForm) => {
- if (!workspaceSlug) return;
-
- await jiraImporterService
- .createJiraImporter(workspaceSlug.toString(), data)
- .then(() => {
- mutate(IMPORTER_SERVICES_LIST(workspaceSlug.toString()));
- router.push(`/${workspaceSlug}/settings/imports`);
- })
- .catch((err) => {
- console.error(err);
- });
- };
-
- const activeIntegrationState = () => {
- const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
-
- return currentElementIndex;
- };
-
- return (
- {
- newLabel();
- },
- }}
- showButton={isEditable}
+ control={
+ isEditable && (
+
+ )
+ }
/>
-
-
+
-
(
- IMPORTER_SERVICES_LIST(workspaceSlug),
- (prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
- false
- );
-
- integrationService
- .deleteImporterService(workspaceSlug, data.service, data.id)
- .catch(() =>
- setToast({
- type: TOAST_TYPE.ERROR,
- title: "Error!",
- message: "Something went wrong. Please try again.",
- })
- )
- .finally(() => {
- setDeleteLoading(false);
- handleClose();
- });
- };
-
- if (!data) return <>;
-
- return (
-
-
- );
-}
diff --git a/apps/web/core/components/integration/github/auth.tsx b/apps/web/core/components/integration/github/auth.tsx
deleted file mode 100644
index 60ed2e35fa..0000000000
--- a/apps/web/core/components/integration/github/auth.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { observer } from "mobx-react";
-// types
-import { Button } from "@plane/propel/button";
-import type { IWorkspaceIntegration } from "@plane/types";
-// ui
-// hooks
-import { useInstance } from "@/hooks/store/use-instance";
-import useIntegrationPopup from "@/hooks/use-integration-popup";
-
-type Props = {
- workspaceIntegration: false | IWorkspaceIntegration | undefined;
- provider: string | undefined;
-};
-
-export const GithubAuth = observer(function GithubAuth({ workspaceIntegration, provider }: Props) {
- // store hooks
- const { config } = useInstance();
- // hooks
- const { startAuth, isConnecting } = useIntegrationPopup({
- provider,
- github_app_name: config?.github_app_name || "",
- slack_client_id: config?.slack_client_id || "",
- });
-
- return (
- ;
-};
-
-export function GithubImportConfirm({ handleStepChange, watch }: Props) {
- return (
- ;
- watch: UseFormWatch;
-};
-
-export const GithubImportData = observer(function GithubImportData(props: Props) {
- const { handleStepChange, integration, control, watch } = props;
- // store hooks
- const { workspaceProjectIds, getProjectById } = useProject();
-
- const options = workspaceProjectIds?.map((projectId) => {
- const projectDetails = getProjectById(projectId);
-
- return {
- value: `${projectDetails?.id}`,
- query: `${projectDetails?.name}`,
- content: >;
- watch: UseFormWatch;
-};
-
-export function GithubImportUsers({ handleStepChange, users, setUsers, watch }: Props) {
- const isInvalid = users.filter((u) => u.import !== false && u.email === "").length > 0;
-
- return (
- >;
- setValue: UseFormSetValue;
-};
-
-// services
-const githubIntegrationService = new GithubIntegrationService();
-
-export function GithubRepoDetails({ selectedRepo, handleStepChange, setUsers, setValue }: Props) {
- const { workspaceSlug } = useParams();
-
- const { data: repoInfo } = useSWR(
- workspaceSlug && selectedRepo ? GITHUB_REPOSITORY_INFO(workspaceSlug, selectedRepo.name) : null,
- workspaceSlug && selectedRepo
- ? () =>
- githubIntegrationService.getGithubRepoInfo(workspaceSlug, {
- owner: selectedRepo.owner.login,
- repo: selectedRepo.name,
- })
- : null
- );
-
- useEffect(() => {
- if (!repoInfo) return;
-
- setValue("collaborators", repoInfo.collaborators);
-
- const fetchedUsers = repoInfo.collaborators.map((collaborator) => ({
- username: collaborator.login,
- import: "map",
- email: "",
- }));
- setUsers(fetchedUsers);
- }, [repoInfo, setUsers, setValue]);
-
- return (
- ({
- state: "import-configure",
- });
- const [users, setUsers] = useState([]);
-
- const router = useAppRouter();
- const { workspaceSlug } = useParams();
- const searchParams = useSearchParams();
- const provider = searchParams.get("provider");
-
- const { handleSubmit, control, setValue, watch } = useForm({
- defaultValues: defaultFormValues,
- });
-
- const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () => integrationService.getAppIntegrationsList());
-
- const { data: workspaceIntegrations } = useSWR(
- workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug) : null,
- workspaceSlug ? () => integrationService.getWorkspaceIntegrationsList(workspaceSlug) : null
- );
-
- const activeIntegrationState = () => {
- const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
-
- return currentElementIndex;
- };
-
- const handleStepChange = (value: TIntegrationSteps) => {
- setCurrentStep((prevData) => ({ ...prevData, state: value }));
- };
-
- // current integration from all the integrations available
- const integration =
- appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
-
- // current integration from workspace integrations
- const workspaceIntegration =
- integration && workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
-
- const createGithubImporterService = async (formData: TFormValues) => {
- if (!formData.github || !formData.project) return;
-
- const payload: IGithubServiceImportFormData = {
- metadata: {
- owner: formData.github.owner.login,
- name: formData.github.name,
- repository_id: formData.github.id,
- url: formData.github.html_url,
- },
- data: {
- users: users,
- },
- config: {
- sync: formData.sync,
- },
- project_id: formData.project,
- };
-
- await githubIntegrationService
- .createGithubServiceImport(workspaceSlug, payload)
- .then(() => {
- router.push(`/${workspaceSlug}/settings/imports`);
- mutate(IMPORTER_SERVICES_LIST(workspaceSlug));
- })
- .catch(() =>
- setToast({
- type: TOAST_TYPE.ERROR,
- title: "Error!",
- message: "Import was unsuccessful. Please try again.",
- })
- );
- };
-
- return (
-
- );
-}
diff --git a/apps/web/core/components/integration/github/single-user-select.tsx b/apps/web/core/components/integration/github/single-user-select.tsx
deleted file mode 100644
index 09b417f5e3..0000000000
--- a/apps/web/core/components/integration/github/single-user-select.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useParams } from "next/navigation";
-import useSWR from "swr";
-// plane types
-import type { IGithubRepoCollaborator } from "@plane/types";
-// plane ui
-import { Avatar, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
-// constants
-import { getFileURL } from "@plane/utils";
-import { WORKSPACE_MEMBERS } from "@/constants/fetch-keys";
-// helpers
-// plane web services
-import { WorkspaceService } from "@/plane-web/services";
-// types
-import type { IUserDetails } from "./root";
-
-type Props = {
- collaborator: IGithubRepoCollaborator;
- index: number;
- users: IUserDetails[];
- setUsers: React.Dispatch>;
-};
-
-const importOptions = [
- {
- key: "map",
- label: "Map to existing",
- },
- {
- key: "invite",
- label: "Invite by email",
- },
- {
- key: false,
- label: "Do not import",
- },
-];
-
-// services
-const workspaceService = new WorkspaceService();
-
-export function SingleUserSelect({ collaborator, index, users, setUsers }: Props) {
- const { workspaceSlug } = useParams();
-
- const { data: members } = useSWR(
- workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
- workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug.toString()) : null
- );
-
- const options = members
- ?.map((member) => {
- if (!member?.member) return;
- return {
- value: member.member?.display_name,
- query: member.member?.display_name ?? "",
- content: (
- {
- const newUsers = [...users];
- newUsers[index].email = val;
- setUsers(newUsers);
- }}
- optionsClassName="w-48"
- />
- )}
-
- );
-}
diff --git a/apps/web/core/components/integration/guide.tsx b/apps/web/core/components/integration/guide.tsx
deleted file mode 100644
index eac78513f6..0000000000
--- a/apps/web/core/components/integration/guide.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams, useSearchParams } from "next/navigation";
-import useSWR, { mutate } from "swr";
-// icons
-import { RefreshCw } from "lucide-react";
-// plane imports
-import { IMPORTERS_LIST } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-// types
-import { Button } from "@plane/propel/button";
-import type { IImporterService } from "@plane/types";
-// assets
-import GithubLogo from "@/app/assets/services/github.png?url";
-import JiraLogo from "@/app/assets/services/jira.svg?url";
-// components
-import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "@/components/integration";
-import { ImportExportSettingsLoader } from "@/components/ui/loader/settings/import-and-export";
-// constants
-import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
-// hooks
-import { useUser } from "@/hooks/store/user";
-// services
-import { IntegrationService } from "@/services/integrations";
-
-// services
-const integrationService = new IntegrationService();
-
-const getImporterLogo = (provider: string) => {
- switch (provider) {
- case "github":
- return GithubLogo;
- case "jira":
- return JiraLogo;
- default:
- return "";
- }
-};
-
-// FIXME: [Deprecated] Remove this component
-const IntegrationGuide = observer(function IntegrationGuide() {
- // states
- const [refreshing, setRefreshing] = useState(false);
- const [deleteImportModal, setDeleteImportModal] = useState(false);
- const [importToDelete, setImportToDelete] = useState
-
)}
- {t("workspace_settings.settings.exports.previous_exports")} -
+{t("workspace_settings.settings.exports.previous_exports")}
{exporterServices && exporterServices?.results ? (
exporterServices?.results?.length > 0 ? (
diff --git a/apps/web/core/components/global/timezone-select.tsx b/apps/web/core/components/global/timezone-select.tsx
index 59f3285e75..1a25a022a6 100644
--- a/apps/web/core/components/global/timezone-select.tsx
+++ b/apps/web/core/components/global/timezone-select.tsx
@@ -1,5 +1,5 @@
-import type { FC } from "react";
import { observer } from "mobx-react";
+// plane imports
import { CustomSearchSelect } from "@plane/ui";
import { cn } from "@plane/utils";
// hooks
@@ -38,13 +38,14 @@ export const TimezoneSelect = observer(function TimezoneSelect(props: TTimezoneS
label={value && selectedValue ? selectedValue(value) : label}
options={isDisabled || disabled ? [] : timezones}
onChange={onChange}
- buttonClassName={cn(buttonClassName, {
+ buttonClassName={cn(buttonClassName, "border border-subtle-1", {
"border-danger-strong": error,
})}
- className={cn("rounded-md border-[0.5px] !border-subtle", className)}
+ className={cn("rounded-md", className)}
optionsClassName={cn("w-72", optionsClassName)}
input
disabled={isDisabled || disabled}
+ placement="bottom-end"
/>
);
diff --git a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
index fe4384cb7e..09cb48f461 100644
--- a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -108,7 +108,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
flag: "visited_profile",
cta: {
text: "home.empty.personalize_account.cta",
- link: `/${workspaceSlug}/settings/account`,
+ link: `/settings/profile/general`,
disabled: false,
},
},
diff --git a/apps/web/core/components/integration/delete-import-modal.tsx b/apps/web/core/components/integration/delete-import-modal.tsx
deleted file mode 100644
index c09b0feac8..0000000000
--- a/apps/web/core/components/integration/delete-import-modal.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState } from "react";
-import { useParams } from "next/navigation";
-import { mutate } from "swr";
-// icons
-import { AlertTriangle } from "lucide-react";
-// services
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IUser, IImporterService } from "@plane/types";
-import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
-import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
-import { IntegrationService } from "@/services/integrations/integration.service";
-
-type Props = {
- isOpen: boolean;
- handleClose: () => void;
- data: IImporterService | null;
- user: IUser | null;
-};
-
-// services
-const integrationService = new IntegrationService();
-
-export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
- const [deleteLoading, setDeleteLoading] = useState(false);
- const [confirmDeleteImport, setConfirmDeleteImport] = useState(false);
-
- const { workspaceSlug } = useParams();
-
- const handleDeletion = () => {
- if (!workspaceSlug || !data) return;
-
- setDeleteLoading(true);
-
- mutate
-
-
-
-
-
-
-
-
- Delete project
- -- Are you sure you want to delete import from{" "} - {data?.service}? All of the data - related to the import will be permanently removed. This action cannot be undone. -
- -
-
- - To confirm, type delete import below: -
- { - if (e.target.value === "delete import") setConfirmDeleteImport(true); - else setConfirmDeleteImport(false); - }} - placeholder="Enter 'delete import'" - className="mt-2 w-full" - /> -
-
-
-
-
- {workspaceIntegration && workspaceIntegration?.id ? (
-
- ) : (
-
- )}
-
- );
-});
diff --git a/apps/web/core/components/integration/github/import-configure.tsx b/apps/web/core/components/integration/github/import-configure.tsx
deleted file mode 100644
index edcc316c6e..0000000000
--- a/apps/web/core/components/integration/github/import-configure.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// components
-import { Button } from "@plane/propel/button";
-import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
-import type { TIntegrationSteps } from "@/components/integration";
-import { GithubAuth } from "@/components/integration";
-// types
-
-type Props = {
- provider: string | undefined;
- handleStepChange: (value: TIntegrationSteps) => void;
- appIntegrations: IAppIntegration[] | undefined;
- workspaceIntegrations: IWorkspaceIntegration[] | undefined;
-};
-
-export function GithubImportConfigure({ handleStepChange, provider, appIntegrations, workspaceIntegrations }: Props) {
- // current integration from all the integrations available
- const integration =
- appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
-
- // current integration from workspace integrations
- const workspaceIntegration =
- integration &&
- workspaceIntegrations &&
- workspaceIntegrations.length > 0 &&
- workspaceIntegrations.find((i: any) => i.integration_detail.id === integration.id);
-
- return (
-
-
- );
-}
diff --git a/apps/web/core/components/integration/github/import-confirm.tsx b/apps/web/core/components/integration/github/import-confirm.tsx
deleted file mode 100644
index ba15e1a668..0000000000
--- a/apps/web/core/components/integration/github/import-confirm.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { FC } from "react";
-
-// react-hook-form
-import type { UseFormWatch } from "react-hook-form";
-// ui
-import { Button } from "@plane/propel/button";
-// types
-import type { TFormValues, TIntegrationSteps } from "@/components/integration";
-
-type Props = {
- handleStepChange: (value: TIntegrationSteps) => void;
- watch: UseFormWatch
-
-
-
-
- Configure
- Set up your GitHub import.
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/web/core/components/integration/github/import-data.tsx b/apps/web/core/components/integration/github/import-data.tsx
deleted file mode 100644
index 83926e2d7f..0000000000
--- a/apps/web/core/components/integration/github/import-data.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import type { FC } from "react";
-import { observer } from "mobx-react";
-import type { Control, UseFormWatch } from "react-hook-form";
-import { Controller } from "react-hook-form";
-import { Button } from "@plane/propel/button";
-import type { IWorkspaceIntegration } from "@plane/types";
-// hooks
-// components
-import { CustomSearchSelect, ToggleSwitch } from "@plane/ui";
-import { truncateText } from "@plane/utils";
-import type { TFormValues, TIntegrationSteps } from "@/components/integration";
-import { SelectRepository } from "@/components/integration";
-// ui
-// helpers
-import { useProject } from "@/hooks/store/use-project";
-// types
-
-type Props = {
- handleStepChange: (value: TIntegrationSteps) => void;
- integration: IWorkspaceIntegration | false | undefined;
- control: Control- You are about to import work items from {watch("github").full_name}. Click on {'"'}Confirm & Import{'" '} - to complete the process. -
-
-
-
-
- {truncateText(projectDetails?.name ?? "", 25)}
, - }; - }); - - return ( -
-
- );
-});
diff --git a/apps/web/core/components/integration/github/import-users.tsx b/apps/web/core/components/integration/github/import-users.tsx
deleted file mode 100644
index 0e53aa3d75..0000000000
--- a/apps/web/core/components/integration/github/import-users.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { FC } from "react";
-
-// react-hook-form
-import type { UseFormWatch } from "react-hook-form";
-// ui
-import { Button } from "@plane/propel/button";
-// types
-import type { IUserDetails, TFormValues, TIntegrationSteps } from "@/components/integration";
-import { SingleUserSelect } from "@/components/integration";
-
-type Props = {
- handleStepChange: (value: TIntegrationSteps) => void;
- users: IUserDetails[];
- setUsers: React.Dispatch
-
-
-
-
-
- Select Repository
-- Select the repository that you want the work items to be imported from. -
-
- {integration && (
- (
- Select Repository}
- onChange={onChange}
- characterLimit={50}
- />
- )}
- />
- )}
-
-
-
-
-
- Select Project
-Select the project to import the work item to.
-
- {workspaceProjectIds && (
- (
- Select Project}
- onChange={onChange}
- options={options}
- optionsClassName="w-48"
- />
- )}
- />
- )}
-
-
-
-
-
- Sync work item
-Set whether you want to sync the work items or not.
-
- (
- onChange(!value)} />
- )}
- />
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/web/core/components/integration/github/index.ts b/apps/web/core/components/integration/github/index.ts
deleted file mode 100644
index c215e9a0c5..0000000000
--- a/apps/web/core/components/integration/github/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from "./auth";
-export * from "./import-configure";
-export * from "./import-confirm";
-export * from "./import-data";
-export * from "./import-users";
-export * from "./repo-details";
-export * from "./root";
-export * from "./select-repository";
-export * from "./single-user-select";
diff --git a/apps/web/core/components/integration/github/repo-details.tsx b/apps/web/core/components/integration/github/repo-details.tsx
deleted file mode 100644
index a04474075c..0000000000
--- a/apps/web/core/components/integration/github/repo-details.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { FC } from "react";
-import { useEffect } from "react";
-
-import { useParams } from "next/navigation";
-
-// react-hook-form
-import type { UseFormSetValue } from "react-hook-form";
-import useSWR from "swr";
-// services
-// ui
-import { Button } from "@plane/propel/button";
-import { Loader } from "@plane/ui";
-// types
-import type { IUserDetails, TFormValues, TIntegrationSteps } from "@/components/integration";
-// fetch-keys
-import { GITHUB_REPOSITORY_INFO } from "@/constants/fetch-keys";
-import { GithubIntegrationService } from "@/services/integrations";
-
-type Props = {
- selectedRepo: any;
- handleStepChange: (value: TIntegrationSteps) => void;
- setUsers: React.Dispatch
-
-
-
- Name
- Import as...
- {users.filter((u) => u.import !== false).length} users selected
-
- {watch("collaborators").map((collaborator, index) => (
-
-
-
-
-
-
- {repoInfo ? (
- repoInfo.issue_count > 0 ? (
-
-
- )}
-
- );
-}
diff --git a/apps/web/core/components/integration/github/root.tsx b/apps/web/core/components/integration/github/root.tsx
deleted file mode 100644
index 4e144fe45d..0000000000
--- a/apps/web/core/components/integration/github/root.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import React, { useState } from "react";
-import Link from "next/link";
-import { useParams, useSearchParams } from "next/navigation";
-import { useForm } from "react-hook-form";
-import useSWR, { mutate } from "swr";
-import { ArrowLeft, List, Settings, UploadCloud } from "lucide-react";
-import { CheckIcon, MembersPropertyIcon } from "@plane/propel/icons";
-// types
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
-// assets
-import GithubLogo from "@/app/assets/services/github.png?url";
-// components
-import {
- GithubImportConfigure,
- GithubImportData,
- GithubRepoDetails,
- GithubImportUsers,
- GithubImportConfirm,
-} from "@/components/integration";
-// fetch keys
-import { APP_INTEGRATIONS, IMPORTER_SERVICES_LIST, WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys";
-// hooks
-import { useAppRouter } from "@/hooks/use-app-router";
-// services
-import { IntegrationService, GithubIntegrationService } from "@/services/integrations";
-
-export type TIntegrationSteps = "import-configure" | "import-data" | "repo-details" | "import-users" | "import-confirm";
-export interface IIntegrationData {
- state: TIntegrationSteps;
-}
-
-export interface IUserDetails {
- username: string;
- import: any;
- email: string;
-}
-
-export type TFormValues = {
- github: any;
- project: string | null;
- sync: boolean;
- collaborators: IGithubRepoCollaborator[];
- users: IUserDetails[];
-};
-
-const defaultFormValues = {
- github: null,
- project: null,
- sync: false,
-};
-
-const integrationWorkflowData = [
- {
- title: "Configure",
- key: "import-configure",
- icon: Settings,
- },
- {
- title: "Import Data",
- key: "import-data",
- icon: UploadCloud,
- },
- { title: "Work item", key: "repo-details", icon: List },
- {
- title: "Users",
- key: "import-users",
- icon: MembersPropertyIcon,
- },
- {
- title: "Confirm",
- key: "import-confirm",
- icon: CheckIcon,
- },
-];
-
-// services
-const integrationService = new IntegrationService();
-const githubIntegrationService = new GithubIntegrationService();
-
-export function GithubImporterRoot() {
- const [currentStep, setCurrentStep] = useState
-
- ) : (
-
-
- Repository Details
- Import completed. We have found:
-
-
-
-
- {repoInfo.issue_count}
-Work items
-
-
- {repoInfo.labels}
-Labels
-
-
- {repoInfo.collaborators.length}
-Users
-
-
- )
- ) : (
- We didn{"'"}t find any work item in this repository.
-
-
-
-
-
-
- ),
- };
- })
- .filter((member) => !!member) as
- | {
- value: string;
- query: string;
- content: React.ReactNode;
- }[]
- | undefined;
-
- return (
-
-
-
- ))}
-
-
- {users[index].import === "invite" && (
- {
- const newUsers = [...users];
- newUsers[index].email = e.target.value;
- setUsers(newUsers);
- }}
- placeholder="Enter email of the user"
- className="w-full py-1 text-11"
- />
- )}
- {users[index].import === "map" && members && (
-
-
-
- 
-
- {collaborator.login}
-
- {importOptions.find((o) => o.key === users[index].import)?.label}
}
- onChange={(val: any) => {
- const newUsers = [...users];
- newUsers[index].import = val;
- newUsers[index].email = "";
- setUsers(newUsers);
- }}
- noChevron
- >
- {importOptions.map((option) => (
- {option.label}
-
- {(!provider || provider === "csv") && (
- <>
- {/*
-
- );
-});
-
-export default IntegrationGuide;
-
-export { IntegrationGuide };
diff --git a/apps/web/core/components/integration/index.ts b/apps/web/core/components/integration/index.ts
deleted file mode 100644
index a734113b6c..0000000000
--- a/apps/web/core/components/integration/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// layout
-export * from "./delete-import-modal";
-export * from "./guide";
-export * from "./single-import";
-export * from "./single-integration-card";
-
-// github
-export * from "./github";
-// jira
-export * from "./jira";
-// slack
-export * from "./slack";
diff --git a/apps/web/core/components/integration/jira/confirm-import.tsx b/apps/web/core/components/integration/jira/confirm-import.tsx
deleted file mode 100644
index 15cc0da26b..0000000000
--- a/apps/web/core/components/integration/jira/confirm-import.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-
-// react hook form
-import { useFormContext } from "react-hook-form";
-import type { IJiraImporterForm } from "@plane/types";
-
-// types
-
-export function JiraConfirmImport() {
- const { watch } = useFormContext
-
*/}
- {IMPORTERS_LIST.map((service) => (
-
-
-
- Relocation Guide
-
- You can now transfer all the work items that you{"'"}ve created in other tracking
- services. This tool will guide you to relocate the work item to Plane.
-
-
- Read More
-
-
-
-
- ))}
-
-
-
- })
-
-
-
- {t(service.i18n_title)}
-{t(service.i18n_description)}
-
-
-
-
-
-
-
-
-
-
- )}
-
- {provider && provider === "github" &&
-
- - Previous Imports - -
-
- {importerServices ? (
- importerServices.length > 0 ? (
-
-
-
- ) : (
-
- {importerServices.map((service) => (
- handleDeleteImport(service)}
- />
- ))}
-
-
- {/*
- )
- ) : (
-
-
- );
-}
diff --git a/apps/web/core/components/integration/jira/give-details.tsx b/apps/web/core/components/integration/jira/give-details.tsx
deleted file mode 100644
index 65601beecc..0000000000
--- a/apps/web/core/components/integration/jira/give-details.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useFormContext, Controller } from "react-hook-form";
-import { PlusIcon } from "@plane/propel/icons";
-import type { IJiraImporterForm } from "@plane/types";
-// hooks
-// components
-import { CustomSelect, Input } from "@plane/ui";
-// helpers
-import { checkEmailValidity } from "@plane/utils";
-import { useCommandPalette } from "@/hooks/store/use-command-palette";
-import { useProject } from "@/hooks/store/use-project";
-// types
-
-export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
- // store hooks
- const { toggleCreateProjectModal } = useCommandPalette();
- const { workspaceProjectIds, getProjectById } = useProject();
- // form info
- const {
- control,
- formState: { errors },
- } = useFormContext
-
-
-
-
- Confirm
-
-
- Migrating
-
-
-
-
- {watch("data.total_issues")}
-Work items
-
-
- {watch("data.total_states")}
-States
-
-
- {watch("data.total_modules")}
-Modules
-
-
- {watch("data.total_labels")}
-Labels
-
-
- {watch("data.users").filter((user) => user.import).length}
-User
-
-
- );
-});
diff --git a/apps/web/core/components/integration/jira/import-users.tsx b/apps/web/core/components/integration/jira/import-users.tsx
deleted file mode 100644
index 9f64f53496..0000000000
--- a/apps/web/core/components/integration/jira/import-users.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { FC } from "react";
-import { useParams } from "next/navigation";
-import { useFormContext, useFieldArray, Controller } from "react-hook-form";
-import useSWR from "swr";
-// plane types
-import type { IJiraImporterForm } from "@plane/types";
-// plane ui
-import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
-// constants
-import { getFileURL } from "@plane/utils";
-import { WORKSPACE_MEMBERS } from "@/constants/fetch-keys";
-// helpers
-// plane web services
-import { WorkspaceService } from "@/plane-web/services";
-
-const workspaceService = new WorkspaceService();
-
-export function JiraImportUsers() {
- const { workspaceSlug } = useParams();
- // form info
- const {
- control,
- watch,
- formState: { errors },
- } = useFormContext
-
-
-
-
- Jira Personal Access Token
-- Get to know your access token by navigating to{" "} - - Atlassian Settings - -
-
- (
-
- )}
- />
- {errors.metadata?.api_token && (
-
- {errors.metadata.api_token.message}
- )} -
-
-
-
- Jira Project Key
-If XXX-123 is your work item, then enter XXX
-
- (
-
- )}
- />
- {errors.metadata?.project_key && (
-
- {errors.metadata.project_key.message}
- )} -
-
-
-
- Jira Email Address
-Enter the Email account that you use in Jira account
-
- checkEmailValidity(value) || "Please enter a valid email address",
- }}
- render={({ field: { value, onChange, ref } }) => (
-
- )}
- />
- {errors.metadata?.email &&
- {errors.metadata.email.message}
} -
-
-
-
- Jira Installation or Cloud Host Name
-Enter your companies cloud host name
-
- !/^https?:\/\//.test(value) || "Hostname should not begin with http:// or https://",
- }}
- render={({ field: { value, onChange, ref } }) => (
-
- )}
- />
- {errors.metadata?.cloud_hostname && (
-
- {errors.metadata.cloud_hostname.message}
- )} -
-
-
-
- Import to project
-Select which project you want to import to.
-
- (
-
- {value && value.trim() !== "" ? (
- getProjectById(value)?.name
- ) : (
- Select a project
- )}
-
- }
- >
- {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
- workspaceProjectIds.map((projectId) => {
- const projectDetails = getProjectById(projectId);
-
- if (!projectDetails) return;
-
- return (
-
- {projectDetails.name}
-
- );
- })
- ) : (
-
- )}
- />
-
-
-
- )}
- You don{"'"}t have any project. Please create a project first.
-
-
-
-
-
- ),
- };
- })
- .filter((member) => !!member) as
- | {
- value: string;
- query: string;
- content: React.ReactNode;
- }[]
- | undefined;
-
- return (
-
-
- );
-}
diff --git a/apps/web/core/components/integration/jira/index.ts b/apps/web/core/components/integration/jira/index.ts
deleted file mode 100644
index bc22a82461..0000000000
--- a/apps/web/core/components/integration/jira/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export * from "./root";
-export * from "./give-details";
-export * from "./jira-project-detail";
-export * from "./import-users";
-export * from "./confirm-import";
-
-import type { IJiraImporterForm } from "@plane/types";
-
-export type TJiraIntegrationSteps =
- | "import-configure"
- | "display-import-data"
- | "select-import-data"
- | "import-users"
- | "import-confirmation";
-
-export interface IJiraIntegrationData {
- state: TJiraIntegrationSteps;
-}
-
-export const jiraFormDefaultValues: IJiraImporterForm = {
- metadata: {
- cloud_hostname: "",
- api_token: "",
- project_key: "",
- email: "",
- },
- config: {
- epics_to_modules: false,
- },
- data: {
- users: [],
- invite_users: true,
- total_issues: 0,
- total_labels: 0,
- total_modules: 0,
- total_states: 0,
- },
- project_id: "",
-};
diff --git a/apps/web/core/components/integration/jira/jira-project-detail.tsx b/apps/web/core/components/integration/jira/jira-project-detail.tsx
deleted file mode 100644
index 2fc79180b3..0000000000
--- a/apps/web/core/components/integration/jira/jira-project-detail.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { useEffect } from "react";
-
-// next
-import { useParams } from "next/navigation";
-
-// swr
-import { useFormContext, Controller } from "react-hook-form";
-import useSWR from "swr";
-import type { IJiraImporterForm, IJiraMetadata } from "@plane/types";
-
-// react hook form
-
-// services
-import { ToggleSwitch, Spinner } from "@plane/ui";
-import { JIRA_IMPORTER_DETAIL } from "@/constants/fetch-keys";
-import { JiraImporterService } from "@/services/integrations";
-
-// fetch keys
-
-// components
-
-import type { IJiraIntegrationData, TJiraIntegrationSteps } from ".";
-
-type Props = {
- setCurrentStep: React.Dispatch
-
-
- {watch("data.invite_users") && (
-
-
- Users
-Update, invite or choose not to invite assignee
-
-
-
-
- )}
-
-
-
- Name
- Import as
-
- {fields.map((user, index) => (
-
-
-
- ))}
-
-
- {user.username}
-
- (
- {value ? value : ("Ignore" as any)}}
- >
- Invite by email
- Map to existing
- Do not import
-
- )}
- />
-
-
- {watch(`data.users.${index}.import`) === "invite" && (
- (
-
- )}
- />
- )}
- {watch(`data.users.${index}.import`) === "map" && (
- (
-
-
-
- );
- }
-
- if (error) {
- return (
-
-
- );
- }
-
- return (
- - Something went wrong. Please{" "} - {" "} - and check your Jira project details. -
-
-
- );
-}
diff --git a/apps/web/core/components/integration/jira/root.tsx b/apps/web/core/components/integration/jira/root.tsx
deleted file mode 100644
index 2941d5ff5e..0000000000
--- a/apps/web/core/components/integration/jira/root.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import React, { useState } from "react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { FormProvider, useForm } from "react-hook-form";
-import { mutate } from "swr";
-// icons
-import { ArrowLeft, List, Settings } from "lucide-react";
-import { Button } from "@plane/propel/button";
-import { CheckIcon, MembersPropertyIcon } from "@plane/propel/icons";
-// types
-import type { IJiraImporterForm } from "@plane/types";
-// assets
-import JiraLogo from "@/app/assets/services/jira.svg?url";
-// fetch keys
-import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
-// hooks
-import { useAppRouter } from "@/hooks/use-app-router";
-// services
-import { JiraImporterService } from "@/services/integrations";
-// components
-import type { TJiraIntegrationSteps, IJiraIntegrationData } from ".";
-import { JiraGetImportDetail, JiraProjectDetail, JiraImportUsers, JiraConfirmImport, jiraFormDefaultValues } from ".";
-
-const integrationWorkflowData: Array<{
- title: string;
- key: TJiraIntegrationSteps;
- icon: any;
-}> = [
- {
- title: "Configure",
- key: "import-configure",
- icon: Settings,
- },
- {
- title: "Import Data",
- key: "display-import-data",
- icon: List,
- },
- {
- title: "Users",
- key: "import-users",
- icon: MembersPropertyIcon,
- },
- {
- title: "Confirm",
- key: "import-confirmation",
- icon: CheckIcon,
- },
-];
-
-// services
-const jiraImporterService = new JiraImporterService();
-
-export function JiraImporterRoot() {
- const [currentStep, setCurrentStep] = useState
-
-
-
-
- Import Data
-Import Completed. We have found:
-
-
-
-
- {projectInfo?.issues}
-Work items
-
-
- {projectInfo?.states}
-States
-
-
- {projectInfo?.modules}
-Modules
-
-
- {projectInfo?.labels}
-Labels
-
-
- {projectInfo?.users?.length}
-Users
-
-
-
-
- Import Epics
-Import epics as modules
-
-
-
-
-
-
- );
-}
diff --git a/apps/web/core/components/integration/single-import.tsx b/apps/web/core/components/integration/single-import.tsx
deleted file mode 100644
index 43241ed2d6..0000000000
--- a/apps/web/core/components/integration/single-import.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { observer } from "mobx-react";
-
-// plane imports
-import { IMPORTERS_LIST } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { TrashIcon } from "@plane/propel/icons";
-import type { IImporterService } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
-// icons
-// helpers
-
-import { renderFormattedDate } from "@plane/utils";
-// types
-// constants
-
-type Props = {
- service: IImporterService;
- refreshing: boolean;
- handleDelete: () => void;
-};
-
-export const SingleImport = observer(function SingleImport({ service, refreshing, handleDelete }: Props) {
- const { t } = useTranslation();
-
- const importer = IMPORTERS_LIST.find((i) => i.provider === service.service);
- return (
-
-
- Cancel import & go back
-
-
-
-
-
-
-
-
-
- 
-
-
- {integrationWorkflowData.map((integration, index) => (
-
-
- {index < integrationWorkflowData.length - 1 && (
-
- ))}
-
-
- {" "}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
diff --git a/apps/web/core/components/integration/slack/index.ts b/apps/web/core/components/integration/slack/index.ts
deleted file mode 100644
index 4ea6cd1e4b..0000000000
--- a/apps/web/core/components/integration/slack/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./select-channel";
diff --git a/apps/web/core/components/labels/project-setting-label-list.tsx b/apps/web/core/components/labels/project-setting-label-list.tsx
index 1791c003b9..2eb7dc488d 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -4,6 +4,7 @@ import { useParams } from "next/navigation";
// plane imports
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
import { EmptyStateCompact } from "@plane/propel/empty-state";
import type { IIssueLabel } from "@plane/types";
import { Loader } from "@plane/ui";
@@ -76,16 +77,15 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
-
- - {importer && ( - - Import from {t(importer.i18n_title)} to{" "} - - )} - {service.project_detail.name} - - {refreshing ? "Refreshing..." : service.status} - -
-
- {renderFormattedDate(service.created_at)}|
- Imported by {service.initiated_by_detail?.display_name}
-
-
+
{showLabelForm && (
setSelectDeleteLabel(label)}
+ isUpdating={isUpdating}
+ setIsUpdating={setIsUpdating}
+ isLastChild={index === projectLabelsTree.length - 1}
+ onDrop={onDrop}
+ isEditable={isEditable}
+ labelOperationsCallbacks={labelOperationsCallbacks}
+ />
+ );
+ }
+ return (
+ setSelectDeleteLabel(label)}
+ isChild={false}
+ isLastChild={index === projectLabelsTree.length - 1}
+ onDrop={onDrop}
+ isEditable={isEditable}
+ labelOperationsCallbacks={labelOperationsCallbacks}
+ />
+ );
+ })
)
) : (
!showLabelForm && (
diff --git a/apps/web/core/components/navigation/app-rail-root.tsx b/apps/web/core/components/navigation/app-rail-root.tsx
index bf096b59d3..eb37e7d212 100644
--- a/apps/web/core/components/navigation/app-rail-root.tsx
+++ b/apps/web/core/components/navigation/app-rail-root.tsx
@@ -17,13 +17,13 @@ import { AppSidebarItemsRoot } from "./items-root";
export const AppRailRoot = observer(() => {
// router
- const { workspaceSlug } = useParams();
+ const { workspaceSlug, projectId } = useParams();
const pathname = usePathname();
// preferences
const { preferences, updateDisplayMode } = useAppRailPreferences();
const { isCollapsed, toggleAppRail } = useAppRailVisibility();
-
- const isSettingsPath = pathname.includes(`/${workspaceSlug}/settings`);
+ // derived values
+ const isWorkspaceSettingsPath = pathname.includes(`/${workspaceSlug}/settings`) && !projectId;
const showLabel = preferences.displayMode === "icon_with_label";
const railWidth = showLabel ? "3.75rem" : "3rem";
@@ -52,7 +52,7 @@ export const AppRailRoot = observer(() => {
label: "Settings",
icon: handleSelect(setting.href)} />;
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
index 8fd3a50389..c4e9997ec5 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
@@ -5,10 +5,11 @@ import { EUserPermissionsLevel, WORKSPACE_SETTINGS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import type { TPowerKContext } from "@/components/power-k/core/types";
import { PowerKSettingsMenu } from "@/components/power-k/menus/settings";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
// hooks
import { useUserPermissions } from "@/hooks/store/user";
+// plane web imports
import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
-import { WORKSPACE_SETTINGS_ICONS } from "app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar";
type Props = {
context: TPowerKContext;
@@ -31,7 +32,7 @@ export const PowerKOpenWorkspaceSettingsMenu = observer(function PowerKOpenWorks
const settingsListWithIcons = settingsList.map((setting) => ({
...setting,
label: t(setting.i18n_label),
- icon: WORKSPACE_SETTINGS_ICONS[setting.key as keyof typeof WORKSPACE_SETTINGS_ICONS],
+ icon: WORKSPACE_SETTINGS_ICONS[setting.key],
}));
return handleSelect(setting.href)} />;
diff --git a/apps/web/core/components/preferences/list.tsx b/apps/web/core/components/preferences/list.tsx
deleted file mode 100644
index 291eebf01e..0000000000
--- a/apps/web/core/components/preferences/list.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { PREFERENCE_OPTIONS } from "@plane/constants";
-import { PREFERENCE_COMPONENTS } from "@/plane-web/components/preferences/config";
-
-export function PreferencesList() {
- return (
- ({
- defaultValues: {
- ...data,
- },
- });
-
- const handleSettingChange = async (key: keyof IUserEmailNotificationSettings, value: boolean) => {
- try {
- await userService.updateCurrentUserEmailNotificationSettings({
- [key]: value,
- });
- setToast({
- title: t("success"),
- type: TOAST_TYPE.SUCCESS,
- message: t("email_notification_setting_updated_successfully"),
- });
- } catch (_error) {
- setToast({
- title: t("error"),
- type: TOAST_TYPE.ERROR,
- message: t("failed_to_update_email_notification_setting"),
- });
- }
- };
-
- useEffect(() => {
- reset(data);
- }, [reset, data]);
-
- return (
- <>
- {/* Notification Settings */}
- (null);
// router
- const { userId, workspaceSlug } = useParams();
+ const { userId } = useParams();
// store hooks
const { data: currentUser } = useUser();
const { profileSidebarCollapsed, toggleProfileSidebar } = useAppTheme();
const { getProjectById } = useProject();
+ const { toggleProfileSettingsModal } = useCommandPalette();
const { isMobile } = usePlatformOS();
const { t } = useTranslation();
// derived values
@@ -84,7 +81,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
return (
-
- {projectLabelsTree.map((label, index) => {
- if (label.children && label.children.length) {
- return (
- setSelectDeleteLabel(label)}
- isUpdating={isUpdating}
- setIsUpdating={setIsUpdating}
- isLastChild={index === projectLabelsTree.length - 1}
- onDrop={onDrop}
- isEditable={isEditable}
- labelOperationsCallbacks={labelOperationsCallbacks}
- />
- );
- }
- return (
- setSelectDeleteLabel(label)}
- isChild={false}
- isLastChild={index === projectLabelsTree.length - 1}
- onDrop={onDrop}
- isEditable={isEditable}
- labelOperationsCallbacks={labelOperationsCallbacks}
- />
- );
- })}
-
- )
+ projectLabelsTree?.map((label, index) => {
+ if (label.children && label.children.length) {
+ return (
+
- {PREFERENCE_OPTIONS.map((option) => {
- const Component = PREFERENCE_COMPONENTS[option.id as keyof typeof PREFERENCE_COMPONENTS];
- return
- );
-}
diff --git a/apps/web/core/components/preferences/section.tsx b/apps/web/core/components/preferences/section.tsx
deleted file mode 100644
index f69c600bd2..0000000000
--- a/apps/web/core/components/preferences/section.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-interface SettingsSectionProps {
- title: string;
- description: string;
- control: React.ReactNode;
-}
-
-export function PreferencesSection({ title, description, control }: SettingsSectionProps) {
- return (
-
-
- );
-}
diff --git a/apps/web/core/components/profile/notification/email-notification-form.tsx b/apps/web/core/components/profile/notification/email-notification-form.tsx
deleted file mode 100644
index 8ab4fac880..0000000000
--- a/apps/web/core/components/profile/notification/email-notification-form.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IUserEmailNotificationSettings } from "@plane/types";
-// ui
-import { ToggleSwitch } from "@plane/ui";
-// services
-import { UserService } from "@/services/user.service";
-// types
-interface IEmailNotificationFormProps {
- data: IUserEmailNotificationSettings;
-}
-
-// services
-const userService = new UserService();
-
-export function EmailNotificationForm(props: IEmailNotificationFormProps) {
- const { data } = props;
- const { t } = useTranslation();
- // form data
- const { control, reset } = useForm
-
- {title}
-{description}
-{control}
-
-
-
- );
-}
diff --git a/apps/web/core/components/profile/preferences/language-timezone.tsx b/apps/web/core/components/profile/preferences/language-timezone.tsx
deleted file mode 100644
index ef2de25298..0000000000
--- a/apps/web/core/components/profile/preferences/language-timezone.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { observer } from "mobx-react";
-import { SUPPORTED_LANGUAGES, useTranslation } from "@plane/i18n";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { CustomSelect } from "@plane/ui";
-import { TimezoneSelect } from "@/components/global";
-import { useUser, useUserProfile } from "@/hooks/store/user";
-
-export const LanguageTimezone = observer(function LanguageTimezone() {
- // store hooks
- const {
- data: user,
- updateCurrentUser,
- userProfile: { data: profile },
- } = useUser();
- const { updateUserProfile } = useUserProfile();
- const { t } = useTranslation();
-
- const handleTimezoneChange = async (value: string) => {
- try {
- await updateCurrentUser({ user_timezone: value });
- setToast({
- title: "Success!",
- message: "Timezone updated successfully",
- type: TOAST_TYPE.SUCCESS,
- });
- } catch (_error) {
- setToast({
- title: "Error!",
- message: "Failed to update timezone",
- type: TOAST_TYPE.ERROR,
- });
- }
- };
-
- const handleLanguageChange = async (value: string) => {
- try {
- await updateUserProfile({ language: value });
- setToast({
- title: "Success!",
- message: "Language updated successfully",
- type: TOAST_TYPE.SUCCESS,
- });
- } catch (_error) {
- setToast({
- title: "Error!",
- message: "Failed to update language",
- type: TOAST_TYPE.ERROR,
- });
- }
- };
-
- const getLanguageLabel = (value: string) => {
- const selectedLanguage = SUPPORTED_LANGUAGES.find((l) => l.value === value);
- if (!selectedLanguage) return value;
- return selectedLanguage.label;
- };
-
- return (
-
-
-
-
- {t("property_changes")}
- {t("property_changes_description")}
-
- (
- {
- onChange(newValue);
- handleSettingChange("property_change", newValue);
- }}
- size="sm"
- />
- )}
- />
-
-
-
-
-
- {t("state_change")}
- {t("state_change_description")}
-
- (
- {
- onChange(newValue);
- handleSettingChange("state_change", newValue);
- }}
- size="sm"
- />
- )}
- />
-
-
-
-
-
- {t("issue_completed")}
- {t("issue_completed_description")}
-
- (
- {
- onChange(newValue);
- handleSettingChange("issue_completed", newValue);
- }}
- size="sm"
- />
- )}
- />
-
-
-
-
-
- {t("comments")}
- {t("comments_description")}
-
- (
- {
- onChange(newValue);
- handleSettingChange("comment", newValue);
- }}
- size="sm"
- />
- )}
- />
-
-
-
-
-
- {t("mentions")}
- {t("mentions_description")}
-
- (
- {
- onChange(newValue);
- handleSettingChange("mention", newValue);
- }}
- size="sm"
- />
- )}
- />
-
-
-
- );
-});
diff --git a/apps/web/core/components/profile/profile-setting-content-header.tsx b/apps/web/core/components/profile/profile-setting-content-header.tsx
deleted file mode 100644
index 16e233a66f..0000000000
--- a/apps/web/core/components/profile/profile-setting-content-header.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-type Props = {
- title: string;
- description?: string;
-};
-
-export function ProfileSettingContentHeader(props: Props) {
- const { title, description } = props;
- return (
-
-
-
-
-
-
-
-
- {t("timezone")}
-{t("timezone_setting")}
-
-
-
-
-
-
-
-
- {t("language")}
-{t("language_setting")}
-
-
- {SUPPORTED_LANGUAGES.map((item) => (
-
- {item.label}
-
- ))}
-
-
-
-
- );
-}
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 611fd6e53e..4d7633051e 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -1,26 +1,22 @@
import { useEffect, useRef } from "react";
import { observer } from "mobx-react";
-import Link from "next/link";
import { useParams } from "next/navigation";
-// icons
-
-// headless ui
import { Disclosure, Transition } from "@headlessui/react";
-// plane helpers
+// plane imports
import { useOutsideClickDetector } from "@plane/hooks";
-// types
import { useTranslation } from "@plane/i18n";
import { Logo } from "@plane/propel/emoji-icon-picker";
+import { IconButton } from "@plane/propel/icon-button";
import { EditIcon, ChevronDownIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { IUserProfileProjectSegregation } from "@plane/types";
-// plane ui
import { Loader } from "@plane/ui";
import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
// components
import { CoverImage } from "@/components/common/cover-image";
// hooks
import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { useProject } from "@/hooks/store/use-project";
import { useUser } from "@/hooks/store/user";
import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -37,11 +33,12 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
// refs
const ref = useRef{title}
- {description && {description}
}
-
{currentUser?.id === userId && (
-
+ <>
+ {START_OF_THE_WEEK_OPTIONS.map((day) => (
+
+ {day.label}
+
+ ))}
+
+
}
/>
);
diff --git a/apps/web/core/components/project-states/root.tsx b/apps/web/core/components/project-states/root.tsx
index d9dbfc9761..1143b268b4 100644
--- a/apps/web/core/components/project-states/root.tsx
+++ b/apps/web/core/components/project-states/root.tsx
@@ -62,13 +62,11 @@ export const ProjectStateRoot = observer(function ProjectStateRoot(props: TProje
if (!groupedProjectStates) return
-
-
-
START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
@@ -27,27 +28,27 @@ export const StartOfWeekPreference = observer(function StartOfWeekPreference(pro
};
return (
-
-
- <>
- {START_OF_THE_WEEK_OPTIONS.map((day) => (
-
- {day.label}
-
- ))}
-
-
-
+
+
+ toggleProfileSettingsModal({
+ activeTab: "general",
+ isOpen: true,
+ })
+ }
+ />
)}
-
+
+
void;
-}
-
-export function ArchiveProjectSelection(props: IArchiveProject) {
- const { projectDetails, handleArchive } = props;
-
- return (
-
- {({ open }) => (
-
- );
-}
diff --git a/apps/web/core/components/project/settings/control-section.tsx b/apps/web/core/components/project/settings/control-section.tsx
new file mode 100644
index 0000000000..9f850aa202
--- /dev/null
+++ b/apps/web/core/components/project/settings/control-section.tsx
@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// plane imports
+import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import { ArchiveRestoreProjectModal } from "../archive-restore-modal";
+import { DeleteProjectModal } from "../delete-project-modal";
+
+type Props = {
+ projectId: string;
+};
+
+export const GeneralProjectSettingsControlSection = observer(function GeneralProjectSettingsControlSection(
+ props: Props
+) {
+ const { projectId } = props;
+ // states
+ const [selectProject, setSelectedProject] = useState(null);
+ const [archiveProject, setArchiveProject] = useState(false);
+ // params
+ const { workspaceSlug } = useParams();
+ // store hooks
+ const { currentProjectDetails } = useProject();
+ // translation
+ const { t } = useTranslation();
+
+ if (!currentProjectDetails) return null;
+
+ return (
+
- {({ open }) => (
-
- );
-}
diff --git a/apps/web/core/components/project/settings/features-list.tsx b/apps/web/core/components/project/settings/features-list.tsx
index fcfab32ae0..655cb7e39c 100644
--- a/apps/web/core/components/project/settings/features-list.tsx
+++ b/apps/web/core/components/project/settings/features-list.tsx
@@ -5,13 +5,14 @@ import { setPromiseToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { IProject } from "@plane/types";
// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
import { SettingsHeading } from "@/components/settings/heading";
// hooks
import { useProject } from "@/hooks/store/use-project";
-import { useUser } from "@/hooks/store/user";
// plane web imports
import { UpgradeBadge } from "@/plane-web/components/workspace/upgrade-badge";
import { PROJECT_FEATURES_LIST } from "@/plane-web/constants/project/settings";
+// local imports
import { ProjectFeatureToggle } from "./helper";
type Props = {
@@ -24,12 +25,11 @@ export const ProjectFeaturesList = observer(function ProjectFeaturesList(props:
const { workspaceSlug, projectId, isAdmin } = props;
// store hooks
const { t } = useTranslation();
- const { data: currentUser } = useUser();
const { getProjectById, updateProject } = useProject();
// derived values
const currentProjectDetails = getProjectById(projectId);
- const handleSubmit = (featureKey: string, featureProperty: string) => {
+ const handleSubmit = (_featureKey: string, featureProperty: string) => {
if (!workspaceSlug || !projectId || !currentProjectDetails) return;
// making the request to update the project feature
@@ -54,49 +54,45 @@ export const ProjectFeaturesList = observer(function ProjectFeaturesList(props:
});
};
- if (!currentUser) return <>;
-
return (
-
{t("common.project_name")}
-
- Archive project
- {open ?
-
-
-
-
-
- )}
-
-
- Archiving a project will unlist your project from your side navigation although you will still be able
- to access it from your projects page. You can restore the project or delete it whenever you want.
-
-
-
- {projectDetails ? (
-
-
- )}
-
-
-
-
- ) : (
-
+ {workspaceSlug && (
+ setArchiveProject(false)}
+ archive
+ />
+ )}
+ setSelectedProject(null)}
+ />
+
+ );
+});
diff --git a/apps/web/core/components/project/settings/delete-project-section.tsx b/apps/web/core/components/project/settings/delete-project-section.tsx
deleted file mode 100644
index 1d81304301..0000000000
--- a/apps/web/core/components/project/settings/delete-project-section.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-import { Disclosure, Transition } from "@headlessui/react";
-// types
-import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
-import { Button } from "@plane/propel/button";
-import { ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
-import type { IProject } from "@plane/types";
-// ui
-import { Loader } from "@plane/ui";
-
-export interface IDeleteProjectSection {
- projectDetails: IProject;
- handleDelete: () => void;
-}
-
-export function DeleteProjectSection(props: IDeleteProjectSection) {
- const { projectDetails, handleDelete } = props;
-
- return (
-
+ {/* Project Selector */}
+ setArchiveProject(true)}>
+ {t("archive")}
+
+ }
+ />
+ {/* Format Selector */}
+ setSelectedProject(currentProjectDetails.id ?? null)}
+ data-ph-element={PROJECT_TRACKER_ELEMENTS.DELETE_PROJECT_BUTTON}
+ >
+ {t("delete")}
+
+ }
+ />
+
+
-
- Delete project
- {open ?
-
-
-
-
-
-
- )}
-
-
- When deleting a project, all of the data and resources within that project will be permanently removed
- and cannot be recovered.
-
-
-
- {projectDetails ? (
-
-
- )}
-
-
-
-
- ) : (
-
+ <>
{Object.entries(PROJECT_FEATURES_LIST).map(([featureSectionKey, feature]) => (
-
+
-
))}
-
-
-
- ))}
+ ))}
+ {featureItem.icon}
-
-
+ }
+ description={t(`${featureItem.key}_description`)}
+ control={
+
-
-
- {t(featureItem.key)}
+
+ {Object.entries(feature.featureList).map(([featureItemKey, featureItem]) => (
+
-
+
+ {t(featureItem.key)}
{featureItem.isPro && (
)}
-
- - {t(`${featureItem.key}_description`)} -
-{featureItem.renderChildren?.(currentProjectDetails, workspaceSlug)}
+ )}
- {currentProjectDetails?.[featureItem.property as keyof IProject] &&
- featureItem.renderChildren?.(currentProjectDetails, workspaceSlug)}
-
-
+
+ );
+}
diff --git a/apps/web/core/components/settings/content-wrapper.tsx b/apps/web/core/components/settings/content-wrapper.tsx
index a15566d666..9af0f97a4c 100644
--- a/apps/web/core/components/settings/content-wrapper.tsx
+++ b/apps/web/core/components/settings/content-wrapper.tsx
@@ -1,22 +1,35 @@
-import type { ReactNode } from "react";
-import { observer } from "mobx-react";
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
import { cn } from "@plane/utils";
+// components
+import { AppHeader } from "@/components/core/app-header";
-type TProps = {
- children: ReactNode;
- size?: "lg" | "md";
+type Props = {
+ children: React.ReactNode;
+ header?: React.ReactNode;
+ hugging?: boolean;
};
-export const SettingsContentWrapper = observer(function SettingsContentWrapper(props: TProps) {
- const { children, size = "md" } = props;
+
+export function SettingsContentWrapper(props: Props) {
+ const { children, header, hugging = false } = props;
return (
-
+
+ {control && {title}
+ {description &&{description}
} +{control}
}
+
-
{children}
+
+ {header && (
+
+
);
-});
+}
diff --git a/apps/web/core/components/settings/control-item.tsx b/apps/web/core/components/settings/control-item.tsx
new file mode 100644
index 0000000000..b6074ed86d
--- /dev/null
+++ b/apps/web/core/components/settings/control-item.tsx
@@ -0,0 +1,19 @@
+type Props = {
+ control: React.ReactNode;
+ description: string;
+ title: React.ReactNode;
+};
+
+export function SettingsControlItem(props: Props) {
+ const { control, description, title } = props;
+
+ return (
+
+
+ )}
+
+ {children}
+
+
+
+ );
+}
diff --git a/apps/web/core/components/settings/header.tsx b/apps/web/core/components/settings/header.tsx
deleted file mode 100644
index b62ad4d4b1..0000000000
--- a/apps/web/core/components/settings/header.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { ChevronLeftIcon } from "lucide-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
-import { cn } from "@plane/utils";
-// hooks
-import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useUserSettings } from "@/hooks/store/user";
-// local imports
-import { WorkspaceLogo } from "../workspace/logo";
-import SettingsTabs from "./tabs";
-
-export const SettingsHeader = observer(function SettingsHeader() {
- // hooks
- const { t } = useTranslation();
- const { currentWorkspace } = useWorkspace();
- const { isScrolled } = useUserSettings();
-
- return (
-
+
+ {title}
+{description}
+{control}
+
-
-
- );
-});
diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index 9f8949ee5a..7cd44034fc 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -1,48 +1,32 @@
-import { Button } from "@plane/propel/button";
+// plane imports
import { cn } from "@plane/ui";
type Props = {
- title: string | React.ReactNode;
- description?: string;
- appendToRight?: React.ReactNode;
- showButton?: boolean;
- customButton?: React.ReactNode;
- button?: {
- label: string;
- onClick: () => void;
- };
className?: string;
+ control?: React.ReactNode;
+ description?: React.ReactNode;
+ title?: React.ReactNode;
+ variant?: "h3" | "h4" | "h6";
};
-export function SettingsHeading({
- title,
- description,
- button,
- appendToRight,
- customButton,
- showButton = true,
- className,
-}: Props) {
+export function SettingsHeading({ className, control, description, title, variant = "h3" }: Props) {
return (
-
-
-
- {t("back_to_workspace")}
- {/* Last workspace */}
-
-
- {currentWorkspace?.name}
-
- {/* Description */}
-
- {t("settings")}
- {/* Actions */}
-
+
);
}
-
-export default SettingsHeading;
diff --git a/apps/web/core/components/settings/helper.ts b/apps/web/core/components/settings/helper.ts
index e621fcdbd6..71fe03f2f1 100644
--- a/apps/web/core/components/settings/helper.ts
+++ b/apps/web/core/components/settings/helper.ts
@@ -1,5 +1,4 @@
-import { GROUPED_PROFILE_SETTINGS, GROUPED_WORKSPACE_SETTINGS } from "@plane/constants";
-import { PROJECT_SETTINGS_LINKS } from "@/plane-web/constants/project";
+import { GROUPED_WORKSPACE_SETTINGS, PROJECT_SETTINGS_FLAT_MAP } from "@plane/constants";
const hrefToLabelMap = (options: Record>) =>
Object.values(options)
@@ -14,9 +13,7 @@ const hrefToLabelMap = (options: Record {
acc[setting.href] = setting.i18n_label;
return acc;
@@ -39,14 +36,6 @@ export const getWorkspaceActivePath = (pathname: string) => {
return workspaceHrefToLabelMap[subPath];
};
-export const getProfileActivePath = (pathname: string) => {
- const parts = pathname.split("/").filter(Boolean);
- const settingsIndex = parts.indexOf("settings");
- if (settingsIndex === -1) return null;
- const subPath = "/" + parts.slice(settingsIndex, settingsIndex + 3).join("/");
- return profiletHrefToLabelMap[subPath];
-};
-
export const getProjectActivePath = (pathname: string) => {
const parts = pathname.split("/").filter(Boolean);
const settingsIndex = parts.indexOf("settings");
diff --git a/apps/web/core/components/settings/mobile/index.ts b/apps/web/core/components/settings/mobile/index.ts
deleted file mode 100644
index 870d3745cd..0000000000
--- a/apps/web/core/components/settings/mobile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./nav";
diff --git a/apps/web/core/components/settings/mobile/nav.tsx b/apps/web/core/components/settings/mobile/nav.tsx
index ea5871eca3..ac8e2fa2a5 100644
--- a/apps/web/core/components/settings/mobile/nav.tsx
+++ b/apps/web/core/components/settings/mobile/nav.tsx
@@ -5,9 +5,10 @@ import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { ChevronRightIcon } from "@plane/propel/icons";
import { useUserSettings } from "@/hooks/store/user";
+import { IconButton } from "@plane/propel/icon-button";
type Props = {
- hamburgerContent: React.ComponentType<{ isMobile: boolean }>;
+ hamburgerContent: React.ComponentType<{ className?: string; isMobile?: boolean }>;
activePath: string;
};
@@ -24,23 +25,19 @@ export const SettingsMobileNav = observer(function SettingsMobileNav(props: Prop
});
return (
-
- {typeof title === "string" ?
- {showButton && customButton}
- {button && showButton && (
-
- )}
- {appendToRight}
+ {control}
{title}
: title} - {description &&{description}
}
+ {title && (
+ + {title} +
+ )} + {description &&{description}
}
-
-
+ {leftItem && {leftItem} }
+ {rightItem && {rightItem} }
+
+ );
+}
diff --git a/apps/web/core/components/settings/sidebar/index.ts b/apps/web/core/components/settings/profile/content/index.ts
similarity index 100%
rename from apps/web/core/components/settings/sidebar/index.ts
rename to apps/web/core/components/settings/profile/content/index.ts
diff --git a/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx b/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx
new file mode 100644
index 0000000000..43798f71ce
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx
@@ -0,0 +1,188 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+// icons
+import { History, MessageSquare } from "lucide-react";
+import { calculateTimeAgo, getFileURL } from "@plane/utils";
+// hooks
+import { ActivityIcon, ActivityMessage } from "@/components/core/activity";
+import { RichTextEditor } from "@/components/editor/rich-text";
+import { ActivitySettingsLoader } from "@/components/ui/loader/settings/activity";
+// constants
+import { USER_ACTIVITY } from "@/constants/fetch-keys";
+// hooks
+import { useUserProfile } from "@/hooks/store/user/user-user-profile";
+// services
+import { UserService } from "@/services/user.service";
+const userService = new UserService();
+
+type Props = {
+ cursor: string;
+ perPage: number;
+ updateResultsCount: (count: number) => void;
+ updateTotalPages: (count: number) => void;
+ updateEmptyState: (state: boolean) => void;
+};
+
+export const ActivityProfileSettingsList = observer(function ProfileActivityListPage(props: Props) {
+ const { cursor, perPage, updateResultsCount, updateTotalPages, updateEmptyState } = props;
+ // store hooks
+ const { data: currentUser } = useUserProfile();
+
+ const { data: userProfileActivity } = useSWR(
+ USER_ACTIVITY({
+ cursor,
+ }),
+ () =>
+ userService.getUserActivity({
+ cursor,
+ per_page: perPage,
+ })
+ );
+
+ useEffect(() => {
+ if (!userProfileActivity) return;
+
+ // if no results found then show empty state
+ if (userProfileActivity.total_results === 0) updateEmptyState(true);
+
+ updateTotalPages(userProfileActivity.total_pages);
+ updateResultsCount(userProfileActivity.results.length);
+ }, [updateResultsCount, updateTotalPages, userProfileActivity, updateEmptyState]);
+
+ // TODO: refactor this component
+ return (
+ <>
+ {userProfileActivity ? (
+
-
+
+
);
-}
-
-export default observer(ProfileActivityPage);
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
new file mode 100644
index 0000000000..630b0ab5ff
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { APITokenService } from "@plane/services";
+// components
+import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
+import { ApiTokenListItem } from "@/components/api-token/token-list-item";
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+import { APITokenSettingsLoader } from "@/components/ui/loader/settings/api-token";
+// constants
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+
+const apiTokenService = new APITokenService();
+
+export const APITokensProfileSettings = observer(function APITokensProfileSettings() {
+ // states
+ const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
+ // store hooks
+ const { data: tokens } = useSWR(API_TOKENS_LIST, () => apiTokenService.list());
+ // translation
+ const { t } = useTranslation();
+
+ if (!tokens) {
+ return
- {!sidebarCollapsed &&
- {/* path */}
-
-
+
+
);
diff --git a/apps/web/core/components/settings/page-header.tsx b/apps/web/core/components/settings/page-header.tsx
new file mode 100644
index 0000000000..56bb7dd6ca
--- /dev/null
+++ b/apps/web/core/components/settings/page-header.tsx
@@ -0,0 +1,17 @@
+import { Header } from "@plane/ui";
+
+type Props = {
+ leftItem?: React.ReactNode;
+ rightItem?: React.ReactNode;
+};
+
+export function SettingsPageHeader(props: Props) {
+ const { leftItem, rightItem } = props;
+
+ return (
+
+ {!sidebarCollapsed && (
+ toggleSidebar()} />
+
+ {/* path */}
+
+
+ )}
+
+
-
+ {userProfileActivity.results.map((activityItem: any) => {
+ if (activityItem.field === "comment")
+ return (
+
-
+ +++ <> +++++++++ {activityItem.field ? ( + activityItem.new_value === "restore" ? ( ++
+ ) : ( + + ) + ) : activityItem.actor_detail.avatar_url && + activityItem.actor_detail.avatar_url !== "" ? ( + + ) : ( +
+ {activityItem.actor_detail.display_name?.[0]} ++ )} +++ ++ {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? ( + Plane + ) : activityItem.actor_detail.is_bot ? ( + {activityItem.actor_detail.first_name} Bot + ) : ( + + + {currentUser?.id === activityItem.actor_detail.id + ? "You" + : activityItem.actor_detail.display_name} + + + )}{" "} +++ {message}{" "} + + {calculateTimeAgo(activityItem.created_at)} + ++
+ );
+ })}
+
+
+ );
+
+ const message =
+
+
+ {activityItem.field ? (
+ activityItem.new_value === "restore" &&
+
+ {activityItem.actor_detail.display_name?.[0]}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {activityItem.actor_detail.is_bot
+ ? activityItem.actor_detail.first_name + " Bot"
+ : activityItem.actor_detail.display_name}
+
+ + Commented {calculateTimeAgo(activityItem.created_at)} +
+
+
+ {activityPages}
+ {activityPages}
{isLoadMoreVisible && (
}>
@@ -86,8 +84,6 @@ function ProfileActivityPage() {
)}
-
+
+ setIsCreateTokenModalOpen(false)} />
+ setIsCreateTokenModalOpen(true)}>
+ {t("workspace_settings.settings.api_tokens.add_token")}
+
+ }
+ />
+
+ );
+});
diff --git a/apps/web/core/components/profile/form.tsx b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
similarity index 88%
rename from apps/web/core/components/profile/form.tsx
rename to apps/web/core/components/settings/profile/content/pages/general/form.tsx
index ec9d52bb29..8d47033da3 100644
--- a/apps/web/core/components/profile/form.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
@@ -2,11 +2,9 @@ import { useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { CircleUserRound } from "lucide-react";
-import { Disclosure, Transition } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
-import { ChevronDownIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
import type { IUser, TUserProfile } from "@plane/types";
@@ -18,6 +16,7 @@ import { ImagePickerPopover } from "@/components/core/image-picker-popover";
import { ChangeEmailModal } from "@/components/core/modals/change-email-modal";
import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
import { CoverImage } from "@/components/common/cover-image";
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
// helpers
import { handleCoverImageChange } from "@/helpers/cover-image.helper";
// hooks
@@ -38,12 +37,12 @@ type TUserProfileForm = {
user_timezone: string;
};
-export type TProfileFormProps = {
+type Props = {
user: IUser;
profile: TUserProfile;
};
-export const ProfileForm = observer(function ProfileForm(props: TProfileFormProps) {
+export const GeneralProfileSettingsForm = observer(function GeneralProfileSettingsForm(props: Props) {
const { user, profile } = props;
// states
const [isLoading, setIsLoading] = useState(false);
@@ -189,7 +188,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
)}
/>
+ {tokens.length > 0 ? (
+ <>
+ {
+ setIsCreateTokenModalOpen(true);
+ },
+ },
+ ]}
+ align="start"
+ rootClassName="py-20"
+ />
+ )}
+
+
+ {tokens.map((token) => (
+
+
+ ) : (
+