diff --git a/apps/studio/.github/eslint-rule-baselines.json b/apps/studio/.github/eslint-rule-baselines.json
index d4354369771..26365fdd019 100644
--- a/apps/studio/.github/eslint-rule-baselines.json
+++ b/apps/studio/.github/eslint-rule-baselines.json
@@ -326,7 +326,6 @@
"components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx": 1,
"components/interfaces/Functions/EdgeFunctionsListItem.tsx": 2,
"components/interfaces/Functions/FunctionsNav.tsx": 1,
- "components/interfaces/Home/Home.tsx": 6,
"components/interfaces/Home/ProjectList/ProjectList.tsx": 1,
"components/interfaces/Home/ProjectUsage.tsx": 1,
"components/interfaces/Home/ServiceStatus.tsx": 1,
diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx
deleted file mode 100644
index 45d54e0fdae..00000000000
--- a/apps/studio/components/interfaces/Home/Home.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import dayjs from 'dayjs'
-import Link from 'next/link'
-import { useEffect, useRef } from 'react'
-
-import { useParams } from 'common'
-import { AdvisorWidget } from 'components/interfaces/Home/AdvisorWidget'
-import { ClientLibrary } from 'components/interfaces/Home/ClientLibrary'
-import { ExampleProject } from 'components/interfaces/Home/ExampleProject'
-import { EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
-import { NewProjectPanel } from 'components/interfaces/Home/NewProjectPanel/NewProjectPanel'
-import { ProjectUsageSection } from 'components/interfaces/Home/ProjectUsageSection'
-import { ServiceStatus } from 'components/interfaces/Home/ServiceStatus'
-import { ProjectPausedState } from 'components/layouts/ProjectLayout/PausedState/ProjectPausedState'
-import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
-import { InlineLink } from 'components/ui/InlineLink'
-import { ProjectUpgradeFailedBanner } from 'components/ui/ProjectUpgradeFailedBanner'
-import { useBranchesQuery } from 'data/branches/branches-query'
-import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
-import { useProjectDetailQuery } from 'data/projects/project-detail-query'
-import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
-import { useTablesQuery } from 'data/tables/tables-query'
-import { useCustomContent } from 'hooks/custom-content/useCustomContent'
-import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
-import { useIsOrioleDb, useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { DOCS_URL, IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
-import { useAppStateSnapshot } from 'state/app-state'
-import {
- Badge,
- cn,
- Tabs_Shadcn_,
- TabsContent_Shadcn_,
- TabsList_Shadcn_,
- TabsTrigger_Shadcn_,
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from 'ui'
-import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
-
-export const Home = () => {
- const { data: project } = useSelectedProjectQuery()
- const { data: organization } = useSelectedOrganizationQuery()
- const { data: parentProject } = useProjectDetailQuery({ ref: project?.parent_project_ref })
- const isOrioleDb = useIsOrioleDb()
- const snap = useAppStateSnapshot()
- const { ref, enableBranching } = useParams()
-
- const { projectHomepageExampleProjects, projectHomepageClientLibraries: clientLibraries } =
- useCustomContent(['project_homepage:example_projects', 'project_homepage:client_libraries'])
-
- const {
- projectHomepageShowInstanceSize: showInstanceSize,
- projectHomepageShowExamples: showExamples,
- } = useIsFeatureEnabled(['project_homepage:show_instance_size', 'project_homepage:show_examples'])
-
- const hasShownEnableBranchingModalRef = useRef(false)
- const isPaused = project?.status === PROJECT_STATUS.INACTIVE
- const isNewProject = dayjs(project?.inserted_at).isAfter(dayjs().subtract(2, 'day'))
-
- useEffect(() => {
- if (enableBranching && !hasShownEnableBranchingModalRef.current) {
- hasShownEnableBranchingModalRef.current = true
- snap.setShowCreateBranchModal(true)
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [enableBranching])
-
- const { data: tablesData, isPending: isLoadingTables } = useTablesQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- schema: 'public',
- })
- const { data: functionsData, isPending: isLoadingFunctions } = useEdgeFunctionsQuery({
- projectRef: project?.ref,
- })
- const { data: replicasData, isPending: isLoadingReplicas } = useReadReplicasQuery({
- projectRef: project?.ref,
- })
-
- const { data: branches } = useBranchesQuery({
- projectRef: project?.parent_project_ref ?? project?.ref,
- })
-
- const mainBranch = branches?.find((branch) => branch.is_default)
- const currentBranch = branches?.find((branch) => branch.project_ref === project?.ref)
- const isMainBranch = currentBranch?.name === mainBranch?.name
- let projectName = 'Welcome to your project'
-
- if (currentBranch && !isMainBranch) {
- projectName = currentBranch?.name
- } else if (project?.name) {
- projectName = project?.name
- }
-
- const tablesCount = Math.max(0, tablesData?.length ?? 0)
- const functionsCount = Math.max(0, functionsData?.length ?? 0)
- // [Joshen] JFYI minus 1 as the replicas endpoint returns the primary DB minimally
- const replicasCount = Math.max(0, (replicasData?.length ?? 1) - 1)
-
- if (isPaused) {
- return (
-
- )
- }
-
- return (
-
-
-
-
-
-
- {!isMainBranch && (
-
- {parentProject?.name}
-
- )}
-
{projectName}
-
-
- {isOrioleDb && (
-
-
- OrioleDB
-
-
- This project is using Postgres with OrioleDB which is currently in preview and
- not suitable for production workloads. View our{' '}
-
- documentation
- {' '}
- for all limitations.
-
-
- )}
- {showInstanceSize && (
-
- )}
-
-
-
- {project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && (
-
-
-
- Tables
-
-
- {isLoadingTables ? (
-
- ) : (
-
{tablesCount}
- )}
-
-
-
-
- Functions
-
- {isLoadingFunctions ? (
-
- ) : (
-
{functionsCount}
- )}
-
-
- {IS_PLATFORM && (
-
-
- Replicas
-
- {isLoadingReplicas ? (
-
- ) : (
-
{replicasCount}
- )}
-
- )}
-
- )}
- {IS_PLATFORM && project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && (
-
-
-
- )}
-
-
-
-
-
-
- <>
-
-
- {IS_PLATFORM && project?.status !== PROJECT_STATUS.INACTIVE && (
- <>{isNewProject ?
:
}>
- )}
- {!isNewProject && project?.status !== PROJECT_STATUS.INACTIVE &&
}
-
-
-
-
-
- {project?.status !== PROJECT_STATUS.INACTIVE && (
- <>
-
-
Client libraries
-
- {clientLibraries!.map((library) => (
- // [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later.
-
- ))}
-
-
- {showExamples && (
-
-
Example projects
- {!!projectHomepageExampleProjects ? (
-
- {/* [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later. */}
- {(projectHomepageExampleProjects as any)
- .sort((a: any, b: any) => a.title.localeCompare(b.title))
- .map((project: any) => (
-
- ))}
-
- ) : (
-
-
-
- App Frameworks
-
- Mobile Frameworks
-
-
-
-
- {EXAMPLE_PROJECTS.filter((project) => project.type === 'app')
- .sort((a, b) => a.title.localeCompare(b.title))
- .map((project) => (
-
- ))}
-
-
-
-
- {EXAMPLE_PROJECTS.filter((project) => project.type === 'mobile')
- .sort((a, b) => a.title.localeCompare(b.title))
- .map((project) => (
-
- ))}
-
-
-
-
- )}
-
- )}
- >
- )}
-
-
- >
-
- )
-}
diff --git a/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.test.ts b/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.test.ts
index c6b45882e84..4a0e63b1827 100644
--- a/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.test.ts
+++ b/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.test.ts
@@ -1,6 +1,6 @@
import { describe, expect, it } from 'vitest'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import {
calculateErrorRate,
calculateSuccessRate,
diff --git a/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.ts b/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.ts
index fe929555f5c..3aaa3c386ba 100644
--- a/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.ts
+++ b/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.ts
@@ -3,8 +3,8 @@ import {
sumErrors,
sumTotal,
sumWarnings,
-} from '../HomeNew/ProjectUsage.metrics'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
+} from '../ProjectHome/ProjectUsage.metrics'
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import { useServiceHealthMetrics } from './useServiceHealthMetrics'
export type ServiceKey = 'db' | 'functions' | 'auth' | 'storage' | 'realtime' | 'postgrest'
diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
index 308396df92e..d8e6cd6624e 100644
--- a/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
+++ b/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle, cn, Loading } from 'ui'
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import { getHealthStatus, type ServiceKey } from './ObservabilityOverview.utils'
const colorClassMap: Record = {
diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
index ee2754c9ed2..0a13b6feaed 100644
--- a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
+++ b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
@@ -4,7 +4,7 @@ import { Badge, Card, CardContent, Loading, Tooltip, TooltipContent, TooltipTrig
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
import { ButtonTooltip } from '../../ui/ButtonTooltip'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import { getHealthStatus, type ServiceKey } from './ObservabilityOverview.utils'
type ServiceConfig = {
diff --git a/apps/studio/components/interfaces/Observability/usePostgrestOverviewMetrics.ts b/apps/studio/components/interfaces/Observability/usePostgrestOverviewMetrics.ts
index 4180fb3b3d5..4c20f915c21 100644
--- a/apps/studio/components/interfaces/Observability/usePostgrestOverviewMetrics.ts
+++ b/apps/studio/components/interfaces/Observability/usePostgrestOverviewMetrics.ts
@@ -1,7 +1,8 @@
import { useQuery } from '@tanstack/react-query'
import { get } from 'data/fetchers'
+
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import { generateRegexpWhere } from '../Reports/Reports.constants'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
type PostgrestMetricsVariables = {
projectRef: string
diff --git a/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.ts b/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.ts
index cb9e65c7833..73cb8c5f71c 100644
--- a/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.ts
+++ b/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.ts
@@ -4,15 +4,15 @@ import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted
import useTimeseriesUnixToIso from 'hooks/analytics/useTimeseriesUnixToIso'
import { useMemo } from 'react'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import { LogsTableName } from '../Settings/Logs/Logs.constants'
import { genChartQuery } from '../Settings/Logs/Logs.utils'
import {
- type RawChartData,
calculateAggregatedMetrics,
calculateDateRange,
calculateHealthMetrics,
transformToBarChartData,
+ type RawChartData,
} from './useServiceHealthMetrics.utils'
export type ServiceKey = 'db' | 'functions' | 'auth' | 'storage' | 'realtime' | 'postgrest'
diff --git a/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.test.ts b/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.test.ts
index 5f71475be39..5faf3138bad 100644
--- a/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.test.ts
+++ b/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.test.ts
@@ -1,7 +1,7 @@
import dayjs from 'dayjs'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import {
calculateAggregatedMetrics,
calculateDateRange,
diff --git a/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.ts b/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.ts
index cb3d7c8da0b..dd0cdbf7339 100644
--- a/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.ts
+++ b/apps/studio/components/interfaces/Observability/useServiceHealthMetrics.utils.ts
@@ -1,12 +1,12 @@
import dayjs from 'dayjs'
-import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
+import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
import {
computeSuccessAndNonSuccessRates,
sumErrors,
sumTotal,
sumWarnings,
-} from '../HomeNew/ProjectUsage.metrics'
+} from '../ProjectHome/ProjectUsage.metrics'
/**
* Calculates the date range for fetching service health metrics
diff --git a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx b/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
rename to apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx
rename to apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/ChartDataTransform.utils.test.ts b/apps/studio/components/interfaces/ProjectHome/ChartDataTransform.utils.test.ts
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/ChartDataTransform.utils.test.ts
rename to apps/studio/components/interfaces/ProjectHome/ChartDataTransform.utils.test.ts
diff --git a/apps/studio/components/interfaces/HomeNew/ChartDataTransform.utils.ts b/apps/studio/components/interfaces/ProjectHome/ChartDataTransform.utils.ts
similarity index 99%
rename from apps/studio/components/interfaces/HomeNew/ChartDataTransform.utils.ts
rename to apps/studio/components/interfaces/ProjectHome/ChartDataTransform.utils.ts
index b2884fb9355..c732b0d656b 100644
--- a/apps/studio/components/interfaces/HomeNew/ChartDataTransform.utils.ts
+++ b/apps/studio/components/interfaces/ProjectHome/ChartDataTransform.utils.ts
@@ -1,4 +1,5 @@
import dayjs from 'dayjs'
+
import type { LogsBarChartDatum } from './ProjectUsage.metrics'
/**
diff --git a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
similarity index 89%
rename from apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
rename to apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
index 75aa631a02f..540250376f2 100644
--- a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
@@ -1,21 +1,16 @@
import {
+ closestCenter,
DndContext,
DragEndEvent,
PointerSensor,
- closestCenter,
useSensor,
useSensors,
} from '@dnd-kit/core'
-import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from '@dnd-kit/sortable'
+import { arrayMove, rectSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable'
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import dayjs from 'dayjs'
-import { Plus, RefreshCw } from 'lucide-react'
-import type { CSSProperties, DragEvent, ReactNode } from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { toast } from 'sonner'
-
+import { keepPreviousData } from '@tanstack/react-query'
import { useParams } from 'common'
-import { SnippetDropdown } from 'components/interfaces/HomeNew/SnippetDropdown'
+import { SnippetDropdown } from 'components/interfaces/ProjectHome/SnippetDropdown'
import { ReportBlock } from 'components/interfaces/Reports/ReportBlock/ReportBlock'
import { createSqlSnippetSkeletonV2 } from 'components/interfaces/SQLEditor/SQLEditor.utils'
import type { ChartConfig } from 'components/interfaces/SQLEditor/UtilityPanel/ChartConfig'
@@ -29,17 +24,20 @@ import {
UpsertContentPayload,
useContentUpsertMutation,
} from 'data/content/content-upsert-mutation'
-import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import dayjs from 'dayjs'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { uuidv4 } from 'lib/helpers'
import { useProfile } from 'lib/profile'
+import { useTrack } from 'lib/telemetry/track'
+import { Plus, RefreshCw } from 'lucide-react'
+import type { CSSProperties, DragEvent, ReactNode } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
import type { Dashboards } from 'types'
import { Button } from 'ui'
import { Row } from 'ui-patterns'
-import { keepPreviousData } from '@tanstack/react-query'
export function CustomReportSection() {
const startDate = dayjs().subtract(7, 'day').toISOString()
@@ -48,8 +46,7 @@ export function CustomReportSection() {
const { ref } = useParams()
const { profile } = useProfile()
const state = useDatabaseSelectorStateSnapshot()
- const { data: organization } = useSelectedOrganizationQuery()
- const { mutate: sendEvent } = useSendEventMutation()
+ const track = useTrack()
const { invalidateInfraMonitoringQuery } = useInvalidateAnalyticsQuery()
const { data: project } = useSelectedProjectQuery()
@@ -203,19 +200,7 @@ export function CustomReportSection() {
},
})
- if (ref && organization?.slug) {
- sendEvent({
- action: 'home_custom_report_block_added',
- properties: {
- block_id: snippet.id,
- position: 0,
- },
- groups: {
- project: ref,
- organization: organization.slug,
- },
- })
- }
+ track('home_custom_report_block_added', { block_id: snippet.id, position: 0 })
return
}
const current = [...editableReport.layout]
@@ -225,19 +210,10 @@ export function CustomReportSection() {
setEditableReport(updated)
persistReport(updated)
- if (ref && organization?.slug) {
- sendEvent({
- action: 'home_custom_report_block_added',
- properties: {
- block_id: snippet.id,
- position: current.length - 1,
- },
- groups: {
- project: ref,
- organization: organization.slug,
- },
- })
- }
+ track('home_custom_report_block_added', {
+ block_id: snippet.id,
+ position: current.length - 1,
+ })
},
[
editableReport,
@@ -245,8 +221,7 @@ export function CustomReportSection() {
ref,
profile,
upsertContent,
- organization,
- sendEvent,
+ track,
findNextPlacement,
createSnippetChartBlock,
persistReport,
@@ -265,17 +240,8 @@ export function CustomReportSection() {
setEditableReport(updated)
persistReport(updated)
- if (ref && organization?.slug && removedChart) {
- sendEvent({
- action: 'home_custom_report_block_removed',
- properties: {
- block_id: String(removedChart.id),
- },
- groups: {
- project: ref,
- organization: organization.slug,
- },
- })
+ if (removedChart) {
+ track('home_custom_report_block_removed', { block_id: String(removedChart.id) })
}
}
@@ -325,12 +291,9 @@ export function CustomReportSection() {
// Handle success optimistically
toast.success(`Successfully created new query: ${label}`, { id: toastId })
addSnippetToReport({ id: payload.id, name: label })
- sendEvent({
- action: 'custom_report_assistant_sql_block_added',
- groups: { project: ref, organization: organization?.slug ?? 'Unknown' },
- })
+ track('custom_report_assistant_sql_block_added')
},
- [ref, profile, project, upsertContent, addSnippetToReport, sendEvent, organization]
+ [ref, profile, project, upsertContent, addSnippetToReport, track]
)
const handleDragOver = (e: DragEvent) => {
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx b/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
rename to apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.types.ts b/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.types.ts
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.types.ts
rename to apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.types.ts
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx b/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.utils.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx
rename to apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStarted.utils.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx b/apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStartedSection.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStartedSection.tsx
rename to apps/studio/components/interfaces/ProjectHome/GettingStarted/GettingStartedSection.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/useGettingStartedProgress.ts b/apps/studio/components/interfaces/ProjectHome/GettingStarted/useGettingStartedProgress.ts
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/GettingStarted/useGettingStartedProgress.ts
rename to apps/studio/components/interfaces/ProjectHome/GettingStarted/useGettingStartedProgress.ts
diff --git a/apps/studio/components/interfaces/HomeNew/Home.tsx b/apps/studio/components/interfaces/ProjectHome/Home.tsx
similarity index 86%
rename from apps/studio/components/interfaces/HomeNew/Home.tsx
rename to apps/studio/components/interfaces/ProjectHome/Home.tsx
index 2a017ac00d2..ebe2082109f 100644
--- a/apps/studio/components/interfaces/HomeNew/Home.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/Home.tsx
@@ -1,32 +1,30 @@
import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import dayjs from 'dayjs'
-import { useEffect, useRef } from 'react'
-
import { IS_PLATFORM, useFlag, useParams } from 'common'
import { ProjectUsageSection as ProjectUsageSectionV1 } from 'components/interfaces/Home/ProjectUsageSection'
-import { SortableSection } from 'components/interfaces/HomeNew/SortableSection'
-import { TopSection } from 'components/interfaces/HomeNew/TopSection'
+import { SortableSection } from 'components/interfaces/ProjectHome/SortableSection'
+import { TopSection } from 'components/interfaces/ProjectHome/TopSection'
import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import dayjs from 'dayjs'
import { useLocalStorage } from 'hooks/misc/useLocalStorage'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { PROJECT_STATUS } from 'lib/constants'
+import { useTrack } from 'lib/telemetry/track'
+import { useEffect, useRef } from 'react'
import { useAppStateSnapshot } from 'state/app-state'
import { cn } from 'ui'
+
import { AdvisorSection } from './AdvisorSection'
import { CustomReportSection } from './CustomReportSection'
import { type GettingStartedState } from './GettingStarted/GettingStarted.types'
import { GettingStartedSection } from './GettingStarted/GettingStartedSection'
import { ProjectUsageSection as ProjectUsageSectionV2 } from './ProjectUsageSection'
-export const HomeV2 = () => {
+export const ProjectHome = () => {
const { enableBranching } = useParams()
const snap = useAppStateSnapshot()
const { data: project } = useSelectedProjectQuery()
- const { data: organization } = useSelectedOrganizationQuery()
- const { mutate: sendEvent } = useSendEventMutation()
+ const track = useTrack()
const showHomepageUsageV2 = useFlag('newHomepageUsageV2')
@@ -58,20 +56,11 @@ export const HomeV2 = () => {
const newIndex = items.indexOf(String(over.id))
if (oldIndex === -1 || newIndex === -1) return items
- if (project?.ref && organization?.slug) {
- sendEvent({
- action: 'home_section_rows_moved',
- properties: {
- section_moved: String(active.id),
- old_position: oldIndex,
- new_position: newIndex,
- },
- groups: {
- project: project.ref,
- organization: organization.slug,
- },
- })
- }
+ track('home_section_rows_moved', {
+ section_moved: String(active.id),
+ old_position: oldIndex,
+ new_position: newIndex,
+ })
return arrayMove(items, oldIndex, newIndex)
})
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectConnectionHoverCard.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectConnectionHoverCard.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/ProjectConnectionHoverCard.tsx
rename to apps/studio/components/interfaces/ProjectHome/ProjectConnectionHoverCard.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsage.metrics.test.ts b/apps/studio/components/interfaces/ProjectHome/ProjectUsage.metrics.test.ts
similarity index 96%
rename from apps/studio/components/interfaces/HomeNew/ProjectUsage.metrics.test.ts
rename to apps/studio/components/interfaces/ProjectHome/ProjectUsage.metrics.test.ts
index 33ac93f7d22..3b2479c1789 100644
--- a/apps/studio/components/interfaces/HomeNew/ProjectUsage.metrics.test.ts
+++ b/apps/studio/components/interfaces/ProjectHome/ProjectUsage.metrics.test.ts
@@ -1,4 +1,5 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
+
import {
computeSuccessAndNonSuccessRates,
sumErrors,
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsage.metrics.ts b/apps/studio/components/interfaces/ProjectHome/ProjectUsage.metrics.ts
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/ProjectUsage.metrics.ts
rename to apps/studio/components/interfaces/ProjectHome/ProjectUsage.metrics.ts
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
rename to apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx b/apps/studio/components/interfaces/ProjectHome/ServiceStatus.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx
rename to apps/studio/components/interfaces/ProjectHome/ServiceStatus.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx b/apps/studio/components/interfaces/ProjectHome/SnippetDropdown.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx
rename to apps/studio/components/interfaces/ProjectHome/SnippetDropdown.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/SortableSection.tsx b/apps/studio/components/interfaces/ProjectHome/SortableSection.tsx
similarity index 100%
rename from apps/studio/components/interfaces/HomeNew/SortableSection.tsx
rename to apps/studio/components/interfaces/ProjectHome/SortableSection.tsx
diff --git a/apps/studio/components/interfaces/HomeNew/TopSection.tsx b/apps/studio/components/interfaces/ProjectHome/TopSection.tsx
similarity index 97%
rename from apps/studio/components/interfaces/HomeNew/TopSection.tsx
rename to apps/studio/components/interfaces/ProjectHome/TopSection.tsx
index 27f1c511934..659de090a63 100644
--- a/apps/studio/components/interfaces/HomeNew/TopSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/TopSection.tsx
@@ -1,5 +1,5 @@
-import { ActivityStats } from 'components/interfaces/HomeNew/ActivityStats'
-import { ProjectConnectionHoverCard } from 'components/interfaces/HomeNew/ProjectConnectionHoverCard'
+import { ActivityStats } from 'components/interfaces/ProjectHome/ActivityStats'
+import { ProjectConnectionHoverCard } from 'components/interfaces/ProjectHome/ProjectConnectionHoverCard'
import { ProjectPausedState } from 'components/layouts/ProjectLayout/PausedState/ProjectPausedState'
import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
import { InlineLink } from 'components/ui/InlineLink'
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index 8cb791c9d6d..4cdec8313e2 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -35,7 +35,6 @@ import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { withAuth } from '@/hooks/misc/withAuth'
-import { usePHFlag } from '@/hooks/ui/useFlag'
import { PROJECT_STATUS } from '@/lib/constants'
import { buildStudioPageTitle } from '@/lib/page-title'
import { useAppStateSnapshot } from '@/state/app-state'
@@ -277,8 +276,6 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
const { ref } = useParams()
const state = useDatabaseSelectorStateSnapshot()
const { data: selectedProject } = useSelectedProjectQuery()
- const isHomeNew = usePHFlag('homeNew') === 'new-home'
-
const isBackupsPage = router.pathname.includes('/project/[ref]/database/backups')
const isHomePage = router.pathname === '/project/[ref]'
@@ -298,13 +295,10 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
const isProjectPauseFailed = selectedProject?.status === PROJECT_STATUS.PAUSE_FAILED
const isProjectOffline = selectedProject?.postgrestStatus === 'OFFLINE'
- // handle redirect to home for building state
- const shouldRedirectToHomeForBuilding =
- isProjectBuilding && requiresDbConnection && isHomeNew && !isHomePage
+ const shouldRedirectToHomeForBuilding = isProjectBuilding && requiresDbConnection && !isHomePage
- // We won't be showing the building state with the new home page
- const shouldShowBuildingState =
- isProjectBuilding && requiresDbConnection && !(isHomeNew && isHomePage)
+ // Don't show building state on the home page — it handles building state inline
+ const shouldShowBuildingState = isProjectBuilding && requiresDbConnection && !isHomePage
useEffect(() => {
if (shouldRedirectToHomeForBuilding && ref) {
diff --git a/apps/studio/next.config.js b/apps/studio/next.config.js
index fe823976497..a81b145ff77 100644
--- a/apps/studio/next.config.js
+++ b/apps/studio/next.config.js
@@ -88,6 +88,11 @@ const nextConfig = {
destination: '/sign-in',
permanent: false,
},
+ {
+ source: '/project/:ref/building',
+ destination: '/project/:ref',
+ permanent: false,
+ },
]
: [
{
@@ -120,6 +125,11 @@ const nextConfig = {
destination: '/project/default',
permanent: false,
},
+ {
+ source: '/project/:ref/building',
+ destination: '/project/:ref',
+ permanent: false,
+ },
]),
{
source: '/project/:ref/auth',
diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx
index 13a3cac2222..7a7322ea882 100644
--- a/apps/studio/pages/new/[slug].tsx
+++ b/apps/studio/pages/new/[slug].tsx
@@ -85,7 +85,6 @@ const Wizard: NextPageWithLayout = () => {
const projectCreationDisabled = useFlag('disableProjectCreationAndUpdate')
const showPostgresVersionSelector = useFlag('showPostgresVersionSelector')
const cloudProviderEnabled = useFlag('enableFlyCloudProvider')
- const isHomeNew = usePHFlag('homeNew') === 'new-home'
const showNonProdFields = process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
const isNotOnHigherPlan = !['team', 'enterprise', 'platform'].includes(currentOrg?.plan.id ?? '')
@@ -253,7 +252,7 @@ const Wizard: NextPageWithLayout = () => {
organization: res.organization_slug,
}
)
- router.push(isHomeNew ? `/project/${res.ref}` : `/project/${res.ref}/building`)
+ router.push(`/project/${res.ref}`)
},
})
diff --git a/apps/studio/pages/project/[ref]/building.tsx b/apps/studio/pages/project/[ref]/building.tsx
deleted file mode 100644
index 73d694b1bbc..00000000000
--- a/apps/studio/pages/project/[ref]/building.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import DefaultLayout from 'components/layouts/DefaultLayout'
-import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import type { NextPageWithLayout } from 'types'
-
-const ProjectBuildingPage: NextPageWithLayout = () => {
- return
-}
-
-ProjectBuildingPage.getLayout = (page) => (
-
- {page}
-
-)
-
-export default ProjectBuildingPage
-
-const RedirectToDashboard = () => {
- const router = useRouter()
- const { ref } = router.query
-
- useEffect(() => {
- // Use redirect to reload store data properly after project has been
- // been created or unpaused, this is necessarily especially for unpausing
- // so that the dashboard fetches the updated connection strings
- // window.location.replace(`/project/${ref}`)
-
- // TODO: for experiment only
- // Cos we already pulling new connectionString after project building/restoring
- // just use normal router.push is enough
- router.push(`/project/${ref}`)
- }, [])
-
- return null
-}
diff --git a/apps/studio/pages/project/[ref]/index.tsx b/apps/studio/pages/project/[ref]/index.tsx
index a81026a90f4..fdc368a43c6 100644
--- a/apps/studio/pages/project/[ref]/index.tsx
+++ b/apps/studio/pages/project/[ref]/index.tsx
@@ -1,25 +1,10 @@
-import { IS_PLATFORM } from 'common'
-import { Home } from 'components/interfaces/Home/Home'
-import { HomeV2 } from 'components/interfaces/HomeNew/Home'
+import { ProjectHome } from 'components/interfaces/ProjectHome/Home'
import DefaultLayout from 'components/layouts/DefaultLayout'
import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout'
-import { useTrackExperimentExposure } from 'hooks/misc/useTrackExperimentExposure'
-import { usePHFlag } from 'hooks/ui/useFlag'
import type { NextPageWithLayout } from 'types'
const HomePage: NextPageWithLayout = () => {
- const homeNewVariant = usePHFlag('homeNew')
- const isHomeNew = homeNewVariant === 'new-home'
-
- useTrackExperimentExposure(
- 'home_new',
- IS_PLATFORM && typeof homeNewVariant !== 'boolean' ? homeNewVariant : undefined
- )
-
- if (isHomeNew) {
- return
- }
- return
+ return
}
HomePage.getLayout = (page) => (
diff --git a/packages/common/first-referrer-cookie.ts b/packages/common/first-referrer-cookie.ts
index c7a7cb50705..4f9a8436fb6 100644
--- a/packages/common/first-referrer-cookie.ts
+++ b/packages/common/first-referrer-cookie.ts
@@ -286,9 +286,7 @@ export interface MwDiagData {
export function parseMwDiagCookie(cookieHeader: string): MwDiagData | null {
try {
const cookies = cookieHeader.split(';')
- const match = cookies
- .map((c) => c.trim())
- .find((c) => c.startsWith(`${MW_DIAG_COOKIE_NAME}=`))
+ const match = cookies.map((c) => c.trim()).find((c) => c.startsWith(`${MW_DIAG_COOKIE_NAME}=`))
if (!match) return null
diff --git a/packages/common/telemetry.tsx b/packages/common/telemetry.tsx
index b9c2045025e..0ea50a3931e 100644
--- a/packages/common/telemetry.tsx
+++ b/packages/common/telemetry.tsx
@@ -13,7 +13,11 @@ import { IS_PLATFORM, IS_PROD, LOCAL_STORAGE_KEYS } from './constants'
import { useFeatureFlags } from './feature-flags'
import { post } from './fetchWrappers'
import type { FirstReferrerData, MwDiagData } from './first-referrer-cookie'
-import { isExternalReferrer, parseFirstReferrerCookie, parseMwDiagCookie } from './first-referrer-cookie'
+import {
+ isExternalReferrer,
+ parseFirstReferrerCookie,
+ parseMwDiagCookie,
+} from './first-referrer-cookie'
import { ensurePlatformSuffix, isBrowser } from './helpers'
import { useParams, useTelemetryCookie } from './hooks'
import { posthogClient, type ClientTelemetryEvent } from './posthog-client'