From 0817acf4040b258a3d78a8607ee8ae5145e85039 Mon Sep 17 00:00:00 2001 From: vchske Date: Thu, 28 Aug 2025 15:47:29 -0700 Subject: [PATCH] Commenting or deleting UI references to Query Advisor (#2209) * 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 --- .../Panes/SettingsPane/SettingsPane.tsx | 6 +- src/Explorer/QueryCopilot/QueryCopilotTab.tsx | 32 +++--- src/Explorer/SplashScreen/SplashScreen.tsx | 67 ++++++++----- .../SplashScreen/SplashScreenButton.tsx | 4 +- .../Tabs/QueryTab/QueryTabComponent.test.tsx | 2 +- .../Tabs/QueryTab/QueryTabComponent.tsx | 97 ++++++++++--------- 6 files changed, 116 insertions(+), 92 deletions(-) diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx index f2cf73768..c8106eca7 100644 --- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx +++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx @@ -1099,15 +1099,15 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
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 - is created by, and maintained by Microsoft at no cost to you. + NoSQL queries. This will appear as another database in the Data Explorer UI, and is created by, + and maintained by Microsoft at no cost to you.
= ({ explorer }: Query const [copilotActive, setCopilotActive] = useState(() => readCopilotToggleStatus(userContext.databaseAccount), ); - const [tabActive, setTabActive] = useState(true); + //TODO: Uncomment this useState when query copilot is reinstated in DE + // const [tabActive, setTabActive] = useState(true); const getCommandbarButtons = (): CommandButtonComponentProps[] => { const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query"; @@ -70,17 +68,18 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query useCommandBar.getState().setContextButtons(getCommandbarButtons()); }, [query, selectedQuery, copilotActive]); - React.useEffect(() => { - return () => { - useTabs.subscribe((state: TabsState) => { - if (state.activeReactTab === ReactTabKind.QueryCopilot) { - setTabActive(true); - } else { - setTabActive(false); - } - }); - }; - }, []); + //TODO: Uncomment this effect when query copilot is reinstated in DE + // React.useEffect(() => { + // return () => { + // useTabs.subscribe((state: TabsState) => { + // if (state.activeReactTab === ReactTabKind.QueryCopilot) { + // setTabActive(true); + // } else { + // setTabActive(false); + // } + // }); + // }; + // }, []); const toggleCopilot = (toggle: boolean) => { setCopilotActive(toggle); @@ -90,6 +89,7 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query return (
+ {/*TODO: Uncomment this section when query copilot is reinstated in DE {tabActive && copilotActive && ( = ({ explorer }: Query databaseId={QueryCopilotSampleDatabaseId} containerId={QueryCopilotSampleContainerId} > - )} + )} */} { }; private getSplashScreenButtons = (): JSX.Element => { - if ( - userContext.apiType === "SQL" && - useQueryCopilot.getState().copilotEnabled && - useDatabases.getState().sampleDataResourceTokenCollection - ) { + if (userContext.apiType === "SQL") { return ( { /> - {useQueryCopilot.getState().copilotEnabled && ( - { - 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 }); - }} - /> - )} + { + window.open("https://azurecosmosdb.github.io/gallery/?tags=example", "_blank"); + traceOpen(Action.LearningResourcesClicked, { apiType: userContext.apiType }); + }} + /> { sample data, query. )} + {/*TODO: convert below to use SplashScreenButton */} {mainItems.map((item) => ( { }; } + //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 && ( + { + 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) { return { iconSrc: CollectionIcon, diff --git a/src/Explorer/SplashScreen/SplashScreenButton.tsx b/src/Explorer/SplashScreen/SplashScreenButton.tsx index 24eddb65b..55004f670 100644 --- a/src/Explorer/SplashScreen/SplashScreenButton.tsx +++ b/src/Explorer/SplashScreen/SplashScreenButton.tsx @@ -7,6 +7,7 @@ interface SplashScreenButtonProps { title: string; description: string; onClick: () => void; + imgSize?: number; } export const SplashScreenButton: React.FC = ({ @@ -14,6 +15,7 @@ export const SplashScreenButton: React.FC = ({ title, description, onClick, + imgSize, }: SplashScreenButtonProps): JSX.Element => { return ( = ({ role="button" >
- +
{title} diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx index 3a81f76ab..bc2e2f213 100644 --- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx @@ -106,6 +106,6 @@ describe("QueryTabComponent", () => { , ); - expect(container.find(QueryCopilotPromptbar).exists()).toBe(true); + expect(container.find(QueryCopilotPromptbar).exists()).toBe(false); }); }); diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx index c55923486..06a0ddbf3 100644 --- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx @@ -9,7 +9,6 @@ import { useDialog } from "Explorer/Controls/Dialog"; import { monaco } from "Explorer/LazyMonaco"; import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal"; import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext"; -import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar"; import { readCopilotToggleStatus, saveCopilotToggleStatus } from "Explorer/QueryCopilot/QueryCopilotUtilities"; import { OnExecuteQueryClick, QueryDocumentsPerPage } from "Explorer/QueryCopilot/Shared/QueryCopilotClient"; 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-splitter-layout/lib/index.css"; import { format } from "react-string-format"; -import QueryCommandIcon from "../../../../images/CopilotCommand.svg"; -import LaunchCopilot from "../../../../images/CopilotTabIcon.svg"; +//TODO: Uncomment next two lines when query copilot is reinstated in DE +// import QueryCommandIcon from "../../../../images/CopilotCommand.svg"; +// import LaunchCopilot from "../../../../images/CopilotTabIcon.svg"; import DownloadQueryIcon from "../../../../images/DownloadQuery.svg"; import CancelQueryIcon from "../../../../images/Entity_cancel.svg"; import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg"; @@ -494,53 +494,55 @@ class QueryTabComponentImpl extends React.Component undefined, - commandButtonLabel: copilotSettingLabel, - ariaLabel: copilotSettingLabel, - hasPopup: false, - }; + // const copilotSettingsButton: CommandButtonComponentProps = { + // iconAlt: copilotSettingLabel, + // onCommandClick: () => undefined, + // commandButtonLabel: copilotSettingLabel, + // ariaLabel: copilotSettingLabel, + // hasPopup: false, + // }; - const launchCopilotButton: CommandButtonComponentProps = { - iconSrc: LaunchCopilot, - iconAlt: mainButtonLabel, - onCommandClick: this.launchQueryCopilotChat, - commandButtonLabel: mainButtonLabel, - ariaLabel: mainButtonLabel, - hasPopup: false, - children: [openCopilotChatButton, copilotSettingsButton], - }; - buttons.push(launchCopilotButton); - } + // const launchCopilotButton: CommandButtonComponentProps = { + // iconSrc: LaunchCopilot, + // iconAlt: mainButtonLabel, + // onCommandClick: this.launchQueryCopilotChat, + // commandButtonLabel: mainButtonLabel, + // ariaLabel: mainButtonLabel, + // hasPopup: false, + // children: [openCopilotChatButton, copilotSettingsButton], + // }; + // buttons.push(launchCopilotButton); + // } - if (this.props.copilotEnabled) { - const toggleCopilotButton: CommandButtonComponentProps = { - iconSrc: QueryCommandIcon, - iconAlt: "Query Advisor", - keyboardAction: KeyboardAction.TOGGLE_COPILOT, - 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", - hasPopup: false, - }; - buttons.push(toggleCopilotButton); - } + //TODO: Uncomment next section when query copilot is reinstated in DE + // if (this.props.copilotEnabled) { + // const toggleCopilotButton: CommandButtonComponentProps = { + // iconSrc: QueryCommandIcon, + // iconAlt: "Query Advisor", + // keyboardAction: KeyboardAction.TOGGLE_COPILOT, + // 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", + // hasPopup: false, + // }; + // buttons.push(toggleCopilotButton); + // } if (!this.props.isPreferredApiMongoDB && this.state.isExecuting) { const label = "Cancel query"; @@ -725,6 +727,7 @@ class QueryTabComponentImpl extends React.Component + {/*TODO: Uncomment this section when query copilot is reinstated in DE {this.props.copilotEnabled && this.state.currentTabActive && this.state.copilotActive && ( - )} + )} */} {/* Set 'key' to the value of vertical to force re-rendering when vertical changes, to work around https://github.com/johnwalley/allotment/issues/457 */}