chore: cleanup older toggles (#18675)

packages/ui/src/components/Tabs/Tabs.tsx

@@ -19,7 +19,6 @@ interface TabsProps {
   addOnBefore?: React.ReactNode
   addOnAfter?: React.ReactNode
   listClassNames?: string
-  children: PanelPropsProps[]
 }
 
 interface TabsSubComponents {

studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx

@@ -15,7 +15,6 @@ export const ProjectCardStatus = ({
   resourceWarnings,
   projectStatus,
 }: ProjectCardWarningsProps) => {
-  //const showResourceExhaustionWarnings = useFlag('resourceExhaustionWarnings')
   const showResourceExhaustionWarnings = false
 
   // [Joshen] Read only takes higher precedence over multiple resource warnings

studio/components/layouts/AccountLayout/AccountLayout.tsx

@@ -3,7 +3,6 @@ import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import { useMfaListFactorsQuery } from 'data/profile/mfa-list-factors-query'
 import { useFlag, useSelectedOrganization, withAuth } from 'hooks'
 import { useSignOut } from 'lib/auth'
 import { IS_PLATFORM } from 'lib/constants'
@@ -23,12 +22,9 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
   const router = useRouter()
   const { data: organizations } = useOrganizationsQuery()
   const selectedOrganization = useSelectedOrganization()
-  const { data: factors } = useMfaListFactorsQuery()
 
   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()
@@ -89,30 +85,21 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
                 href: `/account/tokens`,
                 key: `/account/tokens`,
               },
-              // show the MFA page only if the feature flag is set or the user has already MFA setup.
-              // He should be able to edit/revoke his MFA even if MFA feature flag is disabled.
-              ...(mfaSetup || (factors?.all || []).length > 0
-                ? [
-                    {
-                      isActive: router.pathname === `/account/security`,
-                      icon: `${router.basePath}/img/user.svg`,
-                      label: 'Security',
-                      href: `/account/security`,
-                      key: `/account/security`,
-                    },
-                  ]
-                : []),
-              ...(showAuditLogs
-                ? [
-                    {
-                      isActive: router.pathname === `/account/audit`,
-                      icon: `${router.basePath}/img/user.svg`,
-                      label: 'Audit Logs',
-                      href: `/account/audit`,
-                      key: `/account/audit`,
-                    },
-                  ]
-                : []),
+
+              {
+                isActive: router.pathname === `/account/security`,
+                icon: `${router.basePath}/img/user.svg`,
+                label: 'Security',
+                href: `/account/security`,
+                key: `/account/security`,
+              },
+              {
+                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

@@ -2,7 +2,6 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 
-import { useFlag } from 'hooks'
 import { useSignOut } from 'lib/auth'
 import { useProfile } from 'lib/profile'
 import { useTheme } from 'next-themes'
@@ -26,7 +25,6 @@ const UserSettingsDropdown = () => {
   const router = useRouter()
   const [open, setOpen] = useState(false)
   const { profile } = useProfile()
-  const showAuditLogs = useFlag('auditLogs')
   const { setIsOpen: setCommandMenuOpen } = useCommandMenu()
   const { theme, setTheme } = useTheme()
 
@@ -61,11 +59,11 @@ const UserSettingsDropdown = () => {
           <DropdownMenuItem className="cursor-pointer" onClick={() => setOpen(false)} asChild>
             <Link href="/account/tokens">Access tokens</Link>
           </DropdownMenuItem>
-          {showAuditLogs ? (
-            <DropdownMenuItem className="cursor-pointer" onClick={() => setOpen(false)} asChild>
-              <Link href="/account/audit">Audit logs</Link>
-            </DropdownMenuItem>
-          ) : null}
+
+          <DropdownMenuItem className="cursor-pointer" onClick={() => setOpen(false)} asChild>
+            <Link href="/account/audit">Audit logs</Link>
+          </DropdownMenuItem>
+
           <DropdownMenuSeparator />
           <DropdownMenuItem
             className="cursor-pointer"

studio/components/layouts/OrganizationLayout.tsx

@@ -17,9 +17,6 @@ const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
   const invoicesEnabled = useIsFeatureEnabled('billing:invoices')
 
   const navLayoutV2 = useFlag('navigationLayoutV2')
-  const showOAuthApps = useFlag('oauthApps')
-  const showAuditLogs = useFlag('auditLogs')
-  const showIntegrationsV2 = useFlag('integrationsV2')
 
   if (navLayoutV2) {
     return <SettingsLayout>{children}</SettingsLayout>
@@ -47,14 +44,14 @@ const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
             >
               <Tabs.Panel id="general" label="General" className="!my-0" />
               <Tabs.Panel id="team" label="Team" className="!my-0" />
-              {showIntegrationsV2 && (
-                <Tabs.Panel id="integrations" label="Integrations" className="!my-0" />
-              )}
+
+              <Tabs.Panel id="integrations" label="Integrations" className="!my-0" />
+
               <Tabs.Panel id="billing" label="Billing" className="!my-0" />
               <Tabs.Panel id="usage" label="Usage" className="!my-0" />
               {invoicesEnabled && <Tabs.Panel id="invoices" label="Invoices" className="!my-0" />}
-              {showOAuthApps && <Tabs.Panel id="apps" label="OAuth Apps" className="!my-0" />}
-              {showAuditLogs && <Tabs.Panel id="audit" label="Audit Logs" className="!my-0" />}
+              <Tabs.Panel id="apps" label="OAuth Apps" className="!my-0" />
+              <Tabs.Panel id="audit" label="Audit Logs" className="!my-0" />
 
               <Tabs.Panel id="documents" label="Legal Documents" className="!my-0" />
             </Tabs>

studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -67,7 +67,6 @@ const ProjectLayout = ({
   const organizationName = selectedOrganization?.name
 
   const navLayoutV2 = useFlag('navigationLayoutV2')
-  const showResourceExhaustionWarnings = useFlag('resourceExhaustionWarnings')
 
   const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
   const ignorePausedState =
@@ -110,7 +109,7 @@ const ProjectLayout = ({
               </div>
             ) : (
               <ContentWrapper isLoading={isLoading}>
-                {showResourceExhaustionWarnings && <ResourceExhaustionWarningBanner />}
+                <ResourceExhaustionWarningBanner />
                 {children}
               </ContentWrapper>
             )}
@@ -230,7 +229,6 @@ export const ProjectLayoutNonBlocking = ({
   const showPausedState = isPaused && !ignorePausedState
 
   const navLayoutV2 = useFlag('navigationLayoutV2')
-  const showResourceExhaustionWarnings = useFlag('resourceExhaustionWarnings')
 
   return (
     <AppLayout>
@@ -259,7 +257,7 @@ export const ProjectLayoutNonBlocking = ({
               </div>
             ) : (
               <>
-                {showResourceExhaustionWarnings && <ResourceExhaustionWarningBanner />}
+                <ResourceExhaustionWarningBanner />
                 {children}
               </>
             )}

studio/components/layouts/ReportsLayout/ReportsLayout.tsx

@@ -4,7 +4,6 @@ import { PropsWithChildren } from 'react'
 import ProductMenu from 'components/ui/ProductMenu'
 import { useIsFeatureEnabled, useSelectedProject, withAuth } from 'hooks'
 import ProjectLayout from '../'
-import { useFlag } from 'hooks'
 
 interface ReportsLayoutProps {
   title?: string
@@ -17,8 +16,6 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
   const page = router.pathname.split('/')[4] || ''
   const ref = project?.ref ?? 'default'
 
-  const storageReportFlag = useFlag('storageReport')
-
   const storageEnabled = useIsFeatureEnabled('project_storage:all')
 
   const menuItems = [
@@ -41,17 +38,15 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
           url: `/project/${ref}/reports/api-overview`,
           items: [],
         },
-        ...(storageEnabled && storageReportFlag
-          ? [
-              {
-                name: 'Storage',
-                key: 'storage',
-                url: `/project/${ref}/reports/storage`,
-                items: [],
-                label: 'NEW',
-              },
-            ]
-          : []),
+
+        {
+          name: 'Storage',
+          key: 'storage',
+          url: `/project/${ref}/reports/storage`,
+          items: [],
+          label: 'NEW',
+        },
+
         {
           name: 'Database',
           key: 'database',

studio/components/layouts/SQLEditorLayout/QueryItem.tsx

@@ -32,7 +32,7 @@ import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEdi
 import ConfirmationModal from 'components/ui/ConfirmationModal'
 import { useContentDeleteMutation } from 'data/content/content-delete-mutation'
 import { SqlSnippet } from 'data/content/sql-snippets-query'
-import { useCheckPermissions, useFlag, useSelectedProject, useStore } from 'hooks'
+import { useCheckPermissions, useSelectedProject, useStore } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
@@ -95,7 +95,6 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
 
   const snap = useSqlEditorStateSnapshot()
   const project = useSelectedProject()
-  const sharedSnippetsFeature = useFlag<boolean>('sharedSnippets')
 
   const { mutate: deleteContent, isLoading: isDeleting } = useContentDeleteMutation({
     onSuccess(data) {
@@ -220,13 +219,13 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
               <IconEdit2 size="tiny" />
               <p>Rename query</p>
             </DropdownMenuItem>
-            {sharedSnippetsFeature && visibility === 'user' && canCreateSQLSnippet && (
+            {visibility === 'user' && canCreateSQLSnippet && (
               <DropdownMenuItem onClick={onClickShare} className="space-x-2">
                 <IconShare size="tiny" />
                 <p>Share query</p>
               </DropdownMenuItem>
             )}
-            {sharedSnippetsFeature && visibility === 'project' && canCreateSQLSnippet && (
+            {visibility === 'project' && canCreateSQLSnippet && (
               <DropdownMenuItem onClick={createPersonalCopy} className="space-x-2">
                 <IconCopy size="tiny" />
                 <p>Duplicate personal copy</p>
@@ -266,7 +265,7 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
           <div className="my-6">
             <div className="text-sm text-foreground-light grid gap-4">
               <div className="grid gap-1">
-                {sharedSnippetsFeature && visibility === 'project' && (
+                {visibility === 'project' && (
                   <Alert_Shadcn_ variant="destructive">
                     <IconAlertCircle strokeWidth={2} />
                     <AlertTitle_Shadcn_>This SQL snippet will be lost forever</AlertTitle_Shadcn_>

studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx

@@ -10,7 +10,7 @@ import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEdi
 import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { SqlSnippet, useSqlSnippetsQuery } from 'data/content/sql-snippets-query'
-import { useCheckPermissions, useFlag, useSelectedProject, useStore } from 'hooks'
+import { useCheckPermissions, useSelectedProject, useStore } from 'hooks'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
 import { useSnippets, useSqlEditorStateSnapshot } from 'state/sql-editor'
@@ -22,7 +22,6 @@ const SideBarContent = observer(() => {
   const router = useRouter()
   const { profile } = useProfile()
   const project = useSelectedProject()
-  const sharedSnippetsFeature = useFlag<boolean>('sharedSnippets')
 
   const [personalSnippetsFilterString, setPersonalSnippetsFilterString] = useState('')
   const [projectSnippetsFilterString, setProjectSnippetsFilterString] = useState('')
@@ -225,7 +224,7 @@ const SideBarContent = observer(() => {
                 </div>
               )}
 
-              {sharedSnippetsFeature && projectSnippets.length >= 1 && (
+              {projectSnippets.length >= 1 && (
                 <div className="editor-product-menu">
                   <div className="flex flex-row justify-between">
                     <Menu.Group title="Project queries" />

studio/components/layouts/SettingsLayout/AccountSettingsMenu.tsx

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

studio/pages/project/[ref]/settings/general.tsx

@@ -6,13 +6,12 @@ import {
 } from 'components/interfaces/Settings/General'
 import { SettingsLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { useFlag, useIsFeatureEnabled } from 'hooks'
+import { useIsFeatureEnabled } from 'hooks'
 import { NextPageWithLayout } from 'types'
 
 const ProjectSettings: NextPageWithLayout = () => {
   const { project } = useProjectContext()
   const isBranch = !!project?.parent_project_ref
-  const transferProjectEnabledFlag = useFlag('transferProject')
   const { projectsTransfer: projectTransferEnabled } = useIsFeatureEnabled(['projects:transfer'])
 
   // [Joshen] Opting for larger gap instead of gap-8 as compared to other pages for better grouping of content
@@ -22,7 +21,7 @@ const ProjectSettings: NextPageWithLayout = () => {
       {!isBranch ? (
         <>
           <CustomDomainConfig />
-          {projectTransferEnabled && transferProjectEnabledFlag && <TransferProjectPanel />}
+          {projectTransferEnabled && <TransferProjectPanel />}
           <DeleteProjectPanel />
         </>
       ) : null}