resolve compile time error

babel.config.js

@@ -1,4 +1,13 @@
 module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+    "@babel/preset-typescript",
+  ],
   plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
 };

package.json

@@ -11,7 +11,7 @@
     "@azure/ms-rest-nodeauth": "3.0.7",
     "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-decorators": "7.13.15",
-    "@fluentui/react": "8.10.1",
+    "@fluentui/react": "8.14.4",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -40,7 +40,6 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
-    "@testing-library/jest-dom": "5.12.0",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
@@ -55,15 +54,15 @@
     "datatables.net-colreorder-dt": "1.5.1",
     "datatables.net-dt": "1.10.19",
     "date-fns": "1.29.0",
-    "dayjs": "1.8.19",
+    "dayjs": "1.10.4",
-    "dotenv": "8.2.0",
+    "dotenv": "9.0.0",
-    "eslint-plugin-jest": "23.13.2",
+    "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-react": "7.23.2",
     "hasher": "1.2.0",
-    "html2canvas": "1.0.0-rc.5",
+    "html2canvas": "1.0.0-rc.7",
-    "i18next": "19.8.4",
+    "i18next": "20.2.2",
-    "i18next-browser-languagedetector": "6.0.1",
+    "i18next-browser-languagedetector": "6.1.0",
-    "i18next-http-backend": "1.0.23",
+    "i18next-http-backend": "1.2.2",
     "iframe-resizer-react": "1.1.0",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
@@ -85,7 +84,7 @@
     "react-dnd-html5-backend": "14.0.0",
     "react-dom": "17.0.2",
     "react-hotkeys": "2.0.0",
-    "react-i18next": "11.8.5",
+    "react-i18next": "11.8.15",
     "react-notification-system": "0.2.17",
     "react-redux": "7.2.4",
     "redux": "4.1.0",
@@ -93,7 +92,7 @@
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
     "sanitize-html": "2.3.3",
-    "styled-components": "4.3.2",
+    "styled-components": "5.3.0",
     "swr": "0.4.0",
     "underscore": "1.9.1",
     "utility-types": "3.10.0"
@@ -104,6 +103,7 @@
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
     "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "5.12.0",
     "@testing-library/react": "11.2.6",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -117,15 +117,15 @@
     "@types/post-robot": "10.0.1",
     "@types/promise.prototype.finally": "2.0.3",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.3",
+    "@types/react": "17.0.5",
     "@types/react-dom": "17.0.3",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.16",
     "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
-    "@types/styled-components": "5.1.1",
+    "@types/styled-components": "5.1.9",
     "@types/underscore": "1.7.36",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "4.22.1",
     "@typescript-eslint/parser": "4.22.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
     "babel-jest": "26.6.3",
@@ -179,7 +179,7 @@
     "wait-on": "4.0.2",
     "webpack": "5.36.2",
     "webpack-bundle-analyzer": "4.4.1",
