Shift components in Docs out of to be cleaned

studio/components/interfaces/Docs/Authentication.tsx

@@ -1,8 +1,8 @@
 import Link from 'next/link'
 
 import { AutoApiService } from 'data/config/project-api-query'
-import CodeSnippet from '../CodeSnippet'
-import Snippets from '../Snippets'
+import CodeSnippet from './CodeSnippet'
+import Snippets from './Snippets'
 
 interface AuthenticationProps {
   autoApiService: AutoApiService

studio/components/interfaces/Docs/CodeSnippet.tsx

@@ -4,8 +4,8 @@ interface CodeSnippetProps {
   selectedLang: 'bash' | 'js'
   snippet: {
     title?: string
-    bash: { language: string; code: string }
-    js: { language: string; code: string }
+    bash: { language?: string; code: string }
+    js?: { language?: string; code: string }
   }
 }
 
@@ -14,8 +14,8 @@ const CodeSnippet = ({ selectedLang, snippet }: CodeSnippetProps) => {
   return (
     <div className="codeblock-container">
       <h4>{snippet.title}</h4>
-      <SimpleCodeBlock className={snippet[selectedLang].language}>
-        {snippet[selectedLang].code}
+      <SimpleCodeBlock className={snippet[selectedLang]?.language}>
+        {snippet[selectedLang]?.code}
       </SimpleCodeBlock>
     </div>
   )

studio/components/interfaces/Docs/Description.tsx

@@ -22,7 +22,7 @@ const temp_removePostgrestText = (content: string) => {
 
 interface DescrptionProps {
   content: string
-  metadata: { table: string; column: string; rpc: string }
+  metadata: { table?: string; column?: string; rpc?: string }
   onChange: (value: string) => void
 }
 

studio/components/interfaces/Docs/GeneralContent.tsx

@@ -1,8 +1,8 @@
-import Introduction from 'components/to-be-cleaned/Docs/Pages/Introduction'
-import Authentication from 'components/to-be-cleaned/Docs/Pages/Authentication'
-import TablesIntroduction from 'components/to-be-cleaned/Docs/Pages/Tables/Introduction'
-import UserManagement from 'components/to-be-cleaned/Docs/Pages/UserManagement'
-import RpcIntroduction from 'components/to-be-cleaned/Docs/Pages/Rpc/Introduction'
+import Introduction from 'components/interfaces/Docs/Introduction'
+import Authentication from 'components/interfaces/Docs/Authentication'
+import TablesIntroduction from 'components/interfaces/Docs/Pages/Tables/Introduction'
+import UserManagement from 'components/interfaces/Docs/Pages/UserManagement'
+import RpcIntroduction from 'components/interfaces/Docs/Pages/Rpc/Introduction'
 
 const GeneralContent = ({ autoApiService, selectedLang, page, showApiKey }: any) => {
   let selected = page?.toLowerCase()

studio/components/interfaces/Docs/GeneratingTypes.tsx

@@ -3,12 +3,12 @@ import { useState } from 'react'
 import { Button, IconDownload, IconExternalLink } from 'ui'
 
 import { useParams } from 'common/hooks'
-import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
 import { generateTypes } from 'data/projects/project-type-generation-query'
 import { useStore } from 'hooks'
 
 interface Props {
-  selectedLang: string
+  selectedLang: 'bash' | 'js'
 }
 
 export default function GeneratingTypes({ selectedLang }: Props) {

studio/components/interfaces/Docs/Introduction.tsx

@@ -1,10 +1,10 @@
 import { AutoApiService } from 'data/config/project-api-query'
-import Snippets from '../Snippets'
-import CodeSnippet from '../CodeSnippet'
+import Snippets from 'components/interfaces/Docs/Snippets'
+import CodeSnippet from './CodeSnippet'
 
 interface Props {
   autoApiService: AutoApiService
-  selectedLang: string
+  selectedLang: 'bash' | 'js'
 }
 
 export default function Introduction({ autoApiService, selectedLang }: Props) {

studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx

@@ -2,10 +2,10 @@ import { useParams } from 'common'
 import Link from 'next/link'
 
 import GeneratingTypes from 'components/interfaces/Docs/GeneratingTypes'
-import CodeSnippet from '../../CodeSnippet'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
 
 interface IntroductionProps {
-  selectedLang: string
+  selectedLang: 'bash' | 'js'
 }
 
 const Introduction = ({ selectedLang }: IntroductionProps) => {

studio/components/interfaces/Docs/Param.tsx

@@ -1,7 +1,7 @@
 import { noop } from 'lodash'
 import { Badge, IconCode, IconDatabase } from 'ui'
 
-import Description from './Description'
+import Description from 'components/interfaces/Docs/Description'
 
 function getColumnType(type: string, format: string) {
   // json and jsonb both have type=undefined, so check format instead
@@ -89,7 +89,11 @@ const Param = ({
       {description !== false && (
         <div className="grid gap-2 mt-2">
           <label className="font-mono text-xs uppercase text-scale-900">Description</label>
-          <Description content={description} metadata={metadata} onChange={onDesciptionUpdated} />
+          <Description
+            content={description.toString()}
+            metadata={metadata}
+            onChange={onDesciptionUpdated}
+          />
         </div>
       )}
     </>

studio/components/interfaces/Docs/ResourceContent.tsx

@@ -1,10 +1,10 @@
 import { useParams } from 'common'
 import { IconTable } from 'ui'
 
-import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet'
-import Description from 'components/to-be-cleaned/Docs/Description'
-import Param from 'components/to-be-cleaned/Docs/Param'
-import Snippets from 'components/to-be-cleaned/Docs/Snippets'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
+import Description from 'components/interfaces/Docs/Description'
+import Param from 'components/interfaces/Docs/Param'
+import Snippets from 'components/interfaces/Docs/Snippets'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 
 const ResourceContent = ({

studio/components/interfaces/Docs/RpcContent.tsx

@@ -1,7 +1,7 @@
-import Snippets from 'components/to-be-cleaned/Docs/Snippets'
-import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet'
-import Param from 'components/to-be-cleaned/Docs/Param'
-import Description from 'components/to-be-cleaned/Docs/Description'
+import Snippets from 'components/interfaces/Docs/Snippets'
+import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
+import Param from 'components/interfaces/Docs/Param'
+import Description from 'components/interfaces/Docs/Description'
 
 /**
  * TODO: need to support rpc with the same name and different params type

studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx

@@ -8,7 +8,7 @@ import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
 import { useCheckPermissions } from 'hooks'
 import { useParams } from 'common/hooks'
-import Snippets from 'components/to-be-cleaned/Docs/Snippets'
+import Snippets from 'components/interfaces/Docs/Snippets'
 import Panel from 'components/ui/Panel'
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'