Chore/custom content hook (supabase#38073)

* Init custom content hook

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

* Attempt to type things nicely

* add test

---------

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

Author: joshenlim

apps/studio/components/interfaces/Organization/Documents/CustomDocument.tsx

@@ -0,0 +1,33 @@
+import {
+  ScaffoldContainer,
+  ScaffoldSection,
+  ScaffoldSectionContent,
+  ScaffoldSectionDetail,
+} from 'components/layouts/Scaffold'
+import { CustomContentTypes } from 'hooks/custom-content/CustomContent.types'
+import { ExternalLink } from 'lucide-react'
+import { Button } from 'ui'
+
+interface CustomDocumentProps {
+  doc: CustomContentTypes['organizationLegalDocuments'][number]
+}
+
+export const CustomDocument = ({ doc }: CustomDocumentProps) => {
+  return (
+    <ScaffoldContainer id={doc.id}>
+      <ScaffoldSection>
+        <ScaffoldSectionDetail className="sticky top-12 flex flex-col gap-y-8">
+          <p className="text-base m-0">{doc.name}</p>
+          <p className="text-sm text-foreground-light m-0">{doc.description}</p>
+        </ScaffoldSectionDetail>
+        <ScaffoldSectionContent className="flex items-center justify-center h-full">
+          <Button asChild type="default" iconRight={<ExternalLink />}>
+            <a download href={doc.action.url} target="_blank" rel="noreferrer noopener">
+              {doc.action.text}
+            </a>
+          </Button>
+        </ScaffoldSectionContent>
+      </ScaffoldSection>
+    </ScaffoldContainer>
+  )
+}

apps/studio/components/interfaces/Organization/Documents/Documents.tsx

@@ -1,13 +1,29 @@
 import Link from 'next/link'
 
 import { ScaffoldContainer, ScaffoldDivider, ScaffoldSection } from 'components/layouts/Scaffold'
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
+import { Fragment } from 'react'
+import { CustomDocument } from './CustomDocument'
 import { DPA } from './DPA'
 import { HIPAA } from './HIPAA'
 import { SecurityQuestionnaire } from './SecurityQuestionnaire'
 import { SOC2 } from './SOC2'
 import { TIA } from './TIA'
 
 const Documents = () => {
+  const { organizationLegalDocuments } = useCustomContent(['organization:legal_documents'])
+
+  if (Array.isArray(organizationLegalDocuments)) {
+    return organizationLegalDocuments.map((doc, idx) => {
+      return (
+        <Fragment key={doc.id}>
+          <CustomDocument doc={doc} />
+          {idx !== organizationLegalDocuments.length - 1 && <ScaffoldDivider />}
+        </Fragment>
+      )
+    })
+  }
+
   return (
     <>
       <ScaffoldContainer id="dpa">

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

@@ -0,0 +1,8 @@
+export type CustomContentTypes = {
+  organizationLegalDocuments: {
+    id: string
+    name: string
+    description: string
+    action: { text: string; url: string }
+  }[]
+}

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

@@ -0,0 +1,5 @@
+{
+  "$schema": "./custom-content.schema.json",
+
+  "organization:legal_documents": null
+}

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

@@ -0,0 +1,24 @@
+{
+  "$schema": "./custom-content.schema.json",
+
+  "organization:legal_documents": [
+    {
+      "id": "doc1",
+      "name": "Document 1",
+      "description": "This is a description of Document 1",
+      "action": {
+        "text": "Download document",
+        "url": "https://supabase.com"
+      }
+    },
+    {
+      "id": "doc2",
+      "name": "Document 2",
+      "description": "This is a description of Document 2",
+      "action": {
+        "text": "Download document",
+        "url": "https://supabase.com"
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+
+    "organization:legal_documents": {
+      "type": ["array", "null"],
+      "description": "Renders a provided set of documents under the organization legal documents page",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": { "type": "string" },
+          "name": { "type": "string" },
+          "description": { "type": "string" },
+          "action": {
+            "type": "object",
+            "properties": {
+              "text": { "type": "string" },
+              "url": { "type": "string" }
+            }
+          }
+        }
+      }
+    }
+  },
+  "required": ["organization:legal_documents"],
+  "additionalProperties": false
+}

apps/studio/hooks/custom-content/useCustomContent.test.ts

@@ -0,0 +1,36 @@
+import { renderHook, cleanup } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.resetModules()
+  cleanup()
+})
+
+describe('useCustomContent', () => {
+  it('should return null if content is not found in the custom-content.json file', async () => {
+    vi.doMock('./custom-content.json', () => ({
+      default: {
+        'organization:legal_documents': null,
+      },
+    }))
+
+    const { useCustomContent } = await import('./useCustomContent')
+    const { result } = renderHook(() => useCustomContent(['organization:legal_documents']))
+    expect(result.current.organizationLegalDocuments).toEqual(null)
+  })
+
+  it('should return the content for the key passed in if it exists in the custom-content.json file', async () => {
+    vi.doMock('./custom-content.json', () => ({
+      default: {
+        'organization:legal_documents': {
+          someValue: 'foo',
+        },
+      },
+    }))
+
+    const { useCustomContent } = await import('./useCustomContent')
+    const { result } = renderHook(() => useCustomContent(['organization:legal_documents']))
+    expect(result.current.organizationLegalDocuments).toEqual({ someValue: 'foo' })
+  })
+})

apps/studio/hooks/custom-content/useCustomContent.ts

@@ -0,0 +1,44 @@
+import customContentRaw from './custom-content.json'
+import { CustomContentTypes } from './CustomContent.types'
+
+// [Joshen] See if we can de-dupe any of the logic here with enabled-features
+// For now just getting something working going first
+// Also not sure if CustomContentTypes is the right way to go here with trying to dynamically type
+
+const customContentStaticObj = customContentRaw as Omit<typeof customContentRaw, '$schema'>
+type CustomContent = keyof typeof customContentStaticObj
+
+type SnakeToCamelCase<S extends string> = S extends `${infer First}_${infer Rest}`
+  ? `${First}${SnakeToCamelCase<Capitalize<Rest>>}`
+  : S
+
+type CustomContentToCamelCase<S extends CustomContent> = S extends `${infer P}:${infer R}`
+  ? `${SnakeToCamelCase<P>}${Capitalize<SnakeToCamelCase<R>>}`
+  : SnakeToCamelCase<S>
+
+function contentToCamelCase(feature: CustomContent) {
+  return feature
+    .replace(/:/g, '_')
+    .split('_')
+    .map((word, index) => (index === 0 ? word : word[0].toUpperCase() + word.slice(1)))
+    .join('') as CustomContentToCamelCase<typeof feature>
+}
+
+const useCustomContent = <T extends CustomContent[]>(
+  contents: T
+): {
+  [key in CustomContentToCamelCase<T[number]>]:
+    | (typeof customContentStaticObj)[CustomContent]
+    | CustomContentTypes[CustomContentToCamelCase<T[number]>]
+} => {
+  // [Joshen] Running into some TS errors without the `as` here - must be overlooking something super simple
+  return Object.fromEntries(
+    contents.map((content) => [contentToCamelCase(content), customContentStaticObj[content]])
+  ) as {
+    [key in CustomContentToCamelCase<T[number]>]:
+      | (typeof customContentStaticObj)[CustomContent]
+      | CustomContentTypes[CustomContentToCamelCase<T[number]>]
+  }
+}
+
+export { useCustomContent }