Pass masterkey in connection string mode (#572 )

2026-01-06 03:00:23 +00:00 · 2021-03-19 18:38:44 -05:00
53 changed files with 1194 additions and 278 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,9 +0,0 @@
-# Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)

 - Visit: `https://localhost:1234/hostedExplorer.html`
+- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.

 ### Emulator Development
--- a/jest.config.js
+++ b/jest.config.js
@@ -67,8 +67,7 @@ module.exports = {

  // A map from regular expressions to module names that allow to stub out resources with a single module
  moduleNameMapper: {
-    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
-    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
    "worker-loader": "<rootDir>/mockModule",
    "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",
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -718,7 +718,7 @@ execute-sproc-params-pane {
  }
 }

-.stored-procedure-tab {
+stored-procedure-tab {
  @ToggleHeight: 30px;
  @ToggleWidth: 180px;

--- a/package-lock.json
+++ b/package-lock.json
@@ -3673,6 +3673,30 @@
      "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.10.2.tgz",
      "integrity": "sha512-hZNKjKOYsckoOEgBziGMnBcX0M7EtstnCmwz5jZUOUYwlZ+/xxX6z3jPu1XVO2Jivk0eLfuP9GP+vFD49CMetw=="
    },
+    "@peculiar/asn1-schema": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-1.1.2.tgz",
+      "integrity": "sha512-ntQ4UnUFgdjs0tfWR6YmEQm/x0glV4OFus/RjxLkaJUKfu/R7VilefBntyUO3MoKWdlCgib30KN+JpCY1HqU2A==",
+      "requires": {
+        "asn1js": "^2.0.26",
+        "tslib": "^1.11.1"
+      }
+    },
+    "@peculiar/json-schema": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@peculiar/json-schema/-/json-schema-1.1.12.tgz",
+      "integrity": "sha512-coUfuoMeIB7B8/NMekxaDzLhaYmp0HZNPEjYRm9goRou8UZIC3z21s0sL9AWoCw4EG876QyO3kYrc61WNF9B/w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
    "@phosphor/algorithm": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@phosphor/algorithm/-/algorithm-1.2.0.tgz",
@@ -4037,6 +4061,11 @@
      "resolved": "https://registry.npmjs.org/@types/asap/-/asap-2.0.0.tgz",
      "integrity": "sha512-upIS0Gt9Mc8eEpCbYMZ1K8rhNosfKUtimNcINce+zLwJF5UpM3Vv7yz3S5l/1IX+DxTa8lTkUjqynvjRXyJzsg=="
    },
+    "@types/asn1js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/asn1js/-/asn1js-2.0.0.tgz",
+      "integrity": "sha512-Jjzp5EqU0hNpADctc/UqhiFbY1y2MqIxBVa2S4dBlbnZHTLPMuggoL5q43X63LpsOIINRDirBjP56DUUKIUWIA=="
+    },
    "@types/babel__core": {
      "version": "7.1.12",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz",
@@ -4642,7 +4671,8 @@
    "@types/node": {
      "version": "12.11.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz",
-      "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A=="
+      "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
+      "dev": true
    },
    "@types/node-fetch": {
      "version": "2.5.7",
@@ -4836,6 +4866,12 @@
        "@types/jest": "*"
      }
    },
+    "@types/text-encoding": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/@types/text-encoding/-/text-encoding-0.0.33.tgz",
+      "integrity": "sha512-kAMOjud0Nw3HPY0Cu8cTFk0LVya8skY+ajb2rgrSahPQ6AreN0cpGBNrs8Kjlu9EhFIeh5cp7phovL7v9HrPdQ==",
+      "dev": true
+    },
    "@types/tunnel": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/@types/tunnel/-/tunnel-0.0.1.tgz",
@@ -4884,6 +4920,12 @@
      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
      "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ=="
    },
+    "@types/webfontloader": {
+      "version": "1.6.29",
+      "resolved": "https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.29.tgz",
+      "integrity": "sha512-wobuM+LvpkzU296NsFVRGDAFWw3X2XEhrLHuvV+VGSbok6aOxQcymmopUFwNB69qy5oudHt9lYC0JF+z+DxFLw==",
+      "dev": true
+    },
    "@types/webpack": {
      "version": "4.41.26",
      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
@@ -5974,6 +6016,11 @@
      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
    },
+    "asmcrypto.js": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/asmcrypto.js/-/asmcrypto.js-2.3.2.tgz",
+      "integrity": "sha512-3FgFARf7RupsZETQ1nHnhLUUvpcttcCq1iZCaVAbJZbCZ5VNRrNyvpDyHTOb0KC3llFcsyOT/a99NZcCbeiEsA=="
+    },
    "asn1": {
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -5994,6 +6041,14 @@
        "safer-buffer": "^2.1.0"
      }
    },
+    "asn1js": {
+      "version": "2.0.26",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-2.0.26.tgz",
+      "integrity": "sha512-yG89F0j9B4B0MKIcFyWWxnpZPLaNTjCj4tkE3fjbAoo0qmpGw0PYYqSbX/4ebnd9Icn8ZgK4K1fvDyEtW1JYtQ==",
+      "requires": {
+        "pvutils": "^1.0.17"
+      }
+    },
    "assert": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
@@ -6271,6 +6326,23 @@
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
    },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
    "babel-preset-current-node-syntax": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.4.tgz",
@@ -6495,8 +6567,7 @@
    "bn.js": {
      "version": "4.11.9",
      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
-      "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
-      "dev": true
+      "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
    },
    "body-parser": {
      "version": "1.19.0",
@@ -6642,8 +6713,7 @@
    "brorand": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
-      "dev": true
+      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
    },
    "browser-process-hrtime": {
      "version": "1.0.0",
@@ -8788,7 +8858,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
-      "dev": true,
      "requires": {
        "inherits": "^2.0.1",
        "minimalistic-assert": "^1.0.0"
@@ -9105,7 +9174,6 @@
      "version": "6.5.3",
      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
-      "dev": true,
      "requires": {
        "bn.js": "^4.4.0",
        "brorand": "^1.0.1",
@@ -9346,6 +9414,11 @@
        "es6-symbol": "^3.1.1"
      }
    },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
    "es6-symbol": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -11484,7 +11557,6 @@
      "version": "1.1.7",
      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
-      "dev": true,
      "requires": {
        "inherits": "^2.0.3",
        "minimalistic-assert": "^1.0.1"
@@ -11529,7 +11601,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
-      "dev": true,
      "requires": {
        "hash.js": "^1.0.3",
        "minimalistic-assert": "^1.0.0",
@@ -11868,9 +11939,9 @@
      }
    },
    "i18next-http-backend": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.2.1.tgz",
-      "integrity": "sha512-9L2sa+wybqi57/+VsrJPo5DCI7WLoudaK12xz0okYSmsi3Izyj7sCgrYL52WHy/O3BFY9HGORBwSwlD1WYuH6Q==",
+      "version": "1.0.23",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.0.23.tgz",
+      "integrity": "sha512-2iXwUmawM4kozvGN+k7G9u/bYQdgqtTXVK0cWvLSOpUCTaW30ZzRhgu0FBfinb71XjwUEvdqb95jNrEFjrwGKw==",
      "requires": {
        "node-fetch": "2.6.1"
      }
@@ -15826,14 +15897,12 @@
    "minimalistic-assert": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-      "dev": true
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
    },
    "minimalistic-crypto-utils": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=",
-      "dev": true
+      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
    },
    "minimatch": {
      "version": "3.0.4",
@@ -16446,7 +16515,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz",
      "integrity": "sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.3",
        "es-abstract": "^1.12.0",
@@ -16458,7 +16526,6 @@
          "version": "1.17.7",
          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
          "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==",
-          "dev": true,
          "requires": {
            "es-to-primitive": "^1.2.1",
            "function-bind": "^1.1.1",
@@ -17528,6 +17595,41 @@
      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
    },
+    "promise-polyfill": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.0.tgz",
+      "integrity": "sha512-OzSf6gcCUQ01byV4BgwyUCswlaQQ6gzXc23aLQWhicvfX9kfsUiUhgt3CCQej8jDnl8/PhGF31JdHX2/MzF3WA=="
+    },
+    "promise.prototype.finally": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/promise.prototype.finally/-/promise.prototype.finally-3.1.0.tgz",
+      "integrity": "sha512-7p/K2f6dI+dM8yjRQEGrTQs5hTQixUAdOGpMEA3+pVxpX5oHKRSKAXyLw9Q9HUWDTdwtoo39dSHGQtN90HcEwQ==",
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.9.0",
+        "function-bind": "^1.1.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.7",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
+          "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==",
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.2",
+            "is-regex": "^1.1.1",
+            "object-inspect": "^1.8.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.1",
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        }
+      }
+    },
    "prompts": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
@@ -17756,6 +17858,26 @@
      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
      "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
    },
