From 606964ee52a6eb39efe64f6fe3ce4c8b24ef5969 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Thu, 11 Jun 2026 16:26:02 +0100 Subject: [PATCH] Fix Teams and MCP settings pages (#6605) # Description of Changes Remove the Pro guards from the Team settings page and also fix the styling of the MCP settings screen (the code sections were black text on black background in light mode) --- .../public/locales/en-GB/translation.toml | 28 --- .../editor/src/core/theme/mantineTheme.ts | 10 + .../configSections/SaaSTeamsSection.tsx | 171 +----------------- .../config/configSections/TeamSection.tsx | 169 +---------------- 4 files changed, 14 insertions(+), 364 deletions(-) diff --git a/frontend/editor/public/locales/en-GB/translation.toml b/frontend/editor/public/locales/en-GB/translation.toml index e0745cad5..86cbf5873 100644 --- a/frontend/editor/public/locales/en-GB/translation.toml +++ b/frontend/editor/public/locales/en-GB/translation.toml @@ -2761,7 +2761,6 @@ copy = "Copy" done = "Done" error = "Error" expand = "Expand" -learnMore = "Learn more" loading = "Loading..." next = "Next" operation = "this operation" @@ -7503,28 +7502,6 @@ removeError = "Failed to remove member" renameError = "Failed to rename team" renameSuccess = "Team renamed successfully" -[team.features] -badge = "Team Features" -subtitle = "Collaborate with your team" -title = "Team Collaboration" -viewPlans = "View Plans" - -[team.features.billing] -description = "Manage billing and subscriptions" -title = "Billing Management" - -[team.features.credits] -description = "Shared credit pool for all members" -title = "Shared Credits" - -[team.features.dashboard] -description = "View team activity and usage" -title = "Team Dashboard" - -[team.features.invite] -description = "Add members to your team" -title = "Invite Members" - [team.invitationBanner] acceptButton = "Accept" message = "has invited you to join" @@ -7546,11 +7523,6 @@ remove = "Remove" roleColumn = "Role" title = "Team Members" -[team.upgrade] -button = "Upgrade to Team" -description = "Unlock team collaboration features" -title = "Upgrade to Team Plan" - [textAlign] center = "Center" left = "Left" diff --git a/frontend/editor/src/core/theme/mantineTheme.ts b/frontend/editor/src/core/theme/mantineTheme.ts index 9bc66d942..061ac0e81 100644 --- a/frontend/editor/src/core/theme/mantineTheme.ts +++ b/frontend/editor/src/core/theme/mantineTheme.ts @@ -150,6 +150,16 @@ export const mantineTheme = createTheme({ }, }, }, + + Code: { + styles: { + root: { + backgroundColor: "var(--color-gray-100)", + color: "var(--text-primary)", + }, + }, + }, + Textarea: { styles: (_theme: MantineTheme) => ({ input: { diff --git a/frontend/editor/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx b/frontend/editor/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx index b172f7128..74f03b51a 100644 --- a/frontend/editor/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx +++ b/frontend/editor/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx @@ -10,15 +10,9 @@ import { Badge, ActionIcon, Menu, - List, - ThemeIcon, - Modal, - CloseButton, - Anchor, } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { useSaaSTeam } from "@app/contexts/SaaSTeamContext"; -import { useSaaSBilling } from "@app/contexts/SaasBillingContext"; import LocalIcon from "@app/components/shared/LocalIcon"; import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex"; import apiClient from "@app/services/apiClient"; @@ -43,15 +37,10 @@ export function SaaSTeamsSection() { refreshTeams, } = useSaaSTeam(); - // Check Pro status via billing context - const { tier } = useSaaSBilling(); - const isPro = tier !== "free"; - const [inviteEmail, setInviteEmail] = useState(""); const [inviting, setInviting] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(null); - const [featuresModalOpened, setFeaturesModalOpened] = useState(false); // Team rename state const [isEditingName, setIsEditingName] = useState(false); @@ -71,12 +60,6 @@ export function SaaSTeamsSection() { return () => clearInterval(interval); }, []); // Only run on mount/unmount - const navigateToPlan = () => { - window.dispatchEvent( - new CustomEvent("appConfig:navigate", { detail: { key: "planBilling" } }), - ); - }; - const handleInvite = async (e: React.FormEvent) => { e.preventDefault(); if (!inviteEmail.trim()) return; @@ -321,156 +304,6 @@ export function SaaSTeamsSection() { - {/* Upgrade Banner for Free Users */} - {isPersonalTeam && !isPro && ( - } - > - -
- - {t( - "team.upgrade.title", - "Upgrade to Pro to unlock team features", - )} - - - {t( - "team.upgrade.description", - "Invite members, share credits, and more.", - )}{" "} - setFeaturesModalOpened(true)} - style={{ cursor: "pointer" }} - > - {t("common.learnMore", "Learn more")} - - -
- - - - )} - - {/* Team Features Modal */} - setFeaturesModalOpened(false)} - size="md" - centered - padding="xl" - withCloseButton={false} - zIndex={Z_INDEX_OVER_CONFIG_MODAL} - > -
- setFeaturesModalOpened(false)} - size="lg" - style={{ - position: "absolute", - top: -8, - right: -8, - zIndex: 1, - }} - /> - - {/* Header */} - - - {t("team.features.badge", "PRO FEATURE")} - - - {t("team.features.title", "Team Collaboration")} - - - {t( - "team.features.subtitle", - "Upgrade to Pro and unlock powerful team features", - )} - - - - {/* Features List */} - - - - } - > - - - {t("team.features.invite.title", "Invite team members")} - - - {t( - "team.features.invite.description", - "Add unlimited users with additional seat purchases", - )} - - - - - {t( - "team.features.credits.title", - "Share credits across your team", - )} - - - {t( - "team.features.credits.description", - "Pool resources for collaborative work", - )} - - - - - {t( - "team.features.dashboard.title", - "Team management dashboard", - )} - - - {t( - "team.features.dashboard.description", - "Control permissions, monitor usage, and manage members", - )} - - - - - {t("team.features.billing.title", "Centralized billing")} - - - {t( - "team.features.billing.description", - "One invoice for all team seats and usage", - )} - - - - - {/* CTA Button */} - - -
- - {/* Error/Success Messages */} {error && ( setError(null)} withCloseButton> @@ -484,8 +317,8 @@ export function SaaSTeamsSection() { )} - {/* Invite Members (Pro Users) */} - {isTeamLeader && isPro && ( + {/* Invite Members */} + {isTeamLeader && (
{t("team.invite.title", "Invite Team Member")} diff --git a/frontend/editor/src/saas/components/shared/config/configSections/TeamSection.tsx b/frontend/editor/src/saas/components/shared/config/configSections/TeamSection.tsx index 22e20ff77..6755a4d74 100644 --- a/frontend/editor/src/saas/components/shared/config/configSections/TeamSection.tsx +++ b/frontend/editor/src/saas/components/shared/config/configSections/TeamSection.tsx @@ -10,15 +10,9 @@ import { Badge, ActionIcon, Menu, - List, - ThemeIcon, - Modal, - CloseButton, - Anchor, } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { useSaaSTeam } from "@app/contexts/SaaSTeamContext"; -import { useAuth } from "@app/auth/UseSession"; import LocalIcon from "@app/components/shared/LocalIcon"; import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex"; import apiClient from "@app/services/apiClient"; @@ -38,13 +32,10 @@ const TeamSection: React.FC = () => { refreshTeams, } = useSaaSTeam(); - const { isPro } = useAuth(); - const [inviteEmail, setInviteEmail] = useState(""); const [inviting, setInviting] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(null); - const [featuresModalOpened, setFeaturesModalOpened] = useState(false); // Team rename state const [isEditingName, setIsEditingName] = useState(false); @@ -64,12 +55,6 @@ const TeamSection: React.FC = () => { return () => clearInterval(interval); }, []); // Only run on mount/unmount - const navigateToPlan = () => { - window.dispatchEvent( - new CustomEvent("appConfig:navigate", { detail: { key: "plan" } }), - ); - }; - const handleInvite = async (e: React.FormEvent) => { e.preventDefault(); if (!inviteEmail.trim()) return; @@ -314,156 +299,6 @@ const TeamSection: React.FC = () => {
- {/* Upgrade Banner for Free Users */} - {isPersonalTeam && !isPro && ( - } - > - -
- - {t( - "team.upgrade.title", - "Upgrade to Pro to unlock team features", - )} - - - {t( - "team.upgrade.description", - "Invite members, share credits, and more.", - )}{" "} - setFeaturesModalOpened(true)} - style={{ cursor: "pointer" }} - > - {t("common.learnMore", "Learn more")} - - -
- - - - )} - - {/* Team Features Modal */} - setFeaturesModalOpened(false)} - size="md" - centered - padding="xl" - withCloseButton={false} - zIndex={Z_INDEX_OVER_CONFIG_MODAL} - > -
- setFeaturesModalOpened(false)} - size="lg" - style={{ - position: "absolute", - top: -8, - right: -8, - zIndex: 1, - }} - /> - - {/* Header */} - - - {t("team.features.badge", "PRO FEATURE")} - - - {t("team.features.title", "Team Collaboration")} - - - {t( - "team.features.subtitle", - "Upgrade to Pro and unlock powerful team features", - )} - - - - {/* Features List */} - - - - } - > - - - {t("team.features.invite.title", "Invite team members")} - - - {t( - "team.features.invite.description", - "Add unlimited users with additional seat purchases", - )} - - - - - {t( - "team.features.credits.title", - "Share credits across your team", - )} - - - {t( - "team.features.credits.description", - "Pool resources for collaborative work", - )} - - - - - {t( - "team.features.dashboard.title", - "Team management dashboard", - )} - - - {t( - "team.features.dashboard.description", - "Control permissions, monitor usage, and manage members", - )} - - - - - {t("team.features.billing.title", "Centralized billing")} - - - {t( - "team.features.billing.description", - "One invoice for all team seats and usage", - )} - - - - - {/* CTA Button */} - - -
- - {/* Error/Success Messages */} {error && ( setError(null)} withCloseButton> @@ -477,8 +312,8 @@ const TeamSection: React.FC = () => { )} - {/* Invite Members (Pro Users) */} - {isTeamLeader && isPro && ( + {/* Invite Members */} + {isTeamLeader && (
{t("team.invite.title", "Invite Team Member")}