Compare commits

..

7 Commits

Author SHA1 Message Date
Satyapriya Bai
5659e74754 Resolved Comments and enhanced code. 2024-07-01 13:20:41 +05:30
Satyapriya Bai
199ce64bdb Merge branch 'master' of https://github.com/Azure/cosmos-explorer into 2819223 2024-07-01 13:18:45 +05:30
Satyapriya Bai
e984719991 reset. 2024-07-01 13:17:27 +05:30
MokireddySampath
f6ebb20ff1 Update QueryCopilotPromptbar.tsx 2024-01-30 00:24:05 +05:30
MokireddySampath
8599f1d98c Merge branch 'master' into 2819223 2024-01-04 22:09:47 +05:30
Sampath
f6e8fb012d lint changes done 2023-12-11 23:54:28 +05:30
Sampath
13fafb624e keyboard navigation has been added to the suggestions under the querycopilot search bar 2023-12-11 23:44:54 +05:30
5 changed files with 70 additions and 37 deletions

View File

@@ -1,8 +1,7 @@
export interface QueryRequestOptions { export interface QueryRequestOptions {
$skipToken?: string; $skipToken?: string;
$top?: number; $top?: number;
$allowPartialScopes: boolean; subscriptions: string[];
subscriptions?: string[];
} }
export interface QueryResponse { export interface QueryResponse {

View File

@@ -20,7 +20,7 @@
outline-offset: 2px; outline-offset: 2px;
} }
.outlineNone{ .outlineNone {
outline: none !important; outline: none !important;
} }
@@ -28,3 +28,8 @@
.deleteQuery:focus::after { .deleteQuery:focus::after {
outline: none !important; outline: none !important;
} }
.highlightedButtonStyles {
outline: 1px dashed back;
background-color: #ebebeb;
}

View File