+    "pvtsutils": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.1.1.tgz",
+      "integrity": "sha512-Evbhe6L4Sxwu4SPLQ4LQZhgfWDQO3qa1lju9jM5cxsQp8vE10VipcSmo7hiJW48TmiHgVLgDtC2TL6/+ND+IVg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
+    "pvutils": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.0.17.tgz",
+      "integrity": "sha512-wLHYUQxWaXVQvKnwIDWFVKDJku9XDCvyhhxoq8dc5MFdIlRenyPI9eSfEtcvgHgD7FlvCyGAlWgOzRnZD99GZQ=="
+    },
    "q": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -20456,6 +20578,7 @@
      "version": "4.8.0",
      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "dev": true,
      "requires": {
        "commander": "^2.20.0",
        "source-map": "~0.6.1",
@@ -20465,35 +20588,39 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
    "terser-webpack-plugin": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-3.1.0.tgz",
-      "integrity": "sha512-cjdZte66fYkZ65rQ2oJfrdCAkkhJA7YLYk5eGOcGCSGlq0ieZupRdjedSQXYknMPo2IveQL+tPdrxUkERENCFA==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-3.0.5.tgz",
+      "integrity": "sha512-pyHUyfQUZB3ciYL81GgXzDh8Qb3fGED77xDjZVSFYSN1cQnWgC51OMPKj7vBWVZx0GGuYhpa9+Vz2KxkzXWhBA==",
+      "dev": true,
      "requires": {
-        "cacache": "^15.0.5",
+        "cacache": "^15.0.4",
        "find-cache-dir": "^3.3.1",
-        "jest-worker": "^26.2.1",
-        "p-limit": "^3.0.2",
+        "jest-worker": "^26.0.0",
+        "p-limit": "^3.0.1",
        "schema-utils": "^2.6.6",
        "serialize-javascript": "^4.0.0",
        "source-map": "^0.6.1",
-        "terser": "^4.8.0",
+        "terser": "^4.6.13",
        "webpack-sources": "^1.4.3"
      },
      "dependencies": {
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
        },
        "jest-worker": {
          "version": "26.6.2",
          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+          "dev": true,
          "requires": {
            "@types/node": "*",
            "merge-stream": "^2.0.0",
@@ -20504,6 +20631,7 @@
          "version": "3.1.0",
          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
          "requires": {
            "yocto-queue": "^0.1.0"
          }
@@ -20512,6 +20640,7 @@
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "dev": true,
          "requires": {
            "randombytes": "^2.1.0"
          }
@@ -20519,12 +20648,14 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
@@ -20542,6 +20673,11 @@
        "require-main-filename": "^2.0.0"
      }
    },
+    "text-encoding": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.7.0.tgz",
+      "integrity": "sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA=="
+    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -21295,6 +21431,11 @@
        "requires-port": "^1.0.0"
      }
    },
+    "url-polyfill": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.7.tgz",
+      "integrity": "sha512-ZrAxYWCREjmMtL8gSbSiKKLZZticgihCvVBtrFbUVpyoETt8GQJeG2okMWA8XryDAaHMjJfhnc+rnhXRbI4DXA=="
+    },
    "use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -21687,6 +21828,65 @@
        "minimalistic-assert": "^1.0.0"
      }
    },
+    "webcrypto-core": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.1.9.tgz",
+      "integrity": "sha512-Ac7yZQpz9+oDpKgltmHUb7Czlw6fahe9AhbBOkXkaU3y7vmvrRASNmU1T0VdH4iJsNEFgYh7R49qJjru4huzmw==",
+      "requires": {
+        "@peculiar/asn1-schema": "^2.0.12",
+        "@peculiar/json-schema": "^1.1.12",
+        "asn1js": "^2.0.26",
+        "pvtsutils": "^1.0.11",
+        "tslib": "^2.0.1"
+      },
+      "dependencies": {
+        "@peculiar/asn1-schema": {
+          "version": "2.0.27",
+          "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.0.27.tgz",
+          "integrity": "sha512-1tIx7iL3Ma3HtnNS93nB7nhyI0soUJypElj9owd4tpMrRDmeJ8eZubsdq1sb0KSaCs5RqZNoABCP6m5WtnlVhQ==",
+          "requires": {
+            "@types/asn1js": "^2.0.0",
+            "asn1js": "^2.0.26",
+            "pvtsutils": "^1.1.1",
+            "tslib": "^2.0.3"
+          }
+        },
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
+    "webcrypto-liner": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/webcrypto-liner/-/webcrypto-liner-1.1.4.tgz",
+      "integrity": "sha512-p4ovRsS8hIyG8KnW2FyrWZG4rZY5eHow5IlNiyOXeisE4gbX3FMZzJPej1dhdxL67111yf0zW2H24qt0ny+JHQ==",
+      "requires": {
+        "@peculiar/asn1-schema": "^1.0.3",
+        "@peculiar/json-schema": "^1.1.9",
+        "asmcrypto.js": "^2.3.2",
+        "asn1js": "^2.0.26",
+        "core-js": "^3.5.0",
+        "des.js": "^1.0.1",
+        "elliptic": "^6.5.2",
+        "pvtsutils": "^1.0.9",
+        "tslib": "^1.10.0",
+        "webcrypto-core": "^1.0.17"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.8.3",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.3.tgz",
+          "integrity": "sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q=="
+        }
+      }
+    },
+    "webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+    },
    "webidl-conversions": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
@@ -22366,6 +22566,11 @@
        "iconv-lite": "0.4.24"
      }
    },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    },
    "whatwg-mimetype": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
@@ -22675,7 +22880,8 @@
    "yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -44,7 +44,9 @@
    "@types/node-fetch": "2.5.7",
    "@uifabric/react-cards": "0.109.110",
    "@uifabric/styling": "7.13.7",
+    "abort-controller": "3.0.0",
    "applicationinsights": "1.8.0",
+    "babel-polyfill": "6.26.0",
    "bootstrap": "3.4.1",
    "canvas": "file:./canvas",
    "clean-webpack-plugin": "0.1.19",
@@ -58,13 +60,15 @@
    "date-fns": "1.29.0",
    "dayjs": "1.8.19",
    "dotenv": "8.2.0",
+    "es6-object-assign": "1.1.0",
+    "es6-symbol": "3.1.3",
    "eslint-plugin-jest": "23.13.2",
    "eslint-plugin-react": "7.20.0",
    "hasher": "1.2.0",
    "html2canvas": "1.0.0-rc.5",
    "i18next": "19.8.4",
    "i18next-browser-languagedetector": "6.0.1",
-    "i18next-http-backend": "1.2.1",
+    "i18next-http-backend": "1.0.23",
    "immutable": "4.0.0-rc.12",
    "is-ci": "2.0.0",
    "jquery": "3.5.1",
@@ -75,9 +79,12 @@
    "monaco-editor": "0.18.1",
    "ms": "2.1.3",
    "msal": "1.4.4",
+    "object.entries": "1.1.0",
    "office-ui-fabric-react": "7.164.2",
    "p-retry": "4.2.0",
    "plotly.js-cartesian-dist-min": "1.52.3",
+    "promise-polyfill": "8.1.0",
+    "promise.prototype.finally": "3.1.0",
    "q": "1.5.1",
    "react": "16.13.1",
    "react-animate-height": "2.0.8",
@@ -94,9 +101,13 @@
    "rxjs": "6.6.3",
    "styled-components": "4.3.2",
    "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
+    "text-encoding": "0.7.0",
    "underscore": "1.9.1",
-    "utility-types": "3.10.0"
+    "url-polyfill": "1.1.7",
+    "utility-types": "3.10.0",
+    "webcrypto-liner": "1.1.4",
+    "webfontloader": "1.6.28",
+    "whatwg-fetch": "3.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
@@ -126,7 +137,9 @@
    "@types/react-redux": "7.1.7",
    "@types/sinon": "2.3.3",
    "@types/styled-components": "5.1.1",
+    "@types/text-encoding": "0.0.33",
    "@types/underscore": "1.7.36",
+    "@types/webfontloader": "1.6.29",
    "@typescript-eslint/eslint-plugin": "4.0.1",
    "@typescript-eslint/parser": "4.0.1",
    "axe-puppeteer": "1.1.0",
@@ -168,6 +181,7 @@
    "rimraf": "3.0.0",
    "sinon": "3.2.1",
    "style-loader": "0.23.0",
+    "terser-webpack-plugin": "3.0.5",
    "ts-loader": "6.2.2",
    "tslint": "5.11.0",
    "tslint-microsoft-contrib": "6.0.0",
@@ -224,4 +238,4 @@
  "prettier": {
    "printWidth": 120
  }
-}
+}
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -98,6 +98,31 @@ export class CapabilityNames {
  public static readonly EnableServerless: string = "EnableServerless";
 }

