From abc934d88f65dac93ade2615bd9f024658e23b81 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Sun, 27 Apr 2025 16:29:35 +0530 Subject: [PATCH] feat: add apis and hooks --- frontend/package.json | 1 + .../api/querySuggestions/getKeySuggestions.ts | 11 ++++++++ .../querySuggestions/getValueSuggestion.ts | 11 ++++++++ .../CodeMirrorWhereClause.tsx | 21 ++++++++++++++ .../useGetQueryKeySuggestions.ts | 13 +++++++++ .../useGetQueryKeyValueSuggestions.ts | 13 +++++++++ .../src/types/api/querySuggestions/types.ts | 28 +++++++++++++++++++ frontend/yarn.lock | 2 +- 8 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 frontend/src/api/querySuggestions/getKeySuggestions.ts create mode 100644 frontend/src/api/querySuggestions/getValueSuggestion.ts create mode 100644 frontend/src/hooks/querySuggestions/useGetQueryKeySuggestions.ts create mode 100644 frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts create mode 100644 frontend/src/types/api/querySuggestions/types.ts diff --git a/frontend/package.json b/frontend/package.json index 22618a1ffdfc..8c2bfe0dff1a 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/api/querySuggestions/getKeySuggestions.ts b/frontend/src/api/querySuggestions/getKeySuggestions.ts new file mode 100644 index 000000000000..3bd9d723a90a --- /dev/null +++ b/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> => + axios.get(`/fields/keys?signal=${props.signal}`); diff --git a/frontend/src/api/querySuggestions/getValueSuggestion.ts b/frontend/src/api/querySuggestions/getValueSuggestion.ts new file mode 100644 index 000000000000..089b814e789e --- /dev/null +++ b/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> => + axios.get(`/fields/values?signal=${props.signal}&name=${props.key}`); diff --git a/frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx b/frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx index 688eb76c820e..4b40e0c0d00d 100644 --- a/frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx +++ b/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 (
diff --git a/frontend/src/hooks/querySuggestions/useGetQueryKeySuggestions.ts b/frontend/src/hooks/querySuggestions/useGetQueryKeySuggestions.ts new file mode 100644 index 000000000000..11da1e266c51 --- /dev/null +++ b/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, + AxiosError +> => + useQuery, AxiosError>({ + queryKey: ['queryKeySuggestions'], + queryFn: () => getKeySuggestions({ signal: 'trace' }), + }); diff --git a/frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts b/frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts new file mode 100644 index 000000000000..ec92d1e0a82b --- /dev/null +++ b/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, + AxiosError +> => + useQuery, AxiosError>({ + queryKey: ['queryKeyValueSuggestions'], + queryFn: () => getValueSuggestions({ signal: 'trace', key: 'trace' }), + }); diff --git a/frontend/src/types/api/querySuggestions/types.ts b/frontend/src/types/api/querySuggestions/types.ts new file mode 100644 index 000000000000..5ee34a21d363 --- /dev/null +++ b/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; +} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 5f4070ed155e..82470d246f53 100644 --- a/frontend/yarn.lock +++ b/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==