Chore/custom content connect UI frameworks (supabase#38090)

* Init custom content hook

* Implement useCustomContent hook similarly to useIsFeatureEnabled, and implement extension of organization documents

* Attempt to type things nicely

* Add support for custom content example projects

* Add support for custom content logs explorer default query

* nit

* Add support for custom content connect UI frameworks

* Reset custom-content.json

* Smol nit

* set custom-content to null

---------

Co-authored-by: Jordi Enric <[email protected]>

Author: joshenlim

apps/studio/components/interfaces/Connect/Connect.constants.ts

@@ -64,6 +64,10 @@ export type ConnectionType = {
   label: string
   guideLink?: string
   children: ConnectionType[]
+  files?: {
+    name: string
+    content: string
+  }[]
 }
 
 export const FRAMEWORKS: ConnectionType[] = [

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

@@ -9,6 +9,7 @@ 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 { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { PROJECT_STATUS } from 'lib/constants'
@@ -30,20 +31,31 @@ import {
 } from 'ui'
 import { CONNECTION_TYPES, ConnectionType, FRAMEWORKS, MOBILES, ORMS } from './Connect.constants'
 import { getContentFilePath } from './Connect.utils'
-import ConnectDropdown from './ConnectDropdown'
-import ConnectTabContent from './ConnectTabContent'
+import { ConnectDropdown } from './ConnectDropdown'
+import { ConnectTabContent } from './ConnectTabContent'
+import { ConnectTabContentCustom } from './ConnectTabContentCustom'
 
 export const Connect = () => {
   const { ref: projectRef } = useParams()
   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 [showConnect, setShowConnect] = useQueryState(
     'showConnect',
     parseAsBoolean.withDefault(false)
   )
 
-  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 ?? ''
@@ -54,6 +66,8 @@ export const Connect = () => {
       ?.children.find((child) => child.key === selectedChild)?.children[0]?.key || ''
   )
 
+  const isFrameworkSelected = frameworks.some((x) => x.key === selectedParent)
+
   const { data: settings } = useProjectSettingsV2Query({ projectRef }, { enabled: showConnect })
   const { can: canReadAPIKeys } = useAsyncCheckProjectPermissions(
     PermissionAction.READ,
@@ -109,8 +123,8 @@ export const Connect = () => {
 
   function handleConnectionType(type: string) {
     if (type === 'frameworks') {
-      setConnectionObject(FRAMEWORKS)
-      handleConnectionTypeChange(FRAMEWORKS)
+      setConnectionObject(frameworks)
+      handleConnectionTypeChange(frameworks)
     }
 
     if (type === 'mobiles') {
@@ -207,14 +221,14 @@ export const Connect = () => {
 
         <Tabs_Shadcn_ defaultValue="direct" onValueChange={(value) => handleConnectionType(value)}>
           <TabsList_Shadcn_ className={cn('flex overflow-x-scroll gap-x-4', DIALOG_PADDING_X)}>
-            {CONNECTION_TYPES.map((type) => (
+            {connectionTypes.map((type) => (
               <TabsTrigger_Shadcn_ key={type.key} value={type.key} className="px-0">
                 {type.label}
               </TabsTrigger_Shadcn_>
             ))}
           </TabsList_Shadcn_>
 
-          {CONNECTION_TYPES.map((type) => {
+          {connectionTypes.map((type) => {
             const hasChildOptions =
               (connectionObject.find((parent) => parent.key === selectedParent)?.children.length ||
                 0) > 0
@@ -290,11 +304,18 @@ export const Connect = () => {
                 <p className="text-xs text-foreground-lighter my-3">
                   Add the following files below to your application
                 </p>
-                <ConnectTabContent
-                  projectKeys={projectKeys}
-                  filePath={filePath}
-                  className="rounded-b-none"
-                />
+                {!!connectFrameworks && isFrameworkSelected ? (
+                  <ConnectTabContentCustom
+                    projectKeys={projectKeys}
+                    framework={frameworks.find((x) => x.key === selectedParent)}
+                  />
+                ) : (
+                  <ConnectTabContent
+                    projectKeys={projectKeys}
+                    filePath={filePath}
+                    className="rounded-b-none"
+                  />
+                )}
                 <Panel.Notice
                   className="border border-t-0 rounded-lg rounded-t-none"
                   title="New API keys coming 2025"

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

@@ -14,16 +14,17 @@ import {
   Popover_Shadcn_,
   cn,
 } from 'ui'
+import { ConnectionType } from './Connect.constants'
 import { ConnectionIcon } from './ConnectionIcon'
 
 interface ConnectDropdownProps {
   state: string
   updateState: (state: string) => void
   label: string
-  items: any[]
+  items: ConnectionType[]
 }
 
-const ConnectDropdown = ({
+export const ConnectDropdown = ({
   state,
   updateState,
   label,
@@ -53,11 +54,7 @@ const ConnectDropdown = ({
             iconRight={<ChevronDown strokeWidth={1.5} />}
           >
             <div className="flex items-center gap-2">
-              {selectedItem?.icon ? (
-                <ConnectionIcon connection={selectedItem.icon} />
-              ) : (
-                <Box size={12} />
-              )}
+              {selectedItem?.icon ? <ConnectionIcon icon={selectedItem.icon} /> : <Box size={12} />}
               {selectedItem?.label}
             </div>
           </Button>
@@ -79,7 +76,7 @@ const ConnectDropdown = ({
                   }}
                   className="flex gap-2 items-center"
                 >
-                  {item.icon ? <ConnectionIcon connection={item.icon} /> : <Box size={12} />}
+                  {item.icon ? <ConnectionIcon icon={item.icon} /> : <Box size={12} />}
                   {item.label}
                   <Check
                     size={15}
@@ -94,5 +91,3 @@ const ConnectDropdown = ({
     </Popover_Shadcn_>
   )
 }
-
-export default ConnectDropdown

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

@@ -27,7 +27,7 @@ interface ConnectContentTabProps extends HTMLAttributes<HTMLDivElement> {
   }
 }
 
-const ConnectTabContent = forwardRef<HTMLDivElement, ConnectContentTabProps>(
+export const ConnectTabContent = forwardRef<HTMLDivElement, ConnectContentTabProps>(
   ({ projectKeys, filePath, ...props }, ref) => {
     const { ref: projectRef } = useParams()
     const { data: selectedOrg } = useSelectedOrganizationQuery()
@@ -102,5 +102,3 @@ const ConnectTabContent = forwardRef<HTMLDivElement, ConnectContentTabProps>(
 )
 
 ConnectTabContent.displayName = 'ConnectTabContent'
-
-export default ConnectTabContent

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

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+
+import { cn, SimpleCodeBlock } from 'ui'
+import { ConnectionType } from './Connect.constants'
+import { projectKeys } from './Connect.types'
+import {
+  ConnectTabContent,
+  ConnectTabs,
+  ConnectTabTrigger,
+  ConnectTabTriggers,
+} from './ConnectTabs'
+
+interface ConnectTabContentCustomProps {
+  projectKeys: projectKeys
+  framework?: ConnectionType
+}
+
+export const ConnectTabContentCustom = ({
+  projectKeys,
+  framework,
+}: ConnectTabContentCustomProps) => {
+  const { files = [] } = framework ?? {}
+
+  const [selectedTab, setSelectedTab] = useState<string>()
+
+  useEffect(() => {
+    if (framework?.files) setSelectedTab(framework.files[0].name)
+  }, [framework])
+
+  return (
+    <div className={cn('border rounded-lg rounded-b-none')}>
+      <ConnectTabs value={selectedTab} onValueChange={setSelectedTab}>
+        <ConnectTabTriggers>
+          {files.map((x) => (
+            <ConnectTabTrigger key={`${x.name}-tab`} value={x.name} />
+          ))}
+        </ConnectTabTriggers>
+
+        {files.map((x) => {
+          const format = x.name.split('.')[1] ?? 'bash'
+          const content = x.content
+            .replaceAll('{{apiUrl}}', projectKeys.apiUrl ?? '')
+            .replaceAll('{{anonKey}}', projectKeys.anonKey ?? '')
+            .replaceAll('{{publishableKey}}', projectKeys.publishableKey ?? '')
+          return (
+            <ConnectTabContent key={`${x.name}-content`} value={x.name}>
+              <SimpleCodeBlock className={format} parentClassName="min-h-72">
+                {content}
+              </SimpleCodeBlock>
+            </ConnectTabContent>
+          )
+        })}
+      </ConnectTabs>
+    </div>
+  )
+}

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

@@ -12,20 +12,26 @@ interface ConnectTabTriggersProps {
 
 interface ConnectFileTabProps {
   children: ReactNode[]
+  value?: string
+  onValueChange?: (value: string) => void
 }
 
 interface ConnectTabContentProps {
   children: ReactNode
   value: string
 }
-const ConnectTabs = ({ children }: ConnectFileTabProps) => {
+const ConnectTabs = ({ children, value, onValueChange }: ConnectFileTabProps) => {
   const firstChild = children[0]
 
   const defaultValue = isValidElement(firstChild)
     ? (firstChild.props as any)?.children[0]?.props?.value || ''
     : null
 
-  return <Tabs_Shadcn_ defaultValue={defaultValue}>{children}</Tabs_Shadcn_>
+  return (
+    <Tabs_Shadcn_ defaultValue={defaultValue} value={value} onValueChange={onValueChange}>
+      {children}
+    </Tabs_Shadcn_>
+  )
 }
 
 const ConnectTabTrigger = ({ value }: ConnectTabTriggerProps) => {

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

@@ -4,26 +4,29 @@ import Image from 'next/image'
 import { BASE_PATH } from 'lib/constants'
 
 interface ConnectionIconProps {
-  connection: any
+  icon: string
 }
 
-export const ConnectionIcon = ({ connection }: ConnectionIconProps) => {
+export const ConnectionIcon = ({ icon }: ConnectionIconProps) => {
   const { resolvedTheme } = useTheme()
 
-  const imageFolder = ['ionic-angular'].includes(connection) ? 'icons/frameworks' : 'libraries'
+  const imageFolder = ['ionic-angular'].includes(icon) ? 'icons/frameworks' : 'libraries'
   const imageExtension = imageFolder === 'icons/frameworks' ? '' : '-icon'
-
-  return (
-    <Image
-      className="transition-all group-hover:scale-110"
-      src={`${BASE_PATH}/img/${imageFolder}/${connection.toLowerCase()}${
-        ['expo', 'nextjs', 'prisma', 'drizzle', 'astro', 'remix'].includes(connection.toLowerCase())
+  const iconImgSrc = icon.startsWith('http')
+    ? icon
+    : `${BASE_PATH}/img/${imageFolder}/${icon.toLowerCase()}${
+        ['expo', 'nextjs', 'prisma', 'drizzle', 'astro', 'remix'].includes(icon.toLowerCase())
           ? resolvedTheme?.includes('dark')
             ? '-dark'
             : ''
           : ''
-      }${imageExtension}.svg`}
-      alt={`${connection} logo`}
+      }${imageExtension}.svg`
+
+  return (
+    <Image
+      className="transition-all group-hover:scale-110"
+      src={iconImgSrc}
+      alt={`${icon} logo`}
       width={14}
       height={14}
     />

apps/studio/components/interfaces/Connect/content/nextjs/app/supabasejs/content.tsx

@@ -1,10 +1,10 @@
 import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
+  ConnectTabContent,
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
-  ConnectTabContent,
 } from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from 'ui'
 
@@ -154,4 +154,6 @@ export const createClient = (request: NextRequest) => {
   )
 }
 
+// [Joshen] Used as a dynamic import
+// eslint-disable-next-line no-restricted-exports
 export default ContentFile

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

@@ -1,10 +1,13 @@
+import { ConnectionType } from 'components/interfaces/Connect/Connect.constants'
+
 export type CustomContentTypes = {
   organizationLegalDocuments: {
     id: string
     name: string
     description: string
     action: { text: string; url: string }
   }[]
+
   projectHomepageExampleProjects: {
     title: string
     description: string
@@ -13,4 +16,18 @@ 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: {
+    key: string
+    label: string
+    obj: ConnectionType[]
+  }
 }

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

@@ -5,5 +5,7 @@
 
   "project_homepage:example_projects": null,
 
-  "logs:default_query": null
+  "logs:default_query": null,
+
+  "connect:frameworks": null
 }