From cc7ff45ec5e60c8da105d96b247aff0ca67a126f Mon Sep 17 00:00:00 2001 From: Ashley Stanton-Nurse Date: Tue, 13 Aug 2024 13:07:02 -0700 Subject: [PATCH] flow Explorer everywhere --- .../CommandBar/CommandBarComponentAdapter.tsx | 6 ++-- .../CommandBarComponentButtonFactory.test.ts | 29 ++++++------------- .../Menus/CommandBar/CommandBarUtil.test.tsx | 12 ++++---- .../Menus/CommandBar/CommandBarUtil.tsx | 8 ++--- .../DocumentsTabV2/DocumentsTabV2.test.tsx | 6 ++-- .../DocumentsTabV2Mongo.test.tsx | 6 ++-- 6 files changed, 29 insertions(+), 38 deletions(-) diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx index b1eda6e4ab..acb8e74626 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx @@ -26,8 +26,9 @@ export const CommandBar: React.FC = ({ container }: Props) => { const isHidden = useCommandBar((state) => state.isHidden); const backgroundColor = StyleConstants.BaseLight; const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR); - const staticButtons = createStaticCommandBarButtons(selectedNodeState); + const platformButtons = createPlatformButtons(); + const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor, container); if (contextButtons?.length > 0) { uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true)); @@ -39,7 +40,6 @@ export const CommandBar: React.FC = ({ container }: Props) => { uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider")); } - const platformButtons = createPlatformButtons(); const uiFabricPlatformButtons = CommandBarUtil.convertButton(platformButtons || [], backgroundColor, container); uiFabricPlatformButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true)); @@ -69,7 +69,7 @@ export const CommandBar: React.FC = ({ container }: Props) => { }; const allButtons = staticButtons.concat(contextButtons).concat(platformButtons); - const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons); + const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons, container); setKeyboardHandlers(keyboardHandlers); return ( diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts index 0a4a805d2a..bd4002a6e7 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts @@ -3,15 +3,12 @@ import { AuthType } from "../../../AuthType"; import { DatabaseAccount } from "../../../Contracts/DataModels"; import { CollectionBase } from "../../../Contracts/ViewModels"; import { updateUserContext } from "../../../UserContext"; -import Explorer from "../../Explorer"; import { useNotebook } from "../../Notebook/useNotebook"; import { useDatabases } from "../../useDatabases"; import { useSelectedNode } from "../../useSelectedNode"; import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory"; describe("CommandBarComponentButtonFactory tests", () => { - let mockExplorer: Explorer; - afterEach(() => useSelectedNode.getState().setSelectedNode(undefined)); describe("Enable Azure Synapse Link Button", () => { @@ -19,7 +16,6 @@ describe("CommandBarComponentButtonFactory tests", () => { const selectedNodeState = useSelectedNode.getState(); beforeAll(() => { - mockExplorer = {} as Explorer; updateUserContext({ databaseAccount: { properties: { @@ -30,7 +26,7 @@ describe("CommandBarComponentButtonFactory tests", () => { }); it("Button should be visible", () => { - const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); + const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(selectedNodeState); const enableAzureSynapseLinkBtn = buttons.find( (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel, ); @@ -46,7 +42,7 @@ describe("CommandBarComponentButtonFactory tests", () => { } as DatabaseAccount, }); - const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); + const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(selectedNodeState); const enableAzureSynapseLinkBtn = buttons.find( (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel, ); @@ -62,7 +58,7 @@ describe("CommandBarComponentButtonFactory tests", () => { } as DatabaseAccount, }); - const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); + const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(selectedNodeState); const enableAzureSynapseLinkBtn = buttons.find( (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel, ); @@ -75,7 +71,6 @@ describe("CommandBarComponentButtonFactory tests", () => { const selectedNodeState = useSelectedNode.getState(); beforeAll(() => { - mockExplorer = {} as Explorer; updateUserContext({ databaseAccount: { properties: { @@ -108,7 +103,7 @@ describe("CommandBarComponentButtonFactory tests", () => { }, } as DatabaseAccount, }); - const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); + const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(selectedNodeState); const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel); expect(openCassandraShellBtn).toBeUndefined(); }); @@ -118,13 +113,13 @@ describe("CommandBarComponentButtonFactory tests", () => { portalEnv: "mooncake", }); - const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); + const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(selectedNodeState); const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel); expect(openCassandraShellBtn).toBeUndefined(); }); it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => { - const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); + const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(selectedNodeState); const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel); expect(openCassandraShellBtn).toBeUndefined(); }); @@ -134,12 +129,8 @@ describe("CommandBarComponentButtonFactory tests", () => { const openPostgresShellButtonLabel = "Open PSQL shell"; const openVCoreMongoShellButtonLabel = "Open MongoDB (vCore) shell"; - beforeAll(() => { - mockExplorer = {} as Explorer; - }); - it("creates Postgres shell button", () => { - const buttons = CommandBarComponentButtonFactory.createPostgreButtons(mockExplorer); + const buttons = CommandBarComponentButtonFactory.createPostgreButtons(); const openPostgresShellButton = buttons.find( (button) => button.commandButtonLabel === openPostgresShellButtonLabel, ); @@ -147,7 +138,7 @@ describe("CommandBarComponentButtonFactory tests", () => { }); it("creates vCore Mongo shell button", () => { - const buttons = CommandBarComponentButtonFactory.createVCoreMongoButtons(mockExplorer); + const buttons = CommandBarComponentButtonFactory.createVCoreMongoButtons(); const openVCoreMongoShellButton = buttons.find( (button) => button.commandButtonLabel === openVCoreMongoShellButtonLabel, ); @@ -162,8 +153,6 @@ describe("CommandBarComponentButtonFactory tests", () => { const selectedNodeState = useSelectedNode.getState(); beforeAll(() => { - mockExplorer = {} as Explorer; - updateUserContext({ authType: AuthType.ResourceToken, }); @@ -175,7 +164,7 @@ describe("CommandBarComponentButtonFactory tests", () => { kind: "DocumentDB", } as DatabaseAccount, }); - const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); + const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(selectedNodeState); expect(buttons.length).toBe(2); expect(buttons[0].commandButtonLabel).toBe("New SQL Query"); expect(buttons[0].disabled).toBe(false); diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx index bcd2b4b266..b91743a0b4 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx @@ -1,8 +1,10 @@ import { ICommandBarItemProps } from "@fluentui/react"; +import Explorer from "Explorer/Explorer"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; import * as CommandBarUtil from "./CommandBarUtil"; describe("CommandBarUtil tests", () => { + const mockExplorer = {} as Explorer; const createButton = (): CommandButtonComponentProps => { return { iconSrc: "icon", @@ -22,7 +24,7 @@ describe("CommandBarUtil tests", () => { const btn = createButton(); const backgroundColor = "backgroundColor"; - const converteds = CommandBarUtil.convertButton([btn], backgroundColor); + const converteds = CommandBarUtil.convertButton([btn], backgroundColor, mockExplorer); expect(converteds.length).toBe(1); const converted = converteds[0]; expect(converted.split).toBe(undefined); @@ -46,7 +48,7 @@ describe("CommandBarUtil tests", () => { btn.children.push(child); } - const converteds = CommandBarUtil.convertButton([btn], "backgroundColor"); + const converteds = CommandBarUtil.convertButton([btn], "backgroundColor", mockExplorer); expect(converteds.length).toBe(1); const converted = converteds[0]; expect(converted.split).toBe(true); @@ -62,7 +64,7 @@ describe("CommandBarUtil tests", () => { btns.push(createButton()); } - const converteds = CommandBarUtil.convertButton(btns, "backgroundColor"); + const converteds = CommandBarUtil.convertButton(btns, "backgroundColor", mockExplorer); const uniqueKeys = converteds .map((btn: ICommandBarItemProps) => btn.key) .filter((value: string, index: number, self: string[]) => self.indexOf(value) === index); @@ -74,10 +76,10 @@ describe("CommandBarUtil tests", () => { const backgroundColor = "backgroundColor"; btn.commandButtonLabel = undefined; - let converted = CommandBarUtil.convertButton([btn], backgroundColor)[0]; + let converted = CommandBarUtil.convertButton([btn], backgroundColor, mockExplorer)[0]; expect(converted.text).toEqual(btn.tooltipText); - converted = CommandBarUtil.convertButton([btn], backgroundColor)[0]; + converted = CommandBarUtil.convertButton([btn], backgroundColor, mockExplorer)[0]; delete btn.commandButtonLabel; expect(converted.text).toEqual(btn.tooltipText); }); diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx index 432bea5c99..0fcc69e8cb 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx @@ -134,7 +134,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol result.split = true; result.subMenuProps = { - items: convertButton(btn.children, backgroundColor), + items: convertButton(btn.children, backgroundColor, container), styles: { list: { // TODO Figure out how to do it the proper way with subComponentStyles. @@ -185,7 +185,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol option?: IDropdownOption, index?: number, ): void => { - btn.children[index].onCommandClick(event); + btn.children[index].onCommandClick(event, container); TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text }); }; @@ -236,14 +236,14 @@ export const createConnectionStatus = (container: Explorer, poolId: PoolIdType, }; }; -export function createKeyboardHandlers(allButtons: CommandButtonComponentProps[]): KeyboardHandlerMap { +export function createKeyboardHandlers(allButtons: CommandButtonComponentProps[], container: Explorer): KeyboardHandlerMap { const handlers: KeyboardHandlerMap = {}; function createHandlers(buttons: CommandButtonComponentProps[]) { buttons.forEach((button) => { if (!button.disabled && button.keyboardAction) { handlers[button.keyboardAction] = (e) => { - button.onCommandClick(e); + button.onCommandClick(e, container); // If the handler is bound, it means the button is visible and enabled, so we should prevent the default action return true; diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx index 8c87e2e4ea..a3a80a62f1 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx @@ -442,7 +442,7 @@ describe("Documents tab (noSql API)", () => { useCommandBar .getState() .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID) - .onCommandClick(undefined); + .onCommandClick(undefined, undefined); }); expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy(); }); @@ -452,7 +452,7 @@ describe("Documents tab (noSql API)", () => { useCommandBar .getState() .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID) - .onCommandClick(undefined); + .onCommandClick(undefined, undefined); }); expect(useCommandBar.getState().contextButtons.find((button) => button.id === SAVE_BUTTON_ID)).toBeDefined(); @@ -467,7 +467,7 @@ describe("Documents tab (noSql API)", () => { useCommandBar .getState() .contextButtons.find((button) => button.id === DELETE_BUTTON_ID) - .onCommandClick(undefined); + .onCommandClick(undefined, undefined); }); expect(mockDeleteDocuments).toHaveBeenCalled(); diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx index 61db6930e0..6c879ac734 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx @@ -161,7 +161,7 @@ describe("Documents tab (Mongo API)", () => { useCommandBar .getState() .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID) - .onCommandClick(undefined); + .onCommandClick(undefined, undefined); }); expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy(); }); @@ -171,7 +171,7 @@ describe("Documents tab (Mongo API)", () => { useCommandBar .getState() .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID) - .onCommandClick(undefined); + .onCommandClick(undefined, undefined); }); expect(useCommandBar.getState().contextButtons.find((button) => button.id === SAVE_BUTTON_ID)).toBeDefined(); @@ -186,7 +186,7 @@ describe("Documents tab (Mongo API)", () => { useCommandBar .getState() .contextButtons.find((button) => button.id === DELETE_BUTTON_ID) - .onCommandClick(undefined); + .onCommandClick(undefined, undefined); }); expect(mockDeleteDocument).toHaveBeenCalled();