feat: add apis and hooks

frontend/package.json

@@ -28,6 +28,7 @@
 	"dependencies": {
 		"@ant-design/colors": "6.0.0",
 		"@ant-design/icons": "4.8.0",
+		"@codemirror/autocomplete": "6.18.6",
 		"@codemirror/lang-javascript": "6.2.3",
 		"@dnd-kit/core": "6.1.0",
 		"@dnd-kit/modifiers": "7.0.0",

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -0,0 +1,11 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyRequestProps,
+	QueryKeySuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getKeySuggestions = (
+	props: QueryKeyRequestProps,
+): Promise<AxiosResponse<QueryKeySuggestionsResponseProps>> =>
+	axios.get(`/fields/keys?signal=${props.signal}`);

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -0,0 +1,11 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyValueRequestProps,
+	QueryKeyValueSuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getValueSuggestions = (
+	props: QueryKeyValueRequestProps,
+): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> =>
+	axios.get(`/fields/values?signal=${props.signal}&name=${props.key}`);

frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-nested-ternary */
 
 import './CodeMirrorWhereClause.styles.scss';
@@ -8,6 +9,11 @@ import {
 	InfoCircleOutlined,
 	QuestionCircleOutlined,
 } from '@ant-design/icons';
+import {
+	autocompletion,
+	CompletionContext,
+	CompletionResult,
+} from '@codemirror/autocomplete';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { Badge, Card, Divider, Space, Tooltip, Typography } from 'antd';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -122,6 +128,19 @@ function CodeMirrorWhereClause(): JSX.Element {
 		);
 	};
 
+	function myCompletions(context: CompletionContext): CompletionResult | null {
+		const word = context.matchBefore(/\w*/);
+		if (word?.from === word?.to && !context.explicit) return null;
+		return {
+			from: word?.from ?? 0,
+			options: [
+				{ label: 'match', type: 'keyword' },
+				{ label: 'hello', type: 'variable', info: '(World)' },
+				{ label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
+			],
+		};
+	}
+
 	return (
 		<div className="code-mirror-where-clause">
 			<Card
@@ -138,7 +157,9 @@ function CodeMirrorWhereClause(): JSX.Element {
 					theme="dark"
 					onChange={handleChange}
 					onUpdate={handleUpdate}
+					autoFocus
 					placeholder="Enter your query (e.g., status = 'error' AND service = 'frontend')"
+					extensions={[autocompletion({ override: [myCompletions] })]}
 				/>
 
 				<Space className="cursor-position" size={4}>

frontend/src/hooks/querySuggestions/useGetQueryKeySuggestions.ts

@@ -0,0 +1,13 @@
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { AxiosError, AxiosResponse } from 'axios';
+import { useQuery, UseQueryResult } from 'react-query';
+import { QueryKeySuggestionsResponseProps } from 'types/api/querySuggestions/types';
+
+export const useGetQueryKeySuggestions = (): UseQueryResult<
+	AxiosResponse<QueryKeySuggestionsResponseProps>,
+	AxiosError
+> =>
+	useQuery<AxiosResponse<QueryKeySuggestionsResponseProps>, AxiosError>({
+		queryKey: ['queryKeySuggestions'],
+		queryFn: () => getKeySuggestions({ signal: 'trace' }),
+	});

frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts

@@ -0,0 +1,13 @@
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { AxiosError, AxiosResponse } from 'axios';
+import { useQuery, UseQueryResult } from 'react-query';
+import { QueryKeyValueSuggestionsResponseProps } from 'types/api/querySuggestions/types';
+
+export const useGetQueryKeyValueSuggestions = (): UseQueryResult<
+	AxiosResponse<QueryKeyValueSuggestionsResponseProps>,
+	AxiosError
+> =>
+	useQuery<AxiosResponse<QueryKeyValueSuggestionsResponseProps>, AxiosError>({
+		queryKey: ['queryKeyValueSuggestions'],
+		queryFn: () => getValueSuggestions({ signal: 'trace', key: 'trace' }),
+	});

frontend/src/types/api/querySuggestions/types.ts

@@ -0,0 +1,28 @@
+export interface QueryKeySuggestionsProps {
+	id: string;
+	name: string;
+}
+
+export interface QueryKeySuggestionsResponseProps {
+	status: string;
+	data: QueryKeySuggestionsProps[];
+}
+
+export interface QueryKeyRequestProps {
+	signal: string;
+}
+
+export interface QueryKeyValueSuggestionsProps {
+	id: string;
+	name: string;
+}
+
+export interface QueryKeyValueSuggestionsResponseProps {
+	status: string;
+	data: QueryKeyValueSuggestionsProps[];
+}
+
+export interface QueryKeyValueRequestProps {
+	signal: string;
+	key: string;
+}

frontend/yarn.lock

@@ -2359,7 +2359,7 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-7.0.1.tgz#457233b0a18741b7711855044102b82bae7a070b"
   integrity sha512-URg8UM6lfC9ZYqFipItRSxYJdgpU5d2Z4KnjsJ+rj6tgAmGme7E+PQNCiud8g0HDaZKMovu2qjfa0f5Ge0Vlsg==
 
-"@codemirror/autocomplete@^6.0.0":
+"@codemirror/autocomplete@6.18.6", "@codemirror/autocomplete@^6.0.0":
   version "6.18.6"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz#de26e864a1ec8192a1b241eb86addbb612964ddb"
   integrity sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==