Upgrade Cosmos SDK to v4.3 (#2137)

* Upgrade Cosmos SDK to v4.3

* push pkg lock

* fix tests

* fix package-lock.json

* fix package-lock

* fix package-lock.json

* fix package-lock.json

* log console warning when RU limit is reached

* fix tests

* fix format

* fix tests

* added description to RU limit message

* show warning icon on tab header

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-console */
-import { FeedOptions, QueryOperationOptions } from "@azure/cosmos";
+import { FeedOptions } from "@azure/cosmos";
 import { AuthType } from "AuthType";
 import QueryError, { createMonacoErrorLocationResolver, createMonacoMarkersForQueryErrors } from "Common/QueryError";
 import { SplitterDirection } from "Common/Splitter";
@@ -19,7 +19,7 @@ import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
-import { LocalStorageUtility, StorageKey, getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { Allotment } from "allotment";
 import { useClientWriteEnabled } from "hooks/useClientWriteEnabled";
@@ -369,22 +369,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
     this.setState({
       isExecutionError: false,
     });
-
-    let queryOperationOptions: QueryOperationOptions;
-    if (userContext.apiType === "SQL" && ruThresholdEnabled()) {
-      const ruThreshold: number = getRUThreshold();
-      queryOperationOptions = {
-        ruCapPerOperation: ruThreshold,
-      } as QueryOperationOptions;
-    }
-
+    this.props.tabsBaseInstance.isExecutionWarning(false);
     const queryDocuments = async (firstItemIndex: number) =>
-      await queryDocumentsPage(
-        this.props.collection && this.props.collection.id(),
-        this._iterator,
-        firstItemIndex,
-        queryOperationOptions,
-      );
+      await queryDocumentsPage(this.props.collection && this.props.collection.id(), this._iterator, firstItemIndex);
     this.props.tabsBaseInstance.isExecuting(true);
     this.setState({
       isExecuting: true,
@@ -424,6 +411,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
         firstItemIndex,
         queryDocuments,
       );
+      if (queryResults.ruThresholdExceeded) {
+        this.props.tabsBaseInstance.isExecutionWarning(true);
+      }
       this.setState({ queryResults, errors: [] });
     } catch (error) {
       this.props.tabsBaseInstance.isExecutionError(true);

src/Explorer/Tabs/Tabs.tsx

@@ -18,6 +18,7 @@ import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import errorQuery from "../../../images/error_no_outline.svg";
+import warningIconSvg from "../../../images/warning.svg";
 import { useObservable } from "../../hooks/useObservable";
 import { ReactTabKind, useTabs } from "../../hooks/useTabs";
 import TabsBase from "./TabsBase";
@@ -117,6 +118,9 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
           >
             <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
               {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+              {useObservable(tab?.isExecutionWarning || ko.observable(false)) && (
+                <WarningIcon tab={tab} active={active} />
+              )}
               {isTabExecuting(tab, tabKind) && (
                 <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
               )}
@@ -194,6 +198,20 @@ const ErrorIcon = ({ tab, active }: { tab: Tab; active: boolean }) => (
   </div>
 );
 
+const WarningIcon = ({ tab, active }: { tab: Tab; active: boolean }) => (
+  <div
+    id="warningStatusIcon"
+    role="button"
+    title="Click to view more details"
+    tabIndex={active ? 0 : undefined}
+    className={active ? "actionsEnabled warningIconContainer" : "warningIconContainer"}
+    onClick={({ nativeEvent: e }) => tab.onErrorDetailsClick(undefined, e)}
+    onKeyPress={({ nativeEvent: e }) => tab.onErrorDetailsKeyPress(undefined, e)}
+  >
+    <img src={warningIconSvg} alt="Warning Icon" style={{ height: 15, marginBottom: 5 }} />
+  </div>
+);
+
 function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
   const ref = useRef<HTMLDivElement>();
   const attrs = {

src/Explorer/Tabs/TabsBase.ts

@@ -27,6 +27,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   public tabTitle: ko.Observable<string>;
   public tabPath: ko.Observable<string>;
   public isExecutionError = ko.observable(false);
+  public isExecutionWarning = ko.observable(false);
   public isExecuting = ko.observable(false);
   protected _theme: string;
   public onLoadStartKey: number;