+export class Features {
+  public static readonly cosmosdb = "cosmosdb";
+  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static readonly enableTtl = "enablettl";
+  public static readonly enableNotebooks = "enablenotebooks";
+  public static readonly enableSpark = "enablespark";
+  public static readonly livyEndpoint = "livyendpoint";
+  public static readonly notebookServerUrl = "notebookserverurl";
+  public static readonly notebookServerToken = "notebookservertoken";
+  public static readonly notebookBasePath = "notebookbasepath";
+  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly ttl90Days = "ttl90days";
+  public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly enableSchema = "enableschema";
+  public static readonly enableSDKoperations = "enablesdkoperations";
+  public static readonly showMinRUSurvey = "showminrusurvey";
+  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
+  public static readonly selfServeType = "selfservetype";
+  public static readonly enableKOPanel = "enablekopanel";
+  public static readonly enableReactPane = "enablereactpane";
+}
+
 // flight names returned from the portal are always lowercase
 export class Flights {
  public static readonly SettingsV2 = "settingsv2";
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -376,6 +376,7 @@ export interface DataExplorerInputsFrame {
  masterKey?: string;
  hasWriteAccess?: boolean;
  authorizationToken?: string;
+  features: { [key: string]: string };
  csmEndpoint?: string;
  dnsSuffix?: string;
  serverId?: string;
--- a/src/Explorer/ComponentRegisterer.ts
+++ b/src/Explorer/ComponentRegisterer.ts
@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import * as PaneComponents from "./Panes/PaneComponents";
+import * as TabComponents from "./Tabs/TabComponents";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
@@ -8,25 +9,9 @@ import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleCompo
 import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
 import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
+import { TabsManagerKOComponent } from "./Tabs/TabsManager";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";

-import DocumentsTab from "./Tabs/DocumentsTab";
-import StoredProcedureTab from "./Tabs/StoredProcedureTab";
-import TriggerTab from "./Tabs/TriggerTab";
-import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
-import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
-import QueryTab from "./Tabs/QueryTab";
-import QueryTablesTab from "./Tabs/QueryTablesTab";
-import GraphTab from "./Tabs/GraphTab";
-import MongoShellTab from "./Tabs/MongoShellTab";
-import ConflictsTab from "./Tabs/ConflictsTab";
-import NotebookTabV2 from "./Tabs/NotebookV2Tab";
-import TerminalTab from "./Tabs/TerminalTab";
-import GalleryTab from "./Tabs/GalleryTab";
-import NotebookViewerTab from "./Tabs/NotebookViewerTab";
-import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
-import TabsManagerTemplate from "./Tabs/TabsManager.html";
-
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
 ko.components.register("error-display", new ErrorDisplayComponent());
@@ -36,27 +21,28 @@ ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-ko.components.register("tabs-manager", { template: TabsManagerTemplate });
+ko.components.register("tabs-manager", TabsManagerKOComponent());

 // Collection Tabs
-[
-  DocumentsTab,
-  StoredProcedureTab,
-  TriggerTab,
-  UserDefinedFunctionTab,
-  SettingsTabV2,
-  QueryTab,
-  QueryTablesTab,
-  GraphTab,
-  MongoShellTab,
-  ConflictsTab,
-  NotebookTabV2,
-  TerminalTab,
-  GalleryTab,
-  NotebookViewerTab,
-  DatabaseSettingsTab,
-  DatabaseSettingsTabV2,
-].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
+ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
+ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
+ko.components.register("trigger-tab", new TabComponents.TriggerTab());
+ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
+ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
+ko.components.register("query-tab", new TabComponents.QueryTab());
+ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
+ko.components.register("graph-tab", new TabComponents.GraphTab());
+ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
+ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
+ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
+ko.components.register("terminal-tab", new TabComponents.TerminalTab());
+ko.components.register("gallery-tab", new TabComponents.GalleryTab());
+ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
+
+// Database Tabs
+ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());

 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -139,7 +139,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      this.shouldShowIndexingPolicyEditor =
        this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();

-      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );

      // Mongo container with system partition key still treat as "Fixed"
      this.isFixedContainer =
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -12,6 +12,7 @@ import {
  TextField,
 } from "office-ui-fabric-react";
 import React from "react";
+import { Features } from "../../../../../Common/Constants";
 import * as DataModels from "../../../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
 import * as SharedConstants from "../../../../../Shared/Constants";
@@ -464,7 +465,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
    const oneTBinKB = 1000000000;
    const minRUperGB = 10;
-    const featureFlagEnabled = userContext.features.showMinRUSurvey;
+    const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
    const collectionIsEligible =
      userContext.subscriptionType !== SubscriptionType.Internal &&
      this.props.usageSizeInKB > oneTBinKB &&
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -895,6 +895,7 @@ exports[`SettingsComponent renders 1`] = `
                  "validPartitionKeyValue": [Function],
                  "visible": [Function],
                },
+                "features": [Function],
                "flight": [Function],
                "graphStylingPane": GraphStylingPane {
                  "container": [Circular],
@@ -2091,6 +2092,7 @@ exports[`SettingsComponent renders 1`] = `
                "validPartitionKeyValue": [Function],
                "visible": [Function],
              },
+              "features": [Function],
              "flight": [Function],
              "graphStylingPane": GraphStylingPane {
                "container": [Circular],
@@ -3300,6 +3302,7 @@ exports[`SettingsComponent renders 1`] = `
                  "validPartitionKeyValue": [Function],
                  "visible": [Function],
                },
+                "features": [Function],
                "flight": [Function],
                "graphStylingPane": GraphStylingPane {
                  "container": [Circular],
@@ -4496,6 +4499,7 @@ exports[`SettingsComponent renders 1`] = `
                "validPartitionKeyValue": [Function],
                "visible": [Function],
              },
+              "features": [Function],
              "flight": [Function],
              "graphStylingPane": GraphStylingPane {
                "container": [Circular],
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -329,7 +329,7 @@ export default class Explorer {
            this.isNotebookEnabled(
              userContext.authType !== AuthType.ResourceToken &&
                ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
-                  userContext.features.enableNotebooks)
+                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
            );

            TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
@@ -351,7 +351,7 @@ export default class Explorer {
                this.isSparkEnabledForAccount() &&
                this.arcadiaWorkspaces() &&
                this.arcadiaWorkspaces().length > 0) ||
-                userContext.features.enableSpark
+                this.isFeatureEnabled(Constants.Features.enableSpark)
            );
            if (this.isSparkEnabled()) {
              appInsights.trackEvent(
@@ -375,6 +375,7 @@ export default class Explorer {
    });
    this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();

+    this.features = ko.observable();
    this.queriesClient = new QueriesClient(this);

    this.resourceTokenDatabaseId = ko.observable<string>();
@@ -386,9 +387,11 @@ export default class Explorer {
    this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
    this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);

-    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
+    this.canExceedMaximumValue = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
+    );

-    this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
+    this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));

    this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);

@@ -468,7 +471,7 @@ export default class Explorer {
    });

    this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
-      if (userContext.features.enableFixedCollectionWithSharedThroughput) {
+      if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
        return true;
      }

@@ -527,7 +530,9 @@ export default class Explorer {
      () =>
        configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
    );
