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/__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",
       },
     }