From 104569ea86373ca697bfcaa35b626a155f36e02a Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Thu, 11 Sep 2025 17:41:07 +0200 Subject: [PATCH] chore: use custom content for client libraries (#38633) --- .../interfaces/Home/Home.constants.ts | 46 ------------------- .../components/interfaces/Home/Home.tsx | 33 +++++-------- .../layouts/ProjectLayout/BuildingState.tsx | 23 +++------- .../custom-content/CustomContent.types.ts | 8 ++++ .../hooks/custom-content/custom-content.json | 40 ++++++++++++++++ .../custom-content/custom-content.sample.json | 8 ++++ .../custom-content/custom-content.schema.json | 17 +++++++ .../enabled-features/enabled-features.json | 1 - .../enabled-features.schema.json | 5 -- 9 files changed, 92 insertions(+), 89 deletions(-) diff --git a/apps/studio/components/interfaces/Home/Home.constants.ts b/apps/studio/components/interfaces/Home/Home.constants.ts index 46181f40fd..3c8e67b35d 100644 --- a/apps/studio/components/interfaces/Home/Home.constants.ts +++ b/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', diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx index 014d8749a8..eb61861c7b 100644 --- a/apps/studio/components/interfaces/Home/Home.tsx +++ b/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 = () => {

Client libraries

- {clientLibraries.map((library) => ( - + {clientLibraries!.map((library) => ( + // [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later. + ))}
@@ -248,9 +238,10 @@ export const Home = () => {

Example projects

{!!projectHomepageExampleProjects ? (
- {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) => ( ))}
diff --git a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx index 90f91b1671..3ac1bd4847 100644 --- a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx +++ b/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 = () => {

Client libraries

- {clientLibraries.map((library) => ( + {clientLibraries!.map((library) => ( ))}
diff --git a/apps/studio/hooks/custom-content/CustomContent.types.ts b/apps/studio/hooks/custom-content/CustomContent.types.ts index eb4729847d..7ecf9482ed 100644 --- a/apps/studio/hooks/custom-content/CustomContent.types.ts +++ b/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 diff --git a/apps/studio/hooks/custom-content/custom-content.json b/apps/studio/hooks/custom-content/custom-content.json index b7e6332bd3..8d3ad6f7b3 100644 --- a/apps/studio/hooks/custom-content/custom-content.json +++ b/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, diff --git a/apps/studio/hooks/custom-content/custom-content.sample.json b/apps/studio/hooks/custom-content/custom-content.sample.json index d19b34e4cd..3573fc9471 100644 --- a/apps/studio/hooks/custom-content/custom-content.sample.json +++ b/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", diff --git a/apps/studio/hooks/custom-content/custom-content.schema.json b/apps/studio/hooks/custom-content/custom-content.schema.json index b478095fd0..f039fa2b98 100644 --- a/apps/studio/hooks/custom-content/custom-content.schema.json +++ b/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", diff --git a/packages/common/enabled-features/enabled-features.json b/packages/common/enabled-features/enabled-features.json index be8eb9c1e7..17203725ab 100644 --- a/packages/common/enabled-features/enabled-features.json +++ b/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, diff --git a/packages/common/enabled-features/enabled-features.schema.json b/packages/common/enabled-features/enabled-features.schema.json index 546150fa8e..78fe597adf 100644 --- a/packages/common/enabled-features/enabled-features.schema.json +++ b/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",