-    this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
+    this.isRightPanelV2Enabled = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.enableRightPanelV2)
+    );
    this.defaultExperience.subscribe((defaultExperience: string) => {
      if (
        defaultExperience &&
@@ -878,29 +883,42 @@ export default class Explorer {
    });

    // Override notebook server parameters from URL parameters
-    if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
-      this.notebookServerInfo({
-        notebookServerEndpoint: userContext.features.notebookServerUrl,
-        authToken: userContext.features.notebookServerToken,
-      });
-    }
+    const featureSubcription = this.features.subscribe((features) => {
+      const serverInfo = this.notebookServerInfo();
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
+        serverInfo.notebookServerEndpoint = features[Constants.Features.notebookServerUrl];
+      }

-    if (userContext.features.notebookBasePath) {
-      this.notebookBasePath(userContext.features.notebookBasePath);
-    }
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        serverInfo.authToken = features[Constants.Features.notebookServerToken];
+      }
+      this.notebookServerInfo(serverInfo);
+      this.notebookServerInfo.valueHasMutated();

-    if (userContext.features.livyEndpoint) {
-      this.sparkClusterConnectionInfo({
-        userName: undefined,
-        password: undefined,
-        endpoints: [
-          {
-            endpoint: userContext.features.livyEndpoint,
-            kind: DataModels.SparkClusterEndpointKind.Livy,
-          },
-        ],
-      });
-    }
+      if (this.isFeatureEnabled(Constants.Features.notebookBasePath)) {
+        this.notebookBasePath(features[Constants.Features.notebookBasePath]);
+      }
+
+      if (this.isFeatureEnabled(Constants.Features.livyEndpoint)) {
+        this.sparkClusterConnectionInfo({
+          userName: undefined,
+          password: undefined,
+          endpoints: [
+            {
+              endpoint: features[Constants.Features.livyEndpoint],
+              kind: DataModels.SparkClusterEndpointKind.Livy,
+            },
+          ],
+        });
+        this.sparkClusterConnectionInfo.valueHasMutated();
+      }
+
+      if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
+        updateUserContext({ useSDKOperations: true });
+      }
+
+      featureSubcription.dispose();
+    });
  }

  public openEnableSynapseLinkDialog(): void {
@@ -984,6 +1002,20 @@ export default class Explorer {
    return this.selectedNode() == null;
  }

+  public isFeatureEnabled(feature: string): boolean {
+    const features = this.features();
+
+    if (!features) {
+      return false;
+    }
+
+    if (feature in features && features[feature]) {
+      return true;
+    }
+
+    return false;
+  }
+
  public logConsoleData(consoleData: ConsoleData): void {
    this.setNotificationConsoleData(consoleData);
  }
@@ -1226,12 +1258,12 @@ export default class Explorer {
      throw error;
    } finally {
      // Overwrite with feature flags
-      if (userContext.features.notebookServerUrl) {
-        connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
+        connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
      }

-      if (userContext.features.notebookServerToken) {
-        connectionInfo.authToken = userContext.features.notebookServerToken;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
      }

      this.notebookServerInfo(connectionInfo);
@@ -1381,6 +1413,7 @@ export default class Explorer {
      if (inputs.defaultCollectionThroughput) {
        this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
      }
+      this.features(inputs.features);
      this.databaseAccount(databaseAccount);
      this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
      this.hasWriteAccess(inputs.hasWriteAccess ?? true);
@@ -2334,7 +2367,7 @@ export default class Explorer {
  public onNewCollectionClicked(): void {
    if (this.isPreferredApiCassandra()) {
      this.cassandraAddCollectionPane.open();
-    } else if (userContext.features.enableReactPane) {
+    } else if (this.isFeatureEnabled(Constants.Features.enableReactPane)) {
      this.openAddCollectionPanel();
    } else {
      this.addCollectionPane.open(this.selectedDatabaseId());
@@ -2468,7 +2501,7 @@ export default class Explorer {
  }

  public openDeleteCollectionConfirmationPane(): void {
-    userContext.features.enableKOPanel
+    this.isFeatureEnabled(Constants.Features.enableKOPanel)
      ? this.deleteCollectionConfirmationPane.open()
      : this.openSidePanel(
          "Delete Collection",
--- a/src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
@@ -4,8 +4,11 @@
 * - inspired from gremlin-javascript for nodejs: https://github.com/jbmusso/gremlin-javascript
 * - tested on cosmosdb gremlin server
 * - only supports sessionless gremlin requests
+ * - Relies on text-encoding polyfill (github.com/inexorabletash/text-encoding) for TextEncoder/TextDecoder on IE, Edge.
 */

+import { TextEncoder, TextDecoder } from "text-encoding";
+
 export interface GremlinSimpleClientParameters {
  endpoint: string; // The websocket endpoint
  user: string;
--- a/src/Explorer/Panes/AddCollectionPane.ts
+++ b/src/Explorer/Panes/AddCollectionPane.ts
@@ -994,7 +994,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
    this.container.openEnableSynapseLinkDialog();
  }

-  public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
+  public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);

  public isValid(): boolean {
    // TODO add feature flag that disables validation for customers with custom accounts
@@ -1202,7 +1202,7 @@ export default class AddCollectionPane extends ContextualPaneBase {

    if (this.isAnalyticalStorageOn()) {
      // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
+      return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
        ? Constants.AnalyticalStorageTtl.Days90
        : Constants.AnalyticalStorageTtl.Infinite;
    }
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -905,7 +905,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,

    if (this.state.enableAnalyticalStore) {
      // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
+      return this.props.explorer.isFeatureEnabled(Constants.Features.ttl90Days)
        ? Constants.AnalyticalStorageTtl.Days90
        : Constants.AnalyticalStorageTtl.Infinite;
    }
--- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
@@ -1,17 +1,17 @@
 import * as ko from "knockout";
-import { KeyCodes } from "../../../Common/Constants";
-import * as Constants from "../Constants";
+import * as CustomTimestampHelper from "./CustomTimestampHelper";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
-import * as DataTableUtilities from "../DataTable/DataTableUtilities";
-import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
-import * as TableEntityProcessor from "../TableEntityProcessor";
-import * as Utilities from "../Utilities";
+import QueryClauseViewModel from "./QueryClauseViewModel";
 import ClauseGroup from "./ClauseGroup";
 import ClauseGroupViewModel from "./ClauseGroupViewModel";
-import * as CustomTimestampHelper from "./CustomTimestampHelper";
-import * as DateTimeUtilities from "./DateTimeUtilities";
-import QueryClauseViewModel from "./QueryClauseViewModel";
 import QueryViewModel from "./QueryViewModel";
+import * as Constants from "../Constants";
+import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
+import * as DateTimeUtilities from "./DateTimeUtilities";
+import * as DataTableUtilities from "../DataTable/DataTableUtilities";
+import * as TableEntityProcessor from "../TableEntityProcessor";
+import * as Utilities from "../Utilities";
+import { KeyCodes } from "../../../Common/Constants";

 export default class QueryBuilderViewModel {
  /* Labels */
@@ -182,7 +182,7 @@ export default class QueryBuilderViewModel {
            value = `["${TableEntityProcessor.keyProperties.PartitionKey}"]`;
            filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
          } else if (value === Constants.EntityKeyNames.RowKey) {
-            value = `["${TableEntityProcessor.keyProperties.Id}"]`;
+            value = `["${TableEntityProcessor.keyProperties.Id2}"]`;
            filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
          } else {
            if (value === Constants.EntityKeyNames.Timestamp) {
--- a/src/Explorer/Tables/TableEntityProcessor.ts
+++ b/src/Explorer/Tables/TableEntityProcessor.ts
@@ -1,6 +1,6 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import * as Constants from "./Constants";
 import * as Entities from "./Entities";
+import * as Constants from "./Constants";
 import * as DateTimeUtilities from "./QueryBuilder/DateTimeUtilities";

 // For use exclusively with Tables API.
@@ -36,7 +36,7 @@ export function convertDocumentsToEntities(documents: any[]): Entities.ITableEnt
  let results: Entities.ITableEntityForTablesAPI[] = [];
  documents &&
    documents.forEach((document) => {
-      if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id)) {
+      if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id2)) {
        //Document does not match the current required format for Tables, so we ignore it
        return; // The rest of the key properties should be guaranteed as DocumentDB properties
      }
--- a/src/Explorer/Tabs/ConflictsTab.ts
+++ b/src/Explorer/Tabs/ConflictsTab.ts
@@ -26,10 +26,8 @@ import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
 import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
-import template from "./ConflictsTab.html";

 export default class ConflictsTab extends TabsBase {
-  public static readonly component = { name: "conflicts-tab", template };
  public selectedConflictId: ko.Observable<ConflictId>;
  public selectedConflictContent: ViewModels.Editable<string>;
  public selectedConflictCurrent: ViewModels.Editable<string>;
--- a/src/Explorer/Tabs/DatabaseSettingsTab.ts
+++ b/src/Explorer/Tabs/DatabaseSettingsTab.ts
@@ -17,7 +17,6 @@ import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
 import * as PricingUtils from "../../Utils/PricingUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer";
-import template from "./DatabaseSettingsTab.html";
 import TabsBase from "./TabsBase";

 const updateThroughputBeyondLimitWarningMessage: string = `
@@ -45,7 +44,6 @@ const throughputApplyLongDelayMessage = (isAutoscale: boolean, throughput: numbe
  Database: ${databaseName}, ${currentThroughput(isAutoscale, throughput)}`;

 export default class DatabaseSettingsTab extends TabsBase implements ViewModels.WaitsForTemplate {
-  public static readonly component = { name: "database-settings-tab", template };
  // editables
  public isAutoPilotSelected: ViewModels.Editable<boolean>;
  public throughput: ViewModels.Editable<number>;
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -37,10 +37,8 @@ import { readDocument } from "../../Common/dataAccess/readDocument";
 import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import { createDocument } from "../../Common/dataAccess/createDocument";
-import template from "./DocumentsTab.html";

 export default class DocumentsTab extends TabsBase {
-  public static readonly component = { name: "documents-tab", template };
  public selectedDocumentId: ko.Observable<DocumentId>;
  public selectedDocumentContent: ViewModels.Editable<string>;
  public initialDocumentContent: ko.Observable<string>;
@@ -882,6 +880,8 @@ export default class DocumentsTab extends TabsBase {
      buttons.push(DocumentsTab._createUploadButton(this.collection.container));
    }

+    const features = this.collection.container.features() || {};
+
    return buttons;
  }

--- a/src/Explorer/Tabs/GalleryTab.tsx
+++ b/src/Explorer/Tabs/GalleryTab.tsx
@@ -6,7 +6,6 @@ import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { JunoClient, IGalleryItem } from "../../Juno/JunoClient";
-import template from "./GalleryTab.html";

 interface GalleryTabOptions extends ViewModels.TabOptions {
  account: DatabaseAccount;
@@ -22,7 +21,6 @@ interface GalleryTabOptions extends ViewModels.TabOptions {
 * Notebook gallery tab
 */
 export default class GalleryTab extends TabsBase {
-  public static readonly component = { name: "gallery-tab", template };
  private container: Explorer;
  private galleryAndNotebookViewerComponentProps: GalleryAndNotebookViewerComponentProps;
  public galleryAndNotebookViewerComponentAdapter: GalleryAndNotebookViewerComponentAdapter;
--- a/src/Explorer/Tabs/GraphTab.ts
+++ b/src/Explorer/Tabs/GraphTab.ts
@@ -10,7 +10,6 @@ import GraphStylingPane from "../Panes/GraphStylingPane";
 import NewVertexPane from "../Panes/NewVertexPane";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./GraphTab.html";

 export interface GraphIconMap {
  [key: string]: { data: string; format: string };
@@ -37,7 +36,6 @@ interface GraphTabOptions extends ViewModels.TabOptions {
 }

 export default class GraphTab extends TabsBase {
-  public static readonly component = { name: "graph-tab", template };
  // Graph default configuration
  public static readonly DEFAULT_NODE_CAPTION = "id";
  private static readonly LINK_COLOR = "#aaa";
--- a/src/Explorer/Tabs/MongoDocumentsTab.html
+++ b/src/Explorer/Tabs/MongoDocumentsTab.html
@@ -0,0 +1,426 @@
+<div
+  class="tab-pane active tabdocuments flexContainer"
+  data-bind="
+    attr:{
+        id: tabId
+    },
+    visible: isActive"
+  role="tabpanel"
+>
+  <!-- Documents Tab Command Bar - Start -->
+  <div class="contentdiv">
+    <div class="tabCommandButton documentMenu">
+      <!-- New Document - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onNewDocumentClick,
+                    visible: newDocumentButton.visible() && newDocumentButton.enabled()"
+      >
+        <img class="commandIcon" src="/createDoc.svg" />New Document
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: newDocumentButton.visible() && !newDocumentButton.enabled()"
+      >
+        <img class="commandIcon" src="/createDoc-disabled.svg" />New Document
+      </span>
+      <!-- New Document - End -->
+
+      <!-- New Query - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    visible: !$root.isPreferredApiMongoDB,
+                click: collection.onNewQueryClick"
+      >
+        <img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New SQL Query
+      </span>
+      <span
+        class="commandButton"
+        data-bind="
+                visible: $root.isPreferredApiMongoDB,
+                click: collection.onNewMongoQueryClick"
+      >
+        <img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New Query
+      </span>
+      <!-- New Query - End -->
+
+      <!-- Save New - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onSaveNewDocumentClick,
+                    visible: saveNewDocumentButton.visible() && saveNewDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-cosmos.svg" />Save
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: saveNewDocumentButton.visible() && !saveNewDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-disabled.svg" />Save
+      </span>
+      <!-- Save New - End -->
+
+      <!-- Discard New - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onRevertNewDocumentClick,
+                    visible: discardNewDocumentChangesButton.visible() && discardNewDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard.svg" />Discard
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: discardNewDocumentChangesButton.visible() && !discardNewDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard-disabled.svg" />Discard
+      </span>
+      <!-- Discard New - End -->
+
+      <!-- Save Exisiting - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onSaveExisitingDocumentClick,
+                    visible: saveExisitingDocumentButton.visible() && saveExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-cosmos.svg" />Update
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: saveExisitingDocumentButton.visible() && !saveExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-disabled.svg" />Update
+      </span>
+      <!-- Save Exisiting - End -->
+
+      <!-- Discard Exisiting - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onRevertExisitingDocumentClick,
+                    visible: discardExisitingDocumentChangesButton.visible() && discardExisitingDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard.svg" />Discard
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: discardExisitingDocumentChangesButton.visible() && !discardExisitingDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard-disabled.svg" />Discard
+      </span>
+      <!-- Discard Exisiting - End -->
+
+      <!-- Delete Exisiting - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onDeleteExisitingDocumentClick,
+                    visible: deleteExisitingDocumentButton.visible() && deleteExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/delete.svg" />Delete
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: deleteExisitingDocumentButton.visible() && !deleteExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/delete-disabled.svg" />Delete
+      </span>
+      <!-- Delete Exisiting - End -->
+    </div>
+  </div>
+  <script type="text/html" id="toolbarItemTemplate">
+    <!-- ko if: type === "action" -->
+    <div class="toolbar-group" data-bind="visible: visible">
+      <button
+        class="toolbar-group-button"
+        data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
+      >
+        <div class="toolbar-group-button-icon">
+          <div class="toolbar_icon" data-bind="icon: icon"></div>
+        </div>
+        <span data-bind="text: displayName"></span>
+      </button>
+    </div>
+    <!-- /ko -->
+
+    <!-- ko if: type === "toggle" -->
+    <div class="toolbar-group" data-bind="visible: visible">
+      <button
+        class="toolbar-group-button toggle-button"
+        data-bind="hasFocus: focused, attr: {id: id, title: title}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
+      >
+        <div class="toolbar-group-button-icon" data-bind="css: { 'toggle-checked': checked }">
+          <div class="toolbar_icon" data-bind="icon: icon"></div>
+        </div>
+        <span data-bind="text: displayName"></span>
+      </button>
+    </div>
+    <!-- /ko -->
+    <!-- ko if: type === "dropdown" -->
+    <div class="toolbar-group" data-bind="visible: visible">
+      <div class="dropdown" data-bind="attr: {id: (id + '-dropdown')}">
+        <button
+          role="menu"
+          class="toolbar-group-button"
+          data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName},  event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
+        >
+          <div class="toolbar-group-button-icon">
+            <div class="toolbar_icon" data-bind="icon: icon"></div>
+          </div>
+          <span data-bind="text: displayName"></span>
+        </button>
+      </div>
+    </div>
+    <!-- /ko -->
+
+    <!-- ko if: type === "separator" -->
+    <div class="toolbar-group vertical-separator" data-bind="visible: visible"></div>
+    <!-- /ko -->
+  </script>
+  <!-- Documents Tab Command Bar - End -->
+  <!-- ko if: false -->
+  <!-- Messagebox Ok Cancel- Start -->
+  <div class="messagebox-background">
+    <div class="messagebox">
+      <h2 class="messagebox-title">Title</h2>
+      <div class="messagebox-text" tabindex="0">Text</div>
+      <div class="messagebox-buttons">
+        <div class="messagebox-buttons-container">
+          <button value="ok" class="messagebox-button-primary">Ok</button>
+          <button value="cancel" class="messagebox-button-default">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Messagebox OK Cancel - End -->
+  <!-- /ko -->
+
+  <!-- Filter - Start -->
+  <div class="filterdivs">
+    <!-- Read-only Filter - Start -->
+    <div
+      class="filterDocCollapsed"
+      data-bind="
+                visible: !isFilterExpanded() && !$root.isPreferredApiMongoDB()"
+    >
+      SELECT * FROM c
+      <span
+        data-bind="
+                    text: appliedFilter"
+      ></span>
+      <button
+        class="filterbtnstyle queryButton"
+        data-bind="
+                    click: onShowFilterClick"
+      >
+        Edit Filter
+      </button>
+    </div>
+    <div
+      class="filterDocCollapsed"
+      data-bind="
+                visible: !isFilterExpanded() && $root.isPreferredApiMongoDB()"
+    >
+      <span
+        data-bind="
+                visible: appliedFilter().length > 0"
+        >Filter :
+      </span>
+      <span
+        data-bind="
+                visible: !appliedFilter().length > 0"
+        >No filter applied</span
+      >
+      <span
+        data-bind="
+                text: appliedFilter"
+      ></span>
+      <button
+        class="filterbtnstyle queryButton"
+        data-bind="
+                    click: onShowFilterClick"
+      >
+        Edit Filter
+      </button>
+    </div>
+    <!-- Read-only Filter - End -->
+
+    <!-- Editable Filter - start -->
+    <div
+      class="filterDocExpanded"
+      data-bind="
+                visible: isFilterExpanded"
+    >
+      <div>
+        <div>
+          <span
+            class="filterspan"
+            data-bind="
+                        visible: !$root.isPreferredApiMongoDB()"
+          >
+            SELECT * FROM c
+          </span>
+
+          <input
+            type="text"
+            list="filtersList"
+            class="querydropdown"
+            title="Type a query predicate or choose one from the list."
+            data-bind="
+                                attr:{
+                                    placeholder:$root.isPreferredApiMongoDB()?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
+                                },
+                                textInput: filterContent"
+          />
+
+          <datalist
+            id="filtersList"
+            data-bind="
+                            foreach: lastFilterContents"
+          >
+            <option
+              data-bind="
+                                value: $data"
+            ></option>
+          </datalist>
+
+          <span class="filterbuttonpad">
+            <button
+              class="filterbtnstyle queryButton"
+              data-bind="
+                                click: refreshDocumentsGrid,
+                                enable: applyFilterButton.enabled"
+            >
+              Apply Filter
+            </button>
+          </span>
+          <span
+            class="filterclose"
+            data-bind="
+                            click: onHideFilterClick"
+          >
+            <img src="/close-black.svg" style="height: 14px; width: 14px" />
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- Editable Filter - End -->
+  </div>
+  <!-- Filter - End -->
+
+  <!-- Ids and Editor - Start -->
+  <div>
+    <div class="row rowoverride documentsTabGridAndEditor">
+      <div class="documentsGridHeaderContainer documentsContainer">
+        <!-- ko if: !partitionKeyProperty -->
+        <table>
+          <tbody>
+            <tr>
+              <!-- ko if: $root.isPreferredApiMongoDB -->
+              <td class="documentsGridHeader">_id</td>
+              <!-- /ko -->
+              <!-- ko if: !$root.isPreferredApiMongoDB() -->
+              <td class="documentsGridHeader">id</td>
+              <!-- /ko -->
+              <td class="refreshColHeader">
+                <img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <!-- /ko -->
+
+        <!-- ko if: partitionKeyProperty -->
+        <table>
+          <tbody>
+            <tr>
+              <td class="documentsGridHeader fixedWidthHeader">_id</td>
+              <td
+                class="documentsGridHeader documentsGridPartition"
+                data-bind="
+                                attr: {
+                                    title: partitionKeyPropertyHeader
+                                },
+                                text: partitionKeyPropertyHeader"
+              ></td>
+              <td class="refreshColHeader">
+                <img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <!-- /ko -->
+      </div>
+      <!-- Document Ids - Start -->
+      <div
+        class="tabdocuments scrollable"
+        data-bind="
+                attr: { 
+                    id: documentContentsGridId,
+                    tabindex: collection.documentIds().length <= 0 ? -1 : 0
+                },
+                style: { height: dataContentsGridScrollHeight },
+                event: { keydown: accessibleDocumentList.onKeyDown }"
+      >
+        <table class="table can-select table-hover dataTable">
+          <tbody id="tbodycontent">
+            <!-- ko foreach: documentIds -->
+            <tr
+              class="pointer accessibleListElement"
+              data-bind="
+                                click: $data.click,
+                                css: {
+                                    gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
+                                    gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
+                                }"
+            >
+              <td style="width: 82px">
+                <a
+                  data-bind="
+                                    text: $data.id, attr: { title: $data.id }"
+                ></a>
+              </td>
+              <!-- ko if: $data.partitionKeyProperty -->
+              <td><a data-bind="text: $data.partitionKeyValue, attr: { title: $data.partitionKeyValue }"></a></td>
+              <!-- /ko -->
+            </tr>
+            <!-- /ko -->
+          </tbody>
+        </table>
+
+        <div class="loadMore">
+          <a role="button" data-bind="click: loadNextPage, event: { keypress: onLoadMoreKeyInput }" tabindex="0"
+            >Load more</a
+          >
+        </div>
+      </div>
+      <!-- Document Ids - End -->
+
+      <!-- Editor - Start -->
+      <div id="divcontent" style="float: left; width: calc(100% - 200px)">
+        <div
+          style="height: 100vh; border-left: 1px solid #d6d7d8; float: initial; display: flow-root !important"
+          data-bind="
+                    attr: {
+                        id: documentEditorId
+                    },
+                    css: {
+                        mongoDocumentEditor:$root.isPreferredApiMongoDB()
+                    }"
+        ></div>
+      </div>
+      <!-- Editor - End -->
+    </div>
+  </div>
+  <!-- Ids and Editor - End -->
+</div>
--- a/src/Explorer/Tabs/MongoQueryTab.ts
+++ b/src/Explorer/Tabs/MongoQueryTab.ts
@@ -5,10 +5,8 @@ import QueryTab from "./QueryTab";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { queryIterator } from "../../Common/MongoProxyClient";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
-import template from "./MongoQueryTab.html";

 export default class MongoQueryTab extends QueryTab {
-  public static readonly component = { name: "mongo-query-tab", template };
  public collection: ViewModels.Collection;

  constructor(options: ViewModels.QueryTabOptions) {
--- a/src/Explorer/Tabs/MongoShellTab.ts
+++ b/src/Explorer/Tabs/MongoShellTab.ts
@@ -9,12 +9,10 @@ import { userContext } from "../../UserContext";
 import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import template from "./MongoShellTab.html";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import TabsBase from "./TabsBase";

 export default class MongoShellTab extends TabsBase {
-  public static readonly component = { name: "mongo-shell-tab", template };
  public url: ko.Computed<string>;
  private _container: Explorer;
  private _runtimeEndpoint: string;
--- a/src/Explorer/Tabs/NotebookV2Tab.ts
+++ b/src/Explorer/Tabs/NotebookV2Tab.ts
@@ -33,7 +33,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { toJS, stringifyNotebook } from "@nteract/commutable";
 import { appInsights } from "../../Shared/appInsights";
 import { userContext } from "../../UserContext";
-import template from "./NotebookV2Tab.html";

 export interface NotebookTabOptions extends ViewModels.TabOptions {
  account: DataModels.DatabaseAccount;
@@ -43,7 +42,6 @@ export interface NotebookTabOptions extends ViewModels.TabOptions {
 }

 export default class NotebookTabV2 extends TabsBase {
-  public static readonly component = { name: "notebookv2-tab", template };
  private static clientManager: NotebookClientV2;
  private container: Explorer;
  public notebookPath: ko.Observable<string>;
--- a/src/Explorer/Tabs/NotebookViewerTab.tsx
+++ b/src/Explorer/Tabs/NotebookViewerTab.tsx
@@ -10,7 +10,6 @@ import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./NotebookViewerTab.html";

 interface NotebookViewerTabOptions extends ViewModels.TabOptions {
  account: DatabaseAccount;
@@ -39,7 +38,6 @@ class NotebookViewerComponentAdapter implements ReactAdapter {
 }

 export default class NotebookViewerTab extends TabsBase {
-  public static readonly component = { name: "notebook-viewer-tab", template };
  private container: Explorer;
  public notebookUrl: string;

--- a/src/Explorer/Tabs/QueryTab.ts
+++ b/src/Explorer/Tabs/QueryTab.ts
@@ -17,7 +17,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
-import template from "./QueryTab.html";

 enum ToggleState {
  Result,
@@ -25,7 +24,6 @@ enum ToggleState {
 }

 export default class QueryTab extends TabsBase implements ViewModels.WaitsForTemplate {
-  public static readonly component = { name: "query-tab", template };
  public queryEditorId: string;
  public executeQueryButton: ViewModels.Button;
  public fetchNextPageButton: ViewModels.Button;
--- a/src/Explorer/Tabs/QueryTablesTab.ts
+++ b/src/Explorer/Tabs/QueryTablesTab.ts
@@ -15,11 +15,9 @@ import EditEntityIcon from "../../../images/Edit-entity.svg";
 import DeleteEntitiesIcon from "../../../images/DeleteEntities.svg";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./QueryTablesTab.html";

 // Will act as table explorer class
 export default class QueryTablesTab extends TabsBase {
-  public static readonly component = { name: "tables-query-tab", template };
  public collection: ViewModels.Collection;
  public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
  public queryViewModel = ko.observable<QueryViewModel>();
--- a/src/Explorer/Tabs/SettingsTabV2.tsx
+++ b/src/Explorer/Tabs/SettingsTabV2.tsx
@@ -9,10 +9,8 @@ import * as Constants from "../../Common/Constants";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./SettingsTabV2.html";

 export class SettingsTabV2 extends TabsBase {
-  public static readonly component = { name: "collection-settings-tab-v2", template };
  public settingsComponentAdapter: SettingsComponentAdapter;

  constructor(options: ViewModels.TabOptions) {
@@ -89,7 +87,6 @@ export class CollectionSettingsTabV2 extends SettingsTabV2 {
 }

 export class DatabaseSettingsTabV2 extends SettingsTabV2 {
-  public static readonly component = { name: "database-settings-tab-v2", template };
  private notificationRead: ko.Observable<boolean>;
  private notification: DataModels.Notification;

--- a/src/Explorer/Tabs/StoredProcedureTab.ts
+++ b/src/Explorer/Tabs/StoredProcedureTab.ts
@@ -14,7 +14,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import StoredProcedure from "../Tree/StoredProcedure";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./StoredProcedureTab.html";

 enum ToggleState {
  Result = "result",
@@ -22,7 +21,6 @@ enum ToggleState {
 }

 export default class StoredProcedureTab extends ScriptTabBase {
-  public static readonly component = { name: "stored-procedure-tab", template };
  public collection: ViewModels.Collection;
  public node: StoredProcedure;
  public executeResultsEditorId: string;
--- a/src/Explorer/Tabs/TabComponents.ts
+++ b/src/Explorer/Tabs/TabComponents.ts
@@ -0,0 +1,186 @@
+import DocumentsTabTemplate from "./DocumentsTab.html";
+import ConflictsTabTemplate from "./ConflictsTab.html";
+import GraphTabTemplate from "./GraphTab.html";
+import NotebookV2TabTemplate from "./NotebookV2Tab.html";
+import TerminalTabTemplate from "./TerminalTab.html";
+import MongoDocumentsTabTemplate from "./MongoDocumentsTab.html";
+import MongoQueryTabTemplate from "./MongoQueryTab.html";
+import MongoShellTabTemplate from "./MongoShellTab.html";
+import QueryTabTemplate from "./QueryTab.html";
+import QueryTablesTabTemplate from "./QueryTablesTab.html";
+import SettingsTabV2Template from "./SettingsTabV2.html";
+import DatabaseSettingsTabTemplate from "./DatabaseSettingsTab.html";
+import StoredProcedureTabTemplate from "./StoredProcedureTab.html";
+import TriggerTabTemplate from "./TriggerTab.html";
+import UserDefinedFunctionTabTemplate from "./UserDefinedFunctionTab.html";
+import GalleryTabTemplate from "./GalleryTab.html";
+import NotebookViewerTabTemplate from "./NotebookViewerTab.html";
+import TabsManagerTemplate from "./TabsManager.html";
+
+export class TabComponent {
+  constructor(data: any) {
+    return data.data;
+  }
+}
+
+export class TabsManager {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: TabsManagerTemplate,
+    };
+  }
+}
+
+export class DocumentsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: DocumentsTabTemplate,
+    };
+  }
+}
+
+export class ConflictsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: ConflictsTabTemplate,
+    };
+  }
+}
+
+export class GraphTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: GraphTabTemplate,
+    };
+  }
+}
+
+export class NotebookV2Tab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: NotebookV2TabTemplate,
+    };
+  }
+}
+
+export class TerminalTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: TerminalTabTemplate,
+    };
+  }
+}
+
+export class MongoDocumentsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: MongoDocumentsTabTemplate,
+    };
+  }
+}
+
+export class MongoQueryTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: MongoQueryTabTemplate,
+    };
+  }
+}
+
+export class MongoShellTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: MongoShellTabTemplate,
+    };
+  }
+}
+
+export class QueryTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: QueryTabTemplate,
+    };
+  }
+}
+
+export class QueryTablesTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: QueryTablesTabTemplate,
+    };
+  }
+}
+
+export class SettingsTabV2 {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: SettingsTabV2Template,
+    };
+  }
+}
+
+export class DatabaseSettingsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: DatabaseSettingsTabTemplate,
+    };
+  }
+}
+
+export class StoredProcedureTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: StoredProcedureTabTemplate,
+    };
+  }
+}
+
+export class TriggerTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: TriggerTabTemplate,
+    };
+  }
+}
+
+export class UserDefinedFunctionTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: UserDefinedFunctionTabTemplate,
+    };
+  }
+}
+
+export class GalleryTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: GalleryTabTemplate,
+    };
+  }
+}
+
+export class NotebookViewerTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: NotebookViewerTabTemplate,
+    };
+  }
+}
--- a/src/Explorer/Tabs/TabsBase.ts
+++ b/src/Explorer/Tabs/TabsBase.ts
@@ -13,7 +13,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu

 // TODO: Use specific actions for logging telemetry data
 export default class TabsBase extends WaitsForTemplateViewModel {
-  public static readonly component = { name: "tab", template: "" };
  public closeTabButton: ViewModels.Button;
  public node: ViewModels.TreeNode;
  public collection: ViewModels.CollectionBase;
--- a/src/Explorer/Tabs/TabsManager.html
+++ b/src/Explorer/Tabs/TabsManager.html
@@ -78,9 +78,77 @@
  <div class="tabPanesContainer">
    <!-- ko foreach: openedTabs -->
    <div class="tabs-container" data-bind="visible: $data.isActive">
-      <span
-        data-bind="class: $data.constructor.component.name, component: { name: $data.constructor.component.name, params: $data }"
-      ></span>
+      <!-- ko if: $data.tabKind === 0 -->
+      <documents-tab params="{data: $data}"></documents-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 1 -->
+      <settings-tab params="{data: $data}"></settings-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 2 -->
+      <stored-procedure-tab params="{data: $data}"></stored-procedure-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 3 -->
+      <user-defined-function-tab params="{data: $data}"></user-defined-function-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 4 -->
+      <trigger-tab params="{data: $data}"></trigger-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 5 -->
+      <query-tab params="{data: $data}"></query-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 6 -->
+      <graph-tab params="{data: $data}"></graph-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 9 -->
+      <tables-query-tab class="flexContainer" params="{data: $data}"></tables-query-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 10 -->
+      <mongo-shell-tab params="{data: $data}"></mongo-shell-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 11 -->
+      <database-settings-tab params="{data: $data}"></database-settings-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 12 -->
+      <conflicts-tab params="{data: $data}"></conflicts-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 14 -->
+      <terminal-tab params="{data: $data}"></terminal-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 15 -->
+      <notebookv2-tab params="{data: $data}"></notebookv2-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 16 -->
+      <spark-master-tab params="{data: $data}"></spark-master-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 17 -->
+      <gallery-tab params="{data: $data}"></gallery-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 18 -->
+      <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 20 -->
+      <collection-settings-tab-v2 params="{data: $data}"></collection-settings-tab-v2>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 21 -->
+      <database-settings-tab-v2 params="{data: $data}"></database-settings-tab-v2>
+      <!-- /ko -->
    </div>
    <!-- /ko -->
  </div>
--- a/src/Explorer/Tabs/TabsManager.ts
+++ b/src/Explorer/Tabs/TabsManager.ts
@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
+import TabsManagerTemplate from "./TabsManager.html";
 import Explorer from "../Explorer";
 import TabsBase from "./TabsBase";

@@ -81,3 +82,14 @@ export class TabsManager {
    return this.activeTab() && this.activeTab().tabKind === tabKind;
  }
 }
