feat(provider): add query builder provider (#2496)

Co-authored-by: Yevhen Shevchenko <yevhen@signoz.io>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/AppRoutes/index.tsx

@@ -5,6 +5,7 @@ import AppLayout from 'container/AppLayout';
 import { useThemeConfig } from 'hooks/useDarkMode';
 import { NotificationProvider } from 'hooks/useNotifications';
 import history from 'lib/history';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import React, { Suspense } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 
@@ -17,26 +18,28 @@ function App(): JSX.Element {
 	return (
 		<ConfigProvider theme={themeConfig}>
 			<NotificationProvider>
-				<Router history={history}>
+				<QueryBuilderProvider>
-					<PrivateRoute>
+					<Router history={history}>
-						<AppLayout>
+						<PrivateRoute>
-							<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+							<AppLayout>
-								<Switch>
+								<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-									{routes.map(({ path, component, exact }) => (
+									<Switch>
-										<Route
+										{routes.map(({ path, component, exact }) => (
-											key={`${path}`}
+											<Route
-											exact={exact}
+												key={`${path}`}
-											path={path}
+												exact={exact}
-											component={component}
+												path={path}
-										/>
+												component={component}
-									))}
+											/>
+										))}
 
-									<Route path="*" component={NotFound} />
+										<Route path="*" component={NotFound} />
-								</Switch>
+									</Switch>
-							</Suspense>
+								</Suspense>
-						</AppLayout>
+							</AppLayout>
-					</PrivateRoute>
+						</PrivateRoute>
-				</Router>
+					</Router>
+				</QueryBuilderProvider>
 			</NotificationProvider>
 		</ConfigProvider>
 	);

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/query.tsx

@@ -68,6 +68,8 @@ function MetricsBuilder({
 		});
 	}, [metricName]);
 
+	// TODO: rewrite to Form component from antd
+
 	return (
 		<QueryHeader
 			name={queryData.name}

frontend/src/hooks/useQueryBuilder.ts

@@ -0,0 +1,9 @@
+import {
+	QueryBuilderContext,
+	QueryBuilderContextType,
+} from 'providers/QueryBuilder';
+import { useContext } from 'react';
+
+export function useQueryBuilder(): QueryBuilderContextType {
+	return useContext(QueryBuilderContext);
+}

frontend/src/providers/QueryBuilder.tsx

@@ -0,0 +1,81 @@
+import React, {
+	createContext,
+	PropsWithChildren,
+	useCallback,
+	useMemo,
+	useState,
+} from 'react';
+import { useParams } from 'react-router-dom';
+
+// ** TODO: temporary types for context, fix it during development
+export type QueryBuilderContextType = {
+	queryBuilderData: unknown[];
+	resetQueryBuilderData: () => void;
+	handleSetQueryBuilderData: () => void;
+};
+
+export const QueryBuilderContext = createContext<QueryBuilderContextType>({
+	queryBuilderData: [
+		{
+			queryData: '',
+			queryFormulas: '',
+		},
+	],
+	resetQueryBuilderData: () => {},
+	handleSetQueryBuilderData: () => {},
+});
+
+const initialQueryBuilderData: unknown[] = [
+	{
+		queryData: '',
+		queryFormulas: '',
+	},
+];
+
+export function QueryBuilderProvider({
+	children,
+}: PropsWithChildren): JSX.Element {
+	// ** TODO: get queryId from url for getting data for query builder
+	// ** TODO: type the params which will be used for request of the data for query builder
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const params = useParams();
+
+	// ** TODO: create state for queryBuilder
+	// ** TODO: create state for queryFormulas
+
+	// ** TODO: Find out the types of the queryBuilder state
+	// ** TODO: Check exist version of the functionality
+	const [queryBuilderData, setQueryBuilderData] = useState<unknown[]>([
+		{
+			queryData: '',
+			queryFormulas: '',
+		},
+	]);
+
+	const resetQueryBuilderData = useCallback((): void => {
+		setQueryBuilderData(initialQueryBuilderData);
+	}, []);
+
+	const handleSetQueryBuilderData = useCallback((): void => {}, []);
+	// ** TODO: Discuss with Palash how the state of the queryBuilder and queryFormulas
+	// ** TODO: should be filled from url
+
+	// ** TODO: create set function for state
+
+	// ** TODO: put these values and setter to the context value
+
+	const contextValues: QueryBuilderContextType = useMemo(
+		() => ({
+			queryBuilderData,
+			resetQueryBuilderData,
+			handleSetQueryBuilderData,
+		}),
+		[queryBuilderData, resetQueryBuilderData, handleSetQueryBuilderData],
+	);
+
+	return (
+		<QueryBuilderContext.Provider value={contextValues}>
+			{children}
+		</QueryBuilderContext.Provider>
+	);
+}