From 2bf931395177f5a9b79f0c9af98c06352a3618a0 Mon Sep 17 00:00:00 2001 From: Sunil Kumar Yadav <79906609+sunilyadav840@users.noreply.github.com> Date: Sat, 3 Apr 2021 02:14:50 +0530 Subject: [PATCH] Migrate Load Query Pane to React (#579) Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com> --- .eslintignore | 1 - src/Explorer/ComponentRegisterer.ts | 2 - .../SettingsComponent.test.tsx.snap | 112 ------------- src/Explorer/Explorer.tsx | 15 +- .../CommandBarComponentButtonFactory.tsx | 2 +- src/Explorer/Panes/LoadQueryPane.html | 88 ----------- src/Explorer/Panes/LoadQueryPane.ts | 147 ------------------ .../__snapshots__/index.test.tsx.snap | 62 ++++++++ .../Panes/LoadQueryPanel/index.test.tsx | 17 ++ src/Explorer/Panes/LoadQueryPanel/index.tsx | 134 ++++++++++++++++ src/Explorer/Panes/PaneComponents.ts | 10 -- src/Explorer/Panes/PanelComponent.less | 13 +- .../__snapshots__/index.test.tsx.snap | 56 ------- .../__snapshots__/index.test.tsx.snap | 28 ---- ...eteDatabaseConfirmationPanel.test.tsx.snap | 28 ---- src/Explorer/Tabs/QueryTab.ts | 4 - src/Main.tsx | 1 - 17 files changed, 231 insertions(+), 489 deletions(-) delete mode 100644 src/Explorer/Panes/LoadQueryPane.html delete mode 100644 src/Explorer/Panes/LoadQueryPane.ts create mode 100644 src/Explorer/Panes/LoadQueryPanel/__snapshots__/index.test.tsx.snap create mode 100644 src/Explorer/Panes/LoadQueryPanel/index.test.tsx create mode 100644 src/Explorer/Panes/LoadQueryPanel/index.tsx diff --git a/.eslintignore b/.eslintignore index 4e91b9912..b06bed02c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -126,7 +126,6 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.ts src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts src/Explorer/Panes/GraphStylingPane.ts -src/Explorer/Panes/LoadQueryPane.ts src/Explorer/Panes/NewVertexPane.ts src/Explorer/Panes/PaneComponents.ts src/Explorer/Panes/RenewAdHocAccessPane.ts diff --git a/src/Explorer/ComponentRegisterer.ts b/src/Explorer/ComponentRegisterer.ts index a391aba75..da6331857 100644 --- a/src/Explorer/ComponentRegisterer.ts +++ b/src/Explorer/ComponentRegisterer.ts @@ -14,7 +14,6 @@ import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab"; import DocumentsTab from "./Tabs/DocumentsTab"; import GalleryTab from "./Tabs/GalleryTab"; import GraphTab from "./Tabs/GraphTab"; -import MongoDocumentsTab from "./Tabs/MongoDocumentsTab"; import MongoShellTab from "./Tabs/MongoShellTab"; import NotebookTabV2 from "./Tabs/NotebookV2Tab"; import NotebookViewerTab from "./Tabs/NotebookViewerTab"; @@ -73,7 +72,6 @@ ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEnt ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent()); ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent()); ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent()); -ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent()); ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent()); ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent()); ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent()); diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap index 2606dabdc..2e68e3d50 100644 --- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap @@ -371,20 +371,6 @@ exports[`SettingsComponent renders 1`] = ` "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -789,20 +775,6 @@ exports[`SettingsComponent renders 1`] = ` "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], @@ -1325,20 +1297,6 @@ exports[`SettingsComponent renders 1`] = ` "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -1743,20 +1701,6 @@ exports[`SettingsComponent renders 1`] = ` "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], @@ -2292,20 +2236,6 @@ exports[`SettingsComponent renders 1`] = ` "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -2710,20 +2640,6 @@ exports[`SettingsComponent renders 1`] = ` "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], @@ -3246,20 +3162,6 @@ exports[`SettingsComponent renders 1`] = ` "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -3664,20 +3566,6 @@ exports[`SettingsComponent renders 1`] = ` "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index a5f2880ee..5a75a5331 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -58,7 +58,7 @@ import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfi import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel"; import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel"; import GraphStylingPane from "./Panes/GraphStylingPane"; -import { LoadQueryPane } from "./Panes/LoadQueryPane"; +import { LoadQueryPanel } from "./Panes/LoadQueryPanel"; import NewVertexPane from "./Panes/NewVertexPane"; import { SaveQueryPanel } from "./Panes/SaveQueryPanel"; import { SettingsPane } from "./Panes/SettingsPane"; @@ -210,7 +210,6 @@ export default class Explorer { public querySelectPane: QuerySelectPane; public newVertexPane: NewVertexPane; public cassandraAddCollectionPane: CassandraAddCollectionPane; - public loadQueryPane: LoadQueryPane; public browseQueriesPane: BrowseQueriesPane; public stringInputPane: StringInputPane; public setupNotebooksPane: SetupNotebooksPane; @@ -610,13 +609,6 @@ export default class Explorer { container: this, }); - this.loadQueryPane = new LoadQueryPane({ - id: "loadquerypane", - visible: ko.observable(false), - - container: this, - }); - this.browseQueriesPane = new BrowseQueriesPane({ id: "browsequeriespane", visible: ko.observable(false), @@ -651,7 +643,6 @@ export default class Explorer { this.querySelectPane, this.newVertexPane, this.cassandraAddCollectionPane, - this.loadQueryPane, this.browseQueriesPane, this.stringInputPane, this.setupNotebooksPane, @@ -2415,6 +2406,10 @@ export default class Explorer { ); } + public openLoadQueryPanel(): void { + this.openSidePanel("Load Query", this.closeSidePanel()} />); + } + public openSaveQueryPanel(): void { this.openSidePanel("Save Query", this.closeSidePanel()} />); } diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx index 98c9745d0..f288e7bb1 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx @@ -433,7 +433,7 @@ function createOpenQueryFromDiskButton(container: Explorer): CommandButtonCompon return { iconSrc: OpenQueryFromDiskIcon, iconAlt: label, - onCommandClick: () => container.loadQueryPane.open(), + onCommandClick: () => container.openLoadQueryPanel(), commandButtonLabel: label, ariaLabel: label, hasPopup: true, diff --git a/src/Explorer/Panes/LoadQueryPane.html b/src/Explorer/Panes/LoadQueryPane.html deleted file mode 100644 index 003ddd0f3..000000000 --- a/src/Explorer/Panes/LoadQueryPane.html +++ /dev/null @@ -1,88 +0,0 @@ -
-
-
- -
-
- -
- -
- Close -
-
- - - -
-
- Error - - - More details - -
-
- - - -
-
-
Select a query document
- - - - upload files - -
-
-
-
-
- -
-
- - -
- -
- -
-
diff --git a/src/Explorer/Panes/LoadQueryPane.ts b/src/Explorer/Panes/LoadQueryPane.ts deleted file mode 100644 index 9d52ffab6..000000000 --- a/src/Explorer/Panes/LoadQueryPane.ts +++ /dev/null @@ -1,147 +0,0 @@ -import * as ko from "knockout"; -import * as Q from "q"; -import * as Constants from "../../Common/Constants"; -import * as ViewModels from "../../Contracts/ViewModels"; -import { ContextualPaneBase } from "./ContextualPaneBase"; -import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent"; -import * as Logger from "../../Common/Logger"; -import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils"; -import QueryTab from "../Tabs/QueryTab"; - -export class LoadQueryPane extends ContextualPaneBase { - public selectedFilesTitle: ko.Observable; - public files: ko.Observable; - - constructor(options: ViewModels.PaneOptions) { - super(options); - this.title("Load Query"); - this.resetData(); - - this.selectedFilesTitle = ko.observable(""); - this.files = ko.observable(); - this.files.subscribe((newFiles: FileList) => this.updateSelectedFilesTitle(newFiles)); - const focusElement = document.getElementById("queryFileImportLink"); - focusElement && focusElement.focus(); - } - - public submit() { - this.formErrors(""); - this.formErrorsDetails(""); - if (!this.files() || this.files().length === 0) { - this.formErrors("No file specified"); - this.formErrorsDetails("No file specified. Please input a file."); - NotificationConsoleUtils.logConsoleMessage( - ConsoleDataType.Error, - "Could not load query -- No file specified. Please input a file." - ); - return; - } - - const file: File = this.files().item(0); - const id: string = NotificationConsoleUtils.logConsoleMessage( - ConsoleDataType.InProgress, - `Loading query from file ${file.name}` - ); - this.isExecuting(true); - this.loadQueryFromFile(this.files().item(0)) - .then( - () => { - NotificationConsoleUtils.logConsoleMessage( - ConsoleDataType.Info, - `Successfully loaded query from file ${file.name}` - ); - this.close(); - }, - (error: any) => { - this.formErrors("Failed to load query"); - this.formErrorsDetails(`Failed to load query: ${error}`); - NotificationConsoleUtils.logConsoleMessage( - ConsoleDataType.Error, - `Failed to load query from file ${file.name}: ${error}` - ); - } - ) - .finally(() => { - this.isExecuting(false); - NotificationConsoleUtils.clearInProgressMessageWithId(id); - }); - } - - public updateSelectedFiles(element: any, event: any): void { - this.files(event.target.files); - } - - public open() { - super.open(); - const focusElement = document.getElementById("queryFileImportLink"); - focusElement && focusElement.focus(); - } - - public close() { - super.close(); - this.resetData(); - this.files(undefined); - this.resetFileInput(); - } - - public onImportLinkClick(source: any, event: MouseEvent): boolean { - document.getElementById("importQueryInput").click(); - return false; - } - - public onImportLinkKeyPress = (source: any, event: KeyboardEvent): boolean => { - if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) { - this.onImportLinkClick(source, null); - return false; - } - return true; - }; - - public loadQueryFromFile(file: File): Q.Promise { - const selectedCollection: ViewModels.Collection = this.container && this.container.findSelectedCollection(); - if (!selectedCollection) { - // should never get into this state - Logger.logError("No collection was selected", "LoadQueryPane.loadQueryFromFile"); - return Q.reject("No collection was selected"); - } else if (this.container.isPreferredApiMongoDB()) { - selectedCollection.onNewMongoQueryClick(selectedCollection, null); - } else { - selectedCollection.onNewQueryClick(selectedCollection, null); - } - const deferred: Q.Deferred = Q.defer(); - const reader = new FileReader(); - reader.onload = (evt: any): void => { - const fileData: string = evt.target.result; - const queryTab = this.container.tabsManager.activeTab() as QueryTab; - queryTab.initialEditorContent(fileData); - queryTab.sqlQueryEditorContent(fileData); - deferred.resolve(); - }; - - reader.onerror = (evt: ProgressEvent): void => { - deferred.reject((evt as any).error.message); - }; - - reader.readAsText(file); - return deferred.promise; - } - - private updateSelectedFilesTitle(fileList: FileList) { - this.selectedFilesTitle(""); - - if (!fileList || fileList.length === 0) { - return; - } - - for (let i = 0; i < fileList.length; i++) { - const originalTitle = this.selectedFilesTitle(); - this.selectedFilesTitle(originalTitle + `"${fileList.item(i).name}"`); - } - } - - private resetFileInput(): void { - const inputElement = $("#importQueryInput"); - inputElement.wrap("
").closest("form").get(0).reset(); - inputElement.unwrap(); - } -} diff --git a/src/Explorer/Panes/LoadQueryPanel/__snapshots__/index.test.tsx.snap b/src/Explorer/Panes/LoadQueryPanel/__snapshots__/index.test.tsx.snap new file mode 100644 index 000000000..ee672aa5c --- /dev/null +++ b/src/Explorer/Panes/LoadQueryPanel/__snapshots__/index.test.tsx.snap @@ -0,0 +1,62 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Load Query Pane should render Default properly 1`] = ` + +
+
+ + + + +
+
+ +`; diff --git a/src/Explorer/Panes/LoadQueryPanel/index.test.tsx b/src/Explorer/Panes/LoadQueryPanel/index.test.tsx new file mode 100644 index 000000000..fbed0b672 --- /dev/null +++ b/src/Explorer/Panes/LoadQueryPanel/index.test.tsx @@ -0,0 +1,17 @@ +import { shallow } from "enzyme"; +import React from "react"; +import Explorer from "../../Explorer"; +import { LoadQueryPanel } from "./index"; + +describe("Load Query Pane", () => { + it("should render Default properly", () => { + const fakeExplorer = {} as Explorer; + const props = { + explorer: fakeExplorer, + closePanel: (): void => undefined, + }; + + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/Explorer/Panes/LoadQueryPanel/index.tsx b/src/Explorer/Panes/LoadQueryPanel/index.tsx new file mode 100644 index 000000000..0b2816c04 --- /dev/null +++ b/src/Explorer/Panes/LoadQueryPanel/index.tsx @@ -0,0 +1,134 @@ +import { useBoolean } from "@uifabric/react-hooks"; +import { IImageProps, Image, ImageFit, Stack, TextField } from "office-ui-fabric-react"; +import React, { FunctionComponent, useState } from "react"; +import folderIcon from "../../../../images/folder_16x16.svg"; +import { logError } from "../../../Common/Logger"; +import { userContext } from "../../../UserContext"; +import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils"; +import Explorer from "../../Explorer"; +import QueryTab from "../../Tabs/QueryTab"; +import { Collection } from "..//../../Contracts/ViewModels"; +import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent"; + +interface LoadQueryPanelProps { + explorer: Explorer; + closePanel: () => void; +} + +export const LoadQueryPanel: FunctionComponent = ({ + explorer, + closePanel, +}: LoadQueryPanelProps): JSX.Element => { + const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false); + const [formError, setFormError] = useState(""); + const [formErrorsDetails, setFormErrorsDetails] = useState(""); + const [selectedFileName, setSelectedFileName] = useState(""); + const [selectedFiles, setSelectedFiles] = useState(); + + const imageProps: Partial = { + imageFit: ImageFit.centerCover, + width: 20, + height: 20, + className: "fileIcon", + }; + + const title = "Load Query"; + const genericPaneProps: GenericRightPaneProps = { + container: explorer, + formError: formError, + formErrorDetail: formErrorsDetails, + id: "loadQueryPane", + isExecuting: isLoading, + title, + submitButtonText: "Load", + onClose: () => closePanel(), + onSubmit: () => submit(), + }; + + const onFileSelected = (e: React.ChangeEvent): void => { + const { files } = e.target; + setSelectedFiles(files); + setSelectedFileName(files && files[0] && `"${files[0].name}"`); + }; + + const submit = async (): Promise => { + setFormError(""); + setFormErrorsDetails(""); + if (!selectedFiles || selectedFiles.length === 0) { + setFormError("No file specified"); + setFormErrorsDetails("No file specified. Please input a file."); + logConsoleError("Could not load query -- No file specified. Please input a file."); + return; + } + + const file: File = selectedFiles[0]; + logConsoleProgress(`Loading query from file ${file.name}`); + setLoadingTrue(); + try { + await loadQueryFromFile(file); + logConsoleInfo(`Successfully loaded query from file ${file.name}`); + closePanel(); + setLoadingFalse(); + } catch (error) { + setLoadingFalse(); + setFormError("Failed to load query"); + setFormErrorsDetails(`Failed to load query: ${error}`); + logConsoleError(`Failed to load query from file ${file.name}: ${error}`); + } + }; + + const loadQueryFromFile = async (file: File): Promise => { + const selectedCollection: Collection = explorer?.findSelectedCollection(); + if (!selectedCollection) { + logError("No collection was selected", "LoadQueryPane.loadQueryFromFile"); + } else if (userContext.apiType === "Mongo") { + selectedCollection.onNewMongoQueryClick(selectedCollection, undefined); + } else { + selectedCollection.onNewQueryClick(selectedCollection, undefined); + } + const reader = new FileReader(); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + reader.onload = (evt: any): void => { + const fileData: string = evt.target.result; + const queryTab = explorer.tabsManager.activeTab() as QueryTab; + queryTab.initialEditorContent(fileData); + queryTab.sqlQueryEditorContent(fileData); + }; + + reader.onerror = (): void => { + setFormError("Failed to load query"); + setFormErrorsDetails(`Failed to load query`); + logConsoleError(`Failed to load query from file ${file.name}`); + }; + return reader.readAsText(file); + }; + + return ( + +
+
+ + + + +
+
+ + ); +}; diff --git a/src/Explorer/Panes/PaneComponents.ts b/src/Explorer/Panes/PaneComponents.ts index 64e862600..cc9b4bdfa 100644 --- a/src/Explorer/Panes/PaneComponents.ts +++ b/src/Explorer/Panes/PaneComponents.ts @@ -6,7 +6,6 @@ import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirma import GitHubReposPaneTemplate from "./GitHubReposPane.html"; import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html"; import GraphStylingPaneTemplate from "./GraphStylingPane.html"; -import LoadQueryPaneTemplate from "./LoadQueryPane.html"; import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html"; import StringInputPaneTemplate from "./StringInputPane.html"; import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html"; @@ -110,15 +109,6 @@ export class CassandraAddCollectionPaneComponent { } } -export class LoadQueryPaneComponent { - constructor() { - return { - viewModel: PaneComponent, - template: LoadQueryPaneTemplate, - }; - } -} - export class BrowseQueriesPaneComponent { constructor() { return { diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less index 3ae4cff26..16766694b 100644 --- a/src/Explorer/Panes/PanelComponent.less +++ b/src/Explorer/Panes/PanelComponent.less @@ -126,6 +126,17 @@ .panelGroupSpacing > * { margin-bottom: @SmallSpace; } +.fileUpload { + display: none !important; +} +.customFileUpload { + padding: 25px 0px 0px 10px; + cursor: pointer; + display: flex; +} +.fileIcon { + align-self: center; +} .panelAddIconLabel { font-size: 20px; width: 20px; @@ -140,4 +151,4 @@ } .removeIcon { color: @InfoIconColor; -} \ No newline at end of file +} diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap index ad0242558..6ba1d5e34 100644 --- a/src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap +++ b/src/Explorer/Panes/SettingsPane/__snapshots__/index.test.tsx.snap @@ -347,20 +347,6 @@ exports[`Settings Pane should render Default properly 1`] = ` "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -765,20 +751,6 @@ exports[`Settings Pane should render Default properly 1`] = ` "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], @@ -1389,20 +1361,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = ` "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -1807,20 +1765,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = ` "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], diff --git a/src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap b/src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap index 1662646db..4ae9bcd1e 100644 --- a/src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap +++ b/src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap @@ -347,20 +347,6 @@ exports[`Upload Items Pane should render Default properly 1`] = ` "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -765,20 +751,6 @@ exports[`Upload Items Pane should render Default properly 1`] = ` "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], diff --git a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap index d4eca0772..9815afcdc 100644 --- a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap +++ b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap @@ -348,20 +348,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database "userTableQuery": [Function], "visible": [Function], }, - LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, BrowseQueriesPane { "canSaveQueries": [Function], "container": [Circular], @@ -769,20 +755,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database "isSparkEnabledForAccount": [Function], "isSynapseLinkUpdating": [Function], "isTabsContentExpanded": [Function], - "loadQueryPane": LoadQueryPane { - "container": [Circular], - "files": [Function], - "firstFieldHasFocus": [Function], - "formErrors": [Function], - "formErrorsDetails": [Function], - "id": "loadquerypane", - "isExecuting": [Function], - "isTemplateReady": [Function], - "onImportLinkKeyPress": [Function], - "selectedFilesTitle": [Function], - "title": [Function], - "visible": [Function], - }, "memoryUsageInfo": [Function], "newVertexPane": NewVertexPane { "buildString": [Function], diff --git a/src/Explorer/Tabs/QueryTab.ts b/src/Explorer/Tabs/QueryTab.ts index 2829f2fac..bd18a4f75 100644 --- a/src/Explorer/Tabs/QueryTab.ts +++ b/src/Explorer/Tabs/QueryTab.ts @@ -184,10 +184,6 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem await this._executeQueryDocumentsPage(0); }; - public onLoadQueryClick = (): void => { - this.collection && this.collection.container && this.collection.container.loadQueryPane.open(); - }; - public onSaveQueryClick = (): void => { this.collection && this.collection.container && this.collection.container.openSaveQueryPanel(); }; diff --git a/src/Main.tsx b/src/Main.tsx index 654229252..5e08e3c72 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -239,7 +239,6 @@ const App: React.FunctionComponent = () => {
-