prettier

apps/studio/components/interfaces/ConnectSheet/ConnectSheet.tsx

@@ -1,20 +1,12 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { useEffect, useMemo } from 'react'
-
 import { DatabaseSelector } from 'components/ui/DatabaseSelector'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
 import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  cn
-} from 'ui'
+import { useEffect, useMemo } from 'react'
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, cn } from 'ui'
 
 import type { ProjectKeys } from './Connect.types'
 import { ConnectConfigSection, ModeSelector } from './ConnectConfigSection'
@@ -51,15 +43,8 @@ export const ConnectSheet = ({ open, onOpenChange, connectTab }: ConnectSheetPro
     return modes
   }, [showAppFrameworks, showMobileFrameworks, showOrms])
 
-  const {
-    state,
-    updateField,
-    setMode,
-    activeFields,
-    resolvedSteps,
-    getFieldOptions,
-    schema,
-  } = useConnectState()
+  const { state, updateField, setMode, activeFields, resolvedSteps, getFieldOptions, schema } =
+    useConnectState()
 
   // Filter modes based on feature flags
   const availableModes = useMemo(
@@ -69,18 +54,12 @@ export const ConnectSheet = ({ open, onOpenChange, connectTab }: ConnectSheetPro
 
   // Project keys for step components
   const { ref: projectRef } = useParams()
-  const { data: settings } = useProjectSettingsV2Query(
-    { projectRef },
-    { enabled: open }
-  )
+  const { data: settings } = useProjectSettingsV2Query({ projectRef }, { enabled: open })
   const { can: canReadAPIKeys } = useAsyncCheckPermissions(
     PermissionAction.READ,
     'service_api_keys'
   )
-  const { data: apiKeys } = useAPIKeysQuery(
-    { projectRef },
-    { enabled: canReadAPIKeys }
-  )
+  const { data: apiKeys } = useAPIKeysQuery({ projectRef }, { enabled: canReadAPIKeys })
   const { anonKey, publishableKey } = canReadAPIKeys
     ? getKeys(apiKeys)
     : { anonKey: null, publishableKey: null }
@@ -141,14 +120,10 @@ export const ConnectSheet = ({ open, onOpenChange, connectTab }: ConnectSheetPro
           </div>
         </SheetHeader>
 
-          <div className="flex flex-1 flex-col overflow-y-auto">
-            {/* Configuration Section */}
-            <div className="space-y-6 border-b p-8 shrink-0">
-              <ModeSelector
-                modes={availableModes}
-                selected={state.mode}
-                onChange={setMode}
-              />
+        <div className="flex flex-1 flex-col overflow-y-auto">
+          {/* Configuration Section */}
+          <div className="space-y-6 border-b p-8 shrink-0">
+            <ModeSelector modes={availableModes} selected={state.mode} onChange={setMode} />
             <div className="border-t pt-8">
               <ConnectConfigSection
                 activeFields={activeFields}
@@ -156,16 +131,12 @@ export const ConnectSheet = ({ open, onOpenChange, connectTab }: ConnectSheetPro
                 onFieldChange={updateField}
                 getFieldOptions={getFieldOptions}
               />
-              </div>
             </div>
-
-            {/* Steps Section */}
-            <ConnectStepsSection
-              steps={resolvedSteps}
-              state={state}
-              projectKeys={projectKeys}
-            />
           </div>
+
+          {/* Steps Section */}
+          <ConnectStepsSection steps={resolvedSteps} state={state} projectKeys={projectKeys} />
+        </div>
       </SheetContent>
     </Sheet>
   )

apps/studio/components/interfaces/ConnectSheet/connect.resolver.test.ts

@@ -1,18 +1,13 @@
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
+
+import type { ConditionalValue, ConnectSchema, ConnectState, StepTree } from './Connect.types'
 import {
-  resolveConditional,
-  resolveSteps,
   getActiveFields,
   getDefaultState,
   resetDependentFields,
+  resolveConditional,
+  resolveSteps,
 } from './connect.resolver'
-import type {
-  ConnectSchema,
-  ConnectState,
-  ConditionalValue,
-  StepDefinition,
-  StepTree,
-} from './Connect.types'
 
 // ============================================================================
 // resolveConditional Tests
@@ -113,7 +108,9 @@ describe('connect.resolver:resolveConditional', () => {
     expect(resolveConditional(conditional, { mode: 'mcp', mcpClient: 'cursor' })).toBe(
       'Cursor Config'
     )
-    expect(resolveConditional(conditional, { mode: 'mcp', mcpClient: 'codex' })).toBe('Codex Config')
+    expect(resolveConditional(conditional, { mode: 'mcp', mcpClient: 'codex' })).toBe(
+      'Codex Config'
+    )
     expect(resolveConditional(conditional, { mode: 'mcp', mcpClient: 'claude-code' })).toBe(
       'Claude Code Config'
     )
@@ -143,10 +140,13 @@ describe('connect.resolver:resolveConditional', () => {
       resolveConditional(conditional, { mode: 'framework', framework: 'nextjs', frameworkUi: true })
     ).toBe('Shadcn Steps')
     expect(
-      resolveConditional(conditional, { mode: 'framework', framework: 'nextjs', frameworkUi: false })
+      resolveConditional(conditional, {
+        mode: 'framework',
+        framework: 'nextjs',
+        frameworkUi: false,
+      })
     ).toBe('Regular Steps')
   })
-
 })
 
 // ============================================================================
@@ -191,9 +191,7 @@ describe('connect.resolver:resolveSteps', () => {
   test('should resolve steps for direct mode', () => {
     const schema = createMockSchema({
       mode: {
-        framework: [
-          { id: 'step1', title: 'Install', description: 'Install', content: 'install' },
-        ],
+        framework: [{ id: 'step1', title: 'Install', description: 'Install', content: 'install' }],
         direct: [
           { id: 'connection', title: 'Connection', description: 'Connect', content: 'direct' },
         ],
@@ -278,20 +276,20 @@ describe('connect.resolver:resolveSteps', () => {
       mode: {
         framework: {
           framework: {
-            nextjs: [
-              { id: 'base', title: 'Base', description: 'Base step', content: 'base' },
-            ],
+            nextjs: [{ id: 'base', title: 'Base', description: 'Base step', content: 'base' }],
           },
           frameworkUi: {
-            true: [
-              { id: 'ui', title: 'UI', description: 'UI step', content: 'ui' },
-            ],
+            true: [{ id: 'ui', title: 'UI', description: 'UI step', content: 'ui' }],
           },
         },
       },
     })
 
-    const steps = resolveSteps(schema, { mode: 'framework', framework: 'nextjs', frameworkUi: true })
+    const steps = resolveSteps(schema, {
+      mode: 'framework',
+      framework: 'nextjs',
+      frameworkUi: true,
+    })
     expect(steps.map((step) => step.id)).toEqual(['base', 'ui'])
   })
 })
@@ -391,7 +389,14 @@ describe('connect.resolver:getActiveFields', () => {
 
   test('should handle multiple dependsOn conditions', () => {
     const schema = createSchemaWithFields(
-      [{ id: 'direct', label: 'Direct', description: '', fields: ['connectionMethod', 'useSharedPooler'] }],
+      [
+        {
+          id: 'direct',
+          label: 'Direct',
+          description: '',
+          fields: ['connectionMethod', 'useSharedPooler'],
+        },
+      ],
       {
         connectionMethod: {
           id: 'connectionMethod',

apps/studio/components/interfaces/ConnectSheet/connect.resolver.ts

@@ -5,8 +5,8 @@ import type {
   FieldOption,
   ResolvedField,
   ResolvedStep,
-  StepFieldValueMap,
   StepDefinition,
+  StepFieldValueMap,
   StepTree,
 } from './Connect.types'
 
@@ -84,10 +84,7 @@ export function resolveConditional<T>(
  * Resolves the steps array based on current state.
  * Returns only steps that have non-null content.
  */
-export function resolveSteps(
-  schema: ConnectSchema,
-  state: ConnectState
-): ResolvedStep[] {
+export function resolveSteps(schema: ConnectSchema, state: ConnectState): ResolvedStep[] {
   const steps = resolveStepTree(schema.steps, state)
   if (steps.length === 0) return []
 
@@ -146,10 +143,7 @@ function resolveStepBranch(
 /**
  * Gets the active fields for the current mode, filtering by dependsOn conditions.
  */
-export function getActiveFields(
-  schema: ConnectSchema,
-  state: ConnectState
-): ResolvedField[] {
+export function getActiveFields(schema: ConnectSchema, state: ConnectState): ResolvedField[] {
   const currentMode = schema.modes.find((m) => m.id === state.mode)
   if (!currentMode) return []
 
@@ -173,10 +167,7 @@ export function getActiveFields(
 /**
  * Resolves field options based on current state.
  */
-function resolveFieldOptions(
-  field: { options?: unknown },
-  state: ConnectState
-): FieldOption[] {
+function resolveFieldOptions(field: { options?: unknown }, state: ConnectState): FieldOption[] {
   if (!field.options) return []
 
   // Static options array

apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx

@@ -1,7 +1,7 @@
-import { BarChart3, Code, Database, GitBranch, Shield, Table, Upload, UserPlus } from 'lucide-react'
-
 import { DOCS_URL } from 'lib/constants'
+import { BarChart3, Code, Database, GitBranch, Shield, Table, Upload, UserPlus } from 'lucide-react'
 import { AiIconAnimation, CodeBlock } from 'ui'
+
 import type { GettingStartedAction, GettingStartedStep } from './GettingStarted.types'
 import type { GettingStartedStatuses } from './useGettingStartedProgress'
 
@@ -376,4 +376,3 @@ export const getNoCodeWorkflowSteps = ({
     },
   ]
 }
-