From 99a9edf28cdb9d55b6bc2fef0ddea8c1ecc7864c Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Sun, 5 Feb 2023 17:50:56 -0330 Subject: [PATCH 01/16] Mock autodocs into table editor --- studio/components/grid/types/grid.ts | 5 + .../TableGridEditor/GridHeaderActions.tsx | 20 +++- .../TableGridEditor/TableGridEditor.tsx | 103 +++++++++++++++++- 3 files changed, 125 insertions(+), 3 deletions(-) diff --git a/studio/components/grid/types/grid.ts b/studio/components/grid/types/grid.ts index e05352cfdfc..68c3dc73220 100644 --- a/studio/components/grid/types/grid.ts +++ b/studio/components/grid/types/grid.ts @@ -69,6 +69,11 @@ export interface SupabaseGridProps { * error handler */ onError?: (error: any) => void + /** + * Toggle api preview panel open + */ + apiPreviewPanelOpen?: boolean + setApiPreviewPanelOpen?: () => void } export interface SupabaseGridRef { diff --git a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx index 198e9a2a964..c21c62febe1 100644 --- a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx +++ b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx @@ -1,21 +1,37 @@ import { FC } from 'react' import Link from 'next/link' -import { Button, IconAlertCircle, IconLock } from 'ui' +import { Button, IconAlertCircle, IconCode, IconLock } from 'ui' import type { PostgresPolicy, PostgresTable } from '@supabase/postgres-meta' import { useStore } from 'hooks' interface Props { table: PostgresTable + apiPreviewPanelOpen: boolean + setApiPreviewPanelOpen: (apiPreviewPanelOpen: boolean) => void } -const GridHeaderActions: FC = ({ table }) => { +const GridHeaderActions: FC = ({ table, apiPreviewPanelOpen, setApiPreviewPanelOpen }) => { const { ui, meta } = useStore() const projectRef = ui.selectedProject?.ref const policies = meta.policies.list((policy: PostgresPolicy) => policy.table_id === table.id) + const RenderAPIPreviewToggle = () => { + return ( + + ) + } + return (
+ + + {selectedLang == 'bash' && ( +
+
+ + Project API key : +
+ + setShowApiKey(DEFAULT_KEY)}> + hide + + {apiKey && ( + + setShowApiKey({ + key: apiKey, + name: 'anon (public)', + }) + } + > + anon (public) + + )} + {canReadServiceKey && ( + + setShowApiKey({ + key: autoApiService.serviceApiKey, + name: 'service_role (secret)', + }) + } + > + service_role (secret) + + )} + + } + > + + +
+ )} +
+ + ) +} + +export default LangSelector diff --git a/studio/components/to-be-cleaned/Docs/Param.tsx b/studio/components/to-be-cleaned/Docs/Param.tsx index 3ff95984a62..247cfd9d4c9 100644 --- a/studio/components/to-be-cleaned/Docs/Param.tsx +++ b/studio/components/to-be-cleaned/Docs/Param.tsx @@ -51,7 +51,7 @@ const Param: FC = ({
- {name} + {name}
diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx index 4a793b45190..1ad4f4968f6 100644 --- a/studio/pages/project/[ref]/api/index.tsx +++ b/studio/pages/project/[ref]/api/index.tsx @@ -12,6 +12,7 @@ import { DocsLayout } from 'components/layouts' import { GeneralContent, ResourceContent, RpcContent } from 'components/interfaces/Docs' import { PermissionAction } from '@supabase/shared-types/out/constants' import { useProjectSettingsQuery } from 'data/config/project-settings-query' +import LangSelector from 'components/to-be-cleaned/Docs/LangSelector' const PageContext = createContext(null) @@ -128,10 +129,18 @@ const DocView: FC = observer(({}) => { const PAGE_KEY: any = resource || rpc || page || 'index' return ( -
+
-
+ + {/*
)}
-
+
*/}
{resource ? ( diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss index d4515a3f090..2fa8033d916 100644 --- a/studio/styles/ui.scss +++ b/studio/styles/ui.scss @@ -234,6 +234,10 @@ @apply prose prose-docs prose-sm max-w-none; } + &.Docs--table-editor .doc-section__table-name { + @apply mt-12; + } + .text { @apply p-4 px-6 w-1/2; max-width: 50%; From fae9a272759051079f8270921757fe66ba6a0aea Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 10 Feb 2023 16:42:25 -0330 Subject: [PATCH 06/16] Update --- .../ui/src/components/SidePanel/SidePanel.tsx | 2 +- packages/ui/src/lib/theme/defaultTheme.ts | 327 +++++++++--------- .../TableGridEditor/TableGridEditor.tsx | 8 +- .../to-be-cleaned/Docs/CodeSnippet.js | 5 +- .../to-be-cleaned/Docs/LangSelector.tsx | 2 +- .../components/to-be-cleaned/Docs/Param.tsx | 10 +- studio/styles/ui.scss | 5 +- 7 files changed, 181 insertions(+), 178 deletions(-) diff --git a/packages/ui/src/components/SidePanel/SidePanel.tsx b/packages/ui/src/components/SidePanel/SidePanel.tsx index e105fe85d91..ba0ed494a53 100644 --- a/packages/ui/src/components/SidePanel/SidePanel.tsx +++ b/packages/ui/src/components/SidePanel/SidePanel.tsx @@ -22,7 +22,7 @@ interface CustomProps { children?: React.ReactNode header?: string | React.ReactNode visible: boolean - size?: 'medium' | 'large' | 'xlarge' + size?: 'medium' | 'large' | 'xlarge' | 'xxlarge' loading?: boolean align?: 'right' | 'left' hideFooter?: boolean diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts index 1265d536a10..35de4089bd7 100644 --- a/packages/ui/src/lib/theme/defaultTheme.ts +++ b/packages/ui/src/lib/theme/defaultTheme.ts @@ -117,9 +117,9 @@ export default { flex flex-row gap-3 items-center - w-full - text-left - cursor-pointer + w-full + text-left + cursor-pointer outline-none focus-visible:ring-1 @@ -143,27 +143,27 @@ export default { group border border-scale-700 - + first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md `, trigger: ` flex flex-row items-center - px-6 py-4 - w-full - text-left - cursor-pointer - - font-medium - text-base - bg-transparent + px-6 py-4 + w-full + text-left + cursor-pointer + + font-medium + text-base + bg-transparent outline-none focus-visible:ring-1 focus-visible:z-50 ring-scale-1100 - + transition-colors hover:bg-scale-200 @@ -252,8 +252,8 @@ export default { alert: { base: ` - relative rounded border py-4 px-6 - flex space-x-4 items-start + relative rounded border py-4 px-6 + flex space-x-4 items-start `, header: 'block text-sm font-normal mb-1', description: `text-xs`, @@ -290,11 +290,11 @@ export default { }, }, close: ` - absolute - right-6 top-4 - p-0 m-0 + absolute + right-6 top-4 + p-0 m-0 text-scale-900 - cursor-pointer transition ease-in-out + cursor-pointer transition ease-in-out bg-transparent border-transparent focus:outline-none opacity-50 hover:opacity-100`, }, @@ -306,15 +306,15 @@ export default { card: { base: ` bg-white dark:bg-scaleDark-700 - - border - ${defaults.border.primary} - flex flex-col + border + ${defaults.border.primary} + + flex flex-col rounded-md shadow-lg overflow-hidden relative `, hoverable: 'transition hover:-translate-y-1 hover:shadow-2xl', - head: `px-8 py-6 flex justify-between + head: `px-8 py-6 flex justify-between border-b ${defaults.border.primary} `, content: 'p-8', @@ -328,20 +328,20 @@ export default { base: `w-full justify-between space-y-4`, underlined: { list: ` - flex items-center border-b + flex items-center border-b ${defaults.border.secondary} `, - base: ` - relative - cursor-pointer - text-scale-900 - flex - items-center + base: ` + relative + cursor-pointer + text-scale-900 + flex + items-center space-x-2 - text-center + text-center transition - focus:outline-none - focus-visible:ring + focus:outline-none + focus-visible:ring focus-visible:ring-scale-700 focus-visible:border-scale-900 `, @@ -355,18 +355,18 @@ export default { }, pills: { list: 'flex space-x-1', - base: ` - relative - cursor-pointer - flex - items-center + base: ` + relative + cursor-pointer + flex + items-center space-x-2 - text-center + text-center transition shadow-sm rounded - focus:outline-none - focus-visible:ring + focus:outline-none + focus-visible:ring focus-visible:ring-scale-700 focus-visible:border-scale-900 `, @@ -378,23 +378,23 @@ export default { active: ` bg-scale-1200 text-scale-200 - border-scale-1200 + border-scale-1200 `, }, 'rounded-pills': { list: 'flex flex-wrap gap-2', - base: ` - relative - cursor-pointer - flex - items-center + base: ` + relative + cursor-pointer + flex + items-center space-x-2 - text-center + text-center transition shadow-sm rounded-full - focus:outline-none - focus-visible:ring + focus:outline-none + focus-visible:ring focus-visible:ring-scale-700 focus-visible:border-scale-900 `, @@ -406,7 +406,7 @@ export default { active: ` bg-scale-1200 text-scale-200 - border-scale-1200 + border-scale-1200 `, }, block: 'w-full flex items-center justify-center', @@ -427,15 +427,15 @@ export default { button: { base: ` - relative - cursor-pointer - inline-flex items-center space-x-2 - text-center + relative + cursor-pointer + inline-flex items-center space-x-2 + text-center font-regular - transition ease-out duration-200 - rounded + transition ease-out duration-200 + rounded ${defaults['focus-visible']} - + `, label: `truncate`, container: 'inline-flex font-medium', @@ -449,7 +449,7 @@ export default { secondary: ` bg-scale-1200 text-scale-100 hover:text-scale-800 - focus-visible:text-scale-600 + focus-visible:text-scale-600 bordershadow-scale-1100 hover:bordershadow-scale-900 @@ -462,7 +462,7 @@ export default { dark:bordershadow-scale-700 hover:dark:bordershadow-scale-800 dark:bg-scale-500 dark:hover:bg-scale-600 focus-visible:outline-brand-600 - + `, alternative: ` text-brand-1100 @@ -473,14 +473,14 @@ export default { focus-visible:outline-brand-600 `, outline: ` - text-scale-1200 - bg-transparent + text-scale-1200 + bg-transparent bordershadow-scale-600 hover:bordershadow-scale-700 dark:bordershadow-scale-800 hover:dark:bordershadow-scale-900 focus-visible:outline-scale-700 `, dashed: ` - text-scale-1200 + text-scale-1200 border border-dashed border-scale-700 hover:border-scale-900 @@ -498,7 +498,7 @@ export default { focus-visible:outline-scale-700 `, text: ` - text-scale-1200 + text-scale-1200 hover:bg-scale-500 shadow-none focus-visible:outline-scale-700 @@ -538,13 +538,13 @@ export default { input: { base: ` - block - box-border - w-full - rounded-md - shadow-sm + block + box-border + w-full + rounded-md + shadow-sm transition-all - text-scale-1200 + text-scale-1200 border focus:shadow-md ${defaults.focus} @@ -559,7 +559,7 @@ export default { `, error: ` bg-red-100 - border border-red-700 + border border-red-700 focus:ring-red-500 placeholder:text-red-600 `, @@ -581,13 +581,13 @@ export default { select: { base: ` - block - box-border - w-full - rounded-md - shadow-sm + block + box-border + w-full + rounded-md + shadow-sm transition-all - text-scale-1200 + text-scale-1200 border focus:shadow-md ${defaults.focus} @@ -605,7 +605,7 @@ export default { `, error: ` bg-red-100 - border border-red-700 + border border-red-700 focus:ring-red-500 placeholder:text-red-600 `, @@ -628,12 +628,12 @@ export default { inputNumber: { base: ` block - box-border - w-full - rounded-md - shadow-sm + box-border + w-full + rounded-md + shadow-sm transition-all - text-scale-1200 + text-scale-1200 border focus:shadow-md ${defaults.focus} @@ -651,7 +651,7 @@ export default { `, error: ` bg-red-100 - border border-red-700 + border border-red-700 focus:ring-red-500 placeholder:text-red-600 `, @@ -668,9 +668,9 @@ export default { /* * Checkbox * - * + * * This Checkbox requires a plugin in your config: - + ``` // tailwind.config.js module.exports = { @@ -681,17 +681,17 @@ export default { ], } ``` - * - * + * + * */ checkbox: { base: ` - bg-transparent + bg-transparent ${defaults.focus} focus:ring-scale-400 - text-brand-900 - border-scale-700 + text-brand-900 + border-scale-700 shadow-sm rounded cursor-pointer @@ -727,9 +727,9 @@ export default { /* * Radio * - * + * * This Radio requires a plugin in your config: - + ``` // tailwind.config.js module.exports = { @@ -740,8 +740,8 @@ export default { ], } ``` - * - * + * + * */ radio: { @@ -750,7 +750,7 @@ export default { ${defaults.focus} focus:ring-brand-400 border-scale-700 - + text-brand-900 shadow-sm cursor-pointer @@ -797,7 +797,7 @@ export default { `, active: ` bg-scale-300 dark:bg-scale-600 z-10 - border-scale-900 dark:border-scale-900 + border-scale-900 dark:border-scale-900 border-1 `, radio_offset: 'left-4', @@ -816,7 +816,7 @@ export default { transition rounded-md border - shadow-sm + shadow-sm `, size: { tiny: `px-5 py-3`, @@ -833,7 +833,7 @@ export default { `, active: ` bg-scale-300 dark:bg-scale-600 z-10 - border-scale-900 dark:border-scale-900 + border-scale-900 dark:border-scale-900 border-1 `, radio_offset: 'left-4', @@ -849,9 +849,9 @@ export default { }, group: `flex flex-row gap-3`, base: ` - transition + transition border - rounded-lg + rounded-lg grow items-center flex-wrap @@ -888,10 +888,10 @@ export default { }, group: `flex flex-row gap-3`, base: ` - transition - border border-scale-700 hover:border-scale-900 + transition + border border-scale-700 hover:border-scale-900 shadow-sm - rounded-lg + rounded-lg grow `, size: { @@ -909,7 +909,7 @@ export default { `, active: ` bg-scale-300 dark:bg-scale-600 z-10 - border-scale-900 dark:border-scale-900 + border-scale-900 dark:border-scale-900 border-1 `, radio_offset: 'left-4', @@ -969,21 +969,21 @@ export default { sidepanel: { base: ` bg-scale-100 dark:bg-scale-300 - flex flex-col - fixed - inset-y-0 - max-w-full + flex flex-col + fixed + inset-y-0 + max-w-full h-screen border-l border-overlay-border shadow-xl `, header: ` - space-y-1 py-4 px-4 bg-overlay-bg sm:px-6 + space-y-1 py-4 px-4 bg-overlay-bg sm:px-6 border-b border-overlay-border `, contents: ` - relative - flex-1 + relative + flex-1 overflow-y-auto `, content: ` @@ -998,16 +998,17 @@ export default { medium: `w-screen max-w-md h-full`, large: `w-screen max-w-2xl h-full`, xlarge: `w-screen max-w-3xl h-full`, + xxlarge: `w-screen max-w-4xl h-full`, }, align: { left: ` left-0 - data-open:animate-panel-slide-left-out + data-open:animate-panel-slide-left-out data-closed:animate-panel-slide-left-in `, right: ` right-0 - data-open:animate-panel-slide-right-out + data-open:animate-panel-slide-right-out data-closed:animate-panel-slide-right-in `, }, @@ -1023,9 +1024,9 @@ export default { dark:bg-scale-100 h-full w-full left-0 - top-0 + top-0 opacity-75 - data-closed:animate-fade-out-overlay-bg + data-closed:animate-fade-out-overlay-bg data-open:animate-fade-in-overlay-bg `, // this is to reset the button @@ -1041,10 +1042,10 @@ export default { toggle: { base: ` - p-0 relative - inline-flex flex-shrink-0 - border-2 border-transparent - rounded-full + p-0 relative + inline-flex flex-shrink-0 + border-2 border-transparent + rounded-full cursor-pointer transition-colors ease-in-out duration-200 ${defaults.focus} @@ -1054,8 +1055,8 @@ export default { hover:bg-scale-700 `, active: ` - bg-brand-900 - hover:bg-brand-900 + bg-brand-900 + hover:bg-brand-900 `, handle_container: { tiny: 'h-4 w-7', @@ -1066,12 +1067,12 @@ export default { }, handle: { base: ` - inline-block h-5 w-5 - rounded-full + inline-block h-5 w-5 + rounded-full bg-scale-100 dark:bg-scale-900 - shadow ring-0 - transition + shadow ring-0 + transition ease-in-out duration-200 `, tiny: 'h-3 w-3', @@ -1159,7 +1160,7 @@ export default { }, error: { base: ` - text-red-900 + text-red-900 transition-all data-show:mt-2 data-show:animate-slide-down-normal @@ -1187,7 +1188,7 @@ export default { trigger: ` flex - border-none + border-none rounded bg-transparent p-0 outline-none @@ -1279,8 +1280,8 @@ export default { popover: { trigger: ` flex - border-none - + border-none + rounded bg-transparent p-0 @@ -1300,7 +1301,7 @@ export default { data-closed:animate-dropdown-content-hide min-w-fit - origin-popover + origin-popover data-open:animate-dropdown-content-show data-closed:animate-dropdown-content-hide `, @@ -1344,7 +1345,7 @@ export default { cursor-pointer flex space-x-3 items-center outline-none - focus-visible:ring-1 ring-scale-1200 focus-visible:z-10 + focus-visible:ring-1 ring-scale-1200 focus-visible:z-10 group `, content: { @@ -1415,7 +1416,7 @@ export default { }, group: { base: ` - flex space-x-3 + flex space-x-3 mb-2 font-normal `, @@ -1438,20 +1439,20 @@ export default { bg-scale-100 dark:bg-scale-300 my-4 border border-scale-300 dark:border-scale-500 - rounded-md - shadow-xl - data-open:animate-overlay-show - data-closed:animate-overlay-hide - + rounded-md + shadow-xl + data-open:animate-overlay-show + data-closed:animate-overlay-hide + `, header: ` bg-scale-200 dark:bg-scale-400 - space-y-1 py-3 px-4 sm:px-5 + space-y-1 py-3 px-4 sm:px-5 border-b border-scale-300 dark:border-scale-500 `, footer: ` flex justify-end gap-2 - py-3 px-5 + py-3 px-5 border-t border-scale-300 dark:border-scale-500 `, size: { @@ -1469,9 +1470,9 @@ export default { dark:bg-scale-100 h-full w-full left-0 - top-0 + top-0 opacity-75 - data-closed:animate-fade-out-overlay-bg + data-closed:animate-fade-out-overlay-bg data-open:animate-fade-in-overlay-bg `, scroll_overlay: ` @@ -1480,7 +1481,7 @@ export default { grid place-items-center overflow-y-auto - data-open:animate-overlay-show data-closed:animate-overlay-hide + data-open:animate-overlay-show data-closed:animate-overlay-hide `, separator: ` w-full @@ -1495,12 +1496,12 @@ export default { listbox: { base: ` - block - box-border - w-full - rounded-md - shadow-sm - text-scale-1200 + block + box-border + w-full + rounded-md + shadow-sm + text-scale-1200 border focus:shadow-md ${defaults.focus} @@ -1524,24 +1525,24 @@ export default { `, error: ` bg-red-100 - border border-red-700 + border border-red-700 focus:ring-red-500 placeholder:text-red-600 `, }, options_container_animate: ` transition - data-open:animate-slide-down + data-open:animate-slide-down data-open:opacity-1 data-closed:animate-slide-up data-closed:opacity-0 `, options_container: ` - bg-scale-100 dark:bg-scale-300 - shadow-lg - border border-solid - border-gray-100 dark:border-gray-600 max-h-60 - rounded-md py-1 text-base + bg-scale-100 dark:bg-scale-300 + shadow-lg + border border-solid + border-gray-100 dark:border-gray-600 max-h-60 + rounded-md py-1 text-base sm:text-sm z-10 overflow-hidden overflow-y-scroll origin-dropdown @@ -1561,7 +1562,7 @@ export default { chevron: 'h-5 w-5 text-scale-600', option: ` w-listbox - transition cursor-pointer select-none relative py-2 pl-3 pr-9 + transition cursor-pointer select-none relative py-2 pl-3 pr-9 text-scale-900 text-sm hover:bg-scale-300 dark:hover:bg-scale-500 @@ -1587,9 +1588,9 @@ export default { inputErrorIcon: { base: ` - flex items-center - right-3 pr-2 pl-2 - inset-y-0 + flex items-center + right-3 pr-2 pl-2 + inset-y-0 pointer-events-none text-red-900 `, @@ -1597,8 +1598,8 @@ export default { inputIconContainer: { base: ` - absolute inset-y-0 - left-0 pl-3 flex + absolute inset-y-0 + left-0 pl-3 flex items-center pointer-events-none text-scale-1100 `, diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index b58d6f3375f..9d7b7185c6f 100644 --- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -266,9 +266,9 @@ const TableGridEditor: FC = ({ console.log('cancel')} + onCancel={() => setApiPreviewPanelOpen(false)} header={ @@ -277,7 +277,7 @@ const TableGridEditor: FC = ({ } customFooter={ setApiPreviewPanelOpen(false)} @@ -286,7 +286,7 @@ const TableGridEditor: FC = ({ >
-
+
{ - console.log(snippet, 'snippet') if (!snippet[selectedLang]) return null return ( - <> +

{snippet.title}

{snippet[selectedLang].code} - +
) } export default CodeSnippet diff --git a/studio/components/to-be-cleaned/Docs/LangSelector.tsx b/studio/components/to-be-cleaned/Docs/LangSelector.tsx index 2386ff91d3d..ce453e47fad 100644 --- a/studio/components/to-be-cleaned/Docs/LangSelector.tsx +++ b/studio/components/to-be-cleaned/Docs/LangSelector.tsx @@ -30,7 +30,7 @@ const LangSelector: FC = ({ ) return ( -
+
@@ -63,8 +63,8 @@ const Param: FC = ({
- - + + {getColumnType(type, format)} @@ -76,8 +76,8 @@ const Param: FC = ({ Format
- - + + {format} diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss index 2fa8033d916..c824175ec2b 100644 --- a/studio/styles/ui.scss +++ b/studio/styles/ui.scss @@ -224,7 +224,7 @@ @apply border-b flex border-scale-500; } - .doc-section--introduction { + &.Docs--table-editor .doc-section--introduction { .text { width: 85%; } @@ -280,6 +280,9 @@ @apply text-brand-900; } } + .codeblock-container + .codeblock-container { + @apply mt-12; + } } ::-moz-selection { From d4c16fa923725d8e3aeae86eaf419f040356dcce Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 10 Feb 2023 16:57:34 -0330 Subject: [PATCH 07/16] Fix type --- .../components/to-be-cleaned/Docs/Param.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/studio/components/to-be-cleaned/Docs/Param.tsx b/studio/components/to-be-cleaned/Docs/Param.tsx index 88b1ede519a..3b962756d09 100644 --- a/studio/components/to-be-cleaned/Docs/Param.tsx +++ b/studio/components/to-be-cleaned/Docs/Param.tsx @@ -2,16 +2,6 @@ import { FC } from 'react' import { Badge, IconCode, IconDatabase } from 'ui' import Description from './Description' -interface Props { - name: string - type: string - format: string - required: string - description: boolean - metadata: any - onDesciptionUpdated: () => void -} - function getColumnType(type: string, format: string) { // json and jsonb both have type=undefined, so check format instead if (type === undefined && (format === 'jsonb' || format === 'json')) return 'json' @@ -32,6 +22,15 @@ function getColumnType(type: string, format: string) { } } +interface Props { + name: string + type: string + format: string + required: boolean + description: boolean + metadata?: any + onDesciptionUpdated?: () => void +} const Param: FC = ({ name, type, From 549617e4a9374013bb5c9e690a1f5e415737cc69 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 10 Feb 2023 17:02:19 -0330 Subject: [PATCH 08/16] Types --- studio/components/to-be-cleaned/Docs/LangSelector.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/to-be-cleaned/Docs/LangSelector.tsx b/studio/components/to-be-cleaned/Docs/LangSelector.tsx index ce453e47fad..a0e05272874 100644 --- a/studio/components/to-be-cleaned/Docs/LangSelector.tsx +++ b/studio/components/to-be-cleaned/Docs/LangSelector.tsx @@ -3,7 +3,7 @@ import { Button, Dropdown, IconKey } from 'ui' import { checkPermissions } from 'hooks' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { showApiKey } from 'components/interfaces/Docs/docs.types' +import { showApiKey } from 'components/interfaces/Docs/Docs.types' const DEFAULT_KEY = { name: 'hide', key: 'SUPABASE_KEY' } From 1e6da5179ff60accf531f687ed64dcab20135d4a Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 13 Feb 2023 17:25:16 -0330 Subject: [PATCH 09/16] Add icons for libs --- .../interfaces/Docs/ResourceContent.tsx | 15 ----- .../TableGridEditor/TableGridEditor.tsx | 2 +- .../{Introduction.js => Introduction.tsx} | 55 ++++++++++++++++++- .../public/img/icons/reference-auth-light.svg | 1 + .../img/icons/reference-csharp-light.svg | 1 + studio/public/img/icons/reference-csharp.svg | 9 +++ .../public/img/icons/reference-dart-light.svg | 9 +++ studio/public/img/icons/reference-dart.svg | 9 +++ .../img/icons/reference-javascript-light.svg | 9 +++ .../public/img/icons/reference-javascript.svg | 9 +++ .../img/icons/reference-python-light.svg | 9 +++ studio/public/img/icons/reference-python.svg | 9 +++ 12 files changed, 120 insertions(+), 17 deletions(-) rename studio/components/to-be-cleaned/Docs/Pages/{Introduction.js => Introduction.tsx} (56%) create mode 100644 studio/public/img/icons/reference-auth-light.svg create mode 100644 studio/public/img/icons/reference-csharp-light.svg create mode 100644 studio/public/img/icons/reference-csharp.svg create mode 100644 studio/public/img/icons/reference-dart-light.svg create mode 100644 studio/public/img/icons/reference-dart.svg create mode 100644 studio/public/img/icons/reference-javascript-light.svg create mode 100644 studio/public/img/icons/reference-javascript.svg create mode 100644 studio/public/img/icons/reference-python-light.svg create mode 100644 studio/public/img/icons/reference-python.svg diff --git a/studio/components/interfaces/Docs/ResourceContent.tsx b/studio/components/interfaces/Docs/ResourceContent.tsx index df8634208be..21e6a3dc5fb 100644 --- a/studio/components/interfaces/Docs/ResourceContent.tsx +++ b/studio/components/interfaces/Docs/ResourceContent.tsx @@ -274,21 +274,6 @@ const ResourceContent = ({
- <> -

Much more

-
-
-

- These docs are a work in progress! See our{' '} - - docs - {' '} - for the additional functionality Supabase has to offer. -

-
-
-
- ) } diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index 9d7b7185c6f..6dbc33f3a41 100644 --- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -286,7 +286,7 @@ const TableGridEditor: FC = ({ >
-
+

Introduction

@@ -21,6 +47,33 @@ export default function Introduction({ autoApiService, selectedLang }) { update your API implementation accordingly whenever you make changes to your Supabase schema from the graphical interface.

+ +
+

Read the reference documentation:

+
+ {libs.map((lib) => ( + + {lib.name} + {lib.name} + + ))} +
+
diff --git a/studio/public/img/icons/reference-auth-light.svg b/studio/public/img/icons/reference-auth-light.svg new file mode 100644 index 00000000000..3995c790842 --- /dev/null +++ b/studio/public/img/icons/reference-auth-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/studio/public/img/icons/reference-csharp-light.svg b/studio/public/img/icons/reference-csharp-light.svg new file mode 100644 index 00000000000..782f87bcc40 --- /dev/null +++ b/studio/public/img/icons/reference-csharp-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/studio/public/img/icons/reference-csharp.svg b/studio/public/img/icons/reference-csharp.svg new file mode 100644 index 00000000000..40d0375079d --- /dev/null +++ b/studio/public/img/icons/reference-csharp.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/studio/public/img/icons/reference-dart-light.svg b/studio/public/img/icons/reference-dart-light.svg new file mode 100644 index 00000000000..178f51a5b88 --- /dev/null +++ b/studio/public/img/icons/reference-dart-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/studio/public/img/icons/reference-dart.svg b/studio/public/img/icons/reference-dart.svg new file mode 100644 index 00000000000..33f9ad24a27 --- /dev/null +++ b/studio/public/img/icons/reference-dart.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/studio/public/img/icons/reference-javascript-light.svg b/studio/public/img/icons/reference-javascript-light.svg new file mode 100644 index 00000000000..a11845dff91 --- /dev/null +++ b/studio/public/img/icons/reference-javascript-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/studio/public/img/icons/reference-javascript.svg b/studio/public/img/icons/reference-javascript.svg new file mode 100644 index 00000000000..f8ce1de0403 --- /dev/null +++ b/studio/public/img/icons/reference-javascript.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/studio/public/img/icons/reference-python-light.svg b/studio/public/img/icons/reference-python-light.svg new file mode 100644 index 00000000000..1ac57aae572 --- /dev/null +++ b/studio/public/img/icons/reference-python-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/studio/public/img/icons/reference-python.svg b/studio/public/img/icons/reference-python.svg new file mode 100644 index 00000000000..4ca064b0b73 --- /dev/null +++ b/studio/public/img/icons/reference-python.svg @@ -0,0 +1,9 @@ + + + + + + + + + From d1ee823b0ba50d934c77e6c1f11393b5521e3493 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 13 Feb 2023 21:22:23 -0330 Subject: [PATCH 10/16] Refresh docs --- studio/components/grid/types/grid.ts | 4 + .../TableGridEditor/GridHeaderActions.tsx | 15 +++- .../TableGridEditor/TableGridEditor.tsx | 85 ++++++++++++------- studio/pages/project/[ref]/api/index.tsx | 1 - 4 files changed, 73 insertions(+), 32 deletions(-) diff --git a/studio/components/grid/types/grid.ts b/studio/components/grid/types/grid.ts index 68c3dc73220..9650ea0b890 100644 --- a/studio/components/grid/types/grid.ts +++ b/studio/components/grid/types/grid.ts @@ -74,6 +74,10 @@ export interface SupabaseGridProps { */ apiPreviewPanelOpen?: boolean setApiPreviewPanelOpen?: () => void + /** + * Refresh the docs after a change is made to the table + */ + refreshDocs: () => void } export interface SupabaseGridRef { diff --git a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx index c21c62febe1..78712ab0f0a 100644 --- a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx +++ b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx @@ -9,20 +9,31 @@ interface Props { table: PostgresTable apiPreviewPanelOpen: boolean setApiPreviewPanelOpen: (apiPreviewPanelOpen: boolean) => void + refreshDocs: () => void } -const GridHeaderActions: FC = ({ table, apiPreviewPanelOpen, setApiPreviewPanelOpen }) => { +const GridHeaderActions: FC = ({ + table, + apiPreviewPanelOpen, + setApiPreviewPanelOpen, + refreshDocs, +}) => { const { ui, meta } = useStore() const projectRef = ui.selectedProject?.ref const policies = meta.policies.list((policy: PostgresPolicy) => policy.table_id === table.id) + function handlePreviewToggle() { + setApiPreviewPanelOpen(!apiPreviewPanelOpen) + refreshDocs() + } + const RenderAPIPreviewToggle = () => { return ( diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index 6dbc33f3a41..e0cbb60d6f9 100644 --- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -16,7 +16,7 @@ import ActionBar from './SidePanelEditor/ActionBar' import { GeneralContent, ResourceContent } from '../Docs' import { useProjectSettingsQuery } from 'data/config/project-settings-query' import { snakeToCamel } from 'lib/helpers' -import useSWR from 'swr' +import useSWR, { mutate } from 'swr' import { get } from 'lib/common/fetch' import LangSelector from 'components/to-be-cleaned/Docs/LangSelector' @@ -117,7 +117,7 @@ const TableGridEditor: FC = ({ : undefined const swaggerUrl = settings?.autoApiService.restUrl - console.log('swaggerUrl:', swaggerUrl) + const headers: any = { apikey: API_KEY } if (API_KEY) headers['Authorization'] = `Bearer ${API_KEY}` @@ -126,9 +126,15 @@ const TableGridEditor: FC = ({ () => swaggerUrl, (url: string) => get(url, { headers, credentials: 'omit' }).then((res) => res) ) + if (jsonSchemaError) console.log('jsonSchemaError', jsonSchemaError) + const resources = getResourcesFromJsonSchema(jsonSchema) + const refreshDocs = async () => { + mutate(swaggerUrl) + } + useEffect(() => { if (selectedTable !== undefined && selectedTable.id !== undefined && isVaultEnabled) { getEncryptedColumns(selectedTable) @@ -230,12 +236,14 @@ const TableGridEditor: FC = ({ editable={canUpdateTables && canEditViaTableEditor} schema={selectedTable.schema} table={gridTable} + refreshDocs={refreshDocs} headerActions={ canEditViaTableEditor && ( ) } @@ -286,34 +294,53 @@ const TableGridEditor: FC = ({ >
-
- -
- + {jsonSchemaError ? ( +
+
+

Error connecting to API

+

{`${jsonSchemaError}`}

+
+
+ ) : ( + <> + {jsonSchema ? ( + <> +
+ +
+ - {jsonSchema?.definitions && ( - table.id === Number(query.id))?.name} - resources={resources} - definitions={jsonSchema.definitions} - paths={jsonSchema.paths} - showApiKey={true} - // refreshDocs={refreshDocs} - /> + {jsonSchema?.definitions && ( + table.id === Number(query.id))?.name} + resources={resources} + definitions={jsonSchema.definitions} + paths={jsonSchema.paths} + showApiKey={true} + refreshDocs={refreshDocs} + /> + )} + + ) : ( +
+

Building docs ...

+
+ )} + )}
diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx index 1ad4f4968f6..670a7b93323 100644 --- a/studio/pages/project/[ref]/api/index.tsx +++ b/studio/pages/project/[ref]/api/index.tsx @@ -1,6 +1,5 @@ import useSWR, { mutate } from 'swr' import { useRouter } from 'next/router' -import { Button, Dropdown, IconKey } from 'ui' import { FC, createContext, useContext, useEffect, useState } from 'react' import { observer, useLocalObservable } from 'mobx-react-lite' From 6174de96d96b24a040dfa53c07b1fd16c6cdf658 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 13 Feb 2023 21:26:12 -0330 Subject: [PATCH 11/16] Add hover --- studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx b/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx index e32e174a11c..5b58b9d7348 100644 --- a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx +++ b/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx @@ -59,7 +59,7 @@ export default function Introduction({ autoApiService, selectedLang }: Props) { className=" flex items-center gap-1 rounded-md px-3 py-1 bg-scale-300 dark:bg-scale-500 - hover:dark:bg-scale-700 transition-colors + hover:bg-scale-500 hover:dark:bg-scale-700 transition-colors !text-scale-1100 hover:text-scale-1100 " > From 02a92913d2b92a0b9a75833c89e8b459e56e3ebf Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Tue, 14 Feb 2023 09:57:33 -0330 Subject: [PATCH 12/16] Change button name --- .../components/interfaces/TableGridEditor/GridHeaderActions.tsx | 2 +- studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx index 78712ab0f0a..67c50b23a0a 100644 --- a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx +++ b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx @@ -35,7 +35,7 @@ const GridHeaderActions: FC = ({ icon={} onClick={handlePreviewToggle} > - API Preview + API Quickstart ) } diff --git a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx b/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx index b3563417179..9f45ba87634 100644 --- a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx +++ b/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx @@ -48,7 +48,7 @@ export default function Introduction({ autoApiService, selectedLang }: Props) { schema from the graphical interface.

-
+

Read the reference documentation:

{libs.map((lib) => ( From e686aff22b0536d7ae73306135cb1fc10b22fa22 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Wed, 15 Feb 2023 08:13:04 -0330 Subject: [PATCH 13/16] Padding nudge --- studio/components/to-be-cleaned/Docs/Param.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/studio/components/to-be-cleaned/Docs/Param.tsx b/studio/components/to-be-cleaned/Docs/Param.tsx index 3b962756d09..611a61e707a 100644 --- a/studio/components/to-be-cleaned/Docs/Param.tsx +++ b/studio/components/to-be-cleaned/Docs/Param.tsx @@ -62,7 +62,7 @@ const Param: FC = ({
- + {getColumnType(type, format)} @@ -75,7 +75,7 @@ const Param: FC = ({ Format
- + {format} From 1dafd72d486cbe6a4b7bf6d8f52a042033fee0cd Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 20 Feb 2023 21:05:56 -0330 Subject: [PATCH 14/16] Fix bearer typo --- .../TableGridEditor/TableGridEditor.tsx | 12 ++-- studio/pages/project/[ref]/api/index.tsx | 72 ------------------- 2 files changed, 6 insertions(+), 78 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index 71c6f5b35bc..30d3e925357 100644 --- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -6,7 +6,7 @@ import type { PostgresColumn, PostgresTable } from '@supabase/postgres-meta' import { PermissionAction } from '@supabase/shared-types/out/constants' import { SchemaView } from 'types' -import { checkPermissions, useFlag, useStore } from 'hooks' +import { checkPermissions, useFlag, useStore, useParams } from 'hooks' import GridHeaderActions from './GridHeaderActions' import NotFoundState from './NotFoundState' import SidePanelEditor from './SidePanelEditor' @@ -19,6 +19,7 @@ import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query' import { snakeToCamel } from 'lib/helpers' import LangSelector from 'components/to-be-cleaned/Docs/LangSelector' import { JsonEditValue } from './SidePanelEditor/RowEditor/RowEditor.types' +import Introduction from 'components/to-be-cleaned/Docs/Pages/Tables/Introduction' interface Props { /** Theme for the editor */ @@ -69,10 +70,9 @@ const TableGridEditor: FC = ({ const { meta, ui, vault } = useStore() const router = useRouter() const { query } = router - const { page } = query - + const { ref: projectRef } = useParams() const gridRef = useRef(null) - const projectRef = ui.selectedProject?.ref + const tables = meta.tables.list() const { data: settings } = useProjectApiQuery({ projectRef: projectRef }) @@ -330,7 +330,7 @@ const TableGridEditor: FC = ({ autoApiService={autoApiService} selectedLang={selectedLang} showApiKey={true} - page={page} + page="table-editor" /> {jsonSchema?.definitions && ( @@ -341,7 +341,7 @@ const TableGridEditor: FC = ({ resources={resources} definitions={jsonSchema.definitions} paths={jsonSchema.paths} - showApiKey={true} + showApiKey={showApiKey.key} refreshDocs={refreshDocs} /> )} diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx index ff1ef6824f0..7e8216d627f 100644 --- a/studio/pages/project/[ref]/api/index.tsx +++ b/studio/pages/project/[ref]/api/index.tsx @@ -140,78 +140,6 @@ const DocView: FC = observer(({}) => { apiKey={anonKey} autoApiService={autoApiService} /> - {/*
-
- - - {selectedLang == 'bash' && ( -
-
- - Project API key : -
- - setShowApiKey(DEFAULT_KEY)}> - hide - - - setShowApiKey({ - key: anonKey, - name: 'anon (public)', - }) - } - > - anon (public) - - {canReadServiceKey && ( - - setShowApiKey({ - key: autoApiService.serviceApiKey, - name: 'service_role (secret)', - }) - } - > - service_role (secret) - - )} - - } - > - - -
- )} -
-
*/}
{resource ? ( From 805fbff496a542ee26d036ca1107b9e20ba1f61f Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 20 Feb 2023 21:26:33 -0330 Subject: [PATCH 15/16] Add generating types to api preview --- .../interfaces/Docs/GeneratingTypes.tsx | 112 ++++++++++++++++++ .../Docs/LangSelector.tsx | 0 .../TableGridEditor/TableGridEditor.tsx | 9 +- .../Docs/Pages/Tables/Introduction.tsx | 96 +-------------- studio/pages/project/[ref]/api/index.tsx | 7 +- 5 files changed, 123 insertions(+), 101 deletions(-) create mode 100644 studio/components/interfaces/Docs/GeneratingTypes.tsx rename studio/components/{to-be-cleaned => interfaces}/Docs/LangSelector.tsx (100%) diff --git a/studio/components/interfaces/Docs/GeneratingTypes.tsx b/studio/components/interfaces/Docs/GeneratingTypes.tsx new file mode 100644 index 00000000000..0a6d54579d2 --- /dev/null +++ b/studio/components/interfaces/Docs/GeneratingTypes.tsx @@ -0,0 +1,112 @@ +import { FC, useState } from 'react' +import Link from 'next/link' +import React from 'react' +import { Button, IconDownload, IconExternalLink } from 'ui' +import { API_ADMIN_URL } from 'lib/constants' +import { get } from 'lib/common/fetch' +import { useParams, useStore } from 'hooks' +import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet' + +interface Props { + selectedLang: string +} + +export default function GeneratingTypes({ selectedLang }: Props) { + const { ref } = useParams() + const { ui } = useStore() + const [isGeneratingTypes, setIsGeneratingTypes] = useState(false) + + const generateTypes = async () => { + setIsGeneratingTypes(true) + const res = await get(`${API_ADMIN_URL}/projects/${ref}/types/typescript`) + + if (!res.error) { + let element = document.createElement('a') + element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.types)) + element.setAttribute('download', 'supabase.ts') + element.style.display = 'none' + document.body.appendChild(element) + element.click() + document.body.removeChild(element) + ui.setNotification({ + category: 'success', + message: `Successfully generated types! File is being downloaded`, + }) + } else { + ui.setNotification({ + category: 'error', + message: `Failed to generate types: ${res.error.message}`, + error: res.error, + }) + } + + setIsGeneratingTypes(false) + } + return ( + <> +

+ Generating types + + + + + +

+
+
+

+ Supabase APIs are generated from your database, which means that we can use database + introspection to generate type-safe API definitions. +

+

+ You can generate types from your database either through the{' '} + + Supabase CLI + + , or by downloading the types file via the button on the right and importing it in your + application within src/index.ts. +

+
+
+ {selectedLang === 'js' && ( + + )} + + +
+
+ + ) +} + +const localSnippets = { + cliLogin: () => ({ + title: 'Login via the CLI with your Personal Access Token', + bash: { + code: ` +npx supabase login +`, + }, + }), + generateTypes: (ref: string) => ({ + title: 'Generate types', + bash: { + code: ` +npx supabase gen types typescript --project-id "${ref}" --schema public > types/supabase.ts +`, + }, + }), +} diff --git a/studio/components/to-be-cleaned/Docs/LangSelector.tsx b/studio/components/interfaces/Docs/LangSelector.tsx similarity index 100% rename from studio/components/to-be-cleaned/Docs/LangSelector.tsx rename to studio/components/interfaces/Docs/LangSelector.tsx diff --git a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index 30d3e925357..a084a3ea1b9 100644 --- a/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -17,9 +17,10 @@ import { GeneralContent, ResourceContent } from '../Docs' import { useProjectApiQuery } from 'data/config/project-api-query' import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query' import { snakeToCamel } from 'lib/helpers' -import LangSelector from 'components/to-be-cleaned/Docs/LangSelector' import { JsonEditValue } from './SidePanelEditor/RowEditor/RowEditor.types' import Introduction from 'components/to-be-cleaned/Docs/Pages/Tables/Introduction' +import LangSelector from '../Docs/LangSelector' +import GeneratingTypes from '../Docs/GeneratingTypes' interface Props { /** Theme for the editor */ @@ -70,7 +71,7 @@ const TableGridEditor: FC = ({ const { meta, ui, vault } = useStore() const router = useRouter() const { query } = router - const { ref: projectRef } = useParams() + const { ref: projectRef, page } = useParams() const gridRef = useRef(null) const tables = meta.tables.list() @@ -330,9 +331,11 @@ const TableGridEditor: FC = ({ autoApiService={autoApiService} selectedLang={selectedLang} showApiKey={true} - page="table-editor" + page={page} /> + + {jsonSchema?.definitions && ( = ({ selectedLang }) => { const { ref } = useParams() - const { ui } = useStore() - const [isGeneratingTypes, setIsGeneratingTypes] = useState(false) - - const generateTypes = async () => { - setIsGeneratingTypes(true) - const res = await get(`${API_ADMIN_URL}/projects/${ref}/types/typescript`) - - if (!res.error) { - let element = document.createElement('a') - element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.types)) - element.setAttribute('download', 'supabase.ts') - element.style.display = 'none' - document.body.appendChild(element) - element.click() - document.body.removeChild(element) - ui.setNotification({ - category: 'success', - message: `Successfully generated types! File is being downloaded`, - }) - } else { - ui.setNotification({ - category: 'error', - message: `Failed to generate types: ${res.error.message}`, - error: res.error, - }) - } - - setIsGeneratingTypes(false) - } return ( <> @@ -65,48 +34,7 @@ const Introduction: FC = ({ selectedLang }) => {
-

- Generating types - - - - - -

-
-
-

- Supabase APIs are generated from your database, which means that we can use database - introspection to generate type-safe API definitions. -

-

- You can generate types from your database either through the{' '} - Supabase CLI, - or by downloading the types file via the button on the right and importing it in your - application within src/index.ts. -

-
-
- {selectedLang === 'js' && ( - - )} - - -
-
+

GraphQL vs Supabase @@ -141,22 +69,6 @@ const Introduction: FC = ({ selectedLang }) => { } const localSnippets = { - cliLogin: () => ({ - title: 'Login via the CLI with your Personal Access Token', - bash: { - code: ` -npx supabase login -`, - }, - }), - generateTypes: (ref: string) => ({ - title: 'Generate types', - bash: { - code: ` -npx supabase gen types typescript --project-id "${ref}" --schema public > types/supabase.ts -`, - }, - }), withApollo: () => ({ title: 'With Apollo GraphQL', bash: { diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx index 7e8216d627f..5f4e22b9031 100644 --- a/studio/pages/project/[ref]/api/index.tsx +++ b/studio/pages/project/[ref]/api/index.tsx @@ -10,7 +10,7 @@ import { DocsLayout } from 'components/layouts' import { GeneralContent, ResourceContent, RpcContent } from 'components/interfaces/Docs' import { PermissionAction } from '@supabase/shared-types/out/constants' import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query' -import LangSelector from 'components/to-be-cleaned/Docs/LangSelector' +import LangSelector from 'components/interfaces/Docs/LangSelector' const PageContext = createContext(null) @@ -79,11 +79,6 @@ const DocView: FC = observer(({}) => { : undefined const swaggerUrl = data?.autoApiService?.restUrl - const canReadServiceKey = checkPermissions( - PermissionAction.READ, - 'service_api_keys.service_role_key' - ) - const { data: jsonSchema, error: jsonSchemaError, From cd00092a6a7100b0f7bea8b5f75ffbba504a1f73 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Thu, 23 Feb 2023 12:18:59 -0330 Subject: [PATCH 16/16] Nudge panel layout --- .../interfaces/Docs/GeneratingTypes.tsx | 33 ++++++++++++------- .../TableGridEditor/GridHeaderActions.tsx | 4 ++- .../TableGridEditor/TableGridEditor.tsx | 13 ++------ .../to-be-cleaned/Docs/Pages/Introduction.tsx | 12 +++---- studio/styles/ui.scss | 20 +++++++++++ 5 files changed, 53 insertions(+), 29 deletions(-) diff --git a/studio/components/interfaces/Docs/GeneratingTypes.tsx b/studio/components/interfaces/Docs/GeneratingTypes.tsx index 0a6d54579d2..9cdabfe4ecc 100644 --- a/studio/components/interfaces/Docs/GeneratingTypes.tsx +++ b/studio/components/interfaces/Docs/GeneratingTypes.tsx @@ -69,18 +69,27 @@ export default function GeneratingTypes({ selectedLang }: Props) { application within src/index.ts.

-
- {selectedLang === 'js' && ( - - )} +
+
+

+ {selectedLang === 'js' && ( + + )} +

+

+ Remember to re-generate and download this file as you make changes to your tables. +

+
= ({ )} - +
+ +