Migrate Query Tab to React (#852)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -281,7 +281,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
   }
 
   /** Renders a Javascript object to be displayed inside Monaco Editor */
-  protected renderObjectForEditor(value: any, replacer: any, space: string | number): string {
+  public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
     return MongoUtility.tojson(value, null, false);
   }
 

src/Explorer/Tabs/MongoQueryTab.ts

@@ -1,10 +1,10 @@
-import * as ViewModels from "../../Contracts/ViewModels";
 import Q from "q";
-import MongoUtility from "../../Common/MongoUtility";
-import QueryTab from "./QueryTab";
 import * as HeadersUtility from "../../Common/HeadersUtility";
-import { queryIterator } from "../../Common/MongoProxyClient";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
+import { queryIterator } from "../../Common/MongoProxyClient";
+import MongoUtility from "../../Common/MongoUtility";
+import * as ViewModels from "../../Contracts/ViewModels";
+import QueryTab from "./QueryTab";
 
 export default class MongoQueryTab extends QueryTab {
   public collection: ViewModels.Collection;
@@ -16,7 +16,7 @@ export default class MongoQueryTab extends QueryTab {
     this.monacoSettings = new ViewModels.MonacoEditorSettings("plaintext", false);
   }
   /** Renders a Javascript object to be displayed inside Monaco Editor */
-  protected renderObjectForEditor(value: any, replacer: any, space: string | number): string {
+  public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
     return MongoUtility.tojson(value, null, false);
   }
 

src/Explorer/Tabs/QueryTab/QueryTab.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import * as DataModels from "../../../Contracts/DataModels";
+import type { QueryTabOptions } from "../../../Contracts/ViewModels";
+import Explorer from "../../Explorer";
+import { IQueryTabComponentProps, ITabAccessor } from "../../Tabs/QueryTab/QueryTabComponent";
+import TabsBase from "../TabsBase";
+import QueryTabComponent from "./QueryTabComponent";
+
+export interface IQueryTabProps {
+  container: Explorer;
+}
+
+export class NewQueryTab extends TabsBase {
+  public queryText: string;
+  public currentQuery: string;
+  public partitionKey: DataModels.PartitionKey;
+  public iQueryTabComponentProps: IQueryTabComponentProps;
+  public iTabAccessor: ITabAccessor;
+
+  constructor(options: QueryTabOptions, private props: IQueryTabProps) {
+    super(options);
+    this.partitionKey = options.partitionKey;
+    this.iQueryTabComponentProps = {
+      collection: this.collection,
+      isExecutionError: this.isExecutionError(),
+      tabId: this.tabId,
+      tabsBaseInstance: this,
+      queryText: options.queryText,
+      partitionKey: this.partitionKey,
+      container: this.props.container,
+      onTabAccessor: (instance: ITabAccessor): void => {
+        this.iTabAccessor = instance;
+      },
+    };
+  }
+
+  public render(): JSX.Element {
+    return <QueryTabComponent {...this.iQueryTabComponentProps} />;
+  }
+
+  public onTabClick(): void {
+    this.manager?.activateTab(this);
+    this.iTabAccessor.onTabClickEvent();
+  }
+
+  public onCloseTabButtonClick(): void {
+    this.manager?.closeTab(this);
+    this.iTabAccessor.onCloseClickEvent(true);
+  }
+
+  public getContainer(): Explorer {
+    return this.props.container;
+  }
+}

src/Explorer/Tabs/QueryTab/QueryTabComponent.less

@@ -0,0 +1,285 @@
+@import "../../../../less/Common/Constants.less";
+@import "../../../../less/Common/TabCommon.less";
+
+@MongoQueryEditorHeight: 50px;
+@ResultsTextFontWeight: 600;
+@ToggleHeight: 30px;
+@ToggleWidth: 250px;
+@QueryEngineExeInfo: 305px;
+
+.tab-pane {
+  .tabContentContainer();
+
+  .tabPaneContentContainer {
+    position: relative;
+    .tabContentContainer();
+
+    .mongoQueryHelper {
+      margin: @DefaultSpace 0px 0px 44px;
+    }
+
+    .splitter-layout {
+      .layout-pane-primary {
+        overflow: hidden !important;
+        .queryEditor {
+          .flex-display();
+          height: 100%;
+          width: 100%;
+          margin-top: @SmallSpace;
+
+          .jsonEditor {
+            border: none;
+            margin-top: @SmallSpace;
+          }
+        }
+      }
+
+      .queryEditor.mongoQueryEditor {
+        margin-top: 32px;
+        overflow: hidden;
+      }
+
+      .queryEditorHorizontalSplitter {
+        margin: auto;
+        display: block;
+      }
+    }
+
+    .queryErrorsHeaderContainer {
+      padding: 24px @LargeSpace 0px @MediumSpace;
+
+      .queryErrors {
+        font-size: @mediumFontSize;
+        list-style-type: none;
+        color: @BaseDark;
+        font-weight: bold;
+        margin-left: 24px;
+      }
+    }
+
+    .queryResultErrorContentContainer {
+      .flex-display();
+      .flex-direction();
+      font-size: @DefaultFontSize;
+      padding: @DefaultSpace;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+
+      .queryEditorWatermark {
+        text-align: center;
+        margin: auto;
+        height: 25vh; // this is to align the water mark in center of the layout.
+
+        p {
+          margin-bottom: @LargeSpace;
+          color: @BaseHigh;
+        }
+
+        .queryEditorWatermarkText {
+          color: @BaseHigh;
+          font-size: @DefaultFontSize;
+          font-family: @DataExplorerFont;
+        }
+      }
+
+      .queryResultsErrorsContent {
+        height: 100%;
+        margin-left: @MediumSpace;
+        .flex-display();
+        .flex-direction();
+
+        div[role="tabpanel"] {
+          height: 100%;
+          div:nth-child(1) {
+            height: 100%;
+          }
+        }
+
+        .result-metadata {
+          padding: @LargeSpace @SmallSpace @MediumSpace @MediumSpace;
+          height: auto !important;
+          .queryResultDivider {
+            margin-left: @SmallSpace;
+            margin-right: @SmallSpace;
+          }
+
+          .queryResultNextEnable {
+            color: @AccentMediumHigh;
+            font-size: @mediumFontSize;
+            cursor: pointer;
+
+            img {
+              height: @ImgHeight;
+              width: @ImgWidth;
+              margin-left: @SmallSpace;
+            }
+          }
+
+          .queryResultNextDisable {
+            color: @BaseMediumHigh;
+            opacity: 0.5;
+            font-size: @mediumFontSize;
+
+            img {
+              height: @ImgHeight;
+              width: @ImgWidth;
+              margin-left: @SmallSpace;
+            }
+          }
+        }
+
+        .tab-pane.active {
+          height: 100%;
+          width: 100%;
+        }
+
+        .errorContent {
+          .flex-display();
+          width: 60%;
+          white-space: nowrap;
+          font-size: @mediumFontSize;
+          padding: 0px @MediumSpace 0px @MediumSpace;
+
+          .errorMessage {
+            padding: @SmallSpace;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .errorDetailsLink {
+          cursor: pointer;
+          padding: @SmallSpace;
+        }
+
+        .queryMetricsSummaryContainer {
+          .flex-display();
+          .flex-direction();
+          overflow: hidden;
+          position: relative;
+          height: 100%;
+
+          .queryMetricsSummary {
+            margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
+            table-layout: fixed;
+            display: block;
+            height: 100%;
+            overflow-y: auto;
+            overflow-x: hidden;
+
+            caption {
+              width: 100px;
+            }
+
+            .queryMetricsSummaryHead {
+              .flex-display();
+            }
+
+            .queryMetricsSummaryHeader.queryMetricsSummaryTuple {
+              font-size: 10px;
+            }
+
+            .queryMetricsSummaryBody {
+              .flex-display();
+              .flex-direction();
+            }
+
+            .queryMetricsSummaryTuple {
+              border-bottom: 1px solid @BaseMedium;
+              height: 32px;
+              font-size: 12px;
+              width: 100%;
+              .flex-display();
+              th,
+              td {
+                padding: @DefaultSpace;
+
+                &:nth-child(1) {
+                  text-overflow: ellipsis;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  flex: 0 0 50%;
+                }
+
+                &:nth-child(3) {
+                  text-overflow: ellipsis;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  flex: 0 0 50%;
+                }
+
+                .queryMetricInfoTooltip {
+                  .infoTooltip();
+
+                  &:hover .queryMetricTooltipText {
+                    .tooltipVisible();
+                  }
+
+                  &:focus .queryMetricTooltipText {
+                    .tooltipVisible();
+                  }
+
+                  .queryMetricTooltipText {
+                    top: -50px;
+                    width: auto;
+                    white-space: nowrap;
+                    left: 6px;
+                    visibility: hidden;
+                    background-color: @BaseHigh;
+                    color: @BaseLight;
+                    position: absolute;
+                    z-index: 1;
+                    padding: @MediumSpace;
+
+                    &::after {
+                      border-width: (2 * @MediumSpace) (2 * @MediumSpace) 0px 0px;
+                      bottom: -14px;
+                      .tooltipTextAfter();
+                    }
+                  }
+
+                  .queryEngineExeTimeInfo {
+                    width: @QueryEngineExeInfo;
+                    top: -85px;
+                    white-space: pre-wrap;
+                  }
+                }
+              }
+            }
+          }
+
+          .downloadMetricsLinkContainer {
+            margin: 24px 0px 50px @MediumSpace;
+            position: sticky;
+            #downloadMetricsLink {
+              color: @BaseHigh;
+              padding: @DefaultSpace;
+              font-size: @mediumFontSize;
+              border: @ButtonBorderWidth solid @BaseLight;
+              cursor: pointer;
+
+              &:hover {
+                .hover();
+              }
+
+              &:active {
+                border: @ButtonBorderWidth dashed @AccentMedium;
+                .active();
+              }
+            }
+          }
+        }
+
+        json-editor {
+          .flex-display();
+          .flex-direction();
+          overflow: hidden;
+          height: 100%;
+          width: 100%;
+          padding: @SmallSpace 0px @SmallSpace @MediumSpace;
+        }
+      }
+    }
+  }
+}

src/Explorer/Tabs/TabsBase.ts

@@ -12,7 +12,6 @@ import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
 import { TabsManager } from "./TabsManager";
-
 // TODO: Use specific actions for logging telemetry data
 export default class TabsBase extends WaitsForTemplateViewModel {
   private static id = 0;
@@ -149,7 +148,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   }
 
   /** Renders a Javascript object to be displayed inside Monaco Editor */
-  protected renderObjectForEditor(value: any, replacer: any, space: string | number): string {
+  public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
     return JSON.stringify(value, replacer, space);
   }
 
@@ -164,7 +163,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     return [];
   }
 
-  protected updateNavbarWithTabsButtons = (): void => {
+  public updateNavbarWithTabsButtons = (): void => {
     if (this.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }