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'