Merge pull request supabase#17526 from supabase/fix/logs-behind-flag

Put the account audit logs page behind a feature flag

Author: joshenlim

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">