-    "webpack-cli": "4.6.0",
+    "webpack-cli": "4.7.0",
     "webpack-dev-server": "3.11.2"
   },
   "scripts": {

src/Common/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { ITooltipHostStyles, TooltipHost } from "@fluentui/react";
 import { useId } from "@fluentui/react-hooks";
 import { ReactComponent as InfoBubble } from "images/info-bubble.svg";
-import * as React from "react";
+import React, { FunctionComponent } from "react";
 
 const calloutProps = { gapSpace: 0 };
 const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
@@ -9,7 +9,7 @@ const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block
 export interface TooltipProps {
   children: string;
 }
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
+export const Tooltip: FunctionComponent = ({ children }: TooltipProps) => {
   const tooltipId = useId("tooltip");
 
   return children ? (

src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap

@@ -1959,7 +1959,7 @@ exports[`test render renders with filters 1`] = `
                               </div>
                             </span>
                           </button>
-                          <Component />
+                          <FocusRects />
                         </BaseButton>
                       </DefaultButton>
                     </CustomizedDefaultButton>

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -252,7 +252,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       >
          capacity calculator
          
-        <Component
+        <FontIcon
           iconName="NavigateExternalInline"
         />
       </StyledLinkBase>
@@ -526,7 +526,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       >
          capacity calculator
          
-        <Component
+        <FontIcon
           iconName="NavigateExternalInline"
         />
       </StyledLinkBase>

src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx

@@ -123,8 +123,9 @@ export const cellTarget = {
     if (monitor) {
       const hoverUpperHalf = isDragUpper(props, monitor, component.el);
       // DropTargetSpec monitor definition could be undefined. we'll need a check for monitor in order to pass validation.
+      const item: Props = monitor.getItem();
       props.moveCell({
-        id: monitor.getItem().id,
+        id: item.id,
         destinationId: props.id,
         above: hoverUpperHalf,
         contentRef: props.contentRef,

src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -1115,7 +1115,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       className="ms-Button-flexContainer flexContainer-203"
                       data-automationid="splitbuttonprimary"
                     >
-                      <Component
+                      <FontIcon
                         className="ms-Button-icon icon-205"
                         iconName="Cancel"
                       >
@@ -1131,10 +1131,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         >
                           
                         </i>
-                      </Component>
+                      </FontIcon>
                     </span>
                   </button>
-                  <Component />
+                  <FocusRects />
                 </BaseButton>
               </IconButton>
             </CustomizedIconButton>
@@ -3650,7 +3650,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             </span>
                           </span>
                         </button>
-                        <Component />
+                        <FocusRects />
                       </BaseButton>
                     </DefaultButton>
                   </CustomizedDefaultButton>

src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap

@@ -1106,7 +1106,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       className="ms-Button-flexContainer flexContainer-54"
                       data-automationid="splitbuttonprimary"
                     >
-                      <Component
+                      <FontIcon
                         className="ms-Button-icon icon-56"
                         iconName="Cancel"
                       >
@@ -1122,10 +1122,10 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         >
                           
                         </i>
-                      </Component>
+                      </FontIcon>
                     </span>
                   </button>
-                  <Component />
+                  <FocusRects />
                 </BaseButton>
               </IconButton>
             </CustomizedIconButton>
@@ -8213,7 +8213,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             </span>
                           </span>
                         </button>
-                        <Component />
+                        <FocusRects />
                       </BaseButton>
                     </DefaultButton>
                   </CustomizedDefaultButton>

src/Explorer/Panes/SetupNotebooksPanel/__snapshots__/SetupNotebooksPanel.test.tsx.snap

@@ -1760,7 +1760,7 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
                       </span>
                     </span>
                   </button>
-                  <Component />
+                  <FocusRects />
                 </BaseButton>
               </DefaultButton>
             </CustomizedDefaultButton>

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -2379,7 +2379,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       className="ms-Button-flexContainer flexContainer-154"
                       data-automationid="splitbuttonprimary"
                     >
-                      <Component
+                      <FontIcon
                         className="ms-Button-icon icon-156"
                         iconName="Cancel"
                       >
@@ -2395,10 +2395,10 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                         >
                           
                         </i>
-                      </Component>
+                      </FontIcon>
                     </span>
                   </button>
-                  <Component />
+                  <FocusRects />
                 </BaseButton>
               </IconButton>
             </CustomizedIconButton>
@@ -4837,7 +4837,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                             </span>
                           </span>
                         </button>
-                        <Component />
+                        <FocusRects />
                       </BaseButton>
                     </DefaultButton>
                   </CustomizedDefaultButton>

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap

@@ -1110,7 +1110,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                       className="ms-Button-flexContainer flexContainer-54"
                       data-automationid="splitbuttonprimary"
                     >
-                      <Component
+                      <FontIcon
                         className="ms-Button-icon icon-56"
                         iconName="Cancel"
                       >
@@ -1126,10 +1126,10 @@ exports[`Table query select Panel should render Default properly 1`] = `
                         >
                           
                         </i>
-                      </Component>
+                      </FontIcon>
                     </span>
                   </button>
-                  <Component />
+                  <FocusRects />
                 </BaseButton>
               </IconButton>
             </CustomizedIconButton>
@@ -4180,7 +4180,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             </span>
                           </span>
                         </button>
-                        <Component />
+                        <FocusRects />
                       </BaseButton>
                     </DefaultButton>
                   </CustomizedDefaultButton>

src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap

@@ -2663,7 +2663,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                                               className="ms-Button-flexContainer flexContainer-73"
                                               data-automationid="splitbuttonprimary"
                                             >
-                                              <Component
+                                              <FontIcon
                                                 className="ms-Button-icon icon-75"
                                                 iconName="Cancel"
                                               >
@@ -2679,10 +2679,10 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                                                 >
                                                   
                                                 </i>
-                                              </Component>
+                                              </FontIcon>
                                             </span>
                                           </button>
-                                          <Component />
+                                          <FocusRects />
                                         </BaseButton>
                                       </IconButton>
                                     </CustomizedIconButton>

src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap

@@ -2664,7 +2664,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                                               className="ms-Button-flexContainer flexContainer-73"
                                               data-automationid="splitbuttonprimary"
                                             >
-                                              <Component
+                                              <FontIcon
                                                 className="ms-Button-icon icon-75"
                                                 iconName="Cancel"
                                               >
@@ -2680,10 +2680,10 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                                                 >
                                                   
                                                 </i>
-                                              </Component>
+                                              </FontIcon>
                                             </span>
                                           </button>
-                                          <Component />
+                                          <FocusRects />
                                         </BaseButton>
                                       </IconButton>
                                     </CustomizedIconButton>

src/Explorer/Panes/UploadItemsPane/__snapshots__/UploadItemsPane.test.tsx.snap

@@ -20,7 +20,9 @@ exports[`Upload Items Pane should render Default properly 1`] = `
       multiple={true}
       onUpload={[Function]}
       tabIndex={0}
-      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
+      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON
+ documents. The combined size of all files in an individual upload operation must be less than 2 MB. You
+ can perform multiple upload operations for larger data sets."
     />
   </div>
 </GenericRightPaneComponent>

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -4021,7 +4021,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                       </span>
                     </span>
                   </button>
-                  <Component />
+                  <FocusRects />
                 </BaseButton>
               </DefaultButton>
             </CustomizedDefaultButton>

src/global.d.ts

@@ -1,6 +1,14 @@
+import { PageWaitForSelectorOptions } from "expect-playwright";
 import Explorer from "./Explorer/Explorer";
 
 declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toHaveFocus(selector: string, options?: PageWaitForSelectorOptions): Promise<R>;
+      toHaveTextContent(htmlElement: string): object;
+      toHaveValue(value: string | string[] | number): object;
+    }
+  }
   interface Window {
     /**
      * @deprecated

src/setupTests.ts

@@ -1,13 +1,13 @@
+import { initializeIcons } from "@fluentui/react";
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 import { configure } from "enzyme";
 import "jest-canvas-mock";
-import { initializeIcons } from "@fluentui/react";
 import { TextDecoder, TextEncoder } from "util";
 configure({ adapter: new Adapter() });
 initializeIcons();
 
 if (typeof window.URL.createObjectURL === "undefined") {
-  Object.defineProperty(window.URL, "createObjectURL", { value: () => {} });
+  Object.defineProperty(window.URL, "createObjectURL", { value: () => { } });
 }
 
 // TODO Remove when jquery and documentdbclient SDK are removed

webpack.config.js

@@ -13,7 +13,7 @@ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 const CreateFileWebpack = require("create-file-webpack");
 const childProcess = require("child_process");
-const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const TerserPlugin = require("terser-webpack-plugin");
 const isCI = require("is-ci");