Merge pull request #2616 from akto-api-security/feature/mcp_security_ui

Feature/mcp security UI

Author: notshivansh

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.js

@@ -1,4 +1,4 @@
-import {Box, Navigation, Text} from "@shopify/polaris";
+import {Box, Navigation, Text, Banner, Badge} from "@shopify/polaris";
 import {
     AppsFilledMajor,
     InventoryFilledMajor,
@@ -7,6 +7,7 @@ import {
     DiamondAlertMinor,
     StarFilledMinor,
     FinancesMinor,
+    LockFilledMajor,
 } from "@shopify/polaris-icons";
 import {useLocation, useNavigate} from "react-router-dom";
 
@@ -26,6 +27,7 @@ export default function LeftNav() {
     const currPathString = func.transformString(location.pathname);
 
     const [leftNavSelected, setLeftNavSelected] = useState(currPathString);
+    const [showMcpBanner, setShowMcpBanner] = useState(false);
 
     const active = PersistStore((state) => state.active);
     const setActive = PersistStore((state) => state.setActive);
@@ -303,6 +305,21 @@ export default function LeftNav() {
                             subNavigationItems: reportsSubNavigationItems,
                             key: "6",
                         },
+                        {
+                            label: (
+                                <Text variant="bodyMd" fontWeight="medium">
+                                    MCP Security
+                                </Text>
+                            ),
+                            icon: LockFilledMajor,
+                            onClick: () => {
+                                handleSelect("dashboard_mcp_security");
+                                navigate("/dashboard/mcp-security");
+                                setActive("normal");
+                            },
+                            selected: leftNavSelected === "dashboard_mcp_security",
+                            key: "mcp_security",
+                        },
                         ...(window?.STIGG_FEATURE_WISE_ALLOWED?.THREAT_DETECTION?.isGranted ? [{
                                 label: (
                                     <Text variant="bodyMd" fontWeight="medium">

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/mcp-security/McpSecurityPage.jsx

@@ -0,0 +1,19 @@
+import { Page, Box, Button } from '@shopify/polaris';
+import EmptyScreensLayout from '../../components/banners/EmptyScreensLayout';
+
+function McpSecurityPage() {
+  return (
+    <Page title="MCP Security" fullWidth>
+      <Box width="100%">
+        <EmptyScreensLayout
+          iconSrc={"/public/mcp.svg"}
+          headingText={"MCP Security is in beta"}
+          description={"MCP Security is currently in beta. Contact our sales team to learn more about this feature and get access."}
+          bodyComponent={<Button url="https://www.akto.io/api-security-demo" target="_blank" primary>Contact sales</Button>}
+        />
+      </Box>
+    </Page>
+  );
+}
+
+export default McpSecurityPage; 

apps/dashboard/web/polaris_web/web/src/apps/main/App.js

@@ -96,6 +96,7 @@ import CloudflareWaf from "../dashboard/pages/settings/integrations/CloudflareWa
 import UndoDemergedApis from "../dashboard/pages/settings/undo_demerged_apis/UndoDemergedApis";
 import GmailWebhookCore from "../dashboard/pages/settings/integrations/gmailWebhooks/GmailWebhookCore";
 import GmailWebhook from "../dashboard/pages/settings/integrations/gmailWebhooks/GmailWebhook";
+import McpSecurityPage from "../dashboard/pages/mcp-security/McpSecurityPage.jsx";
 
 // if you add a component in a new path, please verify the search implementation in function -> 'getSearchItemsArr' in func.js
 
@@ -245,6 +246,10 @@ const router = createBrowserRouter([
                             }
                         ]
                     },
+                    {
+                        path: "mcp-security",
+                        element: <McpSecurityPage/>,
+                    },
                 ]
             },
             {