Upgrade typescript to 4.9.5 and jest to 29.7.0 (and related packages) (#1884)

* Upgrade typescript to 4.9.5

* Fix compile issue and put back files in tsconfig.strict.json

* Update test snapshots

* Fix jest tests by upgrading jest and other related packages.

* Attempt to fix playwright test

* Revert "Attempt to fix playwright test"

This reverts commit 8293f34c9c.

* 2nd attempt to fix example test

* fix waitFor in playwright

* Remove unused describe section

* Attempt to fix e2e test

* Revert "Attempt to fix e2e test"

This reverts commit 9745bcd2ef.

* Upgrade playwright to latest

* Revert "Upgrade playwright to latest"

This reverts commit e2ea1d0189.

* Error test on e2e

* Revert "Error test on e2e"

This reverts commit 124e3764f7.

* Try to select dropdown item by xpath selector

* Revert "Try to select dropdown item by xpath selector"

This reverts commit 8eb42a64e2.

* Attempt to wait until page is fully loaded

* Revert "Attempt to wait until page is fully loaded"

This reverts commit bb43fcea6e.

* Use playwright selectOption to select dropdown option

* Revert "Use playwright selectOption to select dropdown option"

This reverts commit daa8cd0930.

* Select dropdown option with playwright api instead of manual click

* c7ab4c7ecf7b05f32a85568bce1a667ad8c62703Revert "Select dropdown option with playwright api instead of manual click"

This reverts commit c7ab4c7ecf.

* Wait for 5s after dropdown click

* Revert "Wait for 5s after dropdown click"

This reverts commit 847e9ad33f.

* Try forcing click

* Revert "Try forcing click"

This reverts commit 29b9fa1bda.

* Force click on the dropdown and set viewport size bigger.

* Force click on the dropdown and set viewport size bigger.

* try force clicking option

* Skip container test on webkit

* Add branded browsers to e2e tests

---------

Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com>

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

@@ -37,25 +37,25 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         autoFocus={true}
         id="database-id"
         onChange={[Function]}
-        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
+        pattern="[^/?#\\\\]*[^/?# \\\\]"
         placeholder="Type a new database id"
         size={40}
         styles={
-          Object {
-            "field": Object {
+          {
+            "field": {
               "fontSize": 12,
-              "selectors": Object {
-                "::placeholder": Object {
+              "selectors": {
+                "::placeholder": {
                   "fontSize": 12,
                 },
               },
             },
-            "root": Object {
+            "root": {
               "width": 300,
             },
           }
         }
-        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
+        title="May not end with space nor contain characters '\\' '/' '#' '?'"
         type="text"
         value=""
       />
@@ -67,16 +67,16 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
           label="Provision throughput"
           onChange={[Function]}
           styles={
-            Object {
-              "checkbox": Object {
+            {
+              "checkbox": {
                 "height": 12,
                 "width": 12,
               },
-              "label": Object {
+              "label": {
                 "alignItems": "center",
                 "padding": 0,
               },
-              "text": Object {
+              "text": {
                 "fontSize": 12,
               },
             }

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

@@ -4,8 +4,8 @@ exports[`Browse queries panel Should render Default properly 1`] = `
 <BrowseQueriesPane
   closePanel={[Function]}
   explorer={
-    Object {
-      "queriesClient": Object {
+    {
+      "queriesClient": {
         "getQueries": [Function],
       },
     }
@@ -21,7 +21,7 @@ exports[`Browse queries panel Should render Default properly 1`] = `
         containerVisible={true}
         onQuerySelect={[Function]}
         queriesClient={
-          Object {
+          {
             "getQueries": [Function],
           }
         }
@@ -41,7 +41,7 @@ exports[`Browse queries panel Should render Default properly 1`] = `
             alt="Save query helper banner"
             src=""
             style={
-              Object {
+              {
                 "border": "1px solid undefined",
                 "height": "150px",
                 "marginTop": "20px",

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

@@ -7,7 +7,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
   <div
     className="panelMainContent"
     style={
-      Object {
+      {
         "display": "flex",
         "flexDirection": "column",
       }
@@ -15,7 +15,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
   >
     <GitHubReposComponent
       addRepoProps={
-        Object {
+        {
           "container": Explorer {
             "_isInitializingNotebooks": false,
             "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -24,7 +24,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "onRefreshResourcesClick": [Function],
             "phoenixClient": PhoenixClient {
               "armResourceId": undefined,
-              "retryOptions": Object {
+              "retryOptions": {
                 "maxTimeout": 5000,
                 "minTimeout": 5000,
                 "retries": 3,
@@ -46,7 +46,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
         }
       }
       authorizeAccessProps={
-        Object {
+        {
           "authorizeAccess": [Function],
           "scope": "public_repo",
         }
@@ -54,18 +54,18 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
       onCancelClick={[Function]}
       onOkClick={[Function]}
       reposListProps={
-        Object {
-          "branchesProps": Object {},
+        {
+          "branchesProps": {},
           "pinRepo": [Function],
-          "pinnedReposProps": Object {
-            "repos": Array [],
+          "pinnedReposProps": {
+            "repos": [],
           },
           "unpinRepo": [Function],
-          "unpinnedReposProps": Object {
+          "unpinnedReposProps": {
             "hasMore": true,
             "isLoading": true,
             "loadMore": [Function],
-            "repos": Array [],
+            "repos": [],
           },
         }
       }

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

@@ -22,8 +22,8 @@ exports[`Load Query Pane should render Default properly 1`] = `
           label="Select a query document"
           readOnly={true}
           styles={
-            Object {
-              "fieldGroup": Object {
+            {
+              "fieldGroup": {
                 "width": 300,
               },
             }
@@ -39,7 +39,7 @@ exports[`Load Query Pane should render Default properly 1`] = `
             className="fileIcon"
             height={20}
             imageFit={4}
-            src={Object {}}
+            src={{}}
             width={20}
           />
           <input

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

@@ -7,7 +7,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
   <Stack
     className="panelMainContent"
     tokens={
-      Object {
+      {
         "childrenGap": 20,
       }
     }
@@ -55,12 +55,12 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
         label="Cover image"
         onChange={[Function]}
         options={
-          Array [
-            Object {
+          [
+            {
               "key": "Custom Image",
               "text": "Custom Image",
             },
-            Object {
+            {
               "key": "URL",
               "text": "URL",
             },
@@ -85,7 +85,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
     <StackItem>
       <GalleryCardComponent
         data={
-          Object {
+          {
             "author": "CosmosDB",
             "created": "2020-07-17T00:00:00Z",
             "description": "sample description",
@@ -98,7 +98,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
             "newCellId": undefined,
             "pendingScanJobIds": undefined,
             "policyViolations": undefined,
-            "tags": Array [
+            "tags": [
               "tag1",
               " tag2",
             ],

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

@@ -2,7 +2,7 @@
 
 exports[`Save Query Pane should render Default properly 1`] = `
 <RightPaneForm
-  footerStyle={Object {}}
+  footerStyle={{}}
   formError=""
   isExecuting={false}
   onSubmit={[Function]}
@@ -11,7 +11,7 @@ exports[`Save Query Pane should render Default properly 1`] = `
   <div
     className="panelFormWrapper"
     style={
-      Object {
+      {
         "flexGrow": 1,
       }
     }

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

@@ -30,12 +30,12 @@ exports[`Settings Pane should render Default properly 1`] = `
             ariaLabelledBy="pageOptions"
             onChange={[Function]}
             options={
-              Array [
-                Object {
+              [
+                {
                   "key": "custom",
                   "text": "Custom",
                 },
-                Object {
+                {
                   "key": "unlimited",
                   "text": "Unlimited",
                 },
@@ -43,24 +43,24 @@ exports[`Settings Pane should render Default properly 1`] = `
             }
             selectedKey="custom"
             styles={
-              Object {
-                "flexContainer": Array [
-                  Object {
-                    "selectors": Object {
-                      ".ms-ChoiceField": Object {
+              {
+                "flexContainer": [
+                  {
+                    "selectors": {
+                      ".ms-ChoiceField": {
                         "marginTop": 0,
                       },
-                      ".ms-ChoiceField-wrapper label": Object {
+                      ".ms-ChoiceField-wrapper label": {
                         "fontSize": 12,
                         "paddingTop": 0,
                       },
-                      ".ms-ChoiceFieldGroup root-133": Object {
+                      ".ms-ChoiceFieldGroup root-133": {
                         "clear": "both",
                       },
                     },
                   },
                 ],
-                "root": Object {
+                "root": {
                   "clear": "both",
                 },
               }
@@ -120,17 +120,17 @@ exports[`Settings Pane should render Default properly 1`] = `
             label="Enable RU threshold"
             onChange={[Function]}
             styles={
-              Object {
-                "container": Object {},
-                "label": Object {
+              {
+                "container": {},
+                "label": {
                   "display": "block",
                   "fontSize": 12,
                   "fontWeight": 400,
                 },
-                "pill": Object {},
-                "root": Object {},
-                "text": Object {},
-                "thumb": Object {},
+                "pill": {},
+                "root": {},
+                "text": {},
+                "thumb": {},
               }
             }
           />
@@ -146,19 +146,19 @@ exports[`Settings Pane should render Default properly 1`] = `
             onChange={[Function]}
             step={1000}
             styles={
-              Object {
-                "arrowButtonsContainer": Object {},
-                "icon": Object {},
-                "input": Object {},
-                "label": Object {
+              {
+                "arrowButtonsContainer": {},
+                "icon": {},
+                "input": {},
+                "label": {
                   "fontSize": 12,
                   "fontWeight": 400,
                 },
-                "labelWrapper": Object {},
-                "root": Object {
+                "labelWrapper": {},
+                "root": {
                   "paddingBottom": 10,
                 },
-                "spinButtonWrapper": Object {},
+                "spinButtonWrapper": {},
               }
             }
           />
@@ -188,17 +188,17 @@ exports[`Settings Pane should render Default properly 1`] = `
             label="Enable query timeout"
             onChange={[Function]}
             styles={
-              Object {
-                "container": Object {},
-                "label": Object {
+              {
+                "container": {},
+                "label": {
                   "display": "block",
                   "fontSize": 12,
                   "fontWeight": 400,
                 },
-                "pill": Object {},
-                "root": Object {},
-                "text": Object {},
-                "thumb": Object {},
+                "pill": {},
+                "root": {},
+                "text": {},
+                "thumb": {},
               }
             }
           />
@@ -227,12 +227,12 @@ exports[`Settings Pane should render Default properly 1`] = `
             ariaLabelledBy="defaultQueryResultsView"
             onChange={[Function]}
             options={
-              Array [
-                Object {
+              [
+                {
                   "key": "vertical",
                   "text": "Vertical",
                 },
-                Object {
+                {
                   "key": "horizontal",
                   "text": "Horizontal",
                 },
@@ -240,24 +240,24 @@ exports[`Settings Pane should render Default properly 1`] = `
             }
             selectedKey="vertical"
             styles={
-              Object {
-                "flexContainer": Array [
-                  Object {
-                    "selectors": Object {
-                      ".ms-ChoiceField": Object {
+              {
+                "flexContainer": [
+                  {
+                    "selectors": {
+                      ".ms-ChoiceField": {
                         "marginTop": 0,
                       },
-                      ".ms-ChoiceField-wrapper label": Object {
+                      ".ms-ChoiceField-wrapper label": {
                         "fontSize": 12,
                         "paddingTop": 0,
                       },
-                      ".ms-ChoiceFieldGroup root-133": Object {
+                      ".ms-ChoiceFieldGroup root-133": {
                         "clear": "both",
                       },
                     },
                   },
                 ],
-                "root": Object {
+                "root": {
                   "clear": "both",
                 },
               }
@@ -302,19 +302,19 @@ exports[`Settings Pane should render Default properly 1`] = `
           onValidate={[Function]}
           step={1}
           styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
+            {
+              "arrowButtonsContainer": {},
+              "icon": {},
+              "input": {},
+              "label": {
                 "fontSize": 12,
                 "fontWeight": 400,
               },
-              "labelWrapper": Object {},
-              "root": Object {
+              "labelWrapper": {},
+              "root": {
                 "paddingBottom": 10,
               },
-              "spinButtonWrapper": Object {},
+              "spinButtonWrapper": {},
             }
           }
           value="9"
@@ -341,19 +341,19 @@ exports[`Settings Pane should render Default properly 1`] = `
           onValidate={[Function]}
           step={1000}
           styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
+            {
+              "arrowButtonsContainer": {},
+              "icon": {},
+              "input": {},
+              "label": {
                 "fontSize": 12,
                 "fontWeight": 400,
               },
-              "labelWrapper": Object {},
-              "root": Object {
+              "labelWrapper": {},
+              "root": {
                 "paddingBottom": 10,
               },
-              "spinButtonWrapper": Object {},
+              "spinButtonWrapper": {},
             }
           }
           value="0"
@@ -380,19 +380,19 @@ exports[`Settings Pane should render Default properly 1`] = `
           onValidate={[Function]}
           step={1}
           styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
+            {
+              "arrowButtonsContainer": {},
+              "icon": {},
+              "input": {},
+              "label": {
                 "fontSize": 12,
                 "fontWeight": 400,
               },
-              "labelWrapper": Object {},
-              "root": Object {
+              "labelWrapper": {},
+              "root": {
                 "paddingBottom": 10,
               },
-              "spinButtonWrapper": Object {},
+              "spinButtonWrapper": {},
             }
           }
           value="30"
@@ -419,8 +419,8 @@ exports[`Settings Pane should render Default properly 1`] = `
           className="padding"
           onChange={[Function]}
           styles={
-            Object {
-              "label": Object {
+            {
+              "label": {
                 "padding": 0,
               },
             }
@@ -448,8 +448,8 @@ exports[`Settings Pane should render Default properly 1`] = `
           className="padding"
           onChange={[Function]}
           styles={
-            Object {
-              "label": Object {
+            {
+              "label": {
                 "padding": 0,
               },
             }
@@ -549,19 +549,19 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           onValidate={[Function]}
           step={1}
           styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
+            {
+              "arrowButtonsContainer": {},
+              "icon": {},
+              "input": {},
+              "label": {
                 "fontSize": 12,
                 "fontWeight": 400,
               },
-              "labelWrapper": Object {},
-              "root": Object {
+              "labelWrapper": {},
+              "root": {
                 "paddingBottom": 10,
               },
-              "spinButtonWrapper": Object {},
+              "spinButtonWrapper": {},
             }
           }
           value="9"
@@ -588,19 +588,19 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           onValidate={[Function]}
           step={1000}
           styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
+            {
+              "arrowButtonsContainer": {},
+              "icon": {},
+              "input": {},
+              "label": {
                 "fontSize": 12,
                 "fontWeight": 400,
               },
-              "labelWrapper": Object {},
-              "root": Object {
+              "labelWrapper": {},
+              "root": {
                 "paddingBottom": 10,
               },
-              "spinButtonWrapper": Object {},
+              "spinButtonWrapper": {},
             }
           }
           value="0"
@@ -627,19 +627,19 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           onValidate={[Function]}
           step={1}
           styles={
-            Object {
-              "arrowButtonsContainer": Object {},
-              "icon": Object {},
-              "input": Object {},
-              "label": Object {
+            {
+              "arrowButtonsContainer": {},
+              "icon": {},
+              "input": {},
+              "label": {
                 "fontSize": 12,
                 "fontWeight": 400,
               },
-              "labelWrapper": Object {},
-              "root": Object {
+              "labelWrapper": {},
+              "root": {
                 "paddingBottom": 10,
               },
-              "spinButtonWrapper": Object {},
+              "spinButtonWrapper": {},
             }
           }
           value="30"
@@ -666,8 +666,8 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           className="padding"
           onChange={[Function]}
           styles={
-            Object {
-              "label": Object {
+            {
+              "label": {
                 "padding": 0,
               },
             }
@@ -693,12 +693,12 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           aria-label="Graph Auto-visualization"
           onChange={[Function]}
           options={
-            Array [
-              Object {
+            [
+              {
                 "key": "false",
                 "text": "Graph",
               },
-              Object {
+              {
                 "key": "true",
                 "text": "JSON",
               },

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
 import React from "react";

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

@@ -93,12 +93,12 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           id="newDatabaseId"
           name="newDatabaseId"
           onChange={[Function]}
-          pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
+          pattern="[^/?#\\\\]*[^/?# \\\\]"
           placeholder="Type a new database id"
           required={true}
           size={40}
           tabIndex={0}
-          title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
+          title="May not end with space nor contain characters '\\' '/' '#' '?'"
           type="text"
           value=""
         />
@@ -110,16 +110,16 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             label="Share throughput across containers"
             onChange={[Function]}
             styles={
-              Object {
-                "checkbox": Object {
+              {
+                "checkbox": {
                   "height": 12,
                   "width": 12,
                 },
-                "label": Object {
+                "label": {
                   "alignItems": "center",
                   "padding": 0,
                 },
-                "text": Object {
+                "text": {
                   "fontSize": 12,
                 },
               }
@@ -186,11 +186,11 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         id="collectionId"
         name="collectionId"
         onChange={[Function]}
-        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
+        pattern="[^/?#\\\\]*[^/?# \\\\]"
         placeholder="e.g., Container1"
         required={true}
         size={40}
-        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
+        title="May not end with space nor contain characters '\\' '/' '#' '?'"
         type="text"
         value=""
       />
@@ -247,11 +247,11 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           hidden={false}
           onClick={[Function]}
           styles={
-            Object {
-              "label": Object {
+            {
+              "label": {
                 "fontSize": 12,
               },
-              "root": Object {
+              "root": {
                 "height": 30,
                 "padding": 0,
                 "width": 200,
@@ -287,17 +287,17 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
       </Stack>
       <CustomizedActionButton
         iconProps={
-          Object {
+          {
             "iconName": "Add",
           }
         }
         onClick={[Function]}
         styles={
-          Object {
-            "label": Object {
+          {
+            "label": {
               "fontSize": 12,
             },
-            "root": Object {
+            "root": {
               "padding": 0,
             },
           }
@@ -410,14 +410,14 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         <CustomizedDefaultButton
           onClick={[Function]}
           style={
-            Object {
+            {
               "height": 27,
               "width": 80,
             }
           }
           styles={
-            Object {
-              "label": Object {
+            {
+              "label": {
                 "fontSize": 12,
               },
             }
@@ -443,18 +443,18 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
             onChange={[Function]}
             styles={
-              Object {
-                "checkbox": Object {
+              {
+                "checkbox": {
                   "height": 12,
                   "width": 12,
                 },
-                "label": Object {
+                "label": {
                   "alignItems": "center",
                   "padding": 0,
                   "whiteSpace": "break-spaces",
                   "wordWrap": "break-word",
                 },
-                "text": Object {
+                "text": {
                   "fontSize": 12,
                 },
               }

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

@@ -12,23 +12,23 @@ exports[`PaneContainerComponent test should be resize if notification console is
   isOpen={true}
   onDismiss={[Function]}
   style={
-    Object {
+    {
       "height": "516px",
     }
   }
   styles={
-    Object {
-      "commands": Object {
+    {
+      "commands": {
         "marginTop": 8,
         "paddingTop": 0,
       },
-      "content": Object {
+      "content": {
         "padding": 0,
       },
-      "header": Object {
+      "header": {
         "padding": "0 0 8px 34px",
       },
-      "navigation": Object {
+      "navigation": {
         "borderBottom": "1px solid #cccccc",
       },
     }
@@ -53,23 +53,23 @@ exports[`PaneContainerComponent test should render with panel content and header
   isOpen={true}
   onDismiss={[Function]}
   style={
-    Object {
+    {
       "height": "736px",
     }
   }
   styles={
-    Object {
-      "commands": Object {
+    {
+      "commands": {
         "marginTop": 8,
         "paddingTop": 0,
       },
-      "content": Object {
+      "content": {
         "padding": 0,
       },
-      "header": Object {
+      "header": {
         "padding": "0 0 8px 34px",
       },
-      "navigation": Object {
+      "navigation": {
         "borderBottom": "1px solid #cccccc",
       },
     }