Upgrade Fluent UI v8 (#688)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

jest.config.js

@@ -69,8 +69,8 @@ module.exports = {
   moduleNameMapper: {
     "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
     "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
+    "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes
     "monaco-editor/(.*)$": "<rootDir>/__mocks__/monaco-editor",
-    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",
     "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",

package-lock.json

@@ -2127,6 +2127,28 @@
         "tslib": "^1.10.0"
       }
     },
+    "@fluentui/font-icons-mdl2": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.0.5.tgz",
+      "integrity": "sha512-/2Qx/LCZH+rupbhzZ+WKCrw2XK3J2wj3pjMPLTLj/6rnmouA7yywFDiHIAseQXPhY34nzRVX4x3zEjz3RMWvmA==",
+      "requires": {
+        "@fluentui/set-version": "^8.0.3",
+        "@fluentui/style-utilities": "^8.0.5",
+        "tslib": "^1.10.0"
+      }
+    },
+    "@fluentui/foundation-legacy": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.0.5.tgz",
+      "integrity": "sha512-bHODfopWfT4HfBvXFCyfKxi7/BrIVgKUvQ4X3L2GXUZv6jjQMvLPWZ1u8n2tdp91ch1KSWnBXklGaK/nyK1M5w==",
+      "requires": {
+        "@fluentui/merge-styles": "^8.0.4",
+        "@fluentui/set-version": "^8.0.3",
+        "@fluentui/style-utilities": "^8.0.5",
+        "@fluentui/utilities": "^8.0.5",
+        "tslib": "^1.10.0"
+      }
+    },
     "@fluentui/keyboard-key": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.2.17.tgz",
@@ -2135,13 +2157,259 @@
         "tslib": "^1.10.0"
       }
     },
-    "@fluentui/react-window-provider": {
+    "@fluentui/merge-styles": {
-      "version": "1.0.2",
+      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.1.0.tgz",
-      "integrity": "sha512-fGSgL3Vp/+6t1Ysfz21FWZmqsU+iFVxOigvHnm5uKVyyRPwtaabv/F6kQ2y5isLMI2YmJaUd2i0cDJKu8ggrvw==",
+      "integrity": "sha512-afJ8rw1V3sfgzfufP7ockcP5AxiQN7VlqKo6JoCSZbWC2ypQ0DZre7d3k+Zj2LvjCrM8HM57YEfwXWT/WxGfqw==",
       "requires": {
-        "@uifabric/set-version": "^7.0.24",
+        "@fluentui/set-version": "^8.1.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@fluentui/react": {
+      "version": "8.10.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.10.1.tgz",
+      "integrity": "sha512-J6wCfkkCzJ2Z9K6KVCrshpDDnhh5smKEGChsxMkLRoXYeAlVUMiS9lLg93PW+AbY4NfG+tNO2Ug8itNKpUmlYw==",
+      "requires": {
+        "@fluentui/date-time-utilities": "^8.0.2",
+        "@fluentui/font-icons-mdl2": "^8.0.4",
+        "@fluentui/foundation-legacy": "^8.0.4",
+        "@fluentui/merge-styles": "^8.0.3",
+        "@fluentui/react-focus": "^8.0.7",
+        "@fluentui/react-hooks": "^8.1.2",
+        "@fluentui/react-window-provider": "^2.0.2",
+        "@fluentui/set-version": "^8.0.2",
+        "@fluentui/style-utilities": "^8.0.4",
+        "@fluentui/theme": "^2.0.4",
+        "@fluentui/utilities": "^8.0.4",
+        "@microsoft/load-themed-styles": "^1.10.26",
         "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "@fluentui/date-time-utilities": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.1.0.tgz",
+          "integrity": "sha512-1PSp/ufi5urnvxkbT9Lijsh7Y2PNEsZfpNXDVwOpPDqpRkRrd8Wr8IdRPQk7w6XLZIeDCiWIBXBRYCVp6KGbYg==",
+          "requires": {
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          },
+          "dependencies": {
+            "tslib": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+              "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+            }
+          }
+        },
+        "@fluentui/react-window-provider": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.1.0.tgz",
+          "integrity": "sha512-LcNni1utHiXiCu8EbXL42o118yNRAWKX15qKd0iyMqcUg5RplOdWuaniohXv2gsmdNB0l3F5Tnujgayy0xPlvQ==",
+          "requires": {
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          },
+          "dependencies": {
+            "tslib": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+              "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+            }
+          }
+        }
+      }
+    },
+    "@fluentui/react-focus": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.1.0.tgz",
+      "integrity": "sha512-yzfDnDrnHq5z4Nt1xY7LS+DtjbJmCdpDiTiQm8tnCj98qESzqqqAwjpSc+HFXVexBzlmPNf1hzc8BMCQOUF/7g==",
+      "requires": {
+        "@fluentui/keyboard-key": "^0.3.0",
+        "@fluentui/merge-styles": "^8.1.0",
+        "@fluentui/set-version": "^8.1.0",
+        "@fluentui/style-utilities": "^8.1.0",
+        "@fluentui/utilities": "^8.1.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@fluentui/dom-utilities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz",
+          "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==",
+          "requires": {
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@fluentui/keyboard-key": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.3.0.tgz",
+          "integrity": "sha512-5GZ9038lwNK5BcgFkbXJs6zpZUlmyrszWbKPMqcHysMFBbL569VwV7zQt/yF3ivL0L4k46C+uXHbnFbMgZEJ4w==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
+        "@fluentui/utilities": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz",
+          "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==",
+          "requires": {
+            "@fluentui/dom-utilities": "^2.1.0",
+            "@fluentui/merge-styles": "^8.1.0",
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@fluentui/react-hooks": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.1.3.tgz",
+      "integrity": "sha512-6iWYjfqXvEhHZoY4nmN6APoIdxwNxzVxXOJgq1Oo1nbR10E7Va7mz41gvlFAgg8OmH7mGpdSztlVj6TVl/TY2g==",
+      "requires": {
+        "@fluentui/react-window-provider": "^2.0.3",
+        "@fluentui/set-version": "^8.0.3",
+        "@fluentui/utilities": "^8.0.5",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "@fluentui/react-window-provider": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.0.3.tgz",
+          "integrity": "sha512-eefkmzLJbYjVHtEtGbOwReyeYG+2bDefxdmvPRSVFlcRFCnasTvshuZj3xkaKSu5fsGzGw+f+ab3hDgLSETvbg==",
+          "requires": {
+            "@fluentui/set-version": "^8.0.3",
+            "tslib": "^1.10.0"
+          }
+        }
+      }
+    },
+    "@fluentui/set-version": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.1.0.tgz",
+      "integrity": "sha512-FhruPyh+VoAVmqAadRxawMNB13syBLoT6PePdZ+sKW7rZVc2CWT3qw7w9O9x6MJeRNl6/6ZnjCo6sWyOyVEdNg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@fluentui/style-utilities": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.1.0.tgz",
+      "integrity": "sha512-XUH+8T7/2HAMYzTLr20odD5lfKy56fJooFlkSmW0SSC6sOilHmrdPZCBSTV+WJzH/YY2ed/GnySIjCQOx5UsYg==",
+      "requires": {
+        "@fluentui/merge-styles": "^8.1.0",
+        "@fluentui/set-version": "^8.1.0",
+        "@fluentui/theme": "^2.1.0",
+        "@fluentui/utilities": "^8.1.0",
+        "@microsoft/load-themed-styles": "^1.10.26",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@fluentui/dom-utilities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz",
+          "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==",
+          "requires": {
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@fluentui/utilities": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz",
+          "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==",
+          "requires": {
+            "@fluentui/dom-utilities": "^2.1.0",
+            "@fluentui/merge-styles": "^8.1.0",
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@fluentui/theme": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.1.0.tgz",
+      "integrity": "sha512-2jFun5LqUZJb+AiWeLOnNQTxrKWMCNHFTs4+QIUyL7ZPMAiNZyWMsQJfeGOujzdlReivZ7kONNQEi0LTJ0Tmzw==",
+      "requires": {
+        "@fluentui/merge-styles": "^8.1.0",
+        "@fluentui/set-version": "^8.1.0",
+        "@fluentui/utilities": "^8.1.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@fluentui/dom-utilities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz",
+          "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==",
+          "requires": {
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@fluentui/utilities": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz",
+          "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==",
+          "requires": {
+            "@fluentui/dom-utilities": "^2.1.0",
+            "@fluentui/merge-styles": "^8.1.0",
+            "@fluentui/set-version": "^8.1.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@fluentui/utilities": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.0.5.tgz",
+      "integrity": "sha512-epqvqV4YjKcbgShLhDk/y2Xa+6sUTBXry/BrMPNVwNOqdj2HCf4eCY+a1emFnytMpIVysfYZ6glIx9MNQ8JgNg==",
+      "requires": {
+        "@fluentui/dom-utilities": "^2.0.3",
+        "@fluentui/merge-styles": "^8.0.4",
+        "@fluentui/set-version": "^8.0.3",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "@fluentui/dom-utilities": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.0.3.tgz",
+          "integrity": "sha512-RaUoEYd12TeEjvKLBtfXDZmjreaV6qIfBB7G+QCuBpv5FF7TjhrGK3WDZ7oaG0dkdegAx+ecyUFyOfoBRPJLkg==",
+          "requires": {
+            "@fluentui/set-version": "^8.0.3",
+            "tslib": "^1.10.0"
+          }
+        }
       }
     },
     "@hapi/formula": {
@@ -6105,17 +6373,6 @@
         }
       }
     },
-    "@uifabric/react-hooks": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.14.0.tgz",
-      "integrity": "sha512-Ndu/DEKHF4gFXEZa2AGgSkdWaj+njVrsSyXbkWRh2UZReFWnH1LMko9p/ZCwk1i9kAd5CUmyIfURUzIEya9YCg==",
-      "requires": {
-        "@fluentui/react-window-provider": "^1.0.2",
-        "@uifabric/set-version": "^7.0.24",
-        "@uifabric/utilities": "^7.33.5",
-        "tslib": "^1.10.0"
-      }
-    },
     "@uifabric/set-version": {
       "version": "7.0.24",
       "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.24.tgz",
@@ -6124,55 +6381,6 @@
         "tslib": "^1.10.0"
       }
     },
-    "@uifabric/styling": {
-      "version": "7.13.7",
-      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.13.7.tgz",
-      "integrity": "sha512-XFaDkvQqhhHwlW9+Yd9LQogPq0a5TC4on2csRnJUwmlTJ4IQtgvbPdAxmxz+18HZMJezUXYn7/ubcQvNRMFSJQ==",
-      "requires": {
-        "@microsoft/load-themed-styles": "^1.10.26",
-        "@uifabric/merge-styles": "^7.16.0",
-        "@uifabric/set-version": "^7.0.15",
-        "@uifabric/utilities": "^7.23.0",
-        "tslib": "^1.10.0"
-      },
-      "dependencies": {
-        "@types/react": {
-          "version": "16.14.5",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
-          "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        },
-        "@types/react-dom": {
-          "version": "16.9.12",
-          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
-          "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
-          "requires": {
-            "@types/react": "^16"
-          }
-        },
-        "@uifabric/utilities": {
-          "version": "7.33.5",
-          "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz",
-          "integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==",
-          "requires": {
-            "@fluentui/dom-utilities": "^1.1.2",
-            "@uifabric/merge-styles": "^7.19.2",
-            "@uifabric/set-version": "^7.0.24",
-            "prop-types": "^15.7.2",
-            "tslib": "^1.10.0"
-          }
-        },
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-        }
-      }
-    },
     "@uifabric/theme-samples": {
       "version": "7.2.34",
       "resolved": "https://registry.npmjs.org/@uifabric/theme-samples/-/theme-samples-7.2.34.tgz",
@@ -6311,18 +6519,6 @@
         }
       }
     },
