supabase · joshenlim · Jul 17, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024
@@ -60,8 +60,6 @@ const TOTPFactors = () => {
                         <Button
                           size="tiny"
                           type="default"
-                          // className="px-1"
-                          // icon={<IconTrash />}
                           onClick={() => setFactorToBeDeleted(factor.id)}
                         >
                           Remove

@@ -69,7 +69,7 @@ const QueryError = ({
             <div className="flex gap-2">
               <CollapsibleTrigger_Shadcn_ asChild>
                 <Button
-                  size={'tiny'}
+                  size="tiny"
                   type="outline"
                   className={cn('group', styles['ai-icon__container--allow-hover-effect'])}
                 >
@@ -78,7 +78,7 @@ const QueryError = ({
               </CollapsibleTrigger_Shadcn_>
               {!hasHipaaAddon && isAiAssistantEnabled && (
                 <Button
-                  size={'tiny'}
+                  size="tiny"
                   type="default"
                   className={cn(
                     'group',

@@ -10,7 +10,8 @@ import NoPermission from 'components/ui/NoPermission'
 import { authKeys } from 'data/auth/keys'
 import { useUsersQuery } from 'data/auth/users-query'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
-import { Button, IconRefreshCw, IconSearch, IconX, Input, Listbox } from 'ui'
+import { Search, X } from 'lucide-react'
+import { Button, IconRefreshCw, Input, Listbox } from 'ui'
 import AddUserDropdown from './AddUserDropdown'
 import UsersList from './UsersList'
 
@@ -84,15 +85,10 @@ const Users = () => {
             name="email"
             id="email"
             placeholder="Search by email or phone number"
-            icon={<IconSearch size="tiny" />}
+            icon={<Search size={14} />}
             actions={[
               search && (
-                <Button
-                  size="tiny"
-                  type="text"
-                  icon={<IconX size="tiny" />}
-                  onClick={() => clearSearch()}
-                />
+                <Button size="tiny" type="text" icon={<X />} onClick={() => clearSearch()} />
               ),
             ]}
           />

@@ -1,11 +1,12 @@
-import { IS_PLATFORM } from 'common'
+import { Filter, Search } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
+import { IS_PLATFORM } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
+import { PROJECT_STATUS } from 'lib/constants'
 import { EMPTY_ARR } from 'lib/void'
-import { Filter, Search } from 'lucide-react'
 import {
   Button,
   Checkbox_Shadcn_,
@@ -20,7 +21,6 @@ import {
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
 } from 'ui'
-import { PROJECT_STATUS } from 'lib/constants'
 
 interface HomePageActionsProps {
   organizations: { name: string; slug: string }[]

@@ -7,7 +7,6 @@ const pricingMetricBytes = [
 ]
 
 export const formatUsage = (pricingMetric: PricingMetric, usage: number) => {
-  console.log({ pricingMetric, usage })
   if (pricingMetricBytes.includes(pricingMetric)) {
     return +(usage / 1e9).toFixed(2).toLocaleString()
   } else {

@@ -4,11 +4,9 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  IconChevronDown,
-  IconCornerDownLeft,
-  IconLoader,
 } from 'ui'
 
+import { ChevronDown, CornerDownLeft, Loader2 } from 'lucide-react'
 import { DiffType } from './SQLEditor.types'
 import { getDiffTypeButtonLabel, getDiffTypeDropdownLabel } from './SQLEditor.utils'
 
@@ -34,8 +32,8 @@ export const DiffActionBar = ({
           className="rounded-r-none"
           type="primary"
           size="tiny"
-          icon={loading && <IconLoader className="animate-spin" size={14} />}
-          iconRight={<IconCornerDownLeft size={12} strokeWidth={1.5} />}
+          icon={loading && <Loader2 className="animate-spin" />}
+          iconRight={<CornerDownLeft size={12} strokeWidth={1.5} />}
           onClick={onAccept}
         >
           {getDiffTypeButtonLabel(selectedDiffType)}
@@ -45,7 +43,7 @@ export const DiffActionBar = ({
             <Button
               type="primary"
               className="rounded-l-none border-l-0 px-[4px] py-[5px] flex"
-              icon={<IconChevronDown />}
+              icon={<ChevronDown />}
             />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" side="bottom">

@@ -1,11 +1,14 @@
-import type { ModalProps } from '@ui/components/Modal/Modal'
 import { snakeCase } from 'lodash'
+import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
-import { Button, CodeBlock, IconExternalLink, Modal, Tabs } from 'ui'
 
+import type { ModalProps } from '@ui/components/Modal/Modal'
 import TwoOptionToggle from 'components/ui/TwoOptionToggle'
+import { useFlag } from 'hooks/ui/useFlag'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
+import { Button, CodeBlock, Modal, Tabs } from 'ui'
 import { Markdown } from '../Markdown'
 import {
   generateFileCliCommand,
@@ -19,8 +22,11 @@ export interface DownloadSnippetModalProps extends ModalProps {
 
 const DownloadSnippetModal = ({ id, ...props }: DownloadSnippetModalProps) => {
   const snap = useSqlEditorStateSnapshot()
-  const snippet = snap.snippets[id].snippet
-  const migrationName = snakeCase(snippet.name)
+  const snapV2 = useSqlEditorV2StateSnapshot()
+  const enableFolders = useFlag('sqlFolderOrganization')
+
+  const snippet = enableFolders ? snapV2.snippets[id]?.snippet : snap.snippets[id].snippet
+  const migrationName = snakeCase(snippet?.name)
 
   const [selectedView, setSelectedView] = useState<'CLI' | 'NPM'>('CLI')
 
@@ -60,7 +66,7 @@ const DownloadSnippetModal = ({ id, ...props }: DownloadSnippetModalProps) => {
       header={<p>Download snippet as local migration file via the Supabase CLI.</p>}
       {...props}
     >
-      <div className="flex flex-col items-start justify-between gap-4 relative">
+      <div className="flex flex-col items-start justify-between gap-4 relative pt-2">
         <Tabs type="underlined" listClassNames="pl-5">
           {SNIPPETS.map((snippet) => {
             return (
@@ -75,7 +81,7 @@ const DownloadSnippetModal = ({ id, ...props }: DownloadSnippetModalProps) => {
                       />
                     </div>
                     <TwoOptionToggle
-                      width={75}
+                      width={50}
                       options={['CLI', 'NPM']}
                       activeOption={selectedView}
                       borderOverride="border-muted"
@@ -100,7 +106,7 @@ const DownloadSnippetModal = ({ id, ...props }: DownloadSnippetModalProps) => {
         <Modal.Content className="w-full flex items-center justify-between pt-0">
           <p className="text-xs text-lighter">Run this command from your project directory</p>
           <div className="flex justify-between items-center gap-x-2">
-            <Button asChild type="default" icon={<IconExternalLink size={14} strokeWidth={1.5} />}>
+            <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
               <Link
                 href="https://supabase.com/docs/guides/cli/local-development#database-migrations"
                 target="_blank"
@@ -110,7 +116,7 @@ const DownloadSnippetModal = ({ id, ...props }: DownloadSnippetModalProps) => {
               </Link>
             </Button>
 
-            <Button asChild type="default" icon={<IconExternalLink size={14} strokeWidth={1.5} />}>
+            <Button asChild type="default" icon={<ExternalLink size={14} strokeWidth={1.5} />}>
               <Link
                 href="https://supabase.com/docs/guides/cli/local-development"
                 target="_blank"

@@ -7,13 +7,15 @@ import { MutableRefObject, useEffect, useRef } from 'react'
 import type { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { useFlag } from 'hooks/ui/useFlag'
 import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useProfile } from 'lib/profile'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { cn } from 'ui'
 import { untitledSnippetTitle } from './SQLEditor.constants'
 import type { IStandaloneCodeEditor } from './SQLEditor.types'
-import { createSqlSnippetSkeleton } from './SQLEditor.utils'
+import { createSqlSnippetSkeleton, createSqlSnippetSkeletonV2 } from './SQLEditor.utils'
 
 export type MonacoEditorProps = {
   id: string
@@ -34,18 +36,21 @@ const MonacoEditor = ({
   executeQuery,
   onHasSelection,
 }: MonacoEditorProps) => {
-  const { ref, content } = useParams()
   const router = useRouter()
   const { profile } = useProfile()
+  const { ref, content } = useParams()
   const project = useSelectedProject()
 
+  const snap = useSqlEditorStateSnapshot({ sync: true })
+  const snapV2 = useSqlEditorV2StateSnapshot()
+  const enableFolders = useFlag('sqlFolderOrganization')
+
   const [intellisenseEnabled] = useLocalStorageQuery(
     LOCAL_STORAGE_KEYS.SQL_EDITOR_INTELLISENSE,
     true
   )
 
-  const snap = useSqlEditorStateSnapshot({ sync: true })
-  const snippet = snap.snippets[id]
+  const snippet = enableFolders ? snapV2.snippets[id] : snap.snippets[id]
 
   const executeQueryRef = useRef(executeQuery)
   executeQueryRef.current = executeQuery
@@ -92,26 +97,43 @@ const MonacoEditor = ({
     }
   }
 
+  // [Joshen] Also needs updating here
   const debouncedSetSql = debounce((id, value) => {
-    snap.setSql(id, value)
+    if (enableFolders) snapV2.setSql(id, value)
+    else snap.setSql(id, value)
   }, 1000)
 
   function handleEditorChange(value: string | undefined) {
+    const snippetCheck = enableFolders ? snapV2.snippets[id] : snap.snippets[id]
+
     if (id && value) {
-      if (snap.snippets[id]) {
+      if (snippetCheck) {
         debouncedSetSql(id, value)
       } else {
-        const snippet = createSqlSnippetSkeleton({
-          id,
-          name: untitledSnippetTitle,
-          sql: value,
-          owner_id: profile?.id,
-          project_id: project?.id,
-        })
-        if (ref) {
-          snap.addSnippet(snippet as SqlSnippet, ref)
-          snap.addNeedsSaving(snippet.id!)
-          router.push(`/project/${ref}/sql/${snippet.id}`, undefined, { shallow: true })
+        if (ref && profile !== undefined && project !== undefined) {
+          if (enableFolders) {
+            const snippet = createSqlSnippetSkeletonV2({
+              id,
+              name: untitledSnippetTitle,
+              sql: value,
+              owner_id: profile?.id,
+              project_id: project?.id,
+            })
+            snapV2.addSnippet({ projectRef: ref, snippet })
+            snapV2.addNeedsSaving(snippet.id)
+            router.push(`/project/${ref}/sql/${snippet.id}`, undefined, { shallow: true })
+          } else {
+            const snippet = createSqlSnippetSkeleton({
+              id,
+              name: untitledSnippetTitle,
+              sql: value,
+              owner_id: profile.id,
+              project_id: project.id,
+            })
+            snap.addSnippet(snippet as SqlSnippet, ref)
+            snap.addNeedsSaving(snippet.id!)
+            router.push(`/project/${ref}/sql/${snippet.id}`, undefined, { shallow: true })
+          }
         }
       }
     }