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/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
 <FluentProvider
   style={
-    Object {
+    {
       "height": "100%",
     }
   }
   theme={
-    Object {
+    {
       "borderRadiusCircular": "10000px",
       "borderRadiusLarge": "6px",
       "borderRadiusMedium": "4px",
@@ -20,6 +20,8 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
       "colorBrandBackground2": "#e3f7ef",
       "colorBrandBackground2Hover": "#c0ecdd",
       "colorBrandBackground2Pressed": "#78d3b9",
+      "colorBrandBackground3Static": "#0a5c50",
+      "colorBrandBackground4Static": "#033f38",
       "colorBrandBackgroundHover": "#0c695a",
       "colorBrandBackgroundInverted": "#ffffff",
       "colorBrandBackgroundInvertedHover": "#e3f7ef",
@@ -86,6 +88,11 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
       "colorNeutralBackgroundInverted": "#292929",
       "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)",
       "colorNeutralBackgroundStatic": "#333333",
+      "colorNeutralCardBackground": "#fafafa",
+      "colorNeutralCardBackgroundDisabled": "#f0f0f0",
+      "colorNeutralCardBackgroundHover": "#ffffff",
+      "colorNeutralCardBackgroundPressed": "#f5f5f5",
+      "colorNeutralCardBackgroundSelected": "#ebebeb",
       "colorNeutralForeground1": "#242424",
       "colorNeutralForeground1Hover": "#242424",
       "colorNeutralForeground1Pressed": "#242424",
@@ -307,6 +314,8 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
       "colorStatusDangerBackground1": "#fdf3f4",
       "colorStatusDangerBackground2": "#eeacb2",
       "colorStatusDangerBackground3": "#c50f1f",
+      "colorStatusDangerBackground3Hover": "#b10e1c",
+      "colorStatusDangerBackground3Pressed": "#960b18",
       "colorStatusDangerBorder1": "#eeacb2",
       "colorStatusDangerBorder2": "#c50f1f",
       "colorStatusDangerBorderActive": "#c50f1f",
@@ -443,7 +452,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
     className="tab-pane active documentsTab"
     role="tabpanel"
     style={
-      Object {
+      {
         "display": "flex",
       }
     }
@@ -466,7 +475,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
           appearance="primary"
           onClick={[Function]}
           style={
-            Object {
+            {
               "marginLeft": 8,
             }
           }
@@ -477,7 +486,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
     </div>
     <div
       style={
-        Object {
+        {
           "height": "100%",
           "overflow": "hidden",
         }
@@ -490,7 +499,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
       >
         <div
           style={
-            Object {
+            {
               "minWidth": 120,
               "overflow": "hidden",
               "position": "relative",
@@ -506,7 +515,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
             onKeyDown={[Function]}
             size="small"
             style={
-              Object {
+              {
                 "backgroundColor": "white",
                 "color": undefined,
                 "float": "right",
@@ -519,7 +528,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
           />
           <div
             style={
-              Object {
+              {
                 "height": "100%",
                 "width": "calc(100% - 50px)",
               }
@@ -527,13 +536,13 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
           >
             <DocumentsTableComponent
               columnHeaders={
-                Object {
+                {
                   "idHeader": "id",
-                  "partitionKeyHeaders": Array [],
+                  "partitionKeyHeaders": [],
                 }
               }
               isSelectionDisabled={true}
-              items={Array []}
+              items={[]}
               onItemClicked={[Function]}
               onSelectedRowsChange={[Function]}
               selectedRows={
@@ -546,7 +555,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
         </div>
         <div
           style={
-            Object {
+            {
               "minWidth": "20%",
               "width": "100%",
             }