chore: use custom content for client libraries (#38633)

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

@@ -1,49 +1,3 @@
-export const CLIENT_LIBRARIES = [
-  {
-    language: 'JavaScript',
-    officialSupport: true,
-    releaseState: undefined,
-    docsUrl: 'https://supabase.com/docs/reference/javascript/installing',
-    gitUrl: 'https://github.com/supabase/supabase-js',
-  },
-  {
-    language: 'Flutter',
-    officialSupport: true,
-    releaseState: undefined,
-    docsUrl: 'https://supabase.com/docs/reference/dart/installing',
-    gitUrl: 'https://github.com/supabase/supabase-flutter',
-  },
-  {
-    language: 'Python',
-    officialSupport: true,
-    releaseState: 'Alpha',
-    docsUrl: 'https://supabase.com/docs/reference/python/initializing',
-    gitUrl: 'https://github.com/supabase/supabase-py',
-  },
-  {
-    language: 'C#',
-    officialSupport: false,
-    releaseState: undefined,
-    docsUrl: 'https://supabase.com/docs/reference/csharp/installing',
-    gitUrl: 'https://github.com/supabase-community/supabase-csharp',
-    altIconName: 'c-sharp',
-  },
-  {
-    language: 'Swift',
-    officialSupport: true,
-    releaseState: undefined,
-    docsUrl: 'https://supabase.com/docs/reference/swift/initializing',
-    gitUrl: 'https://github.com/supabase/supabase-swift',
-  },
-  {
-    language: 'Kotlin',
-    officialSupport: false,
-    releaseState: undefined,
-    docsUrl: 'https://supabase.com/docs/reference/kotlin/installing',
-    gitUrl: 'https://github.com/supabase-community/supabase-kt',
-  },
-]
-
 export const EXAMPLE_PROJECTS = [
   {
     framework: 'Svelte',

apps/studio/components/interfaces/Home/Home.tsx

@@ -1,12 +1,12 @@
 import dayjs from 'dayjs'
 import Link from 'next/link'
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { useParams } from 'common'
 import { ClientLibrary } from 'components/interfaces/Home'
 import { AdvisorWidget } from 'components/interfaces/Home/AdvisorWidget'
 import { ExampleProject } from 'components/interfaces/Home/ExampleProject'
-import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
+import { EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import { NewProjectPanel } from 'components/interfaces/Home/NewProjectPanel/NewProjectPanel'
 import { ProjectUsageSection } from 'components/interfaces/Home/ProjectUsageSection'
 import { ServiceStatus } from 'components/interfaces/Home/ServiceStatus'
@@ -49,24 +49,13 @@ export const Home = () => {
   const snap = useAppStateSnapshot()
   const { ref, enableBranching } = useParams()
 
-  const { projectHomepageExampleProjects } = useCustomContent(['project_homepage:example_projects'])
+  const { projectHomepageExampleProjects, projectHomepageClientLibraries: clientLibraries } =
+    useCustomContent(['project_homepage:example_projects', 'project_homepage:client_libraries'])
 
   const {
-    projectHomepageShowAllClientLibraries: showAllClientLibraries,
     projectHomepageShowInstanceSize: showInstanceSize,
     projectHomepageShowExamples: showExamples,
-  } = useIsFeatureEnabled([
-    'project_homepage:show_all_client_libraries',
-    'project_homepage:show_instance_size',
-    'project_homepage:show_examples',
-  ])
-
-  const clientLibraries = useMemo(() => {
-    if (showAllClientLibraries) {
-      return CLIENT_LIBRARIES
-    }
-    return CLIENT_LIBRARIES.filter((library) => library.language === 'JavaScript')
-  }, [showAllClientLibraries])
+  } = useIsFeatureEnabled(['project_homepage:show_instance_size', 'project_homepage:show_examples'])
 
   const hasShownEnableBranchingModalRef = useRef(false)
   const isPaused = project?.status === PROJECT_STATUS.INACTIVE
@@ -238,8 +227,9 @@ export const Home = () => {
                   <div className="space-y-8">
                     <h2 className="text-lg">Client libraries</h2>
                     <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:gap-12 mb-12 md:grid-cols-3">
-                      {clientLibraries.map((library) => (
-                        <ClientLibrary key={library.language} {...library} />
+                      {clientLibraries!.map((library) => (
+                        // [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later.
+                        <ClientLibrary key={(library as any).language} {...(library as any)} />
                       ))}
                     </div>
                   </div>
@@ -248,9 +238,10 @@ export const Home = () => {
                       <h4 className="text-lg">Example projects</h4>
                       {!!projectHomepageExampleProjects ? (
                         <div className="grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
-                          {projectHomepageExampleProjects
-                            .sort((a, b) => a.title.localeCompare(b.title))
-                            .map((project) => (
+                          {/* [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later. */}
+                          {(projectHomepageExampleProjects as any)
+                            .sort((a: any, b: any) => a.title.localeCompare(b.title))
+                            .map((project: any) => (
                               <ExampleProject key={project.url} {...project} />
                             ))}
                         </div>

apps/studio/components/layouts/ProjectLayout/BuildingState.tsx

@@ -1,16 +1,16 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { ArrowRight, Loader2 } from 'lucide-react'
 import Link from 'next/link'
-import { useMemo } from 'react'
 
 import { useParams } from 'common'
 import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
 import { ExampleProject } from 'components/interfaces/Home/ExampleProject'
-import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
+import { EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
 import { invalidateProjectDetailsQuery } from 'data/projects/project-detail-query'
 import { useProjectStatusQuery } from 'data/projects/project-status-query'
 import { invalidateProjectsQuery } from 'data/projects/projects-query'
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { PROJECT_STATUS } from 'lib/constants'
@@ -21,20 +21,11 @@ const BuildingState = () => {
   const { data: project } = useSelectedProjectQuery()
   const queryClient = useQueryClient()
 
-  const {
-    projectHomepageShowAllClientLibraries: showAllClientLibraries,
-    projectHomepageShowExamples: showExamples,
-  } = useIsFeatureEnabled([
-    'project_homepage:show_all_client_libraries',
-    'project_homepage:show_examples',
-  ])
+  const showExamples = useIsFeatureEnabled('project_homepage:show_examples')
 
-  const clientLibraries = useMemo(() => {
-    if (showAllClientLibraries) {
-      return CLIENT_LIBRARIES
-    }
-    return CLIENT_LIBRARIES.filter((library) => library.language === 'JavaScript')
-  }, [showAllClientLibraries])
+  const { projectHomepageClientLibraries: clientLibraries } = useCustomContent([
+    'project_homepage:client_libraries',
+  ])
 
   useProjectStatusQuery(
     { projectRef: ref },
@@ -142,7 +133,7 @@ const BuildingState = () => {
               <h4 className="text-lg">Client libraries</h4>
             </div>
             <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:gap-12 mx-6 mb-12 md:grid-cols-3">
-              {clientLibraries.map((library) => (
+              {clientLibraries!.map((library) => (
                 <ClientLibrary key={library.language} {...library} />
               ))}
             </div>

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

@@ -11,6 +11,14 @@ export type CustomContentTypes = {
     action: { text: string; url: string }
   }[]
 
+  projectHomepageClientLibraries: {
+    language: string
+    officialSupport: boolean
+    releaseState?: string
+    docsUrl: string
+    gitUrl: string
+    altIconName?: string
+  }[]
   projectHomepageExampleProjects: {
     title: string
     description: string

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

@@ -5,6 +5,46 @@
 
   "organization:legal_documents": null,
 
+  "project_homepage:client_libraries": [
+    {
+      "language": "JavaScript",
+      "officialSupport": true,
+      "docsUrl": "https://supabase.com/docs/reference/javascript/installing",
+      "gitUrl": "https://github.com/supabase/supabase-js"
+    },
+    {
+      "language": "Flutter",
+      "officialSupport": true,
+      "docsUrl": "https://supabase.com/docs/reference/dart/installing",
+      "gitUrl": "https://github.com/supabase/supabase-flutter"
+    },
+    {
+      "language": "Python",
+      "officialSupport": true,
+      "releaseState": "Alpha",
+      "docsUrl": "https://supabase.com/docs/reference/python/initializing",
+      "gitUrl": "https://github.com/supabase/supabase-py"
+    },
+    {
+      "language": "C#",
+      "officialSupport": false,
+      "docsUrl": "https://supabase.com/docs/reference/csharp/installing",
+      "gitUrl": "https://github.com/supabase-community/supabase-csharp",
+      "altIconName": "c-sharp"
+    },
+    {
+      "language": "Swift",
+      "officialSupport": true,
+      "docsUrl": "https://supabase.com/docs/reference/swift/initializing",
+      "gitUrl": "https://github.com/supabase/supabase-swift"
+    },
+    {
+      "language": "Kotlin",
+      "officialSupport": false,
+      "docsUrl": "https://supabase.com/docs/reference/kotlin/installing",
+      "gitUrl": "https://github.com/supabase-community/supabase-kt"
+    }
+  ],
   "project_homepage:example_projects": null,
 
   "logs:default_query": null,

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

@@ -24,6 +24,14 @@
     }
   ],
 
+  "project_homepage:client_libraries": [
+    {
+      "language": "JavaScript",
+      "officialSupport": true,
+      "docsUrl": "https://supabase.com/docs/reference/javascript/installing",
+      "gitUrl": "https://github.com/supabase/supabase-js"
+    }
+  ],
   "project_homepage:example_projects": [
     {
       "title": "Framework 1",

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

@@ -31,6 +31,22 @@
       }
     },
 
+    "project_homepage:client_libraries": {
+      "type": "array",
+      "description": "Renders a provided set of client libraries under the project's home page",
+      "items": {
+        "type": "object",
+        "properties": {
+          "language": { "type": "string" },
+          "officialSupport": { "type": "boolean" },
+          "releaseState": { "type": "string" },
+          "docsUrl": { "type": "string" },
+          "gitUrl": { "type": "string" },
+          "altIconName": { "type": "string" }
+        },
+        "required": ["language", "officialSupport", "docsUrl", "gitUrl"]
+      }
+    },
     "project_homepage:example_projects": {
       "type": ["array", "null"],
       "description": "Renders a provided set of example projects under the project's home page",
@@ -95,6 +111,7 @@
   },
   "required": [
     "organization:legal_documents",
+    "project_homepage:client_libraries",
     "project_homepage:example_projects",
     "logs:default_query",
     "connect:frameworks",

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

@@ -53,7 +53,6 @@
 
   "project_creation:show_advanced_config": true,
 
-  "project_homepage:show_all_client_libraries": true,
   "project_homepage:show_instance_size": true,
   "project_homepage:show_examples": true,
 

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

@@ -183,10 +183,6 @@
       "type": "boolean",
       "description": "Show the example projects in the project homepage"
     },
-    "project_homepage:show_all_client_libraries": {
-      "type": "boolean",
-      "description": "Show all client libraries examples in the project homepage. When false, all client library examples will be hidden except the JavaScript client library."
-    },
 
     "project_addons:dedicated_ipv4_address": {
       "type": "boolean",
@@ -276,7 +272,6 @@
     "project_creation:show_advanced_config",
     "project_homepage:show_instance_size",
     "project_homepage:show_examples",
-    "project_homepage:show_all_client_libraries",
     "project_addons:dedicated_ipv4_address",
     "project_settings:custom_domains",
     "project_settings:show_disable_legacy_api_keys",