feat(dashboard-v2): serve V2 dashboard pages behind use_dashboard_v2 flag

Gate the dashboards list & detail entry points on useIsDashboardV2() — V1 falls
through when the flag is off (V1 detail logic moved into DashboardPage.tsx). Un-park
the V2 page directories in tsconfig so they typecheck and ship.

Also convert the // header comments in states.module.scss to /* */ — once the V2
list is wired into the import graph, vite compiles that stylesheet and the
backtick in the // comment crashed the CSS-modules parser ('Unclosed string').

frontend/src/pages/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import NotFound from 'components/NotFound';
+import Spinner from 'components/Spinner';
+import DashboardContainer from 'container/DashboardContainer';
+import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { ErrorType } from 'types/common';
+
+function DashboardPage(): JSX.Element {
+	const { dashboardId } = useParams<{ dashboardId: string }>();
+
+	const [onModal, Content] = Modal.useModal();
+
+	const { isLoading, isError, isFetching, error } = useDashboardBootstrap(
+		dashboardId,
+		{ confirm: onModal.confirm },
+	);
+
+	const dashboardTitle = useDashboardStore((s) => s.dashboardData?.data.title);
+
+	useEffect(() => {
+		document.title = dashboardTitle || document.title;
+	}, [dashboardTitle]);
+
+	const errorMessage = isError
+		? (error as AxiosError<{ errorType: string }>)?.response?.data?.errorType
+		: 'Something went wrong';
+
+	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
+		return <NotFound />;
+	}
+
+	if (isError && errorMessage) {
+		return <Typography>{errorMessage}</Typography>;
+	}
+
+	if (isLoading) {
+		return <Spinner tip="Loading.." />;
+	}
+
+	return (
+		<>
+			{Content}
+			<DashboardContainer />
+		</>
+	);
+}
+
+export default DashboardPage;

frontend/src/pages/DashboardPage/index.tsx

@@ -1,53 +1,15 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-import NotFound from 'components/NotFound';
-import Spinner from 'components/Spinner';
-import DashboardContainer from 'container/DashboardContainer';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
-import { ErrorType } from 'types/common';
+import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
+import DashboardPageV2 from 'pages/DashboardPageV2';
 
-function DashboardPage(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
+import DashboardPage from './DashboardPage';
 
-	const [onModal, Content] = Modal.useModal();
+// Serves the V2 dashboard detail page when the `use_dashboard_v2` flag is active;
+// otherwise the existing V1 page. Lets V2 dark-ship behind the flag without
+// changing route definitions.
+function DashboardPageEntry(): JSX.Element {
+	const isDashboardV2 = useIsDashboardV2();
 
-	const { isLoading, isError, isFetching, error } = useDashboardBootstrap(
-		dashboardId,
-		{ confirm: onModal.confirm },
-	);
-
-	const dashboardTitle = useDashboardStore((s) => s.dashboardData?.data.title);
-
-	useEffect(() => {
-		document.title = dashboardTitle || document.title;
-	}, [dashboardTitle]);
-
-	const errorMessage = isError
-		? (error as AxiosError<{ errorType: string }>)?.response?.data?.errorType
-		: 'Something went wrong';
-
-	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
-		return <NotFound />;
-	}
-
-	if (isError && errorMessage) {
-		return <Typography>{errorMessage}</Typography>;
-	}
-
-	if (isLoading) {
-		return <Spinner tip="Loading.." />;
-	}
-
-	return (
-		<>
-			{Content}
-			<DashboardContainer />
-		</>
-	);
+	return isDashboardV2 ? <DashboardPageV2 /> : <DashboardPage />;
 }
 
-export default DashboardPage;
+export default DashboardPageEntry;

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -4,7 +4,7 @@ import type {
 	DashboardtypesLayoutDTO,
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesPatchOpDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { GridItem } from './utils';
 
@@ -16,7 +16,7 @@ import type { GridItem } from './utils';
  * patches in DashboardSettings/General and DashboardDescription).
  */
 
-const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
+const { add, replace, remove } = DashboardtypesPatchOpDTO;
 
 const PANEL_REF_PREFIX = '#/spec/panels/';
 

frontend/src/pages/DashboardsListPage/index.tsx

@@ -1,3 +1,15 @@
+import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
+import DashboardsListPageV2 from 'pages/DashboardsListPageV2';
+
 import DashboardsListPage from './DashboardsListPage';
 
-export default DashboardsListPage;
+// Serves the V2 dashboards list when the `use_dashboard_v2` flag is active;
+// otherwise the existing V1 list. Lets V2 dark-ship behind the flag without
+// changing route definitions.
+function DashboardsListPageEntry(): JSX.Element {
+	const isDashboardV2 = useIsDashboardV2();
+
+	return isDashboardV2 ? <DashboardsListPageV2 /> : <DashboardsListPage />;
+}
+
+export default DashboardsListPageEntry;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.tsx

@@ -8,6 +8,10 @@ import {
 	createDashboardV2,
 	useListDashboardsV2,
 } from 'api/generated/services/dashboard';
+import {
+	DashboardtypesListOrderDTO,
+	DashboardtypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { RequestDashboardBtn } from 'container/ListOfDashboard/RequestDashboardBtn';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -82,8 +86,10 @@ function DashboardsList(): JSX.Element {
 	const listParams = useMemo(
 		() => ({
 			query: searchString.trim() || undefined,
-			sort: sortColumn,
-			order: sortOrder,
+			// SortColumn/SortOrder string-literal unions mirror these generated
+			// enums 1:1 (identical values); cast to satisfy the client param.
+			sort: sortColumn as DashboardtypesListSortDTO,
+			order: sortOrder as DashboardtypesListOrderDTO,
 			limit: PAGE_SIZE,
 			offset: (page - 1) * PAGE_SIZE,
 		}),

frontend/src/pages/DashboardsListPageV2/components/states/states.module.scss

@@ -1,5 +1,5 @@
-// Shared building blocks for the dashboards-list view states.
-// Composed via CSS-modules `composes:` from each state's own SCSS.
+/* Shared building blocks for the dashboards-list view states. */
+/* Composed via CSS-modules `composes:` from each state's own SCSS. */
 
 .cardWrapper {
 	display: flex;

frontend/src/pages/DashboardsListPageV2/utils.ts

@@ -1,8 +1,8 @@
 import dayjs from 'dayjs';
 import { isEmpty } from 'lodash-es';
-import type { DashboardtypesGettableDashboardWithPinDTO } from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesListedDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
-export type DashboardListItem = DashboardtypesGettableDashboardWithPinDTO;
+export type DashboardListItem = DashboardtypesListedDashboardV2DTO;
 
 export const tagsToStrings = (
 	tags: { key: string; value: string }[] | null | undefined,

frontend/tsconfig.json

@@ -48,9 +48,7 @@
 		"node_modules",
 		"src/parser/*.ts",
 		"src/parser/TraceOperatorParser/*.ts",
-		"orval.config.ts",
-		"src/pages/DashboardsListPageV2/**/*",
-		"src/pages/DashboardPageV2/**/*"
+		"orval.config.ts"
 	],
 	"include": [
 		"./src",