-    "@uifabric/utilities": {
-      "version": "7.33.5",
-      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz",
-      "integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==",
-      "requires": {
-        "@fluentui/dom-utilities": "^1.1.2",
-        "@uifabric/merge-styles": "^7.19.2",
-        "@uifabric/set-version": "^7.0.24",
-        "prop-types": "^15.7.2",
-        "tslib": "^1.10.0"
-      }
-    },
     "@uifabric/variants": {
       "version": "7.2.35",
       "resolved": "https://registry.npmjs.org/@uifabric/variants/-/variants-7.2.35.tgz",

package.json

@@ -11,6 +11,7 @@
     "@azure/ms-rest-nodeauth": "3.0.7",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
+    "@fluentui/react": "8.10.1",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -43,8 +44,6 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
-    "@uifabric/react-hooks": "7.14.0",
-    "@uifabric/styling": "7.13.7",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
@@ -77,7 +76,6 @@
     "monaco-editor": "0.18.1",
     "ms": "2.1.3",
     "msal": "1.4.4",
-    "office-ui-fabric-react": "7.164.2",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",

src/Common/EntityValue.tsx

@@ -1,4 +1,4 @@
-import { DatePicker, TextField } from "office-ui-fabric-react";
+import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 
 export interface TableEntityProps {

src/Common/TableEntity.tsx

@@ -8,7 +8,7 @@ import {
   Stack,
   TextField,
   TooltipHost,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
 import EditIcon from "../../images/Edit_entity.svg";

src/Common/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
-import { useId } from "@uifabric/react-hooks";
+import { ITooltipHostStyles, TooltipHost } from "@fluentui/react";
-import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
+import { useId } from "@fluentui/react-hooks";
 import * as React from "react";
 import InfoBubble from "../../../images/info-bubble.svg";
 

src/Common/Upload/Upload.tsx

@@ -1,4 +1,4 @@
-import { Image, Stack, TextField } from "office-ui-fabric-react";
+import { Image, Stack, TextField } from "@fluentui/react";
 import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
 import FolderIcon from "../../../images/folder_16x16.svg";
 import * as Constants from "../Constants";

src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx

@@ -1,9 +1,8 @@
+import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
 import * as React from "react";
-import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
-import { DefaultButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
-import { IContextualMenuItem, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
-import * as Logger from "../../../Common/Logger";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
+import * as Logger from "../../../Common/Logger";
+import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
 
 export interface ArcadiaMenuPickerProps {
   selectText?: string;

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { Icon, Label, Stack } from "office-ui-fabric-react";
+import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
 

src/Explorer/Controls/Dialog.tsx

@@ -1,14 +1,20 @@
 import {
   ChoiceGroup,
+  DefaultButton,
+  Dialog as FluentDialog,
+  DialogFooter,
+  DialogType,
   FontIcon,
+  IButtonProps,
   IChoiceGroupProps,
+  IDialogProps,
   IProgressIndicatorProps,
+  ITextFieldProps,
+  Link,
+  PrimaryButton,
   ProgressIndicator,
-} from "office-ui-fabric-react";
+  TextField,
-import { DefaultButton, IButtonProps, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+} from "@fluentui/react";
-import { Dialog as FluentDialog, DialogFooter, DialogType, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
-import { Link } from "office-ui-fabric-react/lib/Link";
-import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
 import React, { FunctionComponent } from "react";
 
 export interface TextFieldProps extends ITextFieldProps {

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx

@@ -2,9 +2,9 @@
  * React component for Switch Directory
  */
 
-import _ from "underscore";
+import { Dropdown, IDropdownOption, IDropdownProps } from "@fluentui/react";
 import * as React from "react";
-import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
+import _ from "underscore";
 import { Tenant } from "../../../Contracts/DataModels";
 
 export interface DefaultDirectoryDropdownProps {

src/Explorer/Controls/Directory/DirectoryListComponent.tsx

@@ -1,11 +1,15 @@
-import _ from "underscore";
+import {
+  DefaultButton,
+  IButtonProps,
+  ITextFieldProps,
+  List,
+  ScrollablePane,
+  Sticky,
+  StickyPositionType,
+  TextField,
+} from "@fluentui/react";
 import * as React from "react";
-
+import _ from "underscore";
-import { DefaultButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
-import { List } from "office-ui-fabric-react/lib/List";
-import { ScrollablePane } from "office-ui-fabric-react/lib/ScrollablePane";
-import { Sticky, StickyPositionType } from "office-ui-fabric-react/lib/Sticky";
-import { TextField, ITextFieldProps } from "office-ui-fabric-react/lib/TextField";
 import { Tenant } from "../../../Contracts/DataModels";
 
 export interface DirectoryListProps {

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test render renders with directories and default 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
   className="defaultDirectoryDropdown"
   defaultSelectedKey="asdfghjklzxcvbnm9876543210"
   label="Set your default directory"
@@ -26,7 +26,7 @@ exports[`test render renders with directories and default 1`] = `
 `;
 
 exports[`test render renders with directories and last visit default 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
   className="defaultDirectoryDropdown"
   defaultSelectedKey="lastVisited"
   label="Set your default directory"
@@ -51,7 +51,7 @@ exports[`test render renders with directories and last visit default 1`] = `
 `;
 
 exports[`test render renders with directories but no default 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
   className="defaultDirectoryDropdown"
   defaultSelectedKey="lastVisited"
   label="Set your default directory"
@@ -76,7 +76,7 @@ exports[`test render renders with directories but no default 1`] = `
 `;
 
 exports[`test render renders with no directories 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
   className="defaultDirectoryDropdown"
   defaultSelectedKey="lastVisited"
   label="Set your default directory"

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

@@ -350,11 +350,11 @@ exports[`test render renders with filters 1`] = `
       }
     >
       <div
-        className="ms-ScrollablePane root-72"
+        className="ms-ScrollablePane root-53"
         data-is-scrollable="true"
       >
         <div
-          className="stickyAbove-74"
+          className="stickyAbove-55"
           style={
             Object {
               "height": 0,
@@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
           }
         />
         <div
-          className="ms-ScrollablePane--contentContainer contentContainer-73"
+          className="ms-ScrollablePane--contentContainer contentContainer-54"
           data-is-scrollable={true}
         >
           <Sticky
@@ -408,7 +408,6 @@ exports[`test render renders with filters 1`] = `
                   >
                     <TextFieldBase
                       ariaLabel="Directory filter text box"
-                      canRevealPassword={false}
                       className="directoryListFilterTextBox"
                       deferredValidationTime={200}
                       onChange={[Function]}
@@ -691,18 +690,18 @@ exports[`test render renders with filters 1`] = `
                       validateOnLoad={true}
                     >
                       <div
-                        className="ms-TextField directoryListFilterTextBox root-78"
+                        className="ms-TextField directoryListFilterTextBox root-59"
                       >
                         <div
                           className="ms-TextField-wrapper"
                         >
                           <div
-                            className="ms-TextField-fieldGroup fieldGroup-79"
+                            className="ms-TextField-fieldGroup fieldGroup-60"
                           >
                             <input
                               aria-invalid={false}
                               aria-label="Directory filter text box"
-                              className="ms-TextField-field field-80"
+                              className="ms-TextField-field field-61"
                               id="TextField0"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -1266,7 +1265,6 @@ exports[`test render renders with filters 1`] = `
                                   "borderColor": "#f3f2f1",
                                   "color": "#a19f9d",
                                   "cursor": "default",
-                                  "pointerEvents": "none",
                                   "selectors": Object {
                                     ":focus": Object {
                                       "outline": 0,
@@ -1611,6 +1609,35 @@ exports[`test render renders with filters 1`] = `
                                   },
                                 },
                               },
+                              "splitButtonMenuFocused": Object {
+                                "outline": "transparent",
+                                "position": "relative",
+                                "selectors": Object {
+                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                    "border": "1px solid #ffffff",
+                                    "bottom": 3,
+                                    "content": "\\"\\"",
+                                    "left": 3,
+                                    "outline": "1px solid #605e5c",
+                                    "position": "absolute",
+                                    "right": 3,
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "border": "none",
+                                        "bottom": -2,
+                                        "left": -2,
+                                        "right": -2,
+                                        "top": -2,
+                                      },
+                                    },
+                                    "top": 3,
+                                    "zIndex": 1,
+                                  },
+                                  "::-moz-focus-inner": Object {
+                                    "border": "0",
+                                  },
+                                },
+                              },
                               "splitButtonMenuIcon": Object {
                                 "color": "#323130",
                               },
@@ -1900,7 +1927,7 @@ exports[`test render renders with filters 1`] = `
                         >
                           <button
                             aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-89"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-70"
                             data-is-focusable={false}
                             disabled={true}
                             onClick={[Function]}
@@ -1912,7 +1939,7 @@ exports[`test render renders with filters 1`] = `
                             type="button"
                           >
                             <span
-                              className="ms-Button-flexContainer flexContainer-90"
+                              className="ms-Button-flexContainer flexContainer-71"
                               data-automationid="splitbuttonprimary"
                             >
                               <div
@@ -1943,7 +1970,7 @@ exports[`test render renders with filters 1`] = `
           </List>
         </div>
         <div
-          className="stickyBelow-75"
+          className="stickyBelow-56"
           style={
             Object {
               "bottom": "0px",
@@ -1954,7 +1981,7 @@ exports[`test render renders with filters 1`] = `
           }
         >
           <div
-            className="stickyBelowItems-76"
+            className="stickyBelowItems-57"
           />
         </div>
       </div>

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -1,9 +1,14 @@
+import {
+  Checkbox,
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IDropdownStyles,
+  ITextFieldStyles,
+  Stack,
+  TextField,
+} from "@fluentui/react";
 import * as React from "react";
-import { Stack } from "office-ui-fabric-react/lib/Stack";
-import { Dropdown, IDropdownOption, IDropdownStyles } from "office-ui-fabric-react/lib/Dropdown";
-import { Checkbox } from "office-ui-fabric-react/lib/Checkbox";
-import { TextField, ITextFieldStyles } from "office-ui-fabric-react/lib/TextField";
-import { DefaultButton } from "office-ui-fabric-react";
 import "./FeaturePanelComponent.less";
 
 export const FeaturePanelComponent: React.FunctionComponent = () => {

src/Explorer/Controls/FeaturePanel/FeaturePanelLauncher.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { FeaturePanelComponent } from "./FeaturePanelComponent";
-import { getTheme, mergeStyleSets, FontWeights, Modal, IconButton, IIconProps } from "office-ui-fabric-react";
+import { getTheme, mergeStyleSets, FontWeights, Modal, IconButton, IIconProps } from "@fluentui/react";
 import "./FeaturePanelLauncher.less";
 
 // Modal wrapper

src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap

@@ -57,7 +57,7 @@ exports[`Feature panel renders all flags 1`] = `
         }
       }
     >
-      <StyledWithResponsiveMode
+      <Dropdown
         label="Base Url"
         onChange={[Function]}
         options={
@@ -85,7 +85,7 @@ exports[`Feature panel renders all flags 1`] = `
           }
         }
       />
-      <StyledWithResponsiveMode
+      <Dropdown
         label="Platform"
         onChange={[Function]}
         options={

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -1,4 +1,4 @@
-import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "office-ui-fabric-react";
+import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../Common/Constants";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";

src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx

@@ -1,10 +1,4 @@
-import {
+import { ChoiceGroup, IButtonProps, IChoiceGroupProps, PrimaryButton, IChoiceGroupOption } from "@fluentui/react";
-  ChoiceGroup,
-  IButtonProps,
-  IChoiceGroupProps,
-  PrimaryButton,
-  IChoiceGroupOption,
-} from "office-ui-fabric-react";
 import * as React from "react";
 import { ChildrenMargin } from "./GitHubStyleConstants";
 

src/Explorer/Controls/GitHub/GitHubReposComponent.tsx

@@ -1,4 +1,4 @@
-import { DefaultButton, IButtonProps, Link, PrimaryButton } from "office-ui-fabric-react";
+import { DefaultButton, IButtonProps, Link, PrimaryButton } from "@fluentui/react";
 import * as React from "react";
 import { IGitHubBranch, IGitHubRepo } from "../../../GitHub/GitHubClient";
 import { AddRepoComponent, AddRepoComponentProps } from "./AddRepoComponent";

src/Explorer/Controls/GitHub/GitHubStyleConstants.ts

@@ -4,7 +4,7 @@ import {
   IDropdownStyleProps,
   IDropdownStyles,
   IStyleFunctionOrObject,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 
 export const ButtonsFooterStyle: React.CSSProperties = {
   paddingTop: 14,

src/Explorer/Controls/GitHub/ReposListComponent.tsx

@@ -16,7 +16,7 @@ import {
   ResponsiveMode,
   SelectionMode,
   Text,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import * as React from "react";
 import { IGitHubBranch, IGitHubPageInfo } from "../../../GitHub/GitHubClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";

src/Explorer/Controls/Header/GalleryHeaderComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "office-ui-fabric-react";
+import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "@fluentui/react";
 
 export class GalleryHeaderComponent extends React.Component {
   private static readonly azureText = "Microsoft Azure";

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -1,4 +1,3 @@
-import { Card } from "@uifabric/react-cards";
 import {
   BaseButton,
   Button,
@@ -8,14 +7,14 @@ import {
   Image,
   ImageFit,
   Link,
-  LinkBase,
   Persona,
   Separator,
   Spinner,
   SpinnerSize,
   Text,
   TooltipHost,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
+import { Card } from "@uifabric/react-cards";
 import React, { FunctionComponent, useState } from "react";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
@@ -110,7 +109,7 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
 
   const handlerOnClick = (
     event:
-      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | LinkBase, MouseEvent>
+      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | MouseEvent>
       | React.MouseEvent<
           HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
           MouseEvent

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`GalleryCardComponent renders 1`] = `
     />
   </CardItem>
   <CardItem>
-    <StyledImageBase
+    <Image
       alt="name cover image"
       height={144}
       imageFit={2}

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { JunoClient } from "../../../Juno/JunoClient";
+import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
+import { Stack, Text, Checkbox, PrimaryButton, Link } from "@fluentui/react";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+
+export interface CodeOfConductComponentProps {
+  junoClient: JunoClient;
+  onAcceptCodeOfConduct: (result: boolean) => void;
+}
+
+interface CodeOfConductComponentState {
+  readCodeOfConduct: boolean;
+}
+
+export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
+  private viewCodeOfConductTraced: boolean;
+  private descriptionPara1: string;
+  private descriptionPara2: string;
+  private descriptionPara3: string;
+  private link1: { label: string; url: string };
+
+  constructor(props: CodeOfConductComponentProps) {
+    super(props);
+
+    this.state = {
+      readCodeOfConduct: false,
+    };
+
+    this.descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
+    this.descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
+    this.descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
+    this.link1 = { label: "code of conduct.", url: CodeOfConductEndpoints.codeOfConduct };
+  }
+
+  private async acceptCodeOfConduct(): Promise<void> {
+    const startKey = traceStart(Action.NotebooksGalleryAcceptCodeOfConduct);
+
+    try {
+      const response = await this.props.junoClient.acceptCodeOfConduct();
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
+      }
+
+      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, {}, startKey);
+
+      this.props.onAcceptCodeOfConduct(response.data);
+    } catch (error) {
+      traceFailure(
+        Action.NotebooksGalleryAcceptCodeOfConduct,
+        {
+          error: getErrorMessage(error),
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+
+      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
+    }
+  }
+
+  private onChangeCheckbox = (): void => {
+    this.setState({ readCodeOfConduct: !this.state.readCodeOfConduct });
+  };
+
+  public render(): JSX.Element {
+    if (!this.viewCodeOfConductTraced) {
+      this.viewCodeOfConductTraced = true;
+      trace(Action.NotebooksGalleryViewCodeOfConduct);
+    }
+
+    return (
+      <Stack tokens={{ childrenGap: 20 }}>
+        <Stack.Item>
+          <Text style={{ fontWeight: 500, fontSize: "20px" }}>{this.descriptionPara1}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>{this.descriptionPara2}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>
+            {this.descriptionPara3}
+            <Link href={this.link1.url} target="_blank">
+              {this.link1.label}
+            </Link>
+          </Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Checkbox
+            styles={{
+              label: {
+                margin: 0,
+                padding: "2 0 2 0",
+              },
+              text: {
+                fontSize: 12,
+              },
+            }}
+            label="I have read and accept the code of conduct."
+            onChange={this.onChangeCheckbox}
+          />
+        </Stack.Item>
+
+        <Stack.Item>
+          <PrimaryButton
+            ariaLabel="Continue"
+            title="Continue"
+            onClick={async () => await this.acceptCodeOfConduct()}
+            tabIndex={0}
+            className="genericPaneSubmitBtn"
+            text="Continue"
+            disabled={!this.state.readCodeOfConduct}
+          />
+        </Stack.Item>
+      </Stack>
+    );
+  }
+}

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Link, PrimaryButton, Stack, Text } from "office-ui-fabric-react";
+import { Checkbox, Link, PrimaryButton, Stack, Text } from "@fluentui/react";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { CodeOfConductEndpoints, HttpStatusCodes } from "../../../../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -19,7 +19,7 @@ import {
   SpinnerSize,
   Stack,
   Text,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import * as React from "react";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fabric-react";
+import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "@fluentui/react";
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";
 

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`GalleryViewerComponent renders 1`] = `
 <div
   className="galleryContainer"
 >
-  <StyledPivotBase
+  <StyledPivot
     onLinkClick={[Function]}
     selectedKey="OfficialSamples"
   >
@@ -41,7 +41,7 @@ exports[`GalleryViewerComponent renders 1`] = `
             <StackItem
               grow={true}
             >
-              <StyledSearchBoxBase
+              <StyledSearchBox
                 onChange={[Function]}
                 placeholder="Search"
               />
@@ -60,7 +60,7 @@ exports[`GalleryViewerComponent renders 1`] = `
                 }
               }
             >
-              <StyledWithResponsiveMode
+              <Dropdown
                 onChange={[Function]}
                 options={
                   Array [
@@ -127,7 +127,7 @@ exports[`GalleryViewerComponent renders 1`] = `
           <StackItem
             grow={true}
           >
-            <StyledSearchBoxBase
+            <StyledSearchBox
               onChange={[Function]}
               placeholder="Search"
             />
@@ -146,7 +146,7 @@ exports[`GalleryViewerComponent renders 1`] = `
               }
             }
           >
-            <StyledWithResponsiveMode
+            <Dropdown
               onChange={[Function]}
               options={
                 Array [
@@ -182,6 +182,6 @@ exports[`GalleryViewerComponent renders 1`] = `
         </StackItem>
       </Stack>
     </PivotItem>
-  </StyledPivotBase>
+  </StyledPivot>
 </div>
 `;

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -1,17 +1,7 @@
 /**
  * Wrapper around Notebook metadata
  */
-import {
+import { FontWeights, Icon, IconButton, Link, Persona, PersonaSize, PrimaryButton, Stack, Text } from "@fluentui/react";
-  FontWeights,
-  Icon,
-  IconButton,
-  Link,
-  Persona,
-  PersonaSize,
-  PrimaryButton,
-  Stack,
-  Text,
-} from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -3,7 +3,7 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -1,22 +1,24 @@
-import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
-import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import {
+  ContextualMenu,
   DetailsList,
   DetailsListLayoutMode,
   DetailsRow,
+  FocusZone,
+  IButtonProps,
   IColumn,
+  IconButton,
+  IContextualMenuProps,
   IDetailsListProps,
   IDetailsRowProps,
-} from "office-ui-fabric-react/lib/DetailsList";
-import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
-import {
   IObjectWithKey,
   ISelectionZoneProps,
+  ITextField,
+  ITextFieldProps,
   Selection,
   SelectionMode,
   SelectionZone,
-} from "office-ui-fabric-react/lib/utilities/selection/index";
+  TextField,
+} from "@fluentui/react";
 import * as React from "react";
 import * as _ from "underscore";
 import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";

src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx

@@ -2,10 +2,10 @@
  * Horizontal switch component
  */
 
+import { Icon } from "@fluentui/react";
 import * as React from "react";
-import "./RadioSwitchComponent.less";
-import { Icon } from "office-ui-fabric-react/lib/Icon";
 import { NormalizedEventKey } from "../../../Common/Constants";
+import "./RadioSwitchComponent.less";
 
 export interface Choice {
   key: string;

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";

src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx

@@ -1,6 +1,6 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IColumn, Text } from "office-ui-fabric-react";
+import { IColumn, Text } from "@fluentui/react";
 import {
   getAutoPilotV3SpendElement,
   getEstimatedSpendingElement,

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -38,7 +38,7 @@ import {
   IDetailsRowProps,
   DetailsRow,
   IDetailsColumnStyles,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
 export interface EstimatedSpendingDisplayProps {

src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx

@@ -9,7 +9,7 @@ import {
   subComponentStackProps,
   getChoiceGroupStyles,
 } from "../SettingsRenderUtils";
-import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "office-ui-fabric-react";
+import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "@fluentui/react";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 import { isDirty } from "../SettingsUtils";
 

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -1,7 +1,8 @@
-import { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
+import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
-import { loadMonaco, monaco } from "../../../LazyMonaco";
+import { loadMonaco } from "../../../LazyMonaco";
 import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { MessageBar, MessageBarType } from "@fluentui/react";
 import {
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IndexingPolicyRefreshComponent renders 1`] = `
-<StyledMessageBarBase
+<StyledMessageBar
   messageBarType={5}
 >
   <Text
@@ -20,5 +20,5 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
       Refresh to check the progress.
     </StyledLinkBase>
   </Text>
-</StyledMessageBarBase>
+</StyledMessageBar>
 `;

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx

@@ -8,7 +8,7 @@ import {
   Dropdown,
   IDropdownOption,
   ITextField,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import {
   addMongoIndexSubElementsTokens,
   mongoErrorMessageStyles,

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -12,7 +12,7 @@ import {
   Spinner,
   SpinnerSize,
   Separator,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import {
   addMongoIndexStackProps,
   customDetailsListStyles,

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
       }
       value="sample_key"
     />
-    <StyledWithResponsiveMode
+    <Dropdown
       ariaLabel="Index Type 1"
       onChange={[Function]}
       options={
@@ -67,7 +67,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
       onClick={[Function]}
     />
   </Stack>
-  <StyledMessageBarBase
+  <StyledMessageBar
     messageBarType={1}
     styles={
       Object {
@@ -78,6 +78,6 @@ exports[`AddMongoIndexComponent renders 1`] = `
     }
   >
     sample error
-  </StyledMessageBarBase>
+  </StyledMessageBar>
 </Stack>
 `;

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -1,4 +1,4 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
+import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
 import { configContext, Platform } from "../../../../ConfigContext";

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -1,13 +1,4 @@
-import {
+import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
-  ChoiceGroup,
-  IChoiceGroupOption,
-  Label,
-  Link,
-  MessageBar,
-  Stack,
-  Text,
-  TextField,
-} from "office-ui-fabric-react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -10,7 +10,7 @@ import {
   Stack,
   Text,
   TextField,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import React from "react";
 import * as DataModels from "../../../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";

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

@@ -8,7 +8,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     }
   }
 >
-  <StyledMessageBarBase
+  <StyledMessageBar
     messageBarIconProps={
       Object {
         "className": "messageBarWarningIcon",
@@ -27,7 +27,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     >
       Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
     </Text>
-  </StyledMessageBarBase>
+  </StyledMessageBar>
   <Stack>
     <StyledLabelBase
       id="settingsV2RadioButtonLabelId"
@@ -49,7 +49,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledMessageBarBase
+    <StyledMessageBar
       messageBarIconProps={
         Object {
           "className": "messageBarInfoIcon",
@@ -86,8 +86,8 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           Learn more
         </a>
       </Text>
-    </StyledMessageBarBase>
+    </StyledMessageBar>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={
@@ -196,7 +196,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={
@@ -470,7 +470,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={

src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "office-ui-fabric-react";
+import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
 import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
 
 export interface ToolTipLabelComponentProps {

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ConflictResolutionComponent.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
     }
   }
 >
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
     label="Mode"
     onChange={[Function]}
     options={
@@ -80,7 +80,7 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
     }
   }
 >
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
     label="Mode"
     onChange={[Function]}
     options={

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
     }
   }
 >
-  <StyledMessageBarBase
+  <StyledMessageBar
     messageBarType={5}
   >
     <Text
@@ -26,7 +26,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       Database: test, Container: test 
       , Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
     </Text>
-  </StyledMessageBarBase>
+  </StyledMessageBar>
   <Stack
     tokens={
       Object {

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -85,7 +85,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -146,7 +146,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}
@@ -238,7 +238,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -308,7 +308,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -355,7 +355,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -422,7 +422,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}
@@ -514,7 +514,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -584,7 +584,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -631,7 +631,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -753,7 +753,7 @@ exports[`SubSettingsComponent renders 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -823,7 +823,7 @@ exports[`SubSettingsComponent renders 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -870,7 +870,7 @@ exports[`SubSettingsComponent renders 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -962,7 +962,7 @@ exports[`SubSettingsComponent renders 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}
@@ -1054,7 +1054,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -1099,7 +1099,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       }
     />
   </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -1146,7 +1146,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -1238,7 +1238,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`SettingsComponent renders 1`] = `
   <div
     className="settingsV2TabsContainer"
   >
-    <StyledPivotBase
+    <StyledPivot
       onLinkClick={[Function]}
       selectedKey="ScaleTab"
     >
@@ -5178,7 +5178,7 @@ exports[`SettingsComponent renders 1`] = `
           shouldDiscardIndexingPolicy={false}
         />
       </PivotItem>
-    </StyledPivotBase>
+    </StyledPivot>
   </div>
 </div>
 `;

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -338,7 +338,7 @@ exports[`SettingsUtils functions render 1`] = `
     </StyledLinkBase>
     are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo shell.
   </Text>
-  <StyledMessageBarBase
+  <StyledMessageBar
     messageBarType={1}
   >
     <Text>
@@ -350,7 +350,7 @@ exports[`SettingsUtils functions render 1`] = `
         azure portal.
       </StyledLinkBase>
     </Text>
-  </StyledMessageBarBase>
+  </StyledMessageBar>
   <Stack
     horizontal={true}
     tokens={

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -1,12 +1,20 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IStackTokens,
+  Label,
+  Link,
+  MessageBar,
+  MessageBarType,
+  Position,
+  Slider,
+  SpinButton,
+  Stack,
+  Text,
+  TextField,
+  Toggle,
+} from "@fluentui/react";
 import { TFunction } from "i18next";
-import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { Slider } from "office-ui-fabric-react/lib/Slider";
-import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
-import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
-import { Text } from "office-ui-fabric-react/lib/Text";
-import { TextField } from "office-ui-fabric-react/lib/TextField";
-import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
 import * as React from "react";
 import {
   ChoiceItem,

src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap

@@ -77,22 +77,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                 }
               }
             >
-              <CustomizedSpinButton
+              <StyledSpinButton
                 aria-labelledby="throughput-label"
                 ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
                 disabled={true}
                 id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
                 labelPosition={0}
                 max={500}
                 min={400}
@@ -169,12 +158,12 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <StyledMessageBarBase
+        <StyledMessageBar
           messageBarType={1}
         >
           Error: 
           label, truelabel and falselabel are required for boolean input 'throughput3'
-        </StyledMessageBarBase>
+        </StyledMessageBar>
       </StackItem>
     </Stack>
   </div>
@@ -282,7 +271,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                 label="Database"
               />
             </StyledLabelBase>
-            <StyledWithResponsiveMode
+            <Dropdown
               aria-labelledby="database-label"
               disabled={true}
               id="database-dropdown-input"
@@ -402,22 +391,10 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                 }
               }
             >
-              <CustomizedSpinButton
+              <StyledSpinButton
                 aria-labelledby="throughput-label"
                 ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
-                disabled={false}
                 id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
                 labelPosition={0}
                 max={500}
                 min={400}
@@ -493,12 +470,12 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <StyledMessageBarBase
+        <StyledMessageBar
           messageBarType={1}
         >
           Error: 
           label, truelabel and falselabel are required for boolean input 'throughput3'
-        </StyledMessageBarBase>
+        </StyledMessageBar>
       </StackItem>
     </Stack>
   </div>
@@ -604,7 +581,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                 label="Database"
               />
             </StyledLabelBase>
-            <StyledWithResponsiveMode
+            <Dropdown
               aria-labelledby="database-label"
               id="database-dropdown-input"
               onChange={[Function]}

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
+import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
 import React from "react";
 import * as Constants from "../../../Common/Constants";
 import * as SharedConstants from "../../../Shared/Constants";

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -5,21 +5,21 @@
  * - context menu
  */
 
-import * as React from "react";
-import * as Constants from "../../../Common/Constants";
-import AnimateHeight from "react-animate-height";
-import { IconButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
 import {
   DirectionalHint,
+  IButtonStyles,
+  IconButton,
   IContextualMenuItemProps,
   IContextualMenuProps,
-} from "office-ui-fabric-react/lib/ContextualMenu";
+} from "@fluentui/react";
-
+import * as React from "react";
+import AnimateHeight from "react-animate-height";
+import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
 import TriangleDownIcon from "../../../../images/Triangle-down.svg";
 import TriangleRightIcon from "../../../../images/Triangle-right.svg";
-import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
+import * as Constants from "../../../Common/Constants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
 export interface TreeNodeMenuItem {
   label: string;

src/Explorer/Explorer.tsx

@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { IChoiceGroupProps } from "office-ui-fabric-react";
+import { IChoiceGroupProps } from "@fluentui/react";
 import * as path from "path";
 import Q from "q";
 import React from "react";

src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx

@@ -1,5 +1,5 @@
+import { FocusZone } from "@fluentui/react";
 import * as React from "react";
-import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 
 export interface CaptionId {

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, IDropdownOption, Stack, TextField } from "office-ui-fabric-react";
+import { Dropdown, IDropdownOption, Stack, TextField } from "@fluentui/react";
 import React, { FunctionComponent, useRef, useState } from "react";
 import AddIcon from "../../../../images/Add-property.svg";
 import DeleteIcon from "../../../../images/delete.svg";

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -3,8 +3,8 @@
  * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
  * and update any knockout observables passed from the parent.
  */
+import { CommandBar, ICommandBarItemProps } from "@fluentui/react";
 import * as ko from "knockout";
-import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import * as React from "react";
 import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import { StyleConstants } from "../../../Common/Constants";

src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx

@@ -1,6 +1,6 @@
-import * as CommandBarUtil from "./CommandBarUtil";
+import { ICommandBarItemProps } from "@fluentui/react";
-import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as CommandBarUtil from "./CommandBarUtil";
 
 describe("CommandBarUtil tests", () => {
   const createButton = (): CommandButtonComponentProps => {

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,18 +1,22 @@
-import _ from "underscore";
+import {
-import * as React from "react";
+  Dropdown,
+  ICommandBarItemProps,
+  IComponentAsProps,
+  IconType,
+  IDropdownOption,
+  IDropdownStyles,
+} from "@fluentui/react";
 import { Observable } from "knockout";
-import { IconType } from "office-ui-fabric-react/lib/Icon";
+import * as React from "react";
-import { IComponentAsProps } from "office-ui-fabric-react/lib/Utilities";
+import _ from "underscore";
-import { StyleConstants } from "../../../Common/Constants";
-import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import { Dropdown, IDropdownStyles, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import ChevronDownIcon from "../../../../images/Chevron_down.svg";
-import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
+import { StyleConstants } from "../../../Common/Constants";
-import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
 
 /**
  * Convert our NavbarButtonConfig to UI Fabric buttons

src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx

@@ -1,9 +1,7 @@
-import * as React from "react";
+import { ProgressIndicator, Spinner, SpinnerSize, Stack } from "@fluentui/react";
 import { Observable, Subscription } from "knockout";
+import * as React from "react";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
-import { ProgressIndicator } from "office-ui-fabric-react/lib/ProgressIndicator";
-import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
-import { Stack } from "office-ui-fabric-react/lib/Stack";
 
 interface MemoryTrackerProps {
   memoryUsageInfo: Observable<MemoryUsageInfo>;

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -2,7 +2,7 @@
  * React component for control bar
  */
 
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
+import { Dropdown, IDropdownOption } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
 import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -111,7 +111,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       <div
         className="notificationConsoleControls"
       >
-        <StyledWithResponsiveMode
+        <Dropdown
           aria-label="All"
           aria-labelledby="consoleFilterLabel"
           label="Filter:"
@@ -277,7 +277,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       <div
         className="notificationConsoleControls"
       >
-        <StyledWithResponsiveMode
+        <Dropdown
           aria-label="All"
           aria-labelledby="consoleFilterLabel"
           label="Filter:"

src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx

@@ -1,8 +1,7 @@
+import { IconButton, Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
-import { IconButton } from "office-ui-fabric-react/lib/Button";
-import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
-import "./Prompt.less";
 import { PassedPromptProps } from "./Prompt";
+import "./Prompt.less";
 
 export const promptContent = (props: PassedPromptProps): JSX.Element => {
   if (props.status === "busy") {

src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx

@@ -1,21 +1,15 @@
+import { ContextualMenuItemType, DirectionalHint, IconButton, IContextualMenuItem } from "@fluentui/react";
+import { CellId, CellType } from "@nteract/commutable";
+import { actions, AppState, DocumentRecordProps } from "@nteract/core";
+import * as selectors from "@nteract/selectors";
+import { CellToolbarContext } from "@nteract/stateful-components";
 import { ContentRef } from "@nteract/types";
+import { RecordOf } from "immutable";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-
-import { IconButton } from "office-ui-fabric-react/lib/Button";
-import {
-  DirectionalHint,
-  IContextualMenuItem,
-  ContextualMenuItemType,
-} from "office-ui-fabric-react/lib/ContextualMenu";
-import { actions, AppState, DocumentRecordProps } from "@nteract/core";
-import { CellToolbarContext } from "@nteract/stateful-components";
-import { CellType, CellId } from "@nteract/commutable";
-import * as selectors from "@nteract/selectors";
-import { RecordOf } from "immutable";
-import * as cdbActions from "../NotebookComponent/actions";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as cdbActions from "../NotebookComponent/actions";
 
 export interface ComponentProps {
   contentRef: ContentRef;

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx

@@ -1,7 +1,7 @@
+import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "@fluentui/react";
 import { ImmutableOutput } from "@nteract/commutable";
 import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core";
 import Immutable from "immutable";
-import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";

src/Explorer/OpenFullScreen.tsx

@@ -1,8 +1,7 @@
-import { Spinner, Stack, Text, TextField } from "office-ui-fabric-react";
+import { DefaultButton, PrimaryButton, Spinner, Stack, Text, TextField } from "@fluentui/react";
-import { DefaultButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import copyToClipboard from "clipboard-copy";
 import * as React from "react";
 import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
-import copyToClipboard from "clipboard-copy";
 
 export const OpenFullScreen: React.FunctionComponent = () => {
   const result = useFullScreenURLs();

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -12,7 +12,7 @@ import {
   Stack,
   Text,
   TooltipHost,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import React from "react";
 import * as Constants from "../../Common/Constants";
 import { createCollection } from "../../Common/dataAccess/createCollection";

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -1,4 +1,4 @@
-import { IDropdownOption } from "office-ui-fabric-react";
+import { IDropdownOption } from "@fluentui/react";
 import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -8,7 +8,7 @@ import {
   SelectableOptionMenuItemType,
   Stack,
   Text,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import React, { FormEvent, FunctionComponent } from "react";
 import { IPinnedRepo } from "../../../Juno/JunoClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -1,4 +1,4 @@
-import { Text, TextField } from "office-ui-fabric-react";
+import { Text, TextField } from "@fluentui/react";
 import React, { FunctionComponent, useState } from "react";
 import { Areas } from "../../../Common/Constants";
 import { deleteCollection } from "../../../Common/dataAccess/deleteCollection";

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

@@ -523,7 +523,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "borderColor": "#f3f2f1",
                           "color": "#a19f9d",
                           "cursor": "default",
-                          "pointerEvents": "none",
                           "selectors": Object {
                             ":focus": Object {
                               "outline": 0,
@@ -786,6 +785,35 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           },
                         },
                       },
+                      "splitButtonMenuFocused": Object {
+                        "outline": "transparent",
+                        "position": "relative",
+                        "selectors": Object {
+                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                            "border": "1px solid #ffffff",
+                            "bottom": 3,
+                            "content": "\\"\\"",
+                            "left": 3,
+                            "outline": "1px solid #605e5c",
+                            "position": "absolute",
+                            "right": 3,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                                "bottom": -2,
+                                "left": -2,
+                                "right": -2,
+                                "top": -2,
+                              },
+                            },
+                            "top": 3,
+                            "zIndex": 1,
+                          },
+                          "::-moz-focus-inner": Object {
+                            "border": "0",
+                          },
+                        },
+                      },
                       "textContainer": Object {
                         "display": "block",
                         "flexGrow": 1,
@@ -1071,7 +1099,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 >
                   <button
                     aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-172"
+                    className="ms-Button ms-Button--icon closePaneBtn root-202"
                     data-is-focusable={true}
                     onClick={[Function]}
                     onKeyDown={[Function]}
@@ -1084,18 +1112,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     type="button"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-173"
+                      className="ms-Button-flexContainer flexContainer-203"
                       data-automationid="splitbuttonprimary"
                     >
                       <Component
-                        className="ms-Button-icon icon-175"
+                        className="ms-Button-icon icon-205"
                         iconName="Cancel"
                       >
                         <i
                           aria-hidden={true}
-                          className="ms-Icon root-37 css-180 ms-Button-icon icon-175"
+                          className="ms-Icon root-37 css-210 ms-Button-icon icon-205"
                           data-icon-name="Cancel"
-                          role="presentation"
                           style={
                             Object {
                               "fontFamily": "\\"FabricMDL2Icons\\"",
@@ -1163,7 +1190,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   variant="small"
                 >
                   <span
-                    className="css-181"
+                    className="css-211"
                   >
                     Confirm by typing the 
                     container
@@ -1185,7 +1212,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 >
                   <TextFieldBase
                     autoFocus={true}
-                    canRevealPassword={false}
                     deferredValidationTime={200}
                     id="confirmCollectionId"
                     onChange={[Function]}
@@ -1468,18 +1494,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     value=""
                   >
                     <div
-                      className="ms-TextField root-183"
+                      className="ms-TextField root-213"
                     >
                       <div
                         className="ms-TextField-wrapper"
                       >
                         <div
-                          className="ms-TextField-fieldGroup fieldGroup-184"
+                          className="ms-TextField-fieldGroup fieldGroup-214"
                         >
                           <input
                             aria-invalid={false}
                             autoFocus={true}
-                            className="ms-TextField-field field-185"
+                            className="ms-TextField-field field-215"
                             id="confirmCollectionId"
                             onBlur={[Function]}
                             onChange={[Function]}
@@ -1502,7 +1528,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   variant="small"
                 >
                   <span
-                    className="css-194"
+                    className="css-224"
                   >
                     Help us improve Azure Cosmos DB!
                   </span>
@@ -1512,7 +1538,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   variant="small"
                 >
                   <span
-                    className="css-194"
+                    className="css-224"
                   >
                     What is the reason why you are deleting this 
                     container
@@ -1534,7 +1560,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   value=""
                 >
                   <TextFieldBase
-                    canRevealPassword={false}
                     deferredValidationTime={200}
                     id="deleteCollectionFeedbackInput"
                     multiline={true}
@@ -1819,17 +1844,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     value=""
                   >
                     <div
-                      className="ms-TextField ms-TextField--multiline root-183"
+                      className="ms-TextField ms-TextField--multiline root-213"
                     >
                       <div
                         className="ms-TextField-wrapper"
                       >
                         <div
-                          className="ms-TextField-fieldGroup fieldGroup-195"
+                          className="ms-TextField-fieldGroup fieldGroup-225"
                         >
                           <textarea
                             aria-invalid={false}
-                            className="ms-TextField-field field-196"
+                            className="ms-TextField-field field-226"
                             id="deleteCollectionFeedbackInput"
                             onBlur={[Function]}
                             onChange={[Function]}
@@ -2919,7 +2944,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                                 "borderColor": "#f3f2f1",
                                 "color": "#a19f9d",
                                 "cursor": "default",
-                                "pointerEvents": "none",
                                 "selectors": Object {
                                   ":focus": Object {
                                     "outline": 0,
@@ -3266,6 +3290,35 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                                 },
                               },
                             },
+                            "splitButtonMenuFocused": Object {
+                              "outline": "transparent",
+                              "position": "relative",
+                              "selectors": Object {
+                                ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                  "border": "1px solid #ffffff",
+                                  "bottom": 3,
+                                  "content": "\\"\\"",
+                                  "left": 3,
+                                  "outline": "1px solid #605e5c",
+                                  "position": "absolute",
+                                  "right": 3,
+                                  "selectors": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "border": "none",
+                                      "bottom": -2,
+                                      "left": -2,
+                                      "right": -2,
+                                      "top": -2,
+                                    },
+                                  },
+                                  "top": 3,
+                                  "zIndex": 1,
+                                },
+                                "::-moz-focus-inner": Object {
+                                  "border": "0",
+                                },
+                              },
+                            },
                             "splitButtonMenuIcon": Object {
                               "color": "#ffffff",
                             },
@@ -3563,7 +3616,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       >
                         <button
                           aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-198"
+                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-228"
                           data-is-focusable={true}
                           onClick={[Function]}
                           onKeyDown={[Function]}
@@ -3581,14 +3634,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           type="button"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-173"
+                            className="ms-Button-flexContainer flexContainer-203"
                             data-automationid="splitbuttonprimary"
                           >
                             <span
-                              className="ms-Button-textContainer textContainer-174"
+                              className="ms-Button-textContainer textContainer-204"
                             >
                               <span
-                                className="ms-Button-label label-199"
+                                className="ms-Button-label label-229"
                                 id="id__9"
                                 key="id__9"
                               >

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { useBoolean } from "@fluentui/react-hooks";
-import { Text, TextField } from "office-ui-fabric-react";
+import { Text, TextField } from "@fluentui/react";
 import React, { FunctionComponent, useState } from "react";
 import { Areas } from "../../Common/Constants";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { useBoolean } from "@fluentui/react-hooks";
-import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
+import { IDropdownOption, IImageProps, Image, Stack, Text } from "@fluentui/react";
 import React, { FunctionComponent, useState } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import StoredProcedure from "../../Tree/StoredProcedure";

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -7,7 +7,7 @@ import {
   Label,
   Stack,
   TextField,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import EntityCancelIcon from "../../../../images/Entity_cancel.svg";

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

@@ -1,4 +1,4 @@
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { IconButton, PrimaryButton } from "@fluentui/react";
 import React, { FunctionComponent, ReactNode } from "react";
 import ErrorRedIcon from "../../../../images/error_red.svg";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { useBoolean } from "@fluentui/react-hooks";
-import { IImageProps, Image, ImageFit, Stack, TextField } from "office-ui-fabric-react";
+import { IImageProps, Image, ImageFit, Stack, TextField } from "@fluentui/react";
 import React, { FunctionComponent, useState } from "react";
 import folderIcon from "../../../../images/folder_16x16.svg";
 import { logError } from "../../../Common/Logger";

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

@@ -39,7 +39,7 @@ exports[`Load Query Pane should render Default properly 1`] = `
           className="customFileUpload"
           htmlFor="importQueryInputId"
         >
-          <StyledImageBase
+          <Image
             alt="upload files"
             className="fileIcon"
             height={20}

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx

@@ -1,4 +1,4 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -1,4 +1,4 @@
-import { IPanelProps, IRenderFunction, Panel, PanelType } from "office-ui-fabric-react";
+import { IPanelProps, IRenderFunction, Panel, PanelType } from "@fluentui/react";
 import * as React from "react";
 
 export interface PanelContainerProps {

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PrimaryButton } from "office-ui-fabric-react";
+import { PrimaryButton } from "@fluentui/react";
 
 export interface PanelFooterProps {
   buttonLabel: string;

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -1,4 +1,4 @@
-import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
+import { Icon, Link, Stack, Text } from "@fluentui/react";
 import React from "react";
 
 export interface PanelInfoErrorProps {

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPaneComponent.tsx

@@ -1,6 +1,6 @@
+import { Dropdown, IDropdownProps, ITextFieldProps, Stack, Text, TextField } from "@fluentui/react";
 import { ImmutableNotebook } from "@nteract/commutable";
 import Html2Canvas from "html2canvas";
-import { Dropdown, IDropdownProps, ITextFieldProps, Stack, Text, TextField } from "office-ui-fabric-react";
 import React, { FunctionComponent, useState } from "react";
 import { GalleryCardComponent } from "../../Controls/NotebookGallery/Cards/GalleryCardComponent";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";

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

@@ -50,7 +50,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
       />
     </StackItem>
     <StackItem>
-      <StyledWithResponsiveMode
+      <Dropdown
         ariaLabel="Cover image"
         defaultSelectedKey="Custom Image"
         label="Cover image"

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { useBoolean } from "@fluentui/react-hooks";
-import { Text, TextField } from "office-ui-fabric-react";
+import { Text, TextField } from "@fluentui/react";
 import React, { FunctionComponent, useState } from "react";
 import { Areas, SavedQueries } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "office-ui-fabric-react";
+import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
 import React, { FunctionComponent, MouseEvent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { Tooltip } from "../../../Common/Tooltip/Tooltip";
@@ -187,7 +187,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
                   label: { padding: 0 },
                 }}
                 className="padding"
-                tabIndex={0}
                 ariaLabel="Enable cross partition query"
                 checked={crossPartitionQueryEnabled}
                 onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}

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

@@ -29,7 +29,7 @@ exports[`Settings Pane should render Default properly 1`] = `
             Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
           </Tooltip>
         </div>
-        <StyledChoiceGroupBase
+        <StyledChoiceGroup
           onChange={[Function]}
           options={
             Array [
@@ -60,25 +60,11 @@ exports[`Settings Pane should render Default properly 1`] = `
               Enter the number of query results that should be shown per page.
             </Tooltip>
           </div>
-          <CustomizedSpinButton
+          <StyledSpinButton
             ariaLabel="Custom query items per page"
             className="textfontclr"
             decrementButtonAriaLabel="Decrease value by 1"
-            decrementButtonIcon={
-              Object {
-                "iconName": "ChevronDownSmall",
-              }
-            }
-            disabled={false}
             incrementButtonAriaLabel="Increase value by 1"
-            incrementButtonIcon={
-              Object {
-                "iconName": "ChevronUpSmall",
-              }
-            }
-            label=""
-            labelPosition={2}
-            max={100}
             min={1}
             onDecrement={[Function]}
             onIncrement={[Function]}
@@ -115,7 +101,6 @@ exports[`Settings Pane should render Default properly 1`] = `
               },
             }
           }
-          tabIndex={0}
         />
       </div>
     </div>
@@ -133,24 +118,10 @@ exports[`Settings Pane should render Default properly 1`] = `
             Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run.
           </Tooltip>
         </div>
-        <CustomizedSpinButton
+        <StyledSpinButton
           ariaLabel="Max degree of parallelism"
           className="textfontclr"
-          decrementButtonIcon={
-            Object {
-              "iconName": "ChevronDownSmall",
-            }
-          }
-          disabled={false}
           id="max-degree"
-          incrementButtonIcon={
-            Object {
-              "iconName": "ChevronUpSmall",
-            }
-          }
-          label=""
-          labelPosition={2}
-          max={100}
           min={-1}
           onDecrement={[Function]}
           onIncrement={[Function]}
@@ -209,7 +180,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
             Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
           </Tooltip>
         </div>
-        <StyledChoiceGroupBase
+        <StyledChoiceGroup
           aria-label="Graph Auto-visualization"
           onChange={[Function]}
           options={

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

@@ -1,5 +1,5 @@
+import { PrimaryButton } from "@fluentui/react";
 import { mount } from "enzyme";
-import { PrimaryButton } from "office-ui-fabric-react";
 import React from "react";
 import Explorer from "../../Explorer";
 import { SetupNoteBooksPanel } from "./SetupNotebooksPanel";

src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { PrimaryButton } from "@fluentui/react";
-import { PrimaryButton } from "office-ui-fabric-react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, KeyboardEvent, useState } from "react";
 import { Areas, NormalizedEventKey } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

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

@@ -1062,7 +1062,6 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
                           "borderColor": "#f3f2f1",
                           "color": "#a19f9d",
                           "cursor": "default",
-                          "pointerEvents": "none",
                           "selectors": Object {
                             ":focus": Object {
                               "outline": 0,
@@ -1409,6 +1408,35 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
                           },
                         },
                       },
+                      "splitButtonMenuFocused": Object {
+                        "outline": "transparent",
+                        "position": "relative",
+                        "selectors": Object {
+                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                            "border": "1px solid #ffffff",
+                            "bottom": 3,
+                            "content": "\\"\\"",
+                            "left": 3,
+                            "outline": "1px solid #605e5c",
+                            "position": "absolute",
+                            "right": 3,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                                "bottom": -2,
+                                "left": -2,
+                                "right": -2,
+                                "top": -2,
+                              },
+                            },
+                            "top": 3,
+                            "zIndex": 1,
+                          },
+                          "::-moz-focus-inner": Object {
+                            "border": "0",
+                          },
+                        },
+                      },
                       "splitButtonMenuIcon": Object {
                         "color": "#ffffff",
                       },
@@ -1704,7 +1732,7 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
                 >
                   <button
                     aria-label="Complete setup"
-                    className="ms-Button ms-Button--primary btncreatecoll1 btnSetupQueries root-72"
+                    className="ms-Button ms-Button--primary btncreatecoll1 btnSetupQueries root-53"
                     data-is-focusable={true}
                     id="completeSetupBtn"
                     onClick={[Function]}
@@ -1716,14 +1744,14 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
                     type="button"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-73"
+                      className="ms-Button-flexContainer flexContainer-54"
                       data-automationid="splitbuttonprimary"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-74"
+                        className="ms-Button-textContainer textContainer-55"
                       >
                         <span
-                          className="ms-Button-label label-76"
+                          className="ms-Button-label label-57"
                           id="id__0"
                           key="id__0"
                         >

src/Explorer/Panes/StringInputPane/StringInputPane.tsx

@@ -1,4 +1,4 @@
-import { TextField } from "office-ui-fabric-react";
+import { TextField } from "@fluentui/react";
 import React, { FormEvent, FunctionComponent, useState } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";

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

@@ -1787,7 +1787,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           "borderColor": "#f3f2f1",
                           "color": "#a19f9d",
                           "cursor": "default",
-                          "pointerEvents": "none",
                           "selectors": Object {
                             ":focus": Object {
                               "outline": 0,
@@ -2050,6 +2049,35 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           },
                         },
                       },
+                      "splitButtonMenuFocused": Object {
+                        "outline": "transparent",
+                        "position": "relative",
+                        "selectors": Object {
+                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                            "border": "1px solid #ffffff",
+                            "bottom": 3,
+                            "content": "\\"\\"",
+                            "left": 3,
+                            "outline": "1px solid #605e5c",
+                            "position": "absolute",
+                            "right": 3,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                                "bottom": -2,
+                                "left": -2,
+                                "right": -2,
+                                "top": -2,
+                              },
+                            },
+                            "top": 3,
+                            "zIndex": 1,
+                          },
+                          "::-moz-focus-inner": Object {
+                            "border": "0",
+                          },
+                        },
+                      },
                       "textContainer": Object {
                         "display": "block",
                         "flexGrow": 1,
@@ -2335,7 +2363,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                 >
                   <button
                     aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-104"
+                    className="ms-Button ms-Button--icon closePaneBtn root-153"
                     data-is-focusable={true}
                     onClick={[Function]}
                     onKeyDown={[Function]}
@@ -2348,18 +2376,17 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                     type="button"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-105"
+                      className="ms-Button-flexContainer flexContainer-154"
                       data-automationid="splitbuttonprimary"
                     >
                       <Component
-                        className="ms-Button-icon icon-107"
+                        className="ms-Button-icon icon-156"
                         iconName="Cancel"
                       >
                         <i
                           aria-hidden={true}
-                          className="ms-Icon root-37 css-112 ms-Button-icon icon-107"
+                          className="ms-Icon root-37 css-161 ms-Button-icon icon-156"
                           data-icon-name="Cancel"
-                          role="presentation"
                           style={
                             Object {
                               "fontFamily": "\\"FabricMDL2Icons\\"",
@@ -2424,7 +2451,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
               <TextFieldBase
                 aria-label="Enter new directory name"
                 autoFocus={true}
-                canRevealPassword={false}
                 deferredValidationTime={200}
                 label="Enter new directory name"
                 name="collectionIdConfirmation"
@@ -2709,7 +2735,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                 value=""
               >
                 <div
-                  className="ms-TextField is-required root-114"
+                  className="ms-TextField is-required root-163"
                 >
                   <div
                     className="ms-TextField-wrapper"
@@ -3000,7 +3026,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                         }
                       >
                         <label
-                          className="ms-Label root-125"
+                          className="ms-Label root-174"
                           htmlFor="TextField3"
                           id="TextFieldLabel5"
                         >
@@ -3009,13 +3035,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       </LabelBase>
                     </StyledLabelBase>
                     <div
-                      className="ms-TextField-fieldGroup fieldGroup-115"
+                      className="ms-TextField-fieldGroup fieldGroup-164"
                     >
                       <input
                         aria-invalid={false}
                         aria-labelledby="TextFieldLabel5"
                         autoFocus={true}
-                        className="ms-TextField-field field-116"
+                        className="ms-TextField-field field-165"
                         id="TextField3"
                         name="collectionIdConfirmation"
                         onBlur={[Function]}
@@ -4105,7 +4131,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                                 "borderColor": "#f3f2f1",
                                 "color": "#a19f9d",
                                 "cursor": "default",
-                                "pointerEvents": "none",
                                 "selectors": Object {
                                   ":focus": Object {
                                     "outline": 0,
@@ -4452,6 +4477,35 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                                 },
                               },
                             },
+                            "splitButtonMenuFocused": Object {
+                              "outline": "transparent",
+                              "position": "relative",
+                              "selectors": Object {
+                                ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                  "border": "1px solid #ffffff",
+                                  "bottom": 3,
+                                  "content": "\\"\\"",
+                                  "left": 3,
+                                  "outline": "1px solid #605e5c",
+                                  "position": "absolute",
+                                  "right": 3,
+                                  "selectors": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "border": "none",
+                                      "bottom": -2,
+                                      "left": -2,
+                                      "right": -2,
+                                      "top": -2,
+                                    },
+                                  },
+                                  "top": 3,
+                                  "zIndex": 1,
+                                },
+                                "::-moz-focus-inner": Object {
+                                  "border": "0",
+                                },
+                              },
+                            },
                             "splitButtonMenuIcon": Object {
                               "color": "#ffffff",
                             },
@@ -4749,7 +4803,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       >
                         <button
                           aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-126"
+                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-175"
                           data-is-focusable={true}
                           onClick={[Function]}
                           onKeyDown={[Function]}
@@ -4767,14 +4821,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           type="button"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-105"
+                            className="ms-Button-flexContainer flexContainer-154"
                             data-automationid="splitbuttonprimary"
                           >
                             <span
-                              className="ms-Button-textContainer textContainer-106"
+                              className="ms-Button-textContainer textContainer-155"
                             >
                               <span
-                                className="ms-Button-label label-127"
+                                className="ms-Button-label label-176"
                                 id="id__6"
                                 key="id__6"
                               >

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -1,14 +1,5 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
-import {
+import { useBoolean } from "@fluentui/react-hooks";
-  IDropdownOption,
-  Image,
-  IPanelProps,
-  IRenderFunction,
-  Label,
-  Stack,
-  Text,
-  TextField,
-} from "office-ui-fabric-react";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as _ from "underscore";
 import AddPropertyIcon from "../../../../images/Add-property.svg";

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -1,14 +1,5 @@
-import { useBoolean } from "@uifabric/react-hooks";
+import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
-import {
+import { useBoolean } from "@fluentui/react-hooks";
-  IDropdownOption,
-  Image,
-  IPanelProps,
-  IRenderFunction,
-  Label,
-  Stack,
-  Text,
-  TextField,
-} from "office-ui-fabric-react";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as _ from "underscore";
 import AddPropertyIcon from "../../../../images/Add-property.svg";

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

@@ -518,7 +518,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           "borderColor": "#f3f2f1",
                           "color": "#a19f9d",
                           "cursor": "default",
-                          "pointerEvents": "none",
                           "selectors": Object {
                             ":focus": Object {
                               "outline": 0,
@@ -781,6 +780,35 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           },
                         },
                       },
+                      "splitButtonMenuFocused": Object {
+                        "outline": "transparent",
+                        "position": "relative",
+                        "selectors": Object {
+                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                            "border": "1px solid #ffffff",
+                            "bottom": 3,
+                            "content": "\\"\\"",
+                            "left": 3,
+                            "outline": "1px solid #605e5c",
+                            "position": "absolute",
+                            "right": 3,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                                "bottom": -2,
+                                "left": -2,
+                                "right": -2,
+                                "top": -2,
+                              },
+                            },
+                            "top": 3,
+                            "zIndex": 1,
+                          },
+                          "::-moz-focus-inner": Object {
+                            "border": "0",
+                          },
+                        },
+                      },
                       "textContainer": Object {
                         "display": "block",
                         "flexGrow": 1,
@@ -1066,7 +1094,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                 >
                   <button
                     aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-72"
+                    className="ms-Button ms-Button--icon closePaneBtn root-53"
                     data-is-focusable={true}
                     onClick={[Function]}
                     onKeyDown={[Function]}
@@ -1079,18 +1107,17 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     type="button"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-73"
+                      className="ms-Button-flexContainer flexContainer-54"
                       data-automationid="splitbuttonprimary"
                     >
                       <Component
-                        className="ms-Button-icon icon-75"
+                        className="ms-Button-icon icon-56"
                         iconName="Cancel"
                       >
                         <i
                           aria-hidden={true}
-                          className="ms-Icon root-37 css-80 ms-Button-icon icon-75"
+                          className="ms-Icon root-37 css-61 ms-Button-icon icon-56"
                           data-icon-name="Cancel"
-                          role="presentation"
                           style={
                             Object {
                               "fontFamily": "\\"FabricMDL2Icons\\"",
@@ -1148,7 +1175,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
             >
               <Text>
                 <span
-                  className="css-81"
+                  className="css-62"
                 >
                   Select the columns that you want to query.
                 </span>
@@ -1163,7 +1190,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   onChange={[Function]}
                 >
                   <CheckboxBase
-                    boxSide="start"
                     checked={true}
                     id="availableCheckbox"
                     label="Available Columns"
@@ -1444,33 +1470,32 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     }
                   >
                     <div
-                      className="ms-Checkbox is-checked is-enabled root-82"
+                      className="ms-Checkbox is-checked is-enabled root-63"
                     >
-                      <Component />
                       <input
                         aria-checked="true"
                         aria-label="Available Columns"
                         checked={true}
-                        className="input-83"
+                        className="input-64"
+                        data-ktp-execute-target={true}
                         id="availableCheckbox"
-                        onBlur={[Function]}
                         onChange={[Function]}
-                        onFocus={[Function]}
                         type="checkbox"
                       />
                       <label
-                        className="ms-Checkbox-label label-84"
+                        className="ms-Checkbox-label label-65"
                         htmlFor="availableCheckbox"
                       >
                         <div
-                          className="ms-Checkbox-checkbox checkbox-85"
+                          className="ms-Checkbox-checkbox checkbox-66"
+                          data-ktp-target={true}
                         >
                           <StyledIconBase
-                            className="ms-Checkbox-checkmark checkmark-86"
+                            className="ms-Checkbox-checkmark checkmark-67"
                             iconName="CheckMark"
                           >
                             <IconBase
-                              className="ms-Checkbox-checkmark checkmark-86"
+                              className="ms-Checkbox-checkmark checkmark-67"
                               iconName="CheckMark"
                               styles={[Function]}
                               theme={
@@ -1749,7 +1774,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             >
                               <i
                                 aria-hidden={true}
-                                className="ms-Checkbox-checkmark checkmark-88"
+                                className="ms-Checkbox-checkmark checkmark-69"
                                 data-icon-name="CheckMark"
                               >
                                 
@@ -1759,7 +1784,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                         </div>
                         <span
                           aria-hidden="true"
-                          className="ms-Checkbox-text text-87"
+                          className="ms-Checkbox-text text-68"
                         >
                           Available Columns
                         </span>
@@ -1775,7 +1800,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   onChange={[Function]}
                 >
                   <CheckboxBase
-                    boxSide="start"
                     checked={true}
                     disabled={false}
                     label=""
@@ -2056,35 +2080,34 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     }
                   >
                     <div
-                      className="ms-Checkbox is-checked is-enabled root-82"
+                      className="ms-Checkbox is-checked is-enabled root-63"
                     >
-                      <Component />
                       <input
                         aria-checked="true"
                         aria-disabled={false}
                         aria-label=""
                         checked={true}
-                        className="input-83"
+                        className="input-64"
+                        data-ktp-execute-target={true}
                         disabled={false}
                         id="checkbox-3"
-                        onBlur={[Function]}
                         onChange={[Function]}
-                        onFocus={[Function]}
                         type="checkbox"
                       />
                       <label
-                        className="ms-Checkbox-label label-84"
+                        className="ms-Checkbox-label label-65"
                         htmlFor="checkbox-3"
                       >
                         <div
-                          className="ms-Checkbox-checkbox checkbox-85"
+                          className="ms-Checkbox-checkbox checkbox-66"
+                          data-ktp-target={true}
                         >
                           <StyledIconBase
-                            className="ms-Checkbox-checkmark checkmark-86"
+                            className="ms-Checkbox-checkmark checkmark-67"
                             iconName="CheckMark"
                           >
                             <IconBase
-                              className="ms-Checkbox-checkmark checkmark-86"
+                              className="ms-Checkbox-checkmark checkmark-67"
                               iconName="CheckMark"
                               styles={[Function]}
                               theme={
@@ -2363,7 +2386,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                             >
                               <i
                                 aria-hidden={true}
-                                className="ms-Checkbox-checkmark checkmark-88"
+                                className="ms-Checkbox-checkmark checkmark-69"
                                 data-icon-name="CheckMark"
                               >
                                 
@@ -3451,7 +3474,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                                 "borderColor": "#f3f2f1",
                                 "color": "#a19f9d",
                                 "cursor": "default",
-                                "pointerEvents": "none",
                                 "selectors": Object {
                                   ":focus": Object {
                                     "outline": 0,
@@ -3798,6 +3820,35 @@ exports[`Table query select Panel should render Default properly 1`] = `
                                 },
                               },
                             },
+                            "splitButtonMenuFocused": Object {
+                              "outline": "transparent",
+                              "position": "relative",
+                              "selectors": Object {
+                                ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                  "border": "1px solid #ffffff",
+                                  "bottom": 3,
+                                  "content": "\\"\\"",
+                                  "left": 3,
+                                  "outline": "1px solid #605e5c",
+                                  "position": "absolute",
+                                  "right": 3,
+                                  "selectors": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "border": "none",
+                                      "bottom": -2,
+                                      "left": -2,
+                                      "right": -2,
+                                      "top": -2,
+                                    },
+                                  },
+                                  "top": 3,
+                                  "zIndex": 1,
+                                },
+                                "::-moz-focus-inner": Object {
+                                  "border": "0",
+                                },
+                              },
+                            },
                             "splitButtonMenuIcon": Object {
                               "color": "#ffffff",
                             },
@@ -4095,7 +4146,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                       >
                         <button
                           aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-95"
+                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-76"
                           data-is-focusable={true}
                           onClick={[Function]}
                           onKeyDown={[Function]}
@@ -4113,14 +4164,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
                           type="button"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-73"
+                            className="ms-Button-flexContainer flexContainer-54"
                             data-automationid="splitbuttonprimary"
                           >
                             <span
-                              className="ms-Button-textContainer textContainer-74"
+                              className="ms-Button-textContainer textContainer-55"
                             >
                               <span
-                                className="ms-Button-label label-96"
+                                className="ms-Button-label label-77"
                                 id="id__4"
                                 key="id__4"
                               >