From 2f6b113a1330a3e08a28975c628c306c525e3f6b Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Mon, 8 Jun 2026 11:40:35 +0100
Subject: [PATCH] feat(settings): link ENTERPRISE badges to plan page (#6560)

## Summary
Make the remaining static ENTERPRISE badges in the admin settings
clickable so they navigate the user to `/settings/adminPlan`, matching
the pattern already used by the PRO badges in Connections / Features /
General sections.

### Before
Two ENTERPRISE badges were inert text chips with no affordance:
- `AdminSecuritySection.tsx` - Audit Logging
- `AdminDatabaseSection.tsx` - Database section header

### After
Both now use the same pattern as the existing clickable PRO badges:
- `cursor: pointer`
- `onClick={() => navigate("/settings/adminPlan")}`
- `title` tooltip with the existing
`admin.settings.badge.clickToUpgrade` i18n key ("Click to view plan
details")

No new strings, no new components - just wiring up existing behavior to
the two badges that were missing it.

### Existing already-clickable badges (kept identical for reference)
- `AdminConnectionsSection.tsx:585-596` - SSO Auto Login PRO
- `AdminFeaturesSection.tsx:175-186` - Server Certificate PRO
- `AdminGeneralSection.tsx:920-931` - Custom Metadata PRO
---
 .../config/configSections/AdminDatabaseSection.tsx  | 13 ++++++++++++-
 .../config/configSections/AdminSecuritySection.tsx  | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx
index b8959c8ca..7fd272fb5 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isAxiosError } from "axios";
+import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   NumberInput,
@@ -52,6 +53,7 @@ interface DatabaseSettingsData {
 
 export default function AdminDatabaseSection() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { loginEnabled, validateLoginEnabled, getDisabledStyles } =
     useLoginRequired();
   const {
@@ -462,7 +464,16 @@ export default function AdminDatabaseSection() {
                 )}
               </Text>
             </div>
-            <Badge color="grape" size="lg">
+            <Badge
+              color="grape"
+              size="lg"
+              style={{ cursor: "pointer" }}
+              onClick={() => navigate("/settings/adminPlan")}
+              title={t(
+                "admin.settings.badge.clickToUpgrade",
+                "Click to view plan details",
+              )}
+            >
               ENTERPRISE
             </Badge>
           </Group>
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx
index 6c701833f..20e559d9e 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   NumberInput,
@@ -67,6 +68,7 @@ interface SecuritySettingsData {
 
 export default function AdminSecuritySection() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { loginEnabled, validateLoginEnabled } = useLoginRequired();
   const {
     restartModalOpened,
@@ -817,7 +819,16 @@ export default function AdminSecuritySection() {
               <Text fw={600} size="sm">
                 {t("admin.settings.security.audit.label", "Audit Logging")}
               </Text>
-              <Badge color="grape" size="sm">
+              <Badge
+                color="grape"
+                size="sm"
+                style={{ cursor: "pointer" }}
+                onClick={() => navigate("/settings/adminPlan")}
+                title={t(
+                  "admin.settings.badge.clickToUpgrade",
+                  "Click to view plan details",
+                )}
+              >
                 ENTERPRISE
               </Badge>
             </Group>