chore: move connect modal custom content to enabled features (#38695)

* chore: move connect modal custom content to enabled features

* smol

* Smol nit

* Flip back flags

---------

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

apps/studio/components/interfaces/Connect/Connect.tsx

@@ -9,8 +9,8 @@ import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import Panel from 'components/ui/Panel'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
 import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
-import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { PROJECT_STATUS } from 'lib/constants'
 import {
@@ -21,6 +21,7 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
+  DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
   TabsContent_Shadcn_,
@@ -40,15 +41,28 @@ export const Connect = () => {
   const { data: selectedProject } = useSelectedProjectQuery()
   const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
 
-  const { connectFrameworks } = useCustomContent(['connect:frameworks'])
-  const connectionTypes = !connectFrameworks
-    ? CONNECTION_TYPES
-    : [
-        { key: 'direct', label: 'Connection String', obj: [] },
-        connectFrameworks,
-        { key: 'orms', label: 'ORMs', obj: ORMS },
-      ]
-  const frameworks = !connectFrameworks ? FRAMEWORKS : connectFrameworks.obj
+  const {
+    projectConnectionShowAppFrameworks: showAppFrameworks,
+    projectConnectionShowMobileFrameworks: showMobileFrameworks,
+    projectConnectionShowOrms: showOrms,
+  } = useIsFeatureEnabled([
+    'project_connection:show_app_frameworks',
+    'project_connection:show_mobile_frameworks',
+    'project_connection:show_orms',
+  ])
+
+  const connectionTypes = CONNECTION_TYPES.filter(({ key }) => {
+    if (key === 'frameworks') {
+      return showAppFrameworks
+    }
+    if (key === 'mobiles') {
+      return showMobileFrameworks
+    }
+    if (key === 'orms') {
+      return showOrms
+    }
+    return true
+  })
 
   const [showConnect, setShowConnect] = useQueryState(
     'showConnect',
@@ -57,7 +71,7 @@ export const Connect = () => {
 
   const [tab, setTab] = useQueryState('tab', parseAsString.withDefault('direct'))
 
-  const [connectionObject, setConnectionObject] = useState<ConnectionType[]>(frameworks)
+  const [connectionObject, setConnectionObject] = useState<ConnectionType[]>(FRAMEWORKS)
   const [selectedParent, setSelectedParent] = useState(connectionObject[0].key) // aka nextjs
   const [selectedChild, setSelectedChild] = useState(
     connectionObject.find((item) => item.key === selectedParent)?.children[0]?.key ?? ''
@@ -68,7 +82,7 @@ export const Connect = () => {
       ?.children.find((child) => child.key === selectedChild)?.children[0]?.key || ''
   )
 
-  const isFrameworkSelected = frameworks.some((x) => x.key === selectedParent)
+  const isFrameworkSelected = FRAMEWORKS.some((x) => x.key === selectedParent)
 
   const { data: settings } = useProjectSettingsV2Query({ projectRef }, { enabled: showConnect })
   const { can: canReadAPIKeys } = useAsyncCheckProjectPermissions(
@@ -127,8 +141,8 @@ export const Connect = () => {
     setTab(type)
 
     if (type === 'frameworks') {
-      setConnectionObject(frameworks)
-      handleConnectionTypeChange(frameworks)
+      setConnectionObject(FRAMEWORKS)
+      handleConnectionTypeChange(FRAMEWORKS)
     }
 
     if (type === 'mobiles') {
@@ -226,20 +240,27 @@ export const Connect = () => {
       </DialogTrigger>
       <DialogContent className={cn('sm:max-w-5xl p-0')} centered={false}>
         <DialogHeader className={DIALOG_PADDING_X}>
-          <DialogTitle>Connect to your project</DialogTitle>
+          <DialogTitle>
+            Connect to your project
+            {connectionTypes.length === 1 ? ` via ${connectionTypes[0].label.toLowerCase()}` : null}
+          </DialogTitle>
           <DialogDescription>
             Get the connection strings and environment variables for your app
           </DialogDescription>
         </DialogHeader>
 
         <Tabs_Shadcn_ defaultValue={tab} onValueChange={(value) => handleConnectionType(value)}>
-          <TabsList_Shadcn_ className={cn('flex overflow-x-scroll gap-x-4', DIALOG_PADDING_X)}>
-            {connectionTypes.map((type) => (
-              <TabsTrigger_Shadcn_ key={type.key} value={type.key} className="px-0">
-                {type.label}
-              </TabsTrigger_Shadcn_>
-            ))}
-          </TabsList_Shadcn_>
+          {connectionTypes.length > 1 ? (
+            <TabsList_Shadcn_ className={cn('flex overflow-x-scroll gap-x-4', DIALOG_PADDING_X)}>
+              {connectionTypes.map((type) => (
+                <TabsTrigger_Shadcn_ key={type.key} value={type.key} className="px-0">
+                  {type.label}
+                </TabsTrigger_Shadcn_>
+              ))}
+            </TabsList_Shadcn_>
+          ) : (
+            <DialogSectionSeparator />
+          )}
 
           {connectionTypes.map((type) => {
             const hasChildOptions =
@@ -317,10 +338,10 @@ export const Connect = () => {
                 <p className="text-xs text-foreground-lighter my-3">
                   Add the following files below to your application
                 </p>
-                {!!connectFrameworks && isFrameworkSelected ? (
+                {isFrameworkSelected ? (
                   <ConnectTabContentCustom
                     projectKeys={projectKeys}
-                    framework={frameworks.find((x) => x.key === selectedParent)}
+                    framework={FRAMEWORKS.find((x) => x.key === selectedParent)}
                   />
                 ) : (
                   <ConnectTabContent

apps/studio/hooks/custom-content/CustomContent.types.ts

@@ -1,4 +1,3 @@
-import { CONNECTION_TYPES } from 'components/interfaces/Connect/Connect.constants'
 import type { CloudProvider } from 'shared-data'
 
 export type CustomContentTypes = {
@@ -28,16 +27,6 @@ export type CustomContentTypes = {
 
   logsDefaultQuery: string
 
-  /**
-   * When declaring files for each framework, there are 3 properties that can be dynamically rendered into the file content using handlebar notation:
-   * - {{apiUrl}}: The API URL of the project
-   * - {{anonKey}}: The anonymous key of the project (if still using legacy API keys)
-   * - {{publishableKey}}: The publishable API key of the project (if using new API keys)
-   *
-   * These could be helpful in rendering, for e.g an environment file like `.env`
-   */
-  connectFrameworks: (typeof CONNECTION_TYPES)[number]
-
   infraCloudProviders: CloudProvider[]
 
   sslCertificateUrl: string

apps/studio/hooks/custom-content/custom-content.json

@@ -49,8 +49,6 @@
 
   "logs:default_query": null,
 
-  "connect:frameworks": null,
-
   "infra:cloud_providers": ["AWS", "AWS_K8S", "FLY"],
 
   "ssl:certificate_url": "https://supabase-downloads.s3-ap-southeast-1.amazonaws.com/${env}/ssl/${env}-ca-2021.crt"

apps/studio/hooks/custom-content/custom-content.schema.json

@@ -66,35 +66,6 @@
       "description": "Renders a default query when landing on the logs explorer"
     },
 
-    "connect:frameworks": {
-      "type": ["object", "null"],
-      "description": "Replaces the frameworks tab in the Connect modal when a defined set of frameworks",
-      "properties": {
-        "key": { "type": "string" },
-        "label": { "type": "string" },
-        "obj": {
-          "type": "array",
-          "items": {
-            "type": "object",
-            "properties": {
-              "key": { "type": "string" },
-              "icon": { "type": "string" },
-              "label": { "type": "string" },
-              "guideLink": { "type": "string" },
-              "children": { "type": "array" },
-              "files": {
-                "type": "array",
-                "properties": {
-                  "name": { "type": "string" },
-                  "content": { "type": "string" }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-
     "infra:cloud_providers": {
       "type": ["array"],
       "description": "Filters the valid cloud providers",
@@ -114,7 +85,6 @@
     "project_homepage:client_libraries",
     "project_homepage:example_projects",
     "logs:default_query",
-    "connect:frameworks",
     "infra:cloud_providers",
     "ssl:certificate_url"
   ],

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

@@ -53,6 +53,9 @@
 
   "project_connection:javascript_example": true,
   "project_connection:dart_example": true,
+  "project_connection:show_app_frameworks": true,
+  "project_connection:show_mobile_frameworks": true,
+  "project_connection:show_orms": true,
 
   "project_creation:show_advanced_config": true,
 

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

@@ -178,6 +178,18 @@
       "type": "boolean",
       "description": "Show the dart example in the project connection settings"
     },
+    "project_connection:show_app_frameworks": {
+      "type": "boolean",
+      "description": "Show the app frameworks tab in the connect modal"
+    },
+    "project_connection:show_mobile_frameworks": {
+      "type": "boolean",
+      "description": "Show the mobile frameworks tab in the connect modal"
+    },
+    "project_connection:show_orms": {
+      "type": "boolean",
+      "description": "Show the orms tab in the connect modal"
+    },
 
     "project_creation:show_advanced_config": {
       "type": "boolean",
@@ -289,6 +301,9 @@
     "project_settings:log_drains",
     "project_connection:javascript_example",
     "project_connection:dart_example",
+    "project_connection:show_app_frameworks",
+    "project_connection:show_mobile_frameworks",
+    "project_connection:show_orms",
     "reports:all",
     "sdk:csharp",
     "sdk:dart",