:
}
+ icon={copied ?
:
}
onClick={() => {
if (tables) {
copyToClipboard(tablesToSQL(tables))
diff --git a/apps/studio/components/interfaces/Functions/CommandRender.tsx b/apps/studio/components/interfaces/Functions/CommandRender.tsx
index 8285ce8b3c2b0..df92d2c8fed91 100644
--- a/apps/studio/components/interfaces/Functions/CommandRender.tsx
+++ b/apps/studio/components/interfaces/Functions/CommandRender.tsx
@@ -1,4 +1,4 @@
-import { Check, Clipboard } from 'lucide-react'
+import { Check, Copy } from 'lucide-react'
import { forwardRef, useState } from 'react'
import { cn, copyToClipboard } from 'ui'
@@ -45,7 +45,7 @@ const Command = ({ item }: any) => {
{isCopied ? (
) : (
-
+
)}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index b7a152514bebb..9056d0f55ccb5 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -1,5 +1,5 @@
import dayjs from 'dayjs'
-import { Check, Clipboard } from 'lucide-react'
+import { Check, Copy } from 'lucide-react'
import { useRouter } from 'next/router'
import { useState } from 'react'
@@ -66,7 +66,7 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
) : (
)}
diff --git a/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx b/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx
index 65858938c2637..8d2e466e4b091 100644
--- a/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx
@@ -2,6 +2,7 @@ import { BarChart, Shield } from 'lucide-react'
import { useCallback, useMemo, useState } from 'react'
import { useParams } from 'common'
+import LintDetail from 'components/interfaces/Linter/LintDetail'
import { LINTER_LEVELS } from 'components/interfaces/Linter/Linter.constants'
import {
createLintSummaryPrompt,
@@ -28,7 +29,6 @@ import {
} from 'ui'
import { Row } from 'ui-patterns'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
-import LintDetail from 'components/interfaces/Linter/LintDetail'
export const AdvisorSection = () => {
const { ref: projectRef } = useParams()
diff --git a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx b/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
index 8737860d1dd96..ad0e12284ad4a 100644
--- a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
@@ -50,9 +50,11 @@ export function CustomReportSection() {
reportContent
)
- useEffect(() => {
- if (reportContent) setEditableReport(reportContent)
- }, [reportContent])
+ const { can: canCreateReport } = useAsyncCheckPermissions(
+ PermissionAction.CREATE,
+ 'user_content',
+ { resource: { type: 'report', owner_id: profile?.id }, subject: { id: profile?.id } }
+ )
const { can: canUpdateReport } = useAsyncCheckPermissions(
PermissionAction.UPDATE,
@@ -67,12 +69,6 @@ export function CustomReportSection() {
}
)
- const { can: canCreateReport } = useAsyncCheckPermissions(
- PermissionAction.CREATE,
- 'user_content',
- { resource: { type: 'report', owner_id: profile?.id }, subject: { id: profile?.id } }
- )
-
const { mutate: upsertContent } = useContentUpsertMutation()
const persistReport = useCallback(
@@ -275,10 +271,14 @@ export function CustomReportSection() {
const layout = useMemo(() => editableReport?.layout ?? [], [editableReport])
+ useEffect(() => {
+ if (reportContent) setEditableReport(reportContent)
+ }, [reportContent])
+
return (
-
At a glance
+
Reports
{canUpdateReport || canCreateReport ? (
- {(() => {
- if (layout.length === 0) {
- return (
-
- {canUpdateReport || canCreateReport ? (
-
}>
- Add your first chart
-
- }
- side="bottom"
- align="center"
- autoFocus
- />
- ) : (
-
No charts set up yet in report
- )}
-
- )
- }
- return (
-
+ Build a custom report
+
+ Keep track of your most important metrics
+
+ {canUpdateReport || canCreateReport ? (
+ }>
+ Add your first block
+
+ }
+ side="bottom"
+ align="center"
+ autoFocus
+ />
+ ) : (
+ No charts set up yet in report
+ )}
+
- {layout.map((item) => (
-
-
- handleUpdateChart(item.id, config)}
- />
-
-
- ))}
-
-
-
- )
- })()}
+
+ {layout.map((item) => (
+
+
+ handleUpdateChart(item.id, config)}
+ />
+
+
+ ))}
+
+
+
+ )}
)
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
index b07d0819f5685..fbdfe7aa41f0f 100644
--- a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
@@ -2,10 +2,9 @@ import { Check, ChevronLeft, ChevronRight } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { useEffect, useState } from 'react'
-
+import { cn, Button, Card, CardContent, Badge } from 'ui'
+import { GettingStartedStep, GettingStartedAction } from './GettingStarted.types'
import { BASE_PATH } from 'lib/constants'
-import { Badge, Button, Card, CardContent, cn } from 'ui'
-import { GettingStartedAction, GettingStartedStep } from './GettingStartedSection'
// Determine action type for tracking
const getActionType = (action: GettingStartedAction): 'primary' | 'ai_assist' | 'external_link' => {
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.types.ts b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.types.ts
new file mode 100644
index 0000000000000..e1a6ca55ea82b
--- /dev/null
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.types.ts
@@ -0,0 +1,24 @@
+import { ComponentProps, ReactNode } from 'react'
+
+import { Button } from 'ui'
+
+export type GettingStartedAction = {
+ label: string
+ href?: string
+ variant?: ComponentProps
['type']
+ icon?: ReactNode
+ component?: ReactNode
+ onClick?: () => void
+}
+
+export type GettingStartedStep = {
+ key: string
+ status: 'complete' | 'incomplete'
+ icon?: ReactNode
+ title: string
+ description: string
+ image?: string
+ actions: GettingStartedAction[]
+}
+
+export type GettingStartedState = 'empty' | 'code' | 'no-code' | 'hidden'
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx
new file mode 100644
index 0000000000000..a5eb527201034
--- /dev/null
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx
@@ -0,0 +1,412 @@
+import {
+ BarChart3,
+ Code,
+ Database,
+ GitBranch,
+ Shield,
+ Table,
+ Upload,
+ User,
+ UserPlus,
+} from 'lucide-react'
+
+import { FRAMEWORKS } from 'components/interfaces/Connect/Connect.constants'
+import { AiIconAnimation, CodeBlock } from 'ui'
+import type { GettingStartedAction, GettingStartedStep } from './GettingStarted.types'
+import type { GettingStartedStatuses } from './useGettingStartedProgress'
+
+type BuildStepsBaseArgs = {
+ ref: string | undefined
+ openAiChat: (name: string, initialInput: string) => void
+ connectActions: GettingStartedAction[]
+ statuses: GettingStartedStatuses
+}
+
+type BuildCodeStepsArgs = BuildStepsBaseArgs
+
+type BuildNoCodeStepsArgs = BuildStepsBaseArgs
+
+export const getCodeWorkflowSteps = ({
+ ref,
+ openAiChat,
+ connectActions,
+ statuses,
+}: BuildCodeStepsArgs): GettingStartedStep[] => {
+ const {
+ hasTables,
+ hasCliSetup,
+ hasSampleData,
+ hasRlsPolicies,
+ hasConfiguredAuth,
+ hasAppConnected,
+ hasFirstUser,
+ hasStorageObjects,
+ hasEdgeFunctions,
+ hasReports,
+ hasGitHubConnection,
+ } = statuses
+
+ return [
+ {
+ key: 'install-cli',
+ status: hasCliSetup ? 'complete' : 'incomplete',
+ title: 'Install the Supabase CLI',
+ icon:
}
- arrow={