random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-10-13 15:28:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Commenting or deleting UI references to Query Advisor (#2209)

Browse Source 
* Commenting or deleting UI references to Query Advisor

* Removing (commenting out) QueryTabComponent from two views

* Added new splash screen button, commented out copilot prompt bar

* Fixing unit test
This commit is contained in:
vchske 2025-08-28 15:47:29 -07:00 committed by GitHub
parent 8e2c46301d
commit 0817acf404
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 116 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Explorer/Panes/SettingsPane/SettingsPane.tsx
View File

@ -1099,15 +1099,15 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
<div className={styles.settingsSectionContainer}> <div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}> <div className={styles.settingsSectionDescription}>
This is a sample database and collection with synthetic product data you can use to explore using This is a sample database and collection with synthetic product data you can use to explore using
NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and NoSQL queries. This will appear as another database in the Data Explorer UI, and is created by,
is created by, and maintained by Microsoft at no cost to you. and maintained by Microsoft at no cost to you.
</div> </div>
<Checkbox <Checkbox
styles={{ styles={{
label: { padding: 0 }, label: { padding: 0 },
}} }}
className="padding" className="padding"
ariaLabel="Enable sample db for Query Advisor" ariaLabel="Enable sample db for query exploration"
checked={copilotSampleDBEnabled} checked={copilotSampleDBEnabled}
onChange={handleSampleDatabaseChange} onChange={handleSampleDatabaseChange}
label="Enable sample database" label="Enable sample database"

32
src/Explorer/QueryCopilot/QueryCopilotTab.tsx
View File

