feat: disable logs features (#37989)

* feat: disable logs features

* Nit tidy up

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx

@@ -1,5 +1,4 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { ChevronRight, CircleHelpIcon, FilePlus, Plus } from 'lucide-react'
+import { ChevronRight, CircleHelpIcon, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -13,13 +12,14 @@ import SavedQueriesItem from 'components/interfaces/Settings/Logs/Logs.SavedQuer
 import { LogsSidebarItem } from 'components/interfaces/Settings/Logs/SidebarV2/SidebarItem'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useContentQuery } from 'data/content/content-query'
-import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useReplicationSourcesQuery } from 'data/replication/sources-query'
 import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useFlag } from 'hooks/ui/useFlag'
 import {
   Badge,
   Button,
+  cn,
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
@@ -33,7 +33,6 @@ import {
 } from 'ui-patterns/InnerSideMenu'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { FeaturePreviewSidebarPanel } from '../../ui/FeaturePreviewSidebarPanel'
-import { useReplicationSourcesQuery } from 'data/replication/sources-query'
 
 const SupaIcon = ({ className }: { className?: string }) => {
   return (
@@ -90,7 +89,15 @@ export function LogsSidebarMenuV2() {
     projectAuthAll: authEnabled,
     projectStorageAll: storageEnabled,
     realtimeAll: realtimeEnabled,
-  } = useIsFeatureEnabled(['project_storage:all', 'project_auth:all', 'realtime:all'])
+    logsTemplates: templatesEnabled,
+    logsCollections: collectionsEnabled,
+  } = useIsFeatureEnabled([
+    'project_storage:all',
+    'project_auth:all',
+    'realtime:all',
+    'logs:templates',
+    'logs:collections',
+  ])
 
   const enablePgReplicate = useFlag('enablePgReplicate')
   const { data: etlData, isLoading: isETLLoading } = useReplicationSourcesQuery(
@@ -227,7 +234,7 @@ export function LogsSidebarMenuV2() {
 
   return (
     <div className="pb-12 relative">
-      {IS_PLATFORM && (
+      {IS_PLATFORM && !isUnifiedLogsPreviewAvailable && (
         <FeaturePreviewSidebarPanel
           className="mx-4 mt-4"
           illustration={<Badge variant="default">Coming soon</Badge>}
@@ -272,7 +279,12 @@ export function LogsSidebarMenuV2() {
         />
       )}
 
-      <div className="flex gap-2 p-4 items-center sticky top-0 bg-background-200 z-[1]">
+      <div
+        className={cn(
+          'flex gap-x-2 items-center sticky top-0 bg-background-200 z-[1] px-4',
+          !templatesEnabled ? 'pt-4' : 'py-4'
+        )}
+      >
         <InnerSideBarFilters className="w-full p-0 gap-0">
           <InnerSideBarFilterSearchInput
             name="search-collections"
@@ -290,48 +302,54 @@ export function LogsSidebarMenuV2() {
           onClick={() => router.push(`/project/${ref}/logs/explorer`)}
         />
       </div>
-      <div className="px-2">
-        <InnerSideMenuItem
-          title="Templates"
-          isActive={isActive(`/project/${ref}/logs/explorer/templates`)}
-          href={`/project/${ref}/logs/explorer/templates`}
-        >
-          Templates
-        </InnerSideMenuItem>
-      </div>
-      <Separator className="my-4" />
-
-      <SidebarCollapsible title="Collections" defaultOpen={true}>
-        {filteredLogs.map((collection) => {
-          const isItemActive = isActive(collection.url)
-          return (
-            <LogsSidebarItem
-              key={collection.key}
-              isActive={isItemActive}
-              href={collection.url}
-              icon={<SupaIcon className="text-foreground-light" />}
-              label={collection.name}
-            />
-          )
-        })}
-      </SidebarCollapsible>
-      {OPERATIONAL_COLLECTIONS.length > 0 && (
-        <>
-          <Separator className="my-4" />
-          <SidebarCollapsible title="Database operations" defaultOpen={true}>
-            {filteredOperationalLogs.map((collection) => (
-              <LogsSidebarItem
-                key={collection.key}
-                isActive={isActive(collection.url)}
-                href={collection.url}
-                icon={<SupaIcon className="text-foreground-light" />}
-                label={collection.name}
-              />
-            ))}
-          </SidebarCollapsible>
-        </>
+      {templatesEnabled && (
+        <div className="px-2">
+          <InnerSideMenuItem
+            title="Templates"
+            isActive={isActive(`/project/${ref}/logs/explorer/templates`)}
+            href={`/project/${ref}/logs/explorer/templates`}
+          >
+            Templates
+          </InnerSideMenuItem>
+        </div>
       )}
       <Separator className="my-4" />
+
+      {collectionsEnabled && (
+        <>
+          <SidebarCollapsible title="Collections" defaultOpen={true}>
+            {filteredLogs.map((collection) => {
+              const isItemActive = isActive(collection.url)
+              return (
+                <LogsSidebarItem
+                  key={collection.key}
+                  isActive={isItemActive}
+                  href={collection.url}
+                  icon={<SupaIcon className="text-foreground-light" />}
+                  label={collection.name}
+                />
+              )
+            })}
+          </SidebarCollapsible>
+          {OPERATIONAL_COLLECTIONS.length > 0 && (
+            <>
+              <Separator className="my-4" />
+              <SidebarCollapsible title="Database operations" defaultOpen={true}>
+                {filteredOperationalLogs.map((collection) => (
+                  <LogsSidebarItem
+                    key={collection.key}
+                    isActive={isActive(collection.url)}
+                    href={collection.url}
+                    icon={<SupaIcon className="text-foreground-light" />}
+                    label={collection.name}
+                  />
+                ))}
+              </SidebarCollapsible>
+            </>
+          )}
+          <Separator className="my-4" />
+        </>
+      )}
       <SidebarCollapsible title="Queries" defaultOpen={true}>
         {savedQueriesLoading && (
           <div className="p-4">

apps/studio/components/ui/UnknownInterface.tsx

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
+
+export const UnknownInterface = ({ urlBack }: { urlBack: string }) => {
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <Admonition
+        type="note"
+        className="max-w-xl"
+        title="Looking for something?"
+        description="We couldn't find the page that you're looking for"
+      >
+        <Button asChild type="default" className="mt-2">
+          <Link href={urlBack}>Head back</Link>
+        </Button>
+      </Admonition>
+    </div>
+  )
+}

apps/studio/pages/project/[ref]/logs/explorer/templates.tsx

@@ -1,18 +1,25 @@
 import { useParams } from 'common'
 import { CodeIcon } from 'lucide-react'
 import { useState } from 'react'
-import { Button, Popover, cn } from 'ui'
 
 import { TEMPLATES } from 'components/interfaces/Settings/Logs/Logs.constants'
 import type { LogTemplate } from 'components/interfaces/Settings/Logs/Logs.types'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import CardButton from 'components/ui/CardButton'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
+import { UnknownInterface } from 'components/ui/UnknownInterface'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import type { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
+import { Button, Popover, cn } from 'ui'
 
 export const LogsTemplatesPage: NextPageWithLayout = () => {
   const { ref: projectRef } = useParams()
+  const isTemplatesEnabled = useIsFeatureEnabled('logs:templates')
+
+  if (!isTemplatesEnabled) {
+    return <UnknownInterface urlBack={`/project/${projectRef}/logs/explorer`} />
+  }
 
   return (
     <div className="mx-auto h-full w-full px-5 py-6">

packages/common/enabled-features/enabled-features.json

@@ -1,6 +1,9 @@
 {
   "$schema": "./enabled-features.schema.json",
 
+  "logs:templates": true,
+  "logs:collections": true,
+
   "profile:show_email": true,
   "profile:update": true
 }

packages/common/enabled-features/enabled-features.schema.json

@@ -6,6 +6,15 @@
       "type": "string"
     },
 
+    "logs:templates": {
+      "type": "boolean",
+      "description": "Enable the logs templates page"
+    },
+    "logs:collections": {
+      "type": "boolean",
+      "description": "Enable the logs collections page"
+    },
+
     "profile:show_email": {
       "type": "boolean",
       "description": "Show the user's email address in the toolbar"
@@ -15,6 +24,6 @@
       "description": "Allow the user to change their profile information (first name, last name)"
     }
   },
-  "required": ["profile:show_email", "profile:update"],
+  "required": ["profile:show_email", "profile:update", "logs:templates", "logs:collections"],
   "additionalProperties": false
 }