diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx index 956253a05..e0466e30f 100644 --- a/src/Explorer/Controls/Editor/EditorReact.tsx +++ b/src/Explorer/Controls/Editor/EditorReact.tsx @@ -1,6 +1,6 @@ import { Spinner, SpinnerSize } from "@fluentui/react"; import * as React from "react"; -import { loadMonaco, monaco } from "../../LazyMonaco"; +import { MonacoNamespace, loadMonaco, monaco } from "../../LazyMonaco"; // import "./EditorReact.less"; interface EditorReactStates { @@ -21,6 +21,7 @@ export interface EditorReactProps { minimap?: monaco.editor.IEditorOptions["minimap"]; scrollBeyondLastLine?: monaco.editor.IEditorOptions["scrollBeyondLastLine"]; monacoContainerStyles?: React.CSSProperties; + configureEditor?: (monaco: MonacoNamespace, editor: monaco.editor.IStandaloneCodeEditor) => void; } export class EditorReact extends React.Component { @@ -69,7 +70,7 @@ export class EditorReact extends React.Component void) { + private async createEditor(createCallback: (monaco: MonacoNamespace, e: monaco.editor.IStandaloneCodeEditor) => void) { const options: monaco.editor.IStandaloneEditorConstructionOptions = { language: this.props.language, value: this.props.content, @@ -111,7 +116,7 @@ export class EditorReact extends React.Component void; + onContentSelected: (selectedContent: string) => void; + + /** + * Callback that will run when the "Execute Query" command is invoked. + */ + onExecuteQuery: () => void; +}; + +export const QueryEditor: React.FunctionComponent = (props) => { + const configureEditor = (monaco: MonacoNamespace, editor: monaco.editor.IStandaloneCodeEditor) => { + editor.addAction({ + id: "execute-query", + label: "Execute Query", + keybindings: [monaco.KeyMod.Shift | monaco.KeyCode.Enter], + run: props.onExecuteQuery, + }); + } + + return ; +} diff --git a/src/Explorer/LazyMonaco.ts b/src/Explorer/LazyMonaco.ts index 4b1c97c52..8d59573b1 100644 --- a/src/Explorer/LazyMonaco.ts +++ b/src/Explorer/LazyMonaco.ts @@ -3,3 +3,4 @@ export type { monaco }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const loadMonaco = () => import(/* webpackChunkName: "lazy-monaco" */ "monaco-editor/esm/vs/editor/editor.api"); +export type MonacoNamespace = Awaited>; diff --git a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx index 240881310..6010e39bf 100644 --- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx +++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx @@ -2,7 +2,7 @@ import { Stack } from "@fluentui/react"; import { QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants"; import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent"; -import { EditorReact } from "Explorer/Controls/Editor/EditorReact"; +import { QueryEditor } from "Explorer/Controls/Editor/QueryEditor"; import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter"; import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane"; import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar"; @@ -104,15 +104,11 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query )} - setQuery(newQuery)} onContentSelected={(selectedQuery: string) => setSelectedQuery(selectedQuery)} + onExecuteQuery={() => OnExecuteQueryClick(useQueryCopilot as Partial)} /> diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx index ff44a4be3..111abcbeb 100644 --- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx @@ -3,6 +3,7 @@ import { FeedOptions, QueryOperationOptions } from "@azure/cosmos"; import { Platform, configContext } from "ConfigContext"; import { useDialog } from "Explorer/Controls/Dialog"; +import { QueryEditor } from "Explorer/Controls/Editor/QueryEditor"; import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal"; import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext"; import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar"; @@ -39,7 +40,6 @@ import { userContext } from "../../../UserContext"; import * as QueryUtils from "../../../Utils/QueryUtils"; import { useSidePanel } from "../../../hooks/useSidePanel"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; -import { EditorReact } from "../../Controls/Editor/EditorReact"; import Explorer from "../../Explorer"; import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter"; import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane"; @@ -599,15 +599,11 @@ export default class QueryTabComponent extends React.Component
- this.onChangeContent(newContent)} onContentSelected={(selectedContent: string) => this.onSelectedContent(selectedContent)} + onExecuteQuery={() => this.onExecuteQueryClick()} />