@ -1,11 +1,9 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
import { Stack } from "@fluentui/react"; import { Stack } from "@fluentui/react";
import { QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent"; import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
import { EditorReact } from "Explorer/Controls/Editor/EditorReact"; import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter"; import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane"; import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar";
import { readCopilotToggleStatus, saveCopilotToggleStatus } from "Explorer/QueryCopilot/QueryCopilotUtilities"; import { readCopilotToggleStatus, saveCopilotToggleStatus } from "Explorer/QueryCopilot/QueryCopilotUtilities";
import { OnExecuteQueryClick } from "Explorer/QueryCopilot/Shared/QueryCopilotClient"; import { OnExecuteQueryClick } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
import { QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces"; import { QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
@ -13,7 +11,6 @@ import { QueryCopilotResults } from "Explorer/QueryCopilot/Shared/QueryCopilotRe
import { userContext } from "UserContext"; import { userContext } from "UserContext";
import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot"; import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
import { useSidePanel } from "hooks/useSidePanel"; import { useSidePanel } from "hooks/useSidePanel";
import { ReactTabKind, TabsState, useTabs } from "hooks/useTabs";
import React, { useState } from "react"; import React, { useState } from "react";
import SplitterLayout from "react-splitter-layout"; import SplitterLayout from "react-splitter-layout";
import QueryCommandIcon from "../../../images/CopilotCommand.svg"; import QueryCommandIcon from "../../../images/CopilotCommand.svg";
@ -26,7 +23,8 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
const [copilotActive, setCopilotActive] = useState<boolean>(() => const [copilotActive, setCopilotActive] = useState<boolean>(() =>
readCopilotToggleStatus(userContext.databaseAccount), readCopilotToggleStatus(userContext.databaseAccount),
); );
const [tabActive, setTabActive] = useState<boolean>(true); //TODO: Uncomment this useState when query copilot is reinstated in DE
// const [tabActive, setTabActive] = useState<boolean>(true);
const getCommandbarButtons = (): CommandButtonComponentProps[] => { const getCommandbarButtons = (): CommandButtonComponentProps[] => {
const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query"; const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query";
@ -70,17 +68,18 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
useCommandBar.getState().setContextButtons(getCommandbarButtons()); useCommandBar.getState().setContextButtons(getCommandbarButtons());
}, [query, selectedQuery, copilotActive]); }, [query, selectedQuery, copilotActive]);
React.useEffect(() => { //TODO: Uncomment this effect when query copilot is reinstated in DE
return () => { // React.useEffect(() => {
useTabs.subscribe((state: TabsState) => { // return () => {
if (state.activeReactTab === ReactTabKind.QueryCopilot) { // useTabs.subscribe((state: TabsState) => {
setTabActive(true); // if (state.activeReactTab === ReactTabKind.QueryCopilot) {
} else { // setTabActive(true);
setTabActive(false); // } else {
} // setTabActive(false);
}); // }
}; // });
}, []); // };
// }, []);
const toggleCopilot = (toggle: boolean) => { const toggleCopilot = (toggle: boolean) => {
setCopilotActive(toggle); setCopilotActive(toggle);
@ -90,6 +89,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
return ( return (
<Stack className="tab-pane" style={{ width: "100%" }}> <Stack className="tab-pane" style={{ width: "100%" }}>
<div style={isGeneratingQuery ? { height: "100%" } : { overflowY: "auto", height: "100%" }}> <div style={isGeneratingQuery ? { height: "100%" } : { overflowY: "auto", height: "100%" }}>
{/*TODO: Uncomment this section when query copilot is reinstated in DE
{tabActive && copilotActive && ( {tabActive && copilotActive && (
<QueryCopilotPromptbar <QueryCopilotPromptbar
explorer={explorer} explorer={explorer}
@ -97,7 +97,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
databaseId={QueryCopilotSampleDatabaseId} databaseId={QueryCopilotSampleDatabaseId}
containerId={QueryCopilotSampleContainerId} containerId={QueryCopilotSampleContainerId}
></QueryCopilotPromptbar> ></QueryCopilotPromptbar>
)} )} */}
<Stack className="tabPaneContentContainer"> <Stack className="tabPaneContentContainer">
<SplitterLayout percentage={true} vertical={true} primaryIndex={0} primaryMinSize={30} secondaryMinSize={70}> <SplitterLayout percentage={true} vertical={true} primaryIndex={0} primaryMinSize={30} secondaryMinSize={70}>
<EditorReact <EditorReact

67
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@ -24,6 +24,7 @@ import { ReactTabKind, useTabs } from "hooks/useTabs";
import * as React from "react"; import * as React from "react";
import ConnectIcon from "../../../images/Connect_color.svg"; import ConnectIcon from "../../../images/Connect_color.svg";
import ContainersIcon from "../../../images/Containers.svg"; import ContainersIcon from "../../../images/Containers.svg";
import CosmosDBIcon from "../../../images/CosmosDB-logo.svg";
import LinkIcon from "../../../images/Link_blue.svg"; import LinkIcon from "../../../images/Link_blue.svg";
import PowerShellIcon from "../../../images/PowerShell.svg"; import PowerShellIcon from "../../../images/PowerShell.svg";
import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg"; import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
@ -120,11 +121,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
}; };
private getSplashScreenButtons = (): JSX.Element => { private getSplashScreenButtons = (): JSX.Element => {
if ( if (userContext.apiType === "SQL") {
userContext.apiType === "SQL" &&
useQueryCopilot.getState().copilotEnabled &&
useDatabases.getState().sampleDataResourceTokenCollection
) {
return ( return (
<Stack <Stack
className="splashStackContainer" className="splashStackContainer"
@ -152,25 +149,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
/> />
</Stack> </Stack>
<Stack className="splashStackRow" horizontal> <Stack className="splashStackRow" horizontal>
{useQueryCopilot.getState().copilotEnabled && ( <SplashScreenButton
<SplashScreenButton imgSrc={CosmosDBIcon}
imgSrc={CopilotIcon} imgSize={35}
title={"Query faster with Query Advisor"} title={"Azure Cosmos DB Samples Gallery"}
description={ description={
"Query Advisor is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!" "Discover samples that showcase scalable, intelligent app patterns. Try one now to see how fast you can go from concept to code with Cosmos DB"
} }
onClick={() => { onClick={() => {
const copilotVersion = userContext.features.copilotVersion; window.open("https://azurecosmosdb.github.io/gallery/?tags=example", "_blank");
if (copilotVersion === "v1.0") { traceOpen(Action.LearningResourcesClicked, { apiType: userContext.apiType });
useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot); }}
} else if (copilotVersion === "v2.0") { />
const sampleCollection = useDatabases.getState().sampleDataResourceTokenCollection;
sampleCollection.onNewQueryClick(sampleCollection, undefined);
}
traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
}}
/>
)}
<SplashScreenButton <SplashScreenButton
imgSrc={ConnectIcon} imgSrc={ConnectIcon}
title={"Connect"} title={"Connect"}
@ -212,6 +202,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
sample data, query. sample data, query.
</TeachingBubble> </TeachingBubble>
)} )}
{/*TODO: convert below to use SplashScreenButton */}
{mainItems.map((item) => ( {mainItems.map((item) => (
<Stack <Stack
id={`mainButton-${item.id}`} id={`mainButton-${item.id}`}
@ -477,6 +468,34 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
}; };
} }
//TODO: Re-enable lint rule when query copilot is reinstated in DE
/* eslint-disable-next-line no-unused-vars */
private getQueryCopilotCard = (): JSX.Element => {
return (
<>
{useQueryCopilot.getState().copilotEnabled && (
<SplashScreenButton
imgSrc={CopilotIcon}
title={"Query faster with Query Advisor"}
description={
"Query Advisor is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
}
onClick={() => {
const copilotVersion = userContext.features.copilotVersion;
if (copilotVersion === "v1.0") {
useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
} else if (copilotVersion === "v2.0") {
const sampleCollection = useDatabases.getState().sampleDataResourceTokenCollection;
sampleCollection.onNewQueryClick(sampleCollection, undefined);
}
traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
}}
/>
)}
</>
);
};
private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) { private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
return { return {
iconSrc: CollectionIcon, iconSrc: CollectionIcon,

4
src/Explorer/SplashScreen/SplashScreenButton.tsx
View File

@ -7,6 +7,7 @@ interface SplashScreenButtonProps {
title: string; title: string;
description: string; description: string;
onClick: () => void; onClick: () => void;
imgSize?: number;
} }
export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
@ -14,6 +15,7 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
title, title,
description, description,
onClick, onClick,
imgSize,
}: SplashScreenButtonProps): JSX.Element => { }: SplashScreenButtonProps): JSX.Element => {
return ( return (
<Stack <Stack
@ -39,7 +41,7 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
role="button" role="button"
> >
<div> <div>
<img src={imgSrc} alt={title} aria-hidden="true" /> <img src={imgSrc} alt={title} aria-hidden="true" {...(imgSize ? { height: imgSize, width: imgSize } : {})} />
</div> </div>
<Stack style={{ marginLeft: 16 }}> <Stack style={{ marginLeft: 16 }}>
<Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text> <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>

2
src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx
View File

@ -106,6 +106,6 @@ describe("QueryTabComponent", () => {
<QueryTabCopilotComponent {...propsMock} /> <QueryTabCopilotComponent {...propsMock} />
</CopilotProvider>, </CopilotProvider>,
); );
expect(container.find(QueryCopilotPromptbar).exists()).toBe(true); expect(container.find(QueryCopilotPromptbar).exists()).toBe(false);
}); });
}); });

