Put the audit logs page behind a feature flag. All links to it are hidden (even in v2 nav layout).

studio/components/layouts/AccountLayout/AccountLayout.tsx

@@ -28,6 +28,7 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
   const ongoingIncident = useFlag('ongoingIncident')
   const navLayoutV2 = useFlag('navigationLayoutV2')
   const mfaSetup = useFlag('mfaSetup')
+  const showAuditLogs = useFlag('auditLogs')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
 
   const signOut = useSignOut()
@@ -101,13 +102,17 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
                     },
                   ]
                 : []),
-              {
-                isActive: router.pathname === `/account/audit`,
-                icon: `${router.basePath}/img/user.svg`,
-                label: 'Audit Logs',
-                href: `/account/audit`,
-                key: `/account/audit`,
-              },
+              ...(showAuditLogs
+                ? [
+                    {
+                      isActive: router.pathname === `/account/audit`,
+                      icon: `${router.basePath}/img/user.svg`,
+                      label: 'Audit Logs',
+                      href: `/account/audit`,
+                      key: `/account/audit`,
+                    },
+                  ]
+                : []),
             ],
           },
         ]

studio/components/layouts/AppLayout/UserSettingsDropdown.tsx

@@ -16,6 +16,7 @@ import {
 } from 'ui'
 
 import { useTheme } from 'common'
+import { useFlag } from 'hooks'
 import { useSignOut } from 'lib/auth'
 import { useProfile } from 'lib/profile'
 import { useState } from 'react'
@@ -25,6 +26,7 @@ const UserSettingsDropdown = () => {
   const router = useRouter()
   const [open, setOpen] = useState(false)
   const { profile } = useProfile()
+  const showAuditLogs = useFlag('auditLogs')
   const { setIsOpen: setCommandMenuOpen } = useCommandMenu()
   const { isDarkMode, toggleTheme } = useTheme()
 
@@ -71,15 +73,17 @@ const UserSettingsDropdown = () => {
               <a>Access tokens</a>
             </DropdownMenuItem_Shadcn_>
           </Link>
-          <Link passHref href="/account/audit">
-            <DropdownMenuItem_Shadcn_
-              className="cursor-pointer"
-              onClick={() => setOpen(false)}
-              asChild
-            >
-              <a>Audit logs</a>
-            </DropdownMenuItem_Shadcn_>
-          </Link>
+          {showAuditLogs ? (
+            <Link passHref href="/account/audit">
+              <DropdownMenuItem_Shadcn_
+                className="cursor-pointer"
+                onClick={() => setOpen(false)}
+                asChild
+              >
+                <a>Audit logs</a>
+              </DropdownMenuItem_Shadcn_>
+            </Link>
+          ) : null}
           <DropdownMenuSeparator_Shadcn_ />
           <DropdownMenuItem_Shadcn_
             className="cursor-pointer"

studio/components/layouts/SettingsLayout/AccountSettingsMenu.tsx

@@ -1,14 +1,18 @@
+import { useFlag } from 'hooks'
+import { compact } from 'lodash'
 import { useRouter } from 'next/router'
 import SettingsMenuItem from './SettingsMenuItem'
 
 const AccountSettingsMenu = () => {
   const router = useRouter()
-  const accountSettings = [
+  const mfaSetup = useFlag('mfaSetup')
+  const showAuditLogs = useFlag('auditLogs')
+  const accountSettings = compact([
     { label: 'Preferences', pathname: `/account/me` },
     { label: 'Access Tokens', pathname: `/account/tokens` },
-    { label: 'Security', pathname: `/account/security` },
-    { label: 'Audit logs', pathname: `/account/audit` },
-  ]
+    mfaSetup ? { label: 'Security', pathname: `/account/security` } : null,
+    showAuditLogs ? { label: 'Audit logs', pathname: `/account/audit` } : null,
+  ])
 
   return (
     <div className="space-y-10">