+
+function TabsManagerWrapperViewModel(params: { data: TabsManager }) {
+  return params.data;
+}
+
+export function TabsManagerKOComponent(): unknown {
+  return {
+    viewModel: TabsManagerWrapperViewModel,
+    template: TabsManagerTemplate,
+  };
+}
--- a/src/Explorer/Tabs/TerminalTab.tsx
+++ b/src/Explorer/Tabs/TerminalTab.tsx
@@ -7,7 +7,6 @@ import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./TerminalTab.html";

 export interface TerminalTabOptions extends ViewModels.TabOptions {
  account: DataModels.DatabaseAccount;
@@ -39,7 +38,6 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
 }

 export default class TerminalTab extends TabsBase {
-  public static readonly component = { name: "terminal-tab", template };
  private container: Explorer;
  private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;

--- a/src/Explorer/Tabs/TriggerTab.ts
+++ b/src/Explorer/Tabs/TriggerTab.ts
@@ -9,10 +9,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Trigger from "../Tree/Trigger";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./TriggerTab.html";

 export default class TriggerTab extends ScriptTabBase {
-  public static readonly component = { name: "trigger-tab", template };
  public collection: ViewModels.Collection;
  public node: Trigger;
  public triggerType: ViewModels.Editable<string>;
--- a/src/Explorer/Tabs/UserDefinedFunctionTab.ts
+++ b/src/Explorer/Tabs/UserDefinedFunctionTab.ts
@@ -8,10 +8,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import UserDefinedFunction from "../Tree/UserDefinedFunction";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./UserDefinedFunctionTab.html";

 export default class UserDefinedFunctionTab extends ScriptTabBase {
-  public static readonly component = { name: "user-defined-function-tab", template };
  public collection: ViewModels.Collection;
  public node: UserDefinedFunction;
  constructor(options: ViewModels.ScriptTabOption) {
--- a/src/Explorer/Tree/Database.ts
+++ b/src/Explorer/Tree/Database.ts
@@ -58,7 +58,9 @@ export default class Database implements ViewModels.Database {
    });

    const pendingNotificationsPromise: Promise<DataModels.Notification> = this.getPendingThroughputSplitNotification();
-    const useDatabaseSettingsTabV1 = userContext.features.enableDatabaseSettingsTabV1;
+    const useDatabaseSettingsTabV1: boolean = this.container.isFeatureEnabled(
+      Constants.Features.enableDatabaseSettingsTabV1
+    );
    const tabKind: ViewModels.CollectionTabKind = useDatabaseSettingsTabV1
      ? ViewModels.CollectionTabKind.DatabaseSettings
      : ViewModels.CollectionTabKind.DatabaseSettingsV2;
--- a/src/Explorer/Tree/StoredProcedure.ts
+++ b/src/Explorer/Tree/StoredProcedure.ts
@@ -3,14 +3,13 @@ import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import { deleteStoredProcedure } from "../../Common/dataAccess/deleteStoredProcedure";
 import { executeStoredProcedure } from "../../Common/dataAccess/executeStoredProcedure";
-import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import Explorer from "../Explorer";
 import StoredProcedureTab from "../Tabs/StoredProcedureTab";
 import TabsBase from "../Tabs/TabsBase";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";

 const sampleStoredProcedureBody: string = `// SAMPLE STORED PROCEDURE
 function sample(prefix) {
@@ -57,7 +56,7 @@ export default class StoredProcedure {
    this.rid = data._rid;
    this.id = ko.observable(data.id);
    this.body = ko.observable(data.body as string);
-    this.isExecuteEnabled = userContext.features.executeSproc;
+    this.isExecuteEnabled = this.container.isFeatureEnabled(Constants.Features.executeSproc);
  }

  public static create(source: ViewModels.Collection, event: MouseEvent) {
--- a/src/Libs/is-integer-polyfill.js
+++ b/src/Libs/is-integer-polyfill.js
@@ -0,0 +1,5 @@
+Number.isInteger =
+  Number.isInteger ||
+  function(value) {
+    return typeof value === "number" && isFinite(value) && Math.floor(value) === value;
+  };
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,8 +1,18 @@
 // CSS Dependencies
+import "abort-controller/polyfill";
+import "babel-polyfill";
 import "bootstrap/dist/css/bootstrap.css";
+import "es6-object-assign/auto";
+import "es6-symbol/implement";
+import "object.entries/auto";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import "promise-polyfill/src/polyfill";
+import "promise.prototype.finally/auto";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
+import "url-polyfill/url-polyfill.min";
+import "webcrypto-liner/build/webcrypto-liner.shim.min";
+import "whatwg-fetch";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
 import "../externals/jquery-ui.structure.min.css";
@@ -54,6 +64,7 @@ import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { useSidePanel } from "./hooks/useSidePanel";
 import { KOCommentEnd, KOCommentIfStart } from "./koComment";
+import "./Libs/is-integer-polyfill";
 import "./Libs/jquery";
 import "./Shared/appInsights";
 import { userContext } from "./UserContext";
@@ -205,7 +216,10 @@ const App: React.FunctionComponent = () => {
              <SplashScreen explorer={explorer} />
            </form>
          </div>
-          <div className="tabsManagerContainer" data-bind='component: { name: "tabs-manager", params: tabsManager }' />
+          <div
+            className="tabsManagerContainer"
+            data-bind='component: { name: "tabs-manager", params: {data: tabsManager} }'
+          />
        </div>
        {/* Collections Tree and Tabs - End */}
        <div
--- a/src/Platform/Hosted/extractFeatures.test.ts
+++ b/src/Platform/Hosted/extractFeatures.test.ts
@@ -1,22 +1,17 @@
 import { extractFeatures } from "./extractFeatures";

 describe("extractFeatures", () => {
-  it("correctly detects feature flags in a case insensitive manner", () => {
-    const url = "https://localhost:10001/12345/notebook";
-    const token = "super secret";
-    const notebooksEnabled = false;
-    const params = new URLSearchParams({
-      platform: "Hosted",
-      "feature.NOTEBOOKSERVERURL": url,
-      "feature.NoTeBooKServerToken": token,
-      "feature.NotAFeature": "nope",
-      "feature.ENABLEnotebooks": notebooksEnabled.toString(),
-    });
-
+  it("correctly detects feature flags", () => {
+    // Search containing non-features, with Camelcase keys and uri encoded values
+    const params = new URLSearchParams(
+      "?platform=Hosted&feature.notebookserverurl=https%3A%2F%2Flocalhost%3A10001%2F12345%2Fnotebook&feature.notebookServerToken=token&feature.enablenotebooks=true&key=mykey"
+    );
    const features = extractFeatures(params);

-    expect(features.notebookServerUrl).toBe(url);
-    expect(features.notebookServerToken).toBe(token);
-    expect(features.enableNotebooks).toBe(notebooksEnabled);
+    expect(features).toEqual({
+      notebookserverurl: "https://localhost:10001/12345/notebook",
+      notebookservertoken: "token",
+      enablenotebooks: "true",
+    });
  });
 });
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -1,56 +1,14 @@
-export type Features = {
-  readonly canExceedMaximumValue: boolean;
-  readonly cosmosdb: boolean;
-  readonly enableChangeFeedPolicy: boolean;
-  readonly enableDatabaseSettingsTabV1: boolean;
-  readonly enableFixedCollectionWithSharedThroughput: boolean;
-  readonly enableKOPanel: boolean;
-  readonly enableNotebooks: boolean;
-  readonly enableReactPane: boolean;
-  readonly enableRightPanelV2: boolean;
-  readonly enableSchema: boolean;
-  readonly enableSDKoperations: boolean;
-  readonly enableSpark: boolean;
-  readonly enableTtl: boolean;
-  readonly executeSproc: boolean;
-  readonly hostedDataExplorer: boolean;
-  readonly livyEndpoint?: string;
-  readonly notebookBasePath?: string;
-  readonly notebookServerToken?: string;
-  readonly notebookServerUrl?: string;
-  readonly selfServeType?: string;
-  readonly showMinRUSurvey: boolean;
-  readonly ttl90Days: boolean;
-};
-
-export function extractFeatures(params?: URLSearchParams): Features {
-  params = params || new URLSearchParams(window.location.search);
-  const downcased = new URLSearchParams();
-  params.forEach((value, key) => downcased.append(key.toLocaleLowerCase(), value));
-  const get = (key: string) => downcased.get("feature." + key.toLocaleLowerCase()) ?? undefined;
-
-  return {
-    canExceedMaximumValue: "true" === get("canexceedmaximumvalue"),
-    cosmosdb: "true" === get("cosmosdb"),
-    enableChangeFeedPolicy: "true" === get("enablechangefeedpolicy"),
-    enableDatabaseSettingsTabV1: "true" === get("enabledbsettingsv1"),
-    enableFixedCollectionWithSharedThroughput: "true" === get("enablefixedcollectionwithsharedthroughput"),
-    enableKOPanel: "true" === get("enablekopanel"),
-    enableNotebooks: "true" === get("enablenotebooks"),
-    enableReactPane: "true" === get("enablereactpane"),
-    enableRightPanelV2: "true" === get("enablerightpanelv2"),
-    enableSchema: "true" === get("enableschema"),
-    enableSDKoperations: "true" === get("enablesdkoperations"),
-    enableSpark: "true" === get("enablespark"),
-    enableTtl: "true" === get("enablettl"),
-    executeSproc: "true" === get("dataexplorerexecutesproc"),
-    hostedDataExplorer: "true" === get("hosteddataexplorerenabled"),
-    livyEndpoint: get("livyendpoint"),
-    notebookBasePath: get("notebookbasepath"),
-    notebookServerToken: get("notebookservertoken"),
-    notebookServerUrl: get("notebookserverurl"),
-    selfServeType: get("selfservetype"),
-    showMinRUSurvey: "true" === get("showminrusurvey"),
-    ttl90Days: "true" === get("ttl90days"),
-  };
+export function extractFeatures(params?: URLSearchParams): { [key: string]: string } {
+  params = params || new URLSearchParams(window.parent.location.search);
+  const featureParamRegex = /feature.(.*)/i;
+  const features: { [key: string]: string } = {};
+  params.forEach((value: string, param: string) => {
+    if (featureParamRegex.test(param)) {
+      const matches: string[] = param.match(featureParamRegex);
+      if (matches.length > 0) {
+        features[matches[1].toLowerCase()] = value;
+      }
+    }
+  });
+  return features;
 }
--- a/src/Terminal/index.ts
+++ b/src/Terminal/index.ts
@@ -1,3 +1,5 @@
+import "babel-polyfill";
+import "promise-polyfill/src/polyfill"; // polyfill Promise on IE
 import "@jupyterlab/terminal/style/index.css";
 import "./index.css";
 import { ServerConnection } from "@jupyterlab/services";
--- a/src/UserContext.ts
+++ b/src/UserContext.ts
@@ -2,44 +2,34 @@ import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";
 import { SubscriptionType } from "./Contracts/SubscriptionType";
 import { DefaultAccountExperienceType } from "./DefaultAccountExperienceType";
-import { extractFeatures, Features } from "./Platform/Hosted/extractFeatures";

 interface UserContext {
-  readonly authType?: AuthType;
-  readonly masterKey?: string;
-  readonly subscriptionId?: string;
-  readonly resourceGroup?: string;
-  readonly databaseAccount?: DatabaseAccount;
-  readonly endpoint?: string;
-  readonly accessToken?: string;
-  readonly authorizationToken?: string;
-  readonly resourceToken?: string;
-  readonly useSDKOperations: boolean;
-  readonly defaultExperience?: DefaultAccountExperienceType;
-  readonly subscriptionType?: SubscriptionType;
-  readonly quotaId?: string;
+  authType?: AuthType;
+  masterKey?: string;
+  subscriptionId?: string;
+  resourceGroup?: string;
+  databaseAccount?: DatabaseAccount;
+  endpoint?: string;
+  accessToken?: string;
+  authorizationToken?: string;
+  resourceToken?: string;
+  defaultExperience?: DefaultAccountExperienceType;
+  useSDKOperations?: boolean;
+  subscriptionType?: SubscriptionType;
+  quotaId?: string;
  // API Type is not yet provided by ARM. You need to manually inspect all the capabilities+kind so we abstract that logic in userContext
  // This is coming in a future Cosmos ARM API version as a prperty on databaseAccount
-  readonly apiType?: ApiType;
-  readonly isTryCosmosDBSubscription?: boolean;
-  readonly portalEnv?: PortalEnv;
-  readonly features: Features;
+  apiType?: ApiType;
+  isTryCosmosDBSubscription?: boolean;
+  portalEnv?: PortalEnv;
 }

 type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
 export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";

-const features = extractFeatures();
-const { enableSDKoperations: useSDKOperations } = features;
+const userContext: UserContext = { isTryCosmosDBSubscription: false, portalEnv: "prod" };

-const userContext: UserContext = {
-  isTryCosmosDBSubscription: false,
-  portalEnv: "prod",
-  features,
-  useSDKOperations,
-};
-
-function updateUserContext(newContext: Partial<UserContext>): void {
+function updateUserContext(newContext: UserContext): void {
  Object.assign(userContext, newContext);
  Object.assign(userContext, { apiType: apiType(userContext.databaseAccount) });
 }
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -18,6 +18,7 @@ import {
  ResourceToken,
 } from "../HostedExplorerChildFrame";
 import { emulatorAccount } from "../Platform/Emulator/emulatorAccount";
+import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { parseResourceTokenConnectionString } from "../Platform/Hosted/Helpers/ResourceTokenUtils";
 import {
  getDatabaseAccountKindFromExperience,
@@ -100,6 +101,7 @@ async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParam
    resourceGroup,
    masterKey: keys.primaryMasterKey,
    authorizationToken: `Bearer ${config.authorizationToken}`,
+    features: extractFeatures(),
  });
  return explorer;
 }
@@ -126,6 +128,7 @@ function configureHostedWithConnectionString(config: ConnectionString, explorerP
  explorer.configure({
    databaseAccount,
    masterKey: config.masterKey,
+    features: extractFeatures(),
  });
  return explorer;
 }
@@ -154,7 +157,10 @@ function configureHostedWithResourceToken(config: ResourceToken, explorerParams:
  if (parsedResourceToken.partitionKey) {
    explorer.resourceTokenPartitionKey(parsedResourceToken.partitionKey);
  }
-  explorer.configure({ databaseAccount });
+  explorer.configure({
+    databaseAccount,
+    features: extractFeatures(),
+  });
  return explorer;
 }

@@ -175,6 +181,7 @@ function configureHostedWithEncryptedToken(config: EncryptedToken, explorerParam
      properties: getDatabaseAccountPropertiesFromMetadata(config.encryptedTokenMetadata),
      tags: {},
    },
+    features: extractFeatures(),
  });
  return explorer;
 }
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -1,8 +1,7 @@
-import { configure } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
+import { configure } from "enzyme";
 import "jest-canvas-mock";
 import { initializeIcons } from "office-ui-fabric-react";
-import { TextDecoder, TextEncoder } from "util";
 configure({ adapter: new Adapter() });
 initializeIcons();

@@ -14,5 +13,3 @@ if (typeof window.URL.createObjectURL === "undefined") {
 (<any>window).$ = (<any>window).jQuery = require("jquery");
 (<any>global).$ = (<any>global).$.jQuery = require("jquery");
 require("jquery-ui-dist/jquery-ui");
-(<any>global).TextEncoder = TextEncoder;
-(<any>global).TextDecoder = TextDecoder;
--- a/src/workers/upload/index.ts
+++ b/src/workers/upload/index.ts
@@ -1,6 +1,7 @@
+import "babel-polyfill";
 import { DocumentClientParams, UploadDetailsRecord, UploadDetails } from "./definitions";
 import { client } from "../../Common/CosmosClient";
-import { updateConfigContext } from "../../ConfigContext";
+import { configContext, updateConfigContext } from "../../ConfigContext";
 import { updateUserContext } from "../../UserContext";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,7 @@
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "module": "esnext",
-    "target": "es2017",
+    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": ["es5", "es6", "dom", "webworker.importscripts"],
--- a/tsconfig.strict.json
+++ b/tsconfig.strict.json
@@ -66,6 +66,7 @@
    "./src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts",
    "./src/Explorer/Tables/DataTable/CacheBase.ts",
    "./src/Explorer/Tables/Entities.ts",
+    "./src/Explorer/Tabs/TabComponents.ts",
    "./src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts",
    "./src/Explorer/Notebook/NotebookContentClient.ts",
    "./src/GitHub/GitHubConnector.ts",
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -81,6 +81,23 @@ const typescriptRule = {
  exclude: /node_modules/,
 };

+// Third party modules are compiled with babel since using ts-loader that much causes webpack to run out of memory
+const ModulesRule = {
+  test: /\.js$/,
+  use: [
+    {
+      loader: "babel-loader",
+      options: {
+        cacheDirectory: ".cache/babel",
+        presets: [["@babel/preset-env", { targets: { ie: "11" }, useBuiltIns: false }]],
+      },
+    },
+  ],
+  include: /node_modules/,
+  // Exclude large modules we know don't need transpiling
+  exclude: /vega|monaco|plotly/,
+};
+
 module.exports = function (env = {}, argv = {}) {
  const mode = argv.mode || "development";
  const rules = [fontRule, lessRule, imagesRule, cssRule, htmlRule, typescriptRule];
@@ -90,6 +107,7 @@ module.exports = function (env = {}, argv = {}) {
  };

  if (mode === "production") {
+    rules.push(ModulesRule);
    envVars.NODE_ENV = "production";
  }

@@ -217,6 +235,7 @@ module.exports = function (env = {}, argv = {}) {
      minimize: mode === "production" ? true : false,
      minimizer: [
        new TerserPlugin({
+          cache: ".cache/terser",
          terserOptions: {
            // These options increase our initial bundle size by ~5% but the builds are significantly faster and won't run out of memory
            compress: false,