@@ -34,12 +34,13 @@ import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/
import { Action } from "Shared/Telemetry/TelemetryConstants"; import { Action } from "Shared/Telemetry/TelemetryConstants";
import { userContext } from "UserContext"; import { userContext } from "UserContext";
import { useQueryCopilot } from "hooks/useQueryCopilot"; import { useQueryCopilot } from "hooks/useQueryCopilot";
import React, { useRef, useState } from "react"; import React, { useCallback, useRef, useState } from "react";
import HintIcon from "../../../images/Hint.svg"; import HintIcon from "../../../images/Hint.svg";
import RecentIcon from "../../../images/Recent.svg"; import RecentIcon from "../../../images/Recent.svg";
import errorIcon from "../../../images/close-black.svg"; import errorIcon from "../../../images/close-black.svg";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor"; import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { useTabs } from "../../hooks/useTabs"; import { useTabs } from "../../hooks/useTabs";
import "../Controls/ThroughputInput/ThroughputInput.less";
import { useCopilotStore } from "../QueryCopilot/QueryCopilotContext"; import { useCopilotStore } from "../QueryCopilot/QueryCopilotContext";
import { useSelectedNode } from "../useSelectedNode"; import { useSelectedNode } from "../useSelectedNode";
@@ -108,7 +109,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
setErrorMessage, setErrorMessage,
errorMessage, errorMessage,
} = useCopilotStore(); } = useCopilotStore();
const [focusedIndex, setFocusedIndex] = useState(-1);
const sampleProps: SamplePromptsProps = { const sampleProps: SamplePromptsProps = {
isSamplePromptsOpen: isSamplePromptsOpen, isSamplePromptsOpen: isSamplePromptsOpen,
setIsSamplePromptsOpen: setIsSamplePromptsOpen, setIsSamplePromptsOpen: setIsSamplePromptsOpen,
@@ -301,6 +302,41 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
return "Content is updated"; return "Content is updated";
} }
}; };
const openSamplePrompts = () => {
inputEdited.current = true;
setShowSamplePrompts(true);
};
const suggestionHistory = filteredHistories.concat(filteredSuggestedPrompts.map((item) => item.text));
const handleKeyDown: React.KeyboardEventHandler = (e) => {
const { key } = e;
if (key === "ArrowDown") {
setFocusedIndex((focusedIndex + 1) % suggestionHistory.length);
}
if (key === "ArrowUp") {
setFocusedIndex((focusedIndex + suggestionHistory.length - 1) % suggestionHistory.length);
}
if (key === "Enter") {
e.preventDefault();
handleSelection(focusedIndex);
}
};
const handleSelection = (selectedIndex: number) => {
const selectedItem = suggestionHistory[selectedIndex];
if (!selectedItem) {
return resetSearchComplete();
} else {
handlePromptSet(selectedItem);
}
};
const resetSearchComplete = useCallback(() => {
setFocusedIndex(-1);
setShowSamplePrompts(false);
}, []);
const handlePromptSet = (promptText: string) => {
inputEdited.current = true;
setUserPrompt(promptText);
};
React.useEffect(() => { React.useEffect(() => {
useTabs.getState().setIsQueryErrorThrown(false); useTabs.getState().setIsQueryErrorThrown(false);
@@ -331,23 +367,13 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
id="naturalLanguageInput" id="naturalLanguageInput"
value={userPrompt} value={userPrompt}
onChange={handleUserPromptChange} onChange={handleUserPromptChange}
onClick={() => { onClick={openSamplePrompts}
inputEdited.current = true; onFocus={() => setShowSamplePrompts(true)}
setShowSamplePrompts(true); onKeyDown={handleKeyDown}
}}
onKeyDown={(e) => {
if (e.key === "Enter" && userPrompt) {
inputEdited.current = true;
startGenerateQueryProcess();
}
}}
style={{ lineHeight: 30 }} style={{ lineHeight: 30 }}
styles={{ styles={{
root: { width: "100%" }, root: { width: "100%" },
suffix: { suffix: { background: "none", padding: 0 },
background: "none",
padding: 0,
},
fieldGroup: { fieldGroup: {
borderRadius: 4, borderRadius: 4,
borderColor: "#D1D1D1", borderColor: "#D1D1D1",
@@ -360,7 +386,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
}, },
}} }}
disabled={isGeneratingQuery} disabled={isGeneratingQuery}
autoComplete="off" autoComplete="list"
aria-expanded={showSamplePrompts}
placeholder="Ask a question in natural language and well generate the query for you." placeholder="Ask a question in natural language and well generate the query for you."
aria-labelledby="copilot-textfield-label" aria-labelledby="copilot-textfield-label"
onRenderSuffix={() => { onRenderSuffix={() => {
@@ -369,7 +396,10 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
iconProps={{ iconName: "Send" }} iconProps={{ iconName: "Send" }}
disabled={isGeneratingQuery || !userPrompt.trim()} disabled={isGeneratingQuery || !userPrompt.trim()}
style={{ background: "none" }} style={{ background: "none" }}
onClick={() => startGenerateQueryProcess()} onClick={() => {
startGenerateQueryProcess();
setShowSamplePrompts(false);
}}
aria-label="Send" aria-label="Send"
/> />
); );
@@ -434,6 +464,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
}} }}
onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />} onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
styles={promptStyles} styles={promptStyles}
className={focusedIndex === i ? "highlightedButtonStyles" : "buttonstyles"}
> >
{history} {history}
</DefaultButton> </DefaultButton>
@@ -454,7 +485,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
> >
Suggested Prompts Suggested Prompts
</Text> </Text>
{filteredSuggestedPrompts.map((prompt) => ( {filteredSuggestedPrompts.map((prompt, index) => (
<DefaultButton <DefaultButton
key={prompt.id} key={prompt.id}
onClick={() => { onClick={() => {
@@ -464,6 +495,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
}} }}
onRenderIcon={() => <Image src={HintIcon} />} onRenderIcon={() => <Image src={HintIcon} />}
styles={promptStyles} styles={promptStyles}
className={focusedIndex === filteredHistories.length + index ? "highlightedButtonStyles" : ""}
> >
{prompt.text} {prompt.text}
</DefaultButton> </DefaultButton>

View File

@@ -1,6 +1,5 @@
import { useMongoProxyEndpoint } from "Common/MongoProxyClient"; import { useMongoProxyEndpoint } from "Common/MongoProxyClient";
import React, { Component } from "react"; import React, { Component } from "react";
import * as Constants from "../../../Common/Constants";
import { configContext } from "../../../ConfigContext"; import { configContext } from "../../../ConfigContext";
import * as ViewModels from "../../../Contracts/ViewModels"; import * as ViewModels from "../../../Contracts/ViewModels";
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants"; import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
@@ -113,12 +112,6 @@ export default class MongoShellTabComponent extends Component<
const resourceId = databaseAccount?.id; const resourceId = databaseAccount?.id;
const accountName = databaseAccount?.name; const accountName = databaseAccount?.name;
const documentEndpoint = databaseAccount?.properties.mongoEndpoint || databaseAccount?.properties.documentEndpoint; const documentEndpoint = databaseAccount?.properties.mongoEndpoint || databaseAccount?.properties.documentEndpoint;
const mongoEndpoint =
documentEndpoint.substr(
Constants.MongoDBAccounts.protocol.length + 3,
documentEndpoint.length -
(Constants.MongoDBAccounts.protocol.length + 2 + Constants.MongoDBAccounts.defaultPort.length),
) + Constants.MongoDBAccounts.defaultPort.toString();
const databaseId = this.props.collection.databaseId; const databaseId = this.props.collection.databaseId;
const collectionId = this.props.collection.id(); const collectionId = this.props.collection.id();
const apiEndpoint = this._useMongoProxyEndpoint const apiEndpoint = this._useMongoProxyEndpoint
@@ -132,7 +125,7 @@ export default class MongoShellTabComponent extends Component<
data: { data: {
resourceId: resourceId, resourceId: resourceId,
accountName: accountName, accountName: accountName,
mongoEndpoint: this._useMongoProxyEndpoint ? documentEndpoint : mongoEndpoint, mongoEndpoint: documentEndpoint,
authorization: authorization, authorization: authorization,
databaseId: databaseId, databaseId: databaseId,
collectionId: collectionId, collectionId: collectionId,

View File

@@ -51,13 +51,17 @@ export async function fetchSubscriptionsFromGraph(accessToken: string): Promise<
do { do {
const body = { const body = {
query: subscriptionsQuery, query: subscriptionsQuery,
...(skipToken
? {
options: { options: {
$allowPartialScopes: true,
$top: 150,
...(skipToken && {
$skipToken: skipToken, $skipToken: skipToken,
}),
} as QueryRequestOptions, } as QueryRequestOptions,
}
: {
options: {
$top: 150,
} as QueryRequestOptions,
}),
}; };
const response = await fetch(managementResourceGraphAPIURL, { const response = await fetch(managementResourceGraphAPIURL, {