97
src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
View File

@ -9,7 +9,6 @@ import { useDialog } from "Explorer/Controls/Dialog";
import { monaco } from "Explorer/LazyMonaco"; import { monaco } from "Explorer/LazyMonaco";
import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal"; import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext"; import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext";
import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar";
import { readCopilotToggleStatus, saveCopilotToggleStatus } from "Explorer/QueryCopilot/QueryCopilotUtilities"; import { readCopilotToggleStatus, saveCopilotToggleStatus } from "Explorer/QueryCopilot/QueryCopilotUtilities";
import { OnExecuteQueryClick, QueryDocumentsPerPage } from "Explorer/QueryCopilot/Shared/QueryCopilotClient"; import { OnExecuteQueryClick, QueryDocumentsPerPage } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
import { QueryCopilotSidebar } from "Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar"; import { QueryCopilotSidebar } from "Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar";
@ -28,8 +27,9 @@ import { TabsState, useTabs } from "hooks/useTabs";
import React, { Fragment, createRef } from "react"; import React, { Fragment, createRef } from "react";
import "react-splitter-layout/lib/index.css"; import "react-splitter-layout/lib/index.css";
import { format } from "react-string-format"; import { format } from "react-string-format";
import QueryCommandIcon from "../../../../images/CopilotCommand.svg"; //TODO: Uncomment next two lines when query copilot is reinstated in DE
import LaunchCopilot from "../../../../images/CopilotTabIcon.svg"; // import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
// import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
import DownloadQueryIcon from "../../../../images/DownloadQuery.svg"; import DownloadQueryIcon from "../../../../images/DownloadQuery.svg";
import CancelQueryIcon from "../../../../images/Entity_cancel.svg"; import CancelQueryIcon from "../../../../images/Entity_cancel.svg";
import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg"; import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
@ -494,53 +494,55 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
}); });
} }
if (this.launchCopilotButton.visible && this.isCopilotTabActive) { //TODO: Uncomment next section when query copilot is reinstated in DE
const mainButtonLabel = "Launch Copilot"; // if (this.launchCopilotButton.visible && this.isCopilotTabActive) {
const chatPaneLabel = "Open Copilot in chat pane (ALT+C)"; // const mainButtonLabel = "Launch Copilot";
const copilotSettingLabel = "Copilot settings"; // const chatPaneLabel = "Open Copilot in chat pane (ALT+C)";
// const copilotSettingLabel = "Copilot settings";
const openCopilotChatButton: CommandButtonComponentProps = { // const openCopilotChatButton: CommandButtonComponentProps = {
iconAlt: chatPaneLabel, // iconAlt: chatPaneLabel,
onCommandClick: this.launchQueryCopilotChat, // onCommandClick: this.launchQueryCopilotChat,
commandButtonLabel: chatPaneLabel, // commandButtonLabel: chatPaneLabel,
ariaLabel: chatPaneLabel, // ariaLabel: chatPaneLabel,
hasPopup: false, // hasPopup: false,
}; // };
const copilotSettingsButton: CommandButtonComponentProps = { // const copilotSettingsButton: CommandButtonComponentProps = {
iconAlt: copilotSettingLabel, // iconAlt: copilotSettingLabel,
onCommandClick: () => undefined, // onCommandClick: () => undefined,
commandButtonLabel: copilotSettingLabel, // commandButtonLabel: copilotSettingLabel,
ariaLabel: copilotSettingLabel, // ariaLabel: copilotSettingLabel,
hasPopup: false, // hasPopup: false,
}; // };
const launchCopilotButton: CommandButtonComponentProps = { // const launchCopilotButton: CommandButtonComponentProps = {
iconSrc: LaunchCopilot, // iconSrc: LaunchCopilot,
iconAlt: mainButtonLabel, // iconAlt: mainButtonLabel,
onCommandClick: this.launchQueryCopilotChat, // onCommandClick: this.launchQueryCopilotChat,
commandButtonLabel: mainButtonLabel, // commandButtonLabel: mainButtonLabel,
ariaLabel: mainButtonLabel, // ariaLabel: mainButtonLabel,
hasPopup: false, // hasPopup: false,
children: [openCopilotChatButton, copilotSettingsButton], // children: [openCopilotChatButton, copilotSettingsButton],
}; // };
buttons.push(launchCopilotButton); // buttons.push(launchCopilotButton);
} // }
if (this.props.copilotEnabled) { //TODO: Uncomment next section when query copilot is reinstated in DE
const toggleCopilotButton: CommandButtonComponentProps = { // if (this.props.copilotEnabled) {
iconSrc: QueryCommandIcon, // const toggleCopilotButton: CommandButtonComponentProps = {
iconAlt: "Query Advisor", // iconSrc: QueryCommandIcon,
keyboardAction: KeyboardAction.TOGGLE_COPILOT, // iconAlt: "Query Advisor",
onCommandClick: () => { // keyboardAction: KeyboardAction.TOGGLE_COPILOT,
this._toggleCopilot(!this.state.copilotActive); // onCommandClick: () => {
}, // this._toggleCopilot(!this.state.copilotActive);
commandButtonLabel: this.state.copilotActive ? "Disable Query Advisor" : "Enable Query Advisor", // },
ariaLabel: this.state.copilotActive ? "Disable Query Advisor" : "Enable Query Advisor", // commandButtonLabel: this.state.copilotActive ? "Disable Query Advisor" : "Enable Query Advisor",
hasPopup: false, // ariaLabel: this.state.copilotActive ? "Disable Query Advisor" : "Enable Query Advisor",
}; // hasPopup: false,
buttons.push(toggleCopilotButton); // };
} // buttons.push(toggleCopilotButton);
// }
if (!this.props.isPreferredApiMongoDB && this.state.isExecuting) { if (!this.props.isPreferredApiMongoDB && this.state.isExecuting) {
const label = "Cancel query"; const label = "Cancel query";
@ -725,6 +727,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
return ( return (
<Fragment> <Fragment>
<CosmosFluentProvider id={this.props.tabId} className={this.props.styles.queryTab} role="tabpanel"> <CosmosFluentProvider id={this.props.tabId} className={this.props.styles.queryTab} role="tabpanel">
{/*TODO: Uncomment this section when query copilot is reinstated in DE
{this.props.copilotEnabled && this.state.currentTabActive && this.state.copilotActive && ( {this.props.copilotEnabled && this.state.currentTabActive && this.state.copilotActive && (
<QueryCopilotPromptbar <QueryCopilotPromptbar
explorer={this.props.collection.container} explorer={this.props.collection.container}
@ -732,7 +735,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
databaseId={this.props.collection.databaseId} databaseId={this.props.collection.databaseId}
containerId={this.props.collection.id()} containerId={this.props.collection.id()}
></QueryCopilotPromptbar> ></QueryCopilotPromptbar>
)} )} */}
{/* Set 'key' to the value of vertical to force re-rendering when vertical changes, to work around https://github.com/johnwalley/allotment/issues/457 */} {/* Set 'key' to the value of vertical to force re-rendering when vertical changes, to work around https://github.com/johnwalley/allotment/issues/457 */}
<Allotment <Allotment
key={vertical.toString()} key={vertical.toString()}