From ebd40cb9b064b8392725f5edc95907be4c3ab8d1 Mon Sep 17 00:00:00 2001
From: Predrag Klepic <60631598+Klepic95@users.noreply.github.com>
Date: Mon, 21 Aug 2023 16:17:06 +0200
Subject: [PATCH] [Query Copilot] Query Copilot button dropdown and shortcut
 (#1582)

* Copilot dropdown implementation

* additional changes

* added unit test for key event

* Additional test changes

---------

Co-authored-by: Predrag Klepic <v-prklepic@microsoft.com>
---
 .../Tabs/QueryTab/QueryTabComponent.test.tsx  | 34 +++++++++++++
 .../Tabs/QueryTab/QueryTabComponent.tsx       | 48 +++++++++++++++----
 2 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx

diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx
new file mode 100644
index 000000000..a2110263c
--- /dev/null
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx
@@ -0,0 +1,34 @@
+import { fireEvent, render } from "@testing-library/react";
+import QueryTabComponent, { IQueryTabComponentProps } from "Explorer/Tabs/QueryTab/QueryTabComponent";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import React from "react";
+
+jest.mock("Explorer/Controls/Editor/EditorReact");
+
+describe("QueryTabComponent", () => {
+  const mockStore = useQueryCopilot.getState();
+  beforeEach(() => {
+    mockStore.showCopilotSidebar = false;
+    mockStore.setShowCopilotSidebar = jest.fn();
+  });
+  beforeEach(() => jest.clearAllMocks());
+
+  it("should launch Copilot when ALT+C is pressed", () => {
+    const propsMock: Readonly<IQueryTabComponentProps> = ({
+      collection: { databaseId: "CopilotSampleDb" },
+      onTabAccessor: () => jest.fn(),
+      isExecutionError: false,
+      tabId: "mockTabId",
+      tabsBaseInstance: {
+        updateNavbarWithTabsButtons: () => jest.fn(),
+      },
+    } as unknown) as IQueryTabComponentProps;
+
+    const { container } = render(<QueryTabComponent {...propsMock} />);
+
+    const launchCopilotButton = container.querySelector(".queryEditorWatermarkText");
+    fireEvent.keyDown(launchCopilotButton, { key: "c", altKey: true });
+
+    expect(mockStore.setShowCopilotSidebar).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index e5c2823f4..8ffab1336 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -184,6 +184,12 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     });
   }
 
+  public handleCopilotKeyDown = (event: KeyboardEvent): void => {
+    if (this.isCopilotTabActive && event.altKey && event.key === "c") {
+      this.launchQueryCopilotChat();
+    }
+  };
+
   public onToggleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): boolean => {
     if (event.key === NormalizedEventKey.LeftArrow) {
       this.toggleResult();
@@ -290,15 +296,36 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     }
 
     if (this.launchCopilotButton.visible && this.isCopilotTabActive) {
-      const label = "Launch Copilot";
-      buttons.push({
-        iconSrc: LaunchCopilot,
-        iconAlt: label,
+      const mainButtonLabel = "Launch Copilot";
+      const chatPaneLabel = "Open Copilot in chat pane (ALT+C)";
+      const copilotSettingLabel = "Copilot settings";
+
+      const openCopilotChatButton: CommandButtonComponentProps = {
+        iconAlt: chatPaneLabel,
         onCommandClick: this.launchQueryCopilotChat,
-        commandButtonLabel: label,
-        ariaLabel: label,
+        commandButtonLabel: chatPaneLabel,
+        ariaLabel: chatPaneLabel,
         hasPopup: false,
-      });
+      };
+
+      const copilotSettingsButton: CommandButtonComponentProps = {
+        iconAlt: copilotSettingLabel,
+        onCommandClick: () => undefined,
+        commandButtonLabel: copilotSettingLabel,
+        ariaLabel: copilotSettingLabel,
+        hasPopup: false,
+      };
+
+      const launchCopilotButton = {
+        iconSrc: LaunchCopilot,
+        iconAlt: mainButtonLabel,
+        onCommandClick: this.launchQueryCopilotChat,
+        commandButtonLabel: mainButtonLabel,
+        ariaLabel: mainButtonLabel,
+        hasPopup: false,
+        children: [openCopilotChatButton, copilotSettingsButton],
+      };
+      buttons.push(launchCopilotButton);
     }
 
     return buttons;
@@ -348,10 +375,12 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     });
 
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
+    document.addEventListener("keydown", this.handleCopilotKeyDown);
   }
 
   componentWillUnmount(): void {
     this.unsubscribeCopilotSidebar();
+    document.removeEventListener("keydown", this.handleCopilotKeyDown);
   }
 
   private getEditorAndQueryResult(): JSX.Element {
@@ -389,12 +418,13 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
   }
 
   render(): JSX.Element {
+    const shouldScaleElements = this.state.showCopilotSidebar && this.isCopilotTabActive;
     return (
       <div style={{ display: "flex", flexDirection: "row", height: "100%" }}>
-        <div style={{ width: this.state.showCopilotSidebar ? "70%" : "100%", height: "100%" }}>
+        <div style={{ width: shouldScaleElements ? "70%" : "100%", height: "100%" }}>
           {this.getEditorAndQueryResult()}
         </div>
-        {this.state.showCopilotSidebar && this.isCopilotTabActive && (
+        {shouldScaleElements && (
           <div style={{ width: "30%", height: "100%" }}>
             <QueryCopilotSidebar />
           </div>