diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 76bb1325e..d63657b1d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -138,6 +138,7 @@ jobs: matrix: test-file: - ./test/cassandra/container.spec.ts + - ./test/graph/container.spec.ts - ./test/sql/container.spec.ts - ./test/mongo/container.spec.ts - ./test/selfServe/selfServeExample.spec.ts diff --git a/jest.config.js b/jest.config.js index 2c35d93c9..0ded88c9c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -71,7 +71,8 @@ module.exports = { moduleNameMapper: { "^.*[.](svg|png|gif|less|css)$": "/mockModule", "@nteract/stateful-components/(.*)$": "/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 + "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes + "monaco-editor/(.*)$": "/__mocks__/monaco-editor", "^dnd-core$": "dnd-core/dist/cjs", "^react-dnd$": "react-dnd/dist/cjs", "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs", diff --git a/package-lock.json b/package-lock.json index c9f242c84..4231a747b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@azure/ms-rest-nodeauth": "3.0.7", "@babel/plugin-proposal-class-properties": "7.13.0", "@babel/plugin-proposal-decorators": "7.13.15", + "@fluentui/react": "8.10.1", "@jupyterlab/services": "6.0.2", "@jupyterlab/terminal": "3.0.3", "@microsoft/applicationinsights-web": "2.6.1", @@ -46,7 +47,6 @@ "@types/mkdirp": "1.0.1", "@types/node-fetch": "2.5.7", "@uifabric/react-cards": "0.109.110", - "@uifabric/styling": "7.13.7", "applicationinsights": "1.8.0", "bootstrap": "3.4.1", "canvas": "file:./canvas", @@ -78,7 +78,6 @@ "monaco-editor": "0.18.1", "ms": "2.1.3", "msal": "1.4.4", - "office-ui-fabric-react": "7.164.2", "p-retry": "4.2.0", "plotly.js-cartesian-dist-min": "1.52.3", "post-robot": "10.0.42", @@ -114,15 +113,12 @@ "@types/crossroads": "0.0.30", "@types/d3": "5.9.2", "@types/enzyme": "3.10.8", - "@types/expect-puppeteer": "4.4.5", "@types/hasher": "0.0.31", "@types/jest": "26.0.23", - "@types/jest-environment-puppeteer": "4.4.1", "@types/memoize-one": "4.1.1", "@types/node": "12.11.1", "@types/post-robot": "10.0.1", "@types/promise.prototype.finally": "2.0.3", - "@types/puppeteer": "5.4.3", "@types/q": "1.5.1", "@types/react": "17.0.3", "@types/react-dom": "17.0.3", @@ -142,7 +138,7 @@ "clean-webpack-plugin": "4.0.0-alpha.0", "copy-webpack-plugin": "8.1.1", "create-file-webpack": "1.0.2", - "css-loader": "5.2.4", + "css-loader": "1.0.0", "enzyme": "3.11.0", "enzyme-to-json": "3.6.2", "eslint": "7.25.0", @@ -166,7 +162,7 @@ "less": "4.1.1", "less-loader": "8.1.1", "less-vars-loader": "1.1.0", - "mini-css-extract-plugin": "1.6.0", + "mini-css-extract-plugin": "1.5.0", "monaco-editor-webpack-plugin": "1.7.0", "node-fetch": "2.6.1", "playwright": "1.10.0", @@ -1987,6 +1983,42 @@ "tslib": "^1.10.0" } }, + "node_modules/@fluentui/font-icons-mdl2": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.1.0.tgz", + "integrity": "sha512-U0nAsv/vULZ4ezHDw0umk4mijSot9BNDXl0dZ4ZatxLBr8JZkNgTDowBZ9aEyWuFukZ6Lf0V/eEPIeJULrUDfw==", + "dependencies": { + "@fluentui/set-version": "^8.1.0", + "@fluentui/style-utilities": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/font-icons-mdl2/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/foundation-legacy": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.1.0.tgz", + "integrity": "sha512-GC6MkfcBbfqltgKe0hi4Wq0DTj8UxSFUdoOG9QQDLjIjI1r+L935ba0x91phqB9nptJCp+5TjkTtz7Q1lJ97Tw==", + "dependencies": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/style-utilities": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@fluentui/foundation-legacy/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, "node_modules/@fluentui/keyboard-key": { "version": "0.2.17", "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.2.17.tgz", @@ -1995,6 +2027,208 @@ "tslib": "^1.10.0" } }, + "node_modules/@fluentui/merge-styles": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.1.0.tgz", + "integrity": "sha512-afJ8rw1V3sfgzfufP7ockcP5AxiQN7VlqKo6JoCSZbWC2ypQ0DZre7d3k+Zj2LvjCrM8HM57YEfwXWT/WxGfqw==", + "dependencies": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/merge-styles/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/react": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.10.1.tgz", + "integrity": "sha512-J6wCfkkCzJ2Z9K6KVCrshpDDnhh5smKEGChsxMkLRoXYeAlVUMiS9lLg93PW+AbY4NfG+tNO2Ug8itNKpUmlYw==", + "dependencies": { + "@fluentui/date-time-utilities": "^8.0.2", + "@fluentui/font-icons-mdl2": "^8.0.4", + "@fluentui/foundation-legacy": "^8.0.4", + "@fluentui/merge-styles": "^8.0.3", + "@fluentui/react-focus": "^8.0.7", + "@fluentui/react-hooks": "^8.1.2", + "@fluentui/react-window-provider": "^2.0.2", + "@fluentui/set-version": "^8.0.2", + "@fluentui/style-utilities": "^8.0.4", + "@fluentui/theme": "^2.0.4", + "@fluentui/utilities": "^8.0.4", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^1.10.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "@types/react-dom": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0", + "react-dom": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@fluentui/react-focus": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.1.0.tgz", + "integrity": "sha512-yzfDnDrnHq5z4Nt1xY7LS+DtjbJmCdpDiTiQm8tnCj98qESzqqqAwjpSc+HFXVexBzlmPNf1hzc8BMCQOUF/7g==", + "dependencies": { + "@fluentui/keyboard-key": "^0.3.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/style-utilities": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@fluentui/react-focus/node_modules/@fluentui/keyboard-key": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.3.0.tgz", + "integrity": "sha512-5GZ9038lwNK5BcgFkbXJs6zpZUlmyrszWbKPMqcHysMFBbL569VwV7zQt/yF3ivL0L4k46C+uXHbnFbMgZEJ4w==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/react-focus/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/react-hooks": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.2.0.tgz", + "integrity": "sha512-FnmtkDurjnLXN/VssBnQQ19RGY3mUh+rLiYa4VRBWRIh1JTs7o6DGCu+IijvvFNzTHvsMgL/O3v/2UjXShO6uQ==", + "dependencies": { + "@fluentui/react-window-provider": "^2.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@fluentui/react-hooks/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/react-window-provider": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.1.0.tgz", + "integrity": "sha512-LcNni1utHiXiCu8EbXL42o118yNRAWKX15qKd0iyMqcUg5RplOdWuaniohXv2gsmdNB0l3F5Tnujgayy0xPlvQ==", + "dependencies": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@fluentui/react-window-provider/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/react/node_modules/@fluentui/date-time-utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.1.0.tgz", + "integrity": "sha512-1PSp/ufi5urnvxkbT9Lijsh7Y2PNEsZfpNXDVwOpPDqpRkRrd8Wr8IdRPQk7w6XLZIeDCiWIBXBRYCVp6KGbYg==", + "dependencies": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/react/node_modules/@fluentui/date-time-utilities/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/set-version": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.1.0.tgz", + "integrity": "sha512-FhruPyh+VoAVmqAadRxawMNB13syBLoT6PePdZ+sKW7rZVc2CWT3qw7w9O9x6MJeRNl6/6ZnjCo6sWyOyVEdNg==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/set-version/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/style-utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.1.0.tgz", + "integrity": "sha512-XUH+8T7/2HAMYzTLr20odD5lfKy56fJooFlkSmW0SSC6sOilHmrdPZCBSTV+WJzH/YY2ed/GnySIjCQOx5UsYg==", + "dependencies": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/theme": "^2.1.0", + "@fluentui/utilities": "^8.1.0", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/style-utilities/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/theme": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.1.0.tgz", + "integrity": "sha512-2jFun5LqUZJb+AiWeLOnNQTxrKWMCNHFTs4+QIUyL7ZPMAiNZyWMsQJfeGOujzdlReivZ7kONNQEi0LTJ0Tmzw==", + "dependencies": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@fluentui/theme/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, + "node_modules/@fluentui/utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz", + "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==", + "dependencies": { + "@fluentui/dom-utilities": "^2.1.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@fluentui/utilities/node_modules/@fluentui/dom-utilities": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz", + "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==", + "dependencies": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/utilities/node_modules/tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + }, "node_modules/@hapi/formula": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz", @@ -5348,16 +5582,6 @@ "integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==", "dev": true }, - "node_modules/@types/expect-puppeteer": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/@types/expect-puppeteer/-/expect-puppeteer-4.4.5.tgz", - "integrity": "sha512-vxPaumA8Fj6xlm3llKCR9V8L936HX4PyipaNMxDbWQIOWZoCl99jabD/6xuxXnCptOWUdUhXwDuX5cAJgCHsLg==", - "dev": true, - "dependencies": { - "@types/jest": "*", - "@types/puppeteer": "*" - } - }, "node_modules/@types/geojson": { "version": "7946.0.7", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", @@ -5438,17 +5662,6 @@ "pretty-format": "^26.0.0" } }, - "node_modules/@types/jest-environment-puppeteer": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/@types/jest-environment-puppeteer/-/jest-environment-puppeteer-4.4.1.tgz", - "integrity": "sha512-LiZTD6i63le6QMnxi7pJB0SFv/fWtss6VVEEDm/UaeowBgjduf8txyE//j3WEeDPxngTvioUjbzA7Rc6Wc3cBA==", - "dev": true, - "dependencies": { - "@jest/types": ">=24 <=26", - "@types/puppeteer": "*", - "jest-environment-node": ">=24 <=26" - } - }, "node_modules/@types/jest/node_modules/@jest/types": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", @@ -5634,7 +5847,7 @@ "version": "12.11.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz", "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==", - "dev": true + "devOptional": true }, "node_modules/@types/node-fetch": { "version": "2.5.7", @@ -5698,15 +5911,6 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz", "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==" }, - "node_modules/@types/puppeteer": { - "version": "5.4.3", - "resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-5.4.3.tgz", - "integrity": "sha512-3nE8YgR9DIsgttLW+eJf6mnXxq8Ge+27m5SU3knWmrlfl6+KOG0Bf9f7Ua7K+C4BnaTMAh3/UpySqdAYvrsvjg==", - "dev": true, - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz", @@ -6776,101 +6980,6 @@ "tslib": "^1.10.0" } }, - "node_modules/@uifabric/styling": { - "version": "7.13.7", - "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.13.7.tgz", - "integrity": "sha512-XFaDkvQqhhHwlW9+Yd9LQogPq0a5TC4on2csRnJUwmlTJ4IQtgvbPdAxmxz+18HZMJezUXYn7/ubcQvNRMFSJQ==", - "dependencies": { - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/merge-styles": "^7.16.0", - "@uifabric/set-version": "^7.0.15", - "@uifabric/utilities": "^7.23.0", - "tslib": "^1.10.0" - } - }, - "node_modules/@uifabric/styling/node_modules/@types/react": { - "version": "16.14.6", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.6.tgz", - "integrity": "sha512-Ol/aFKune+P0FSFKIgf+XbhGzYGyz0p7g5befSt4rmbzfGLaZR0q7jPew9k7d3bvrcuaL8dPy9Oz3XGZmf9n+w==", - "peer": true, - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "node_modules/@uifabric/styling/node_modules/@types/react-dom": { - "version": "16.9.12", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz", - "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==", - "peer": true, - "dependencies": { - "@types/react": "^16" - } - }, - "node_modules/@uifabric/styling/node_modules/@uifabric/utilities": { - "version": "7.33.5", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz", - "integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==", - "dependencies": { - "@fluentui/dom-utilities": "^1.1.2", - "@uifabric/merge-styles": "^7.19.2", - "@uifabric/set-version": "^7.0.24", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <17.0.0", - "@types/react-dom": ">=16.8.0 <17.0.0", - "react": ">=16.8.0 <17.0.0", - "react-dom": ">=16.8.0 <17.0.0" - } - }, - "node_modules/@uifabric/styling/node_modules/csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", - "peer": true - }, - "node_modules/@uifabric/styling/node_modules/react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/@uifabric/styling/node_modules/react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", - "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.19.1" - }, - "peerDependencies": { - "react": "^16.14.0" - } - }, - "node_modules/@uifabric/styling/node_modules/scheduler": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", - "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, "node_modules/@uifabric/theme-samples": { "version": "7.2.36", "resolved": "https://registry.npmjs.org/@uifabric/theme-samples/-/theme-samples-7.2.36.tgz", @@ -7995,6 +8104,57 @@ "node": ">=4.0" } }, + "node_modules/babel-code-frame": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", + "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", + "dev": true, + "dependencies": { + "chalk": "^1.1.3", + "esutils": "^2.0.2", + "js-tokens": "^3.0.2" + } + }, + "node_modules/babel-code-frame/node_modules/ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/babel-code-frame/node_modules/chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "dependencies": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/babel-code-frame/node_modules/js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", + "dev": true + }, + "node_modules/babel-code-frame/node_modules/supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/babel-jest": { "version": "26.6.3", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz", @@ -10146,97 +10306,52 @@ } }, "node_modules/css-loader": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.4.tgz", - "integrity": "sha512-OFYGyINCKkdQsTrSYxzGSFnGS4gNjcXkKkQgWxK138jgnPt+lepxdjSZNc8sHAl5vP3DhsJUxufWIjOwI8PMMw==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz", + "integrity": "sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==", "dev": true, "dependencies": { - "camelcase": "^6.2.0", - "icss-utils": "^5.1.0", - "loader-utils": "^2.0.0", - "postcss": "^8.2.10", - "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", - "postcss-modules-scope": "^3.0.0", - "postcss-modules-values": "^4.0.0", - "postcss-value-parser": "^4.1.0", - "schema-utils": "^3.0.0", - "semver": "^7.3.5" + "babel-code-frame": "^6.26.0", + "css-selector-tokenizer": "^0.7.0", + "icss-utils": "^2.1.0", + "loader-utils": "^1.0.2", + "lodash.camelcase": "^4.3.0", + "postcss": "^6.0.23", + "postcss-modules-extract-imports": "^1.2.0", + "postcss-modules-local-by-default": "^1.2.0", + "postcss-modules-scope": "^1.1.0", + "postcss-modules-values": "^1.3.0", + "postcss-value-parser": "^3.3.0", + "source-list-map": "^2.0.0" }, "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" + "node": ">= 6.9.0 <7.0.0 || >= 8.9.0" }, "peerDependencies": { - "webpack": "^4.27.0 || ^5.0.0" + "webpack": "^4.0.0" } }, - "node_modules/css-loader/node_modules/camelcase": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz", - "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/css-loader/node_modules/loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "node_modules/css-loader/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", "dev": true, "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" }, "engines": { - "node": ">=8.9.0" + "node": ">=4.0.0" } }, - "node_modules/css-loader/node_modules/postcss-value-parser": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", - "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", - "dev": true - }, - "node_modules/css-loader/node_modules/schema-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", - "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "node_modules/css-loader/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true, - "dependencies": { - "@types/json-schema": "^7.0.6", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - }, "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, - "node_modules/css-loader/node_modules/semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" + "node": ">=0.10.0" } }, "node_modules/css-select": { @@ -10270,6 +10385,16 @@ "node": ">= 4" } }, + "node_modules/css-selector-tokenizer": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz", + "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/css-to-react-native": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", @@ -12671,7 +12796,11 @@ "version": "0.3.4", "resolved": "https://registry.npmjs.org/expect-playwright/-/expect-playwright-0.3.4.tgz", "integrity": "sha512-JulhMkc5lVvpF18ImWLqviHZpo4qzT9FfpF+lP4D+U9guGUnYOCFpS/5Qk1c3zKhYHJL1JBEfiiGfcRUuzsnEg==", - "dev": true + "dev": true, + "license": "MIT", + "peerDependencies": { + "playwright-core": "^1.10.0" + } }, "node_modules/expose-loader": { "version": "2.0.0", @@ -13407,6 +13536,9 @@ }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, "node_modules/find-process/node_modules/chalk": { @@ -13420,6 +13552,9 @@ }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, "node_modules/find-process/node_modules/color-convert": { @@ -14104,6 +14239,18 @@ "node": ">= 0.4.0" } }, + "node_modules/has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", + "dev": true, + "dependencies": { + "ansi-regex": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/has-bigints": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz", @@ -14709,16 +14856,42 @@ "node": ">=0.10.0" } }, + "node_modules/icss-replace-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", + "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", + "dev": true + }, "node_modules/icss-utils": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz", + "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=", + "dev": true, + "dependencies": { + "postcss": "^6.0.1" + } + }, + "node_modules/icss-utils/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "dependencies": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/icss-utils/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true, "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" + "node": ">=0.10.0" } }, "node_modules/ieee754": { @@ -20725,6 +20898,9 @@ }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, "node_modules/jest-process-manager/node_modules/chalk": { @@ -20738,6 +20914,9 @@ }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, "node_modules/jest-process-manager/node_modules/color-convert": { @@ -24010,9 +24189,9 @@ } }, "node_modules/mini-css-extract-plugin": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.0.tgz", - "integrity": "sha512-nPFKI7NSy6uONUo9yn2hIfb9vyYvkFu95qki0e21DQ9uaqNKDP15DGpK0KnV6wDroWxPHtExrdEwx/yDQ8nVRw==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.5.0.tgz", + "integrity": "sha512-SIbuLMv6jsk1FnLIU5OUG/+VMGUprEjM1+o2trOAx8i5KOKMrhyezb1dJ4Ugsykb8Jgq8/w5NEopy6escV9G7g==", "dev": true, "dependencies": { "loader-utils": "^2.0.0", @@ -26189,81 +26368,134 @@ } }, "node_modules/postcss-modules-extract-imports": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz", + "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==", + "dev": true, + "dependencies": { + "postcss": "^6.0.1" + } + }, + "node_modules/postcss-modules-extract-imports/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "dependencies": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/postcss-modules-extract-imports/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true, "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" + "node": ">=0.10.0" } }, "node_modules/postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz", + "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=", "dev": true, "dependencies": { - "icss-utils": "^5.0.0", - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.1.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" + "css-selector-tokenizer": "^0.7.0", + "postcss": "^6.0.1" } }, - "node_modules/postcss-modules-local-by-default/node_modules/postcss-value-parser": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", - "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", - "dev": true - }, - "node_modules/postcss-modules-scope": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", - "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "node_modules/postcss-modules-local-by-default/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", "dev": true, "dependencies": { - "postcss-selector-parser": "^6.0.4" + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" }, "engines": { - "node": "^10 || ^12 || >= 14" + "node": ">=4.0.0" + } + }, + "node_modules/postcss-modules-local-by-default/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postcss-modules-scope": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz", + "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=", + "dev": true, + "dependencies": { + "css-selector-tokenizer": "^0.7.0", + "postcss": "^6.0.1" + } + }, + "node_modules/postcss-modules-scope/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "dependencies": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" }, - "peerDependencies": { - "postcss": "^8.1.0" + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/postcss-modules-scope/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" } }, "node_modules/postcss-modules-values": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", - "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz", + "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=", "dev": true, "dependencies": { - "icss-utils": "^5.0.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" + "icss-replace-symbols": "^1.1.0", + "postcss": "^6.0.1" } }, - "node_modules/postcss-selector-parser": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz", - "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==", + "node_modules/postcss-modules-values/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", "dev": true, "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" }, "engines": { - "node": ">=4" + "node": ">=4.0.0" + } + }, + "node_modules/postcss-modules-values/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" } }, "node_modules/postcss-value-parser": { @@ -27052,6 +27284,23 @@ "dnd-core": "14.0.0", "fast-deep-equal": "^3.1.3", "hoist-non-react-statics": "^3.3.2" + }, + "peerDependencies": { + "@types/hoist-non-react-statics": ">= 3.3.1", + "@types/node": ">= 12", + "@types/react": ">= 16", + "react": ">= 16.14" + }, + "peerDependenciesMeta": { + "@types/hoist-non-react-statics": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@types/react": { + "optional": true + } } }, "node_modules/react-dnd-html5-backend": { @@ -34081,6 +34330,42 @@ "tslib": "^1.10.0" } }, + "@fluentui/font-icons-mdl2": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.1.0.tgz", + "integrity": "sha512-U0nAsv/vULZ4ezHDw0umk4mijSot9BNDXl0dZ4ZatxLBr8JZkNgTDowBZ9aEyWuFukZ6Lf0V/eEPIeJULrUDfw==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "@fluentui/style-utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/foundation-legacy": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.1.0.tgz", + "integrity": "sha512-GC6MkfcBbfqltgKe0hi4Wq0DTj8UxSFUdoOG9QQDLjIjI1r+L935ba0x91phqB9nptJCp+5TjkTtz7Q1lJ97Tw==", + "requires": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/style-utilities": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, "@fluentui/keyboard-key": { "version": "0.2.17", "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.2.17.tgz", @@ -34089,6 +34374,202 @@ "tslib": "^1.10.0" } }, + "@fluentui/merge-styles": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.1.0.tgz", + "integrity": "sha512-afJ8rw1V3sfgzfufP7ockcP5AxiQN7VlqKo6JoCSZbWC2ypQ0DZre7d3k+Zj2LvjCrM8HM57YEfwXWT/WxGfqw==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/react": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.10.1.tgz", + "integrity": "sha512-J6wCfkkCzJ2Z9K6KVCrshpDDnhh5smKEGChsxMkLRoXYeAlVUMiS9lLg93PW+AbY4NfG+tNO2Ug8itNKpUmlYw==", + "requires": { + "@fluentui/date-time-utilities": "^8.0.2", + "@fluentui/font-icons-mdl2": "^8.0.4", + "@fluentui/foundation-legacy": "^8.0.4", + "@fluentui/merge-styles": "^8.0.3", + "@fluentui/react-focus": "^8.0.7", + "@fluentui/react-hooks": "^8.1.2", + "@fluentui/react-window-provider": "^2.0.2", + "@fluentui/set-version": "^8.0.2", + "@fluentui/style-utilities": "^8.0.4", + "@fluentui/theme": "^2.0.4", + "@fluentui/utilities": "^8.0.4", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^1.10.0" + }, + "dependencies": { + "@fluentui/date-time-utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.1.0.tgz", + "integrity": "sha512-1PSp/ufi5urnvxkbT9Lijsh7Y2PNEsZfpNXDVwOpPDqpRkRrd8Wr8IdRPQk7w6XLZIeDCiWIBXBRYCVp6KGbYg==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + } + } + }, + "@fluentui/react-focus": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.1.0.tgz", + "integrity": "sha512-yzfDnDrnHq5z4Nt1xY7LS+DtjbJmCdpDiTiQm8tnCj98qESzqqqAwjpSc+HFXVexBzlmPNf1hzc8BMCQOUF/7g==", + "requires": { + "@fluentui/keyboard-key": "^0.3.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/style-utilities": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "@fluentui/keyboard-key": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.3.0.tgz", + "integrity": "sha512-5GZ9038lwNK5BcgFkbXJs6zpZUlmyrszWbKPMqcHysMFBbL569VwV7zQt/yF3ivL0L4k46C+uXHbnFbMgZEJ4w==", + "requires": { + "tslib": "^2.1.0" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/react-hooks": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.2.0.tgz", + "integrity": "sha512-FnmtkDurjnLXN/VssBnQQ19RGY3mUh+rLiYa4VRBWRIh1JTs7o6DGCu+IijvvFNzTHvsMgL/O3v/2UjXShO6uQ==", + "requires": { + "@fluentui/react-window-provider": "^2.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/react-window-provider": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.1.0.tgz", + "integrity": "sha512-LcNni1utHiXiCu8EbXL42o118yNRAWKX15qKd0iyMqcUg5RplOdWuaniohXv2gsmdNB0l3F5Tnujgayy0xPlvQ==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/set-version": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.1.0.tgz", + "integrity": "sha512-FhruPyh+VoAVmqAadRxawMNB13syBLoT6PePdZ+sKW7rZVc2CWT3qw7w9O9x6MJeRNl6/6ZnjCo6sWyOyVEdNg==", + "requires": { + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/style-utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.1.0.tgz", + "integrity": "sha512-XUH+8T7/2HAMYzTLr20odD5lfKy56fJooFlkSmW0SSC6sOilHmrdPZCBSTV+WJzH/YY2ed/GnySIjCQOx5UsYg==", + "requires": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/theme": "^2.1.0", + "@fluentui/utilities": "^8.1.0", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/theme": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.1.0.tgz", + "integrity": "sha512-2jFun5LqUZJb+AiWeLOnNQTxrKWMCNHFTs4+QIUyL7ZPMAiNZyWMsQJfeGOujzdlReivZ7kONNQEi0LTJ0Tmzw==", + "requires": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz", + "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==", + "requires": { + "@fluentui/dom-utilities": "^2.1.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "@fluentui/dom-utilities": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz", + "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, "@hapi/formula": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz", @@ -37163,16 +37644,6 @@ "integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==", "dev": true }, - "@types/expect-puppeteer": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/@types/expect-puppeteer/-/expect-puppeteer-4.4.5.tgz", - "integrity": "sha512-vxPaumA8Fj6xlm3llKCR9V8L936HX4PyipaNMxDbWQIOWZoCl99jabD/6xuxXnCptOWUdUhXwDuX5cAJgCHsLg==", - "dev": true, - "requires": { - "@types/jest": "*", - "@types/puppeteer": "*" - } - }, "@types/geojson": { "version": "7946.0.7", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", @@ -37373,17 +37844,6 @@ } } }, - "@types/jest-environment-puppeteer": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/@types/jest-environment-puppeteer/-/jest-environment-puppeteer-4.4.1.tgz", - "integrity": "sha512-LiZTD6i63le6QMnxi7pJB0SFv/fWtss6VVEEDm/UaeowBgjduf8txyE//j3WEeDPxngTvioUjbzA7Rc6Wc3cBA==", - "dev": true, - "requires": { - "@jest/types": ">=24 <=26", - "@types/puppeteer": "*", - "jest-environment-node": ">=24 <=26" - } - }, "@types/json-schema": { "version": "7.0.7", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", @@ -37420,7 +37880,7 @@ "version": "12.11.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz", "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==", - "dev": true + "devOptional": true }, "@types/node-fetch": { "version": "2.5.7", @@ -37483,15 +37943,6 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz", "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==" }, - "@types/puppeteer": { - "version": "5.4.3", - "resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-5.4.3.tgz", - "integrity": "sha512-3nE8YgR9DIsgttLW+eJf6mnXxq8Ge+27m5SU3knWmrlfl6+KOG0Bf9f7Ua7K+C4BnaTMAh3/UpySqdAYvrsvjg==", - "dev": true, - "requires": { - "@types/node": "*" - } - }, "@types/q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz", @@ -38354,91 +38805,6 @@ "tslib": "^1.10.0" } }, - "@uifabric/styling": { - "version": "7.13.7", - "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.13.7.tgz", - "integrity": "sha512-XFaDkvQqhhHwlW9+Yd9LQogPq0a5TC4on2csRnJUwmlTJ4IQtgvbPdAxmxz+18HZMJezUXYn7/ubcQvNRMFSJQ==", - "requires": { - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/merge-styles": "^7.16.0", - "@uifabric/set-version": "^7.0.15", - "@uifabric/utilities": "^7.23.0", - "tslib": "^1.10.0" - }, - "dependencies": { - "@types/react": { - "version": "16.14.6", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.6.tgz", - "integrity": "sha512-Ol/aFKune+P0FSFKIgf+XbhGzYGyz0p7g5befSt4rmbzfGLaZR0q7jPew9k7d3bvrcuaL8dPy9Oz3XGZmf9n+w==", - "peer": true, - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "@types/react-dom": { - "version": "16.9.12", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz", - "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==", - "peer": true, - "requires": { - "@types/react": "^16" - } - }, - "@uifabric/utilities": { - "version": "7.33.5", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz", - "integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==", - "requires": { - "@fluentui/dom-utilities": "^1.1.2", - "@uifabric/merge-styles": "^7.19.2", - "@uifabric/set-version": "^7.0.24", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - } - }, - "csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", - "peer": true - }, - "react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "peer": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" - } - }, - "react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", - "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", - "peer": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.19.1" - } - }, - "scheduler": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", - "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", - "peer": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - } - } - }, "@uifabric/theme-samples": { "version": "7.2.36", "resolved": "https://registry.npmjs.org/@uifabric/theme-samples/-/theme-samples-7.2.36.tgz", @@ -39393,6 +39759,50 @@ } } }, + "babel-code-frame": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", + "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", + "dev": true, + "requires": { + "chalk": "^1.1.3", + "esutils": "^2.0.2", + "js-tokens": "^3.0.2" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", + "dev": true + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } + } + }, "babel-jest": { "version": "26.6.3", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz", @@ -41257,66 +41667,41 @@ } }, "css-loader": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.4.tgz", - "integrity": "sha512-OFYGyINCKkdQsTrSYxzGSFnGS4gNjcXkKkQgWxK138jgnPt+lepxdjSZNc8sHAl5vP3DhsJUxufWIjOwI8PMMw==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz", + "integrity": "sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==", "dev": true, "requires": { - "camelcase": "^6.2.0", - "icss-utils": "^5.1.0", - "loader-utils": "^2.0.0", - "postcss": "^8.2.10", - "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", - "postcss-modules-scope": "^3.0.0", - "postcss-modules-values": "^4.0.0", - "postcss-value-parser": "^4.1.0", - "schema-utils": "^3.0.0", - "semver": "^7.3.5" + "babel-code-frame": "^6.26.0", + "css-selector-tokenizer": "^0.7.0", + "icss-utils": "^2.1.0", + "loader-utils": "^1.0.2", + "lodash.camelcase": "^4.3.0", + "postcss": "^6.0.23", + "postcss-modules-extract-imports": "^1.2.0", + "postcss-modules-local-by-default": "^1.2.0", + "postcss-modules-scope": "^1.1.0", + "postcss-modules-values": "^1.3.0", + "postcss-value-parser": "^3.3.0", + "source-list-map": "^2.0.0" }, "dependencies": { - "camelcase": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz", - "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==", + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "postcss-value-parser": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", - "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", - "dev": true - }, - "schema-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", - "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.6", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - } - }, - "semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dev": true, - "requires": { - "lru-cache": "^6.0.0" - } } } }, @@ -41350,6 +41735,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "css-selector-tokenizer": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz", + "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "css-to-react-native": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", @@ -43375,7 +43770,8 @@ "version": "0.3.4", "resolved": "https://registry.npmjs.org/expect-playwright/-/expect-playwright-0.3.4.tgz", "integrity": "sha512-JulhMkc5lVvpF18ImWLqviHZpo4qzT9FfpF+lP4D+U9guGUnYOCFpS/5Qk1c3zKhYHJL1JBEfiiGfcRUuzsnEg==", - "dev": true + "dev": true, + "requires": {} }, "expose-loader": { "version": "2.0.0", @@ -44550,6 +44946,15 @@ "function-bind": "^1.1.1" } }, + "has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + }, "has-bigints": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz", @@ -45091,12 +45496,39 @@ "safer-buffer": ">= 2.1.2 < 3" } }, + "icss-replace-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", + "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", + "dev": true + }, "icss-utils": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz", + "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=", "dev": true, - "requires": {} + "requires": { + "postcss": "^6.0.1" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } }, "ieee754": { "version": "1.2.1", @@ -52476,9 +52908,9 @@ "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, "mini-css-extract-plugin": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.0.tgz", - "integrity": "sha512-nPFKI7NSy6uONUo9yn2hIfb9vyYvkFu95qki0e21DQ9uaqNKDP15DGpK0KnV6wDroWxPHtExrdEwx/yDQ8nVRw==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.5.0.tgz", + "integrity": "sha512-SIbuLMv6jsk1FnLIU5OUG/+VMGUprEjM1+o2trOAx8i5KOKMrhyezb1dJ4Ugsykb8Jgq8/w5NEopy6escV9G7g==", "dev": true, "requires": { "loader-utils": "^2.0.0", @@ -54240,57 +54672,118 @@ } }, "postcss-modules-extract-imports": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true, - "requires": {} - }, - "postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz", + "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==", "dev": true, "requires": { - "icss-utils": "^5.0.0", - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.1.0" + "postcss": "^6.0.1" }, "dependencies": { - "postcss-value-parser": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", - "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "postcss-modules-local-by-default": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz", + "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=", + "dev": true, + "requires": { + "css-selector-tokenizer": "^0.7.0", + "postcss": "^6.0.1" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true } } }, "postcss-modules-scope": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", - "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz", + "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=", "dev": true, "requires": { - "postcss-selector-parser": "^6.0.4" + "css-selector-tokenizer": "^0.7.0", + "postcss": "^6.0.1" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, "postcss-modules-values": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", - "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz", + "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=", "dev": true, "requires": { - "icss-utils": "^5.0.0" - } - }, - "postcss-selector-parser": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz", - "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==", - "dev": true, - "requires": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" + "icss-replace-symbols": "^1.1.0", + "postcss": "^6.0.1" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, "postcss-value-parser": { diff --git a/package.json b/package.json index 0291a801b..55fa0eec8 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@azure/ms-rest-nodeauth": "3.0.7", "@babel/plugin-proposal-class-properties": "7.13.0", "@babel/plugin-proposal-decorators": "7.13.15", + "@fluentui/react": "8.10.1", "@jupyterlab/services": "6.0.2", "@jupyterlab/terminal": "3.0.3", "@microsoft/applicationinsights-web": "2.6.1", @@ -43,7 +44,6 @@ "@types/mkdirp": "1.0.1", "@types/node-fetch": "2.5.7", "@uifabric/react-cards": "0.109.110", - "@uifabric/styling": "7.13.7", "applicationinsights": "1.8.0", "bootstrap": "3.4.1", "canvas": "file:./canvas", @@ -75,7 +75,6 @@ "monaco-editor": "0.18.1", "ms": "2.1.3", "msal": "1.4.4", - "office-ui-fabric-react": "7.164.2", "p-retry": "4.2.0", "plotly.js-cartesian-dist-min": "1.52.3", "post-robot": "10.0.42", @@ -111,15 +110,12 @@ "@types/crossroads": "0.0.30", "@types/d3": "5.9.2", "@types/enzyme": "3.10.8", - "@types/expect-puppeteer": "4.4.5", "@types/hasher": "0.0.31", "@types/jest": "26.0.23", - "@types/jest-environment-puppeteer": "4.4.1", "@types/memoize-one": "4.1.1", "@types/node": "12.11.1", "@types/post-robot": "10.0.1", "@types/promise.prototype.finally": "2.0.3", - "@types/puppeteer": "5.4.3", "@types/q": "1.5.1", "@types/react": "17.0.3", "@types/react-dom": "17.0.3", @@ -139,7 +135,7 @@ "clean-webpack-plugin": "4.0.0-alpha.0", "copy-webpack-plugin": "8.1.1", "create-file-webpack": "1.0.2", - "css-loader": "5.2.4", + "css-loader": "1.0.0", "enzyme": "3.11.0", "enzyme-to-json": "3.6.2", "eslint": "7.25.0", @@ -163,7 +159,7 @@ "less": "4.1.1", "less-loader": "8.1.1", "less-vars-loader": "1.1.0", - "mini-css-extract-plugin": "1.6.0", + "mini-css-extract-plugin": "1.5.0", "monaco-editor-webpack-plugin": "1.7.0", "node-fetch": "2.6.1", "playwright": "1.10.0", diff --git a/src/CellOutputViewer/CellOutputViewer.less b/src/CellOutputViewer/CellOutputViewer.less new file mode 100644 index 000000000..2e79facc7 --- /dev/null +++ b/src/CellOutputViewer/CellOutputViewer.less @@ -0,0 +1,10 @@ +.schema-analyzer-cell-outputs { + padding: 10px; +} + +.schema-analyzer-cell-output { + margin-bottom: 20px; + padding: 10px; + border-radius: 2px; + box-shadow: rgba(0, 0, 0, 13%) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 11%) 0px 0.3px 0.9px 0px; +} \ No newline at end of file diff --git a/src/CellOutputViewer/CellOutputViewer.tsx b/src/CellOutputViewer/CellOutputViewer.tsx index d5b8eb933..3ddd72ca8 100644 --- a/src/CellOutputViewer/CellOutputViewer.tsx +++ b/src/CellOutputViewer/CellOutputViewer.tsx @@ -11,13 +11,14 @@ import * as ReactDOM from "react-dom"; import "../../externals/iframeResizer.contentWindow.min.js"; // Required for iFrameResizer to work import "../Explorer/Notebook/NotebookRenderer/base.css"; import "../Explorer/Notebook/NotebookRenderer/default.css"; +import "./CellOutputViewer.less"; import { TransformMedia } from "./TransformMedia"; export interface CellOutputViewerProps { id: string; contentRef: ContentRef; - hidden: boolean; - expanded: boolean; + outputsContainerClassName: string; + outputClassName: string; outputs: OnDiskOutput[]; onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => void; } @@ -34,27 +35,26 @@ const onInit = async () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const props = (event as any).data as CellOutputViewerProps; const outputs = ( -
+
{props.outputs?.map((output, index) => ( - - props.onMetadataChange(metadata, mediaType, index)} - /> - props.onMetadataChange(metadata, mediaType, index)} - /> - - - +
+ + props.onMetadataChange(metadata, mediaType, index)} + /> + props.onMetadataChange(metadata, mediaType, index)} + /> + + + +
))}
); diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index e6b545793..097c4237f 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -65,28 +65,18 @@ export class ClientDefaults { public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000; } -export class AccountKind { - public static DocumentDB: string = "DocumentDB"; - public static MongoDB: string = "MongoDB"; - public static Parse: string = "Parse"; - public static GlobalDocumentDB: string = "GlobalDocumentDB"; - public static Default: string = AccountKind.DocumentDB; +export enum AccountKind { + DocumentDB = "DocumentDB", + MongoDB = "MongoDB", + Parse = "Parse", + GlobalDocumentDB = "GlobalDocumentDB", + Default = "DocumentDB", } export class CorrelationBackend { public static Url: string = "https://aka.ms/cosmosdbanalytics"; } -export class DefaultAccountExperience { - public static DocumentDB: string = "DocumentDB"; - public static Graph: string = "Graph"; - public static MongoDB: string = "MongoDB"; - public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API"; - public static Table: string = "Table"; - public static Cassandra: string = "Cassandra"; - public static Default: string = DefaultAccountExperience.DocumentDB; -} - export class CapabilityNames { public static EnableTable: string = "EnableTable"; public static EnableGremlin: string = "EnableGremlin"; diff --git a/src/Common/CosmosClient.test.ts b/src/Common/CosmosClient.test.ts index ea91efa53..96505f208 100644 --- a/src/Common/CosmosClient.test.ts +++ b/src/Common/CosmosClient.test.ts @@ -1,5 +1,5 @@ import { ResourceType } from "@azure/cosmos/dist-esm/common/constants"; -import { configContext, Platform, updateConfigContext, resetConfigContext } from "../ConfigContext"; +import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext"; import { updateUserContext } from "../UserContext"; import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient"; @@ -91,7 +91,6 @@ describe("endpoint", () => { location: "foo", type: "foo", kind: "foo", - tags: [], properties: { documentEndpoint: "bar", gremlinEndpoint: "foo", diff --git a/src/Common/CosmosClient.ts b/src/Common/CosmosClient.ts index 4e3029290..9ba100b3b 100644 --- a/src/Common/CosmosClient.ts +++ b/src/Common/CosmosClient.ts @@ -43,12 +43,7 @@ export const endpoint = () => { const location = _global.parent ? _global.parent.location : _global.location; return configContext.EMULATOR_ENDPOINT || location.origin; } - return ( - userContext.endpoint || - (userContext.databaseAccount && - userContext.databaseAccount.properties && - userContext.databaseAccount.properties.documentEndpoint) - ); + return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint; }; export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise { diff --git a/src/Common/EntityValue.tsx b/src/Common/EntityValue.tsx index 14a7af964..edea0fa35 100644 --- a/src/Common/EntityValue.tsx +++ b/src/Common/EntityValue.tsx @@ -1,4 +1,4 @@ -import { DatePicker, TextField } from "office-ui-fabric-react"; +import { DatePicker, TextField } from "@fluentui/react"; import React, { FunctionComponent } from "react"; export interface TableEntityProps { diff --git a/src/Common/MongoProxyClient.ts b/src/Common/MongoProxyClient.ts index ad22c9257..f9f5b356d 100644 --- a/src/Common/MongoProxyClient.ts +++ b/src/Common/MongoProxyClient.ts @@ -61,7 +61,7 @@ export function queryDocuments( query: string, continuationToken?: string ): Promise { - const databaseAccount = userContext.databaseAccount; + const { databaseAccount } = userContext; const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint; const params = { db: databaseId, @@ -121,7 +121,7 @@ export function readDocument( collection: Collection, documentId: DocumentId ): Promise { - const databaseAccount = userContext.databaseAccount; + const { databaseAccount } = userContext; const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint; const idComponents = documentId.self.split("/"); const path = idComponents.slice(0, 4).join("/"); @@ -167,7 +167,7 @@ export function createDocument( partitionKeyProperty: string, documentContent: unknown ): Promise { - const databaseAccount = userContext.databaseAccount; + const { databaseAccount } = userContext; const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint; const params = { db: databaseId, @@ -206,7 +206,7 @@ export function updateDocument( documentId: DocumentId, documentContent: string ): Promise { - const databaseAccount = userContext.databaseAccount; + const { databaseAccount } = userContext; const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint; const idComponents = documentId.self.split("/"); const path = idComponents.slice(0, 5).join("/"); @@ -247,7 +247,7 @@ export function updateDocument( } export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise { - const databaseAccount = userContext.databaseAccount; + const { databaseAccount } = userContext; const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint; const idComponents = documentId.self.split("/"); const path = idComponents.slice(0, 5).join("/"); @@ -289,7 +289,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum export function createMongoCollectionWithProxy( params: DataModels.CreateCollectionParams ): Promise { - const databaseAccount = userContext.databaseAccount; + const { databaseAccount } = userContext; const shardKey: string = params.partitionKey?.paths[0]; const mongoParams: DataModels.MongoParameters = { resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint, diff --git a/src/Common/PortalNotifications.ts b/src/Common/PortalNotifications.ts index 4298b0b8f..774c37cad 100644 --- a/src/Common/PortalNotifications.ts +++ b/src/Common/PortalNotifications.ts @@ -1,8 +1,8 @@ +import { configContext, Platform } from "../ConfigContext"; import * as DataModels from "../Contracts/DataModels"; import * as ViewModels from "../Contracts/ViewModels"; -import { getAuthorizationHeader } from "../Utils/AuthorizationUtils"; import { userContext } from "../UserContext"; -import { configContext, Platform } from "../ConfigContext"; +import { getAuthorizationHeader } from "../Utils/AuthorizationUtils"; const notificationsPath = () => { switch (configContext.platform) { @@ -20,9 +20,7 @@ export const fetchPortalNotifications = async (): Promise => { - const defaultExperience = userContext.apiType; - switch (defaultExperience) { + const { apiType } = userContext; + switch (apiType) { case "SQL": return createSqlContainer(params); case "Mongo": @@ -75,7 +75,7 @@ const createCollectionWithARM = async (params: DataModels.CreateCollectionParams case "Tables": return createTable(params); default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } }; diff --git a/src/Common/dataAccess/createDatabase.ts b/src/Common/dataAccess/createDatabase.ts index d6ea3b834..fc4172ce5 100644 --- a/src/Common/dataAccess/createDatabase.ts +++ b/src/Common/dataAccess/createDatabase.ts @@ -48,8 +48,9 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P } async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): Promise { - const defaultExperience = userContext.apiType; - switch (defaultExperience) { + const { apiType } = userContext; + + switch (apiType) { case "SQL": return createSqlDatabase(params); case "Mongo": @@ -59,7 +60,7 @@ async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): P case "Gremlin": return createGremlineDatabase(params); default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } } diff --git a/src/Common/dataAccess/deleteCollection.ts b/src/Common/dataAccess/deleteCollection.ts index b1d15ee4b..ec3dd7453 100644 --- a/src/Common/dataAccess/deleteCollection.ts +++ b/src/Common/dataAccess/deleteCollection.ts @@ -27,12 +27,10 @@ export async function deleteCollection(databaseId: string, collectionId: string) } function deleteCollectionWithARM(databaseId: string, collectionId: string): Promise { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; - const defaultExperience = userContext.apiType; + const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext; + const accountName = databaseAccount.name; - switch (defaultExperience) { + switch (apiType) { case "SQL": return deleteSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId); case "Mongo": @@ -44,6 +42,6 @@ function deleteCollectionWithARM(databaseId: string, collectionId: string): Prom case "Tables": return deleteTable(subscriptionId, resourceGroup, accountName, collectionId); default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } } diff --git a/src/Common/dataAccess/deleteDatabase.ts b/src/Common/dataAccess/deleteDatabase.ts index f30084fc3..4e7d3523c 100644 --- a/src/Common/dataAccess/deleteDatabase.ts +++ b/src/Common/dataAccess/deleteDatabase.ts @@ -30,12 +30,10 @@ export async function deleteDatabase(databaseId: string): Promise { } function deleteDatabaseWithARM(databaseId: string): Promise { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; - const defaultExperience = userContext.apiType; + const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext; + const accountName = databaseAccount.name; - switch (defaultExperience) { + switch (apiType) { case "SQL": return deleteSqlDatabase(subscriptionId, resourceGroup, accountName, databaseId); case "Mongo": @@ -45,6 +43,6 @@ function deleteDatabaseWithARM(databaseId: string): Promise { case "Gremlin": return deleteGremlinDatabase(subscriptionId, resourceGroup, accountName, databaseId); default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } } diff --git a/src/Common/dataAccess/getCollectionDataUsageSize.ts b/src/Common/dataAccess/getCollectionDataUsageSize.ts index a86f22c25..bb53bc6ac 100644 --- a/src/Common/dataAccess/getCollectionDataUsageSize.ts +++ b/src/Common/dataAccess/getCollectionDataUsageSize.ts @@ -1,8 +1,8 @@ import { AuthType } from "../../AuthType"; -import { armRequest } from "../../Utils/arm/request"; import { configContext } from "../../ConfigContext"; -import { handleError } from "../ErrorHandlingUtils"; import { userContext } from "../../UserContext"; +import { armRequest } from "../../Utils/arm/request"; +import { handleError } from "../ErrorHandlingUtils"; interface TimeSeriesData { data: { @@ -45,9 +45,9 @@ export const getCollectionUsageSizeInKB = async (databaseName: string, container return undefined; } - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; + const filter = `DatabaseName eq '${databaseName}' and CollectionName eq '${containerName}'`; const metricNames = "DataUsage,IndexUsage"; const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/providers/microsoft.insights/metrics`; diff --git a/src/Common/dataAccess/readCollectionOffer.ts b/src/Common/dataAccess/readCollectionOffer.ts index b83d37cb7..4b1e0a9e8 100644 --- a/src/Common/dataAccess/readCollectionOffer.ts +++ b/src/Common/dataAccess/readCollectionOffer.ts @@ -28,14 +28,12 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr }; const readCollectionOfferWithARM = async (databaseId: string, collectionId: string): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; - const defaultExperience = userContext.apiType; + const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext; + const accountName = databaseAccount.name; let rpResponse; try { - switch (defaultExperience) { + switch (apiType) { case "SQL": rpResponse = await getSqlContainerThroughput( subscriptionId, @@ -76,7 +74,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId); break; default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } } catch (error) { if (error.code !== "NotFound") { diff --git a/src/Common/dataAccess/readCollections.ts b/src/Common/dataAccess/readCollections.ts index f12b8074f..7161f598c 100644 --- a/src/Common/dataAccess/readCollections.ts +++ b/src/Common/dataAccess/readCollections.ts @@ -29,12 +29,11 @@ export async function readCollections(databaseId: string): Promise { let rpResponse; - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; - const defaultExperience = userContext.apiType; - switch (defaultExperience) { + const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext; + const accountName = databaseAccount.name; + + switch (apiType) { case "SQL": rpResponse = await listSqlContainers(subscriptionId, resourceGroup, accountName, databaseId); break; @@ -51,7 +50,7 @@ async function readCollectionsWithARM(databaseId: string): Promise collection.properties?.resource as DataModels.Collection); diff --git a/src/Common/dataAccess/readDatabaseOffer.ts b/src/Common/dataAccess/readDatabaseOffer.ts index 17cc80afd..b26976a64 100644 --- a/src/Common/dataAccess/readDatabaseOffer.ts +++ b/src/Common/dataAccess/readDatabaseOffer.ts @@ -27,14 +27,12 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis }; const readDatabaseOfferWithARM = async (databaseId: string): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; - const defaultExperience = userContext.apiType; + const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext; + const accountName = databaseAccount.name; let rpResponse; try { - switch (defaultExperience) { + switch (apiType) { case "SQL": rpResponse = await getSqlDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId); break; @@ -48,7 +46,7 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise => { rpResponse = await getGremlinDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId); break; default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } } catch (error) { if (error.code !== "NotFound") { diff --git a/src/Common/dataAccess/readDatabases.ts b/src/Common/dataAccess/readDatabases.ts index 1026c0654..079c92269 100644 --- a/src/Common/dataAccess/readDatabases.ts +++ b/src/Common/dataAccess/readDatabases.ts @@ -29,12 +29,10 @@ export async function readDatabases(): Promise { async function readDatabasesWithARM(): Promise { let rpResponse; - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; - const defaultExperience = userContext.apiType; + const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext; + const accountName = databaseAccount.name; - switch (defaultExperience) { + switch (apiType) { case "SQL": rpResponse = await listSqlDatabases(subscriptionId, resourceGroup, accountName); break; @@ -48,7 +46,7 @@ async function readDatabasesWithARM(): Promise { rpResponse = await listGremlinDatabases(subscriptionId, resourceGroup, accountName); break; default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } return rpResponse?.value?.map((database) => database.properties?.resource as DataModels.Database); diff --git a/src/Common/dataAccess/readMongoDBCollection.tsx b/src/Common/dataAccess/readMongoDBCollection.tsx index 240e81315..e7ae32c79 100644 --- a/src/Common/dataAccess/readMongoDBCollection.tsx +++ b/src/Common/dataAccess/readMongoDBCollection.tsx @@ -1,9 +1,9 @@ +import { AuthType } from "../../AuthType"; import { userContext } from "../../UserContext"; import { getMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources"; import { MongoDBCollectionResource } from "../../Utils/arm/generatedClients/2020-04-01/types"; import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils"; import { handleError } from "../ErrorHandlingUtils"; -import { AuthType } from "../../AuthType"; export async function readMongoDBCollectionThroughRP( databaseId: string, @@ -13,9 +13,9 @@ export async function readMongoDBCollectionThroughRP( return undefined; } let collection: MongoDBCollectionResource; - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; const clearMessage = logConsoleProgress(`Reading container ${collectionId}`); try { diff --git a/src/Common/dataAccess/readUserDefinedFunctions.ts b/src/Common/dataAccess/readUserDefinedFunctions.ts index f1a0f52c5..813ff95c5 100644 --- a/src/Common/dataAccess/readUserDefinedFunctions.ts +++ b/src/Common/dataAccess/readUserDefinedFunctions.ts @@ -11,12 +11,13 @@ export async function readUserDefinedFunctions( collectionId: string ): Promise<(UserDefinedFunctionDefinition & Resource)[]> { const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`); + const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext; try { - if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") { + if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") { const rpResponse = await listSqlUserDefinedFunctions( - userContext.subscriptionId, - userContext.resourceGroup, - userContext.databaseAccount.name, + subscriptionId, + resourceGroup, + databaseAccount.name, databaseId, collectionId ); diff --git a/src/Common/dataAccess/updateCollection.ts b/src/Common/dataAccess/updateCollection.ts index f3b9d5002..2d022bbe9 100644 --- a/src/Common/dataAccess/updateCollection.ts +++ b/src/Common/dataAccess/updateCollection.ts @@ -63,12 +63,10 @@ async function updateCollectionWithARM( collectionId: string, newCollection: Partial ): Promise { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; - const defaultExperience = userContext.apiType; + const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext; + const accountName = databaseAccount.name; - switch (defaultExperience) { + switch (apiType) { case "SQL": return updateSqlContainer(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection); case "Cassandra": @@ -87,7 +85,7 @@ async function updateCollectionWithARM( newCollection ); default: - throw new Error(`Unsupported default experience type: ${defaultExperience}`); + throw new Error(`Unsupported default experience type: ${apiType}`); } } diff --git a/src/Common/dataAccess/updateOffer.ts b/src/Common/dataAccess/updateOffer.ts index 0050f3648..7f132d729 100644 --- a/src/Common/dataAccess/updateOffer.ts +++ b/src/Common/dataAccess/updateOffer.ts @@ -144,9 +144,8 @@ const updateDatabaseOfferWithARM = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateSqlContainerToAutoscale( @@ -178,9 +177,8 @@ const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise }; const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateMongoDBCollectionToAutoscale( @@ -212,9 +210,8 @@ const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateCassandraTableToAutoscale( @@ -246,9 +243,8 @@ const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateGremlinGraphToAutoscale( @@ -280,9 +276,8 @@ const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise }; const updateTableOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateTableToAutoscale(subscriptionId, resourceGroup, accountName, params.collectionId); @@ -295,9 +290,8 @@ const updateTableOffer = async (params: UpdateOfferParams): Promise => { }; const updateSqlDatabaseOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateSqlDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId); @@ -310,9 +304,8 @@ const updateSqlDatabaseOffer = async (params: UpdateOfferParams): Promise }; const updateMongoDatabaseOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateMongoDBDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId); @@ -325,9 +318,8 @@ const updateMongoDatabaseOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateCassandraKeyspaceToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId); @@ -340,9 +332,8 @@ const updateCassandraKeyspaceOffer = async (params: UpdateOfferParams): Promise< }; const updateGremlinDatabaseOffer = async (params: UpdateOfferParams): Promise => { - const subscriptionId = userContext.subscriptionId; - const resourceGroup = userContext.resourceGroup; - const accountName = userContext.databaseAccount.name; + const { subscriptionId, resourceGroup, databaseAccount } = userContext; + const accountName = databaseAccount.name; if (params.migrateToAutoPilot) { await migrateGremlinDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId); diff --git a/src/Common/dataAccess/updateStoredProcedure.ts b/src/Common/dataAccess/updateStoredProcedure.ts index 9889ac519..dd6d86f66 100644 --- a/src/Common/dataAccess/updateStoredProcedure.ts +++ b/src/Common/dataAccess/updateStoredProcedure.ts @@ -20,11 +20,13 @@ export async function updateStoredProcedure( ): Promise { const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`); try { - if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") { + const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext; + + if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") { const getResponse = await getSqlStoredProcedure( - userContext.subscriptionId, - userContext.resourceGroup, - userContext.databaseAccount.name, + subscriptionId, + resourceGroup, + databaseAccount.name, databaseId, collectionId, storedProcedure.id @@ -38,9 +40,9 @@ export async function updateStoredProcedure( }, }; const rpResponse = await createUpdateSqlStoredProcedure( - userContext.subscriptionId, - userContext.resourceGroup, - userContext.databaseAccount.name, + subscriptionId, + resourceGroup, + databaseAccount.name, databaseId, collectionId, storedProcedure.id, diff --git a/src/Common/dataAccess/updateTrigger.ts b/src/Common/dataAccess/updateTrigger.ts index f4898052b..d43463738 100644 --- a/src/Common/dataAccess/updateTrigger.ts +++ b/src/Common/dataAccess/updateTrigger.ts @@ -16,12 +16,13 @@ export async function updateTrigger( trigger: TriggerDefinition ): Promise { const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`); + const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext; try { - if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") { + if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") { const getResponse = await getSqlTrigger( - userContext.subscriptionId, - userContext.resourceGroup, - userContext.databaseAccount.name, + subscriptionId, + resourceGroup, + databaseAccount.name, databaseId, collectionId, trigger.id @@ -35,9 +36,9 @@ export async function updateTrigger( }, }; const rpResponse = await createUpdateSqlTrigger( - userContext.subscriptionId, - userContext.resourceGroup, - userContext.databaseAccount.name, + subscriptionId, + resourceGroup, + databaseAccount.name, databaseId, collectionId, trigger.id, diff --git a/src/Common/dataAccess/updateUserDefinedFunction.ts b/src/Common/dataAccess/updateUserDefinedFunction.ts index 1d50951d6..3b9449915 100644 --- a/src/Common/dataAccess/updateUserDefinedFunction.ts +++ b/src/Common/dataAccess/updateUserDefinedFunction.ts @@ -19,12 +19,13 @@ export async function updateUserDefinedFunction( userDefinedFunction: UserDefinedFunctionDefinition ): Promise { const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`); + const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext; try { - if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") { + if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") { const getResponse = await getSqlUserDefinedFunction( - userContext.subscriptionId, - userContext.resourceGroup, - userContext.databaseAccount.name, + subscriptionId, + resourceGroup, + databaseAccount.name, databaseId, collectionId, userDefinedFunction.id @@ -38,9 +39,9 @@ export async function updateUserDefinedFunction( }, }; const rpResponse = await createUpdateSqlUserDefinedFunction( - userContext.subscriptionId, - userContext.resourceGroup, - userContext.databaseAccount.name, + subscriptionId, + resourceGroup, + databaseAccount.name, databaseId, collectionId, userDefinedFunction.id, diff --git a/src/Contracts/DataModels.ts b/src/Contracts/DataModels.ts index 4e3085b45..aece6a04a 100644 --- a/src/Contracts/DataModels.ts +++ b/src/Contracts/DataModels.ts @@ -4,7 +4,6 @@ export interface DatabaseAccount { location: string; type: string; kind: string; - tags: any; properties: DatabaseAccountExtendedProperties; } diff --git a/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx b/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx index ba713ca35..04de9a716 100644 --- a/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx +++ b/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx @@ -1,9 +1,8 @@ +import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react"; import * as React from "react"; -import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels"; -import { DefaultButton, IButtonStyles } from "office-ui-fabric-react/lib/Button"; -import { IContextualMenuItem, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu"; -import * as Logger from "../../../Common/Logger"; import { getErrorMessage } from "../../../Common/ErrorHandlingUtils"; +import * as Logger from "../../../Common/Logger"; +import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels"; export interface ArcadiaMenuPickerProps { selectText?: string; diff --git a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx index 134fcc7c3..d662db58b 100644 --- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx +++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx @@ -1,4 +1,4 @@ -import { Icon, Label, Stack } from "office-ui-fabric-react"; +import { Icon, Label, Stack } from "@fluentui/react"; import * as React from "react"; import { accordionStackTokens } from "../Settings/SettingsRenderUtils"; diff --git a/src/Explorer/Controls/Dialog.tsx b/src/Explorer/Controls/Dialog.tsx index ffb19b31d..779cdb049 100644 --- a/src/Explorer/Controls/Dialog.tsx +++ b/src/Explorer/Controls/Dialog.tsx @@ -1,14 +1,20 @@ import { ChoiceGroup, + DefaultButton, + Dialog as FluentDialog, + DialogFooter, + DialogType, FontIcon, + IButtonProps, IChoiceGroupProps, + IDialogProps, IProgressIndicatorProps, + ITextFieldProps, + Link, + PrimaryButton, ProgressIndicator, -} from "office-ui-fabric-react"; -import { DefaultButton, IButtonProps, PrimaryButton } from "office-ui-fabric-react/lib/Button"; -import { Dialog as FluentDialog, DialogFooter, DialogType, IDialogProps } from "office-ui-fabric-react/lib/Dialog"; -import { Link } from "office-ui-fabric-react/lib/Link"; -import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField"; + TextField, +} from "@fluentui/react"; import React, { FunctionComponent } from "react"; export interface TextFieldProps extends ITextFieldProps { diff --git a/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx b/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx index 0511efdd4..1763a24b3 100644 --- a/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx +++ b/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx @@ -2,9 +2,9 @@ * React component for Switch Directory */ -import _ from "underscore"; +import { Dropdown, IDropdownOption, IDropdownProps } from "@fluentui/react"; import * as React from "react"; -import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown"; +import _ from "underscore"; import { Tenant } from "../../../Contracts/DataModels"; export interface DefaultDirectoryDropdownProps { diff --git a/src/Explorer/Controls/Directory/DirectoryListComponent.tsx b/src/Explorer/Controls/Directory/DirectoryListComponent.tsx index d7356d541..03c4ae9e2 100644 --- a/src/Explorer/Controls/Directory/DirectoryListComponent.tsx +++ b/src/Explorer/Controls/Directory/DirectoryListComponent.tsx @@ -1,11 +1,15 @@ -import _ from "underscore"; +import { + DefaultButton, + IButtonProps, + ITextFieldProps, + List, + ScrollablePane, + Sticky, + StickyPositionType, + TextField, +} from "@fluentui/react"; import * as React from "react"; - -import { DefaultButton, IButtonProps } from "office-ui-fabric-react/lib/Button"; -import { List } from "office-ui-fabric-react/lib/List"; -import { ScrollablePane } from "office-ui-fabric-react/lib/ScrollablePane"; -import { Sticky, StickyPositionType } from "office-ui-fabric-react/lib/Sticky"; -import { TextField, ITextFieldProps } from "office-ui-fabric-react/lib/TextField"; +import _ from "underscore"; import { Tenant } from "../../../Contracts/DataModels"; export interface DirectoryListProps { diff --git a/src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap b/src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap index ef5da945d..31ae98d55 100644 --- a/src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap +++ b/src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`test render renders with directories and default 1`] = ` -
`; diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap index 2f4c53dd3..03060f15b 100644 --- a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap +++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap @@ -338,7 +338,7 @@ exports[`SettingsUtils functions render 1`] = ` are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo shell. - @@ -350,7 +350,7 @@ exports[`SettingsUtils functions render 1`] = ` azure portal. - + - - Error: label, truelabel and falselabel are required for boolean input 'throughput3' - +
@@ -282,7 +271,7 @@ exports[`SmartUiComponent disable all inputs 1`] = ` label="Database" /> - - - Error: label, truelabel and falselabel are required for boolean input 'throughput3' - +
@@ -604,7 +581,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state label="Database" /> - = (props: CostEstimateTextProps) => { const { requestUnits, isAutoscale } = props; - const databaseAccount = userContext.databaseAccount; - if (!databaseAccount || !databaseAccount.properties) { + const { databaseAccount } = userContext; + if (!databaseAccount?.properties) { return <>; } diff --git a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx index 991a1be84..2a41c9ded 100644 --- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx +++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx @@ -5,15 +5,16 @@ * - context menu */ +import { + DirectionalHint, + IButtonStyles, + IconButton, + IContextualMenuItemProps, + IContextualMenuProps, +} from "@fluentui/react"; import LoadingIndicator_3Squares from "images/LoadingIndicator_3Squares.gif"; import TriangleDownIcon from "images/Triangle-down.svg"; import TriangleRightIcon from "images/Triangle-right.svg"; -import { IButtonStyles, IconButton } from "office-ui-fabric-react/lib/Button"; -import { - DirectionalHint, - IContextualMenuItemProps, - IContextualMenuProps, -} from "office-ui-fabric-react/lib/ContextualMenu"; import * as React from "react"; import AnimateHeight from "react-animate-height"; import * as Constants from "../../../Common/Constants"; diff --git a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts index fdab3a30d..75d059dc3 100644 --- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts +++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts @@ -79,7 +79,6 @@ describe("ContainerSampleGenerator", () => { location: "foo", type: "foo", kind: "foo", - tags: [], properties: { documentEndpoint: "bar", gremlinEndpoint: "foo", diff --git a/src/Explorer/DataSamples/ContainerSampleGenerator.ts b/src/Explorer/DataSamples/ContainerSampleGenerator.ts index 7d6b42453..dd9a4adb9 100644 --- a/src/Explorer/DataSamples/ContainerSampleGenerator.ts +++ b/src/Explorer/DataSamples/ContainerSampleGenerator.ts @@ -80,7 +80,7 @@ export class ContainerSampleGenerator { if (!queries || queries.length < 1) { return; } - const account = userContext.databaseAccount; + const { databaseAccount: account } = userContext; const databaseId = collection.databaseId; const gremlinClient = new GremlinClient(); gremlinClient.initialize({ diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index 5b368781f..47af1ae40 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -1,5 +1,5 @@ import * as ko from "knockout"; -import { IChoiceGroupProps } from "office-ui-fabric-react"; +import { IChoiceGroupProps } from "@fluentui/react"; import * as path from "path"; import Q from "q"; import React from "react"; @@ -12,7 +12,7 @@ import { readCollection } from "../Common/dataAccess/readCollection"; import { readDatabases } from "../Common/dataAccess/readDatabases"; import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils"; import * as Logger from "../Common/Logger"; -import { sendCachedDataMessage, sendMessage } from "../Common/MessageHandler"; +import { sendCachedDataMessage } from "../Common/MessageHandler"; import { QueriesClient } from "../Common/QueriesClient"; import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter"; import { configContext, Platform } from "../ConfigContext"; @@ -31,7 +31,7 @@ import { ExplorerSettings } from "../Shared/ExplorerSettings"; import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants"; import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor"; import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager"; -import { userContext } from "../UserContext"; +import { updateUserContext, userContext } from "../UserContext"; import { getCollectionName } from "../Utils/APITypeUtils"; import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils"; import { stringToBlob } from "../Utils/BlobUtils"; @@ -109,23 +109,8 @@ export default class Explorer { public refreshTreeTitle: ko.Observable; public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth; - /** - * @deprecated - * Use userContext.databaseAccount instead - * */ - public databaseAccount: ko.Observable; public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults; - /** - * @deprecated - * Use userContext.apiType instead - * */ - public defaultExperience: ko.Observable; public isFixedCollectionWithSharedThroughputSupported: ko.Computed; - /** - * @deprecated - * Compare a string with userContext.apiType instead: userContext.apiType === "Mongo" - * */ - public isEnableMongoCapabilityPresent: ko.Computed; public isServerlessEnabled: ko.Computed; public isAccountReady: ko.Observable; public canSaveQueries: ko.Computed; @@ -176,7 +161,6 @@ export default class Explorer { // features public isPublishNotebookPaneEnabled: ko.Observable; public isHostedDataExplorerEnabled: ko.Computed; - public isRightPanelV2Enabled: ko.Computed; public isMongoIndexingEnabled: ko.Observable; public canExceedMaximumValue: ko.Computed; public isAutoscaleDefaultEnabled: ko.Observable; @@ -236,7 +220,6 @@ export default class Explorer { this.deleteDatabaseText = ko.observable("Delete Database"); this.refreshTreeTitle = ko.observable("Refresh collections"); - this.databaseAccount = ko.observable(); this.isAccountReady = ko.observable(false); this._isInitializingNotebooks = false; this.arcadiaToken = ko.observable(); @@ -271,7 +254,7 @@ export default class Explorer { async () => { this.isNotebookEnabled( userContext.authType !== AuthType.ResourceToken && - ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) || + ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) || userContext.features.enableNotebooks) ); TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, { @@ -280,7 +263,7 @@ export default class Explorer { }); if (this.isNotebookEnabled()) { - await this.initNotebooks(this.databaseAccount()); + await this.initNotebooks(userContext.databaseAccount); const workspaces = await this._getArcadiaWorkspaces(); this.arcadiaWorkspaces(workspaces); } else if (this.notebookToImport) { @@ -376,60 +359,32 @@ export default class Explorer { bounds: splitterBounds, direction: SplitterDirection.Vertical, }); - this.defaultExperience = ko.observable(); - // this.databaseAccount.subscribe((databaseAccount) => { - // const defaultExperience: string = DefaultExperienceUtility.getDefaultExperienceFromDatabaseAccount( - // databaseAccount - // ); - // this.defaultExperience(defaultExperience); - // // TODO. Remove this entirely - // updateUserContext({ - // apiType: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience), - // }); - // }); this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => { if (userContext.features.enableFixedCollectionWithSharedThroughput) { return true; } - if (this.databaseAccount && !this.databaseAccount()) { + if (!userContext.databaseAccount) { return false; } - return this.isEnableMongoCapabilityPresent(); + return userContext.apiType === "Mongo"; }); this.isServerlessEnabled = ko.computed( () => - this.databaseAccount && - this.databaseAccount()?.properties?.capabilities?.find( + userContext.databaseAccount?.properties?.capabilities?.find( (item) => item.name === Constants.CapabilityNames.EnableServerless ) !== undefined ); - this.isEnableMongoCapabilityPresent = ko.computed(() => { - const capabilities = this.databaseAccount && this.databaseAccount()?.properties?.capabilities; - if (!capabilities) { - return false; - } - - for (let i = 0; i < capabilities.length; i++) { - if (typeof capabilities[i] === "object" && capabilities[i].name === Constants.CapabilityNames.EnableMongo) { - return true; - } - } - - return false; - }); - this.isHostedDataExplorerEnabled = ko.computed( () => configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && userContext.apiType !== "Gremlin" ); - this.isRightPanelV2Enabled = ko.computed(() => userContext.features.enableRightPanelV2); this.selectedDatabaseId = ko.computed(() => { const selectedNode = this.selectedNode(); if (!selectedNode) { @@ -688,11 +643,11 @@ export default class Explorer { this.isSynapseLinkUpdating(true); this._closeSynapseLinkModalDialog(); - const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(this.databaseAccount().id); + const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(userContext.databaseAccount.id); try { const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync( - this.databaseAccount().id, + userContext.databaseAccount.id, "2019-12-12", { properties: { @@ -703,7 +658,7 @@ export default class Explorer { clearInProgressMessage(); logConsoleInfo("Enabled Azure Synapse Link for this account"); TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, {}, startTime); - this.databaseAccount(databaseAccount); + updateUserContext({ databaseAccount }); } catch (error) { clearInProgressMessage(); logConsoleError(`Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`); @@ -752,10 +707,6 @@ export default class Explorer { this.setIsNotificationConsoleExpanded(true); } - public collapseConsole(): void { - this.setIsNotificationConsoleExpanded(false); - } - public toggleLeftPaneExpanded() { this.isLeftPaneExpanded(!this.isLeftPaneExpanded()); @@ -1026,14 +977,14 @@ export default class Explorer { } private async ensureNotebookWorkspaceRunning() { - if (!this.databaseAccount()) { + if (!userContext.databaseAccount) { return; } let clearMessage; try { const notebookWorkspace = await this.notebookWorkspaceManager.getNotebookWorkspaceAsync( - this.databaseAccount().id, + userContext.databaseAccount.id, "default" ); if ( @@ -1043,7 +994,7 @@ export default class Explorer { notebookWorkspace.properties.status.toLowerCase() === "stopped" ) { clearMessage = NotificationConsoleUtils.logConsoleProgress("Initializing notebook workspace"); - await this.notebookWorkspaceManager.startNotebookWorkspaceAsync(this.databaseAccount().id, "default"); + await this.notebookWorkspaceManager.startNotebookWorkspaceAsync(userContext.databaseAccount.id, "default"); } } catch (error) { handleError(error, "Explorer/ensureNotebookWorkspaceRunning", "Failed to initialize notebook workspace"); @@ -1128,21 +1079,10 @@ export default class Explorer { if (process.env.NODE_ENV === "development") { sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs)); } - - const databaseAccount = inputs.databaseAccount || null; if (inputs.defaultCollectionThroughput) { this.collectionCreationDefaults = inputs.defaultCollectionThroughput; } - this.databaseAccount(databaseAccount); this.setFeatureFlagsFromFlights(inputs.flights); - TelemetryProcessor.traceSuccess( - Action.LoadDatabaseAccount, - { - dataExplorerArea: Constants.Areas.ResourceTree, - }, - inputs.loadDatabaseAccountTimestamp - ); - this.isAccountReady(true); } } @@ -1181,38 +1121,6 @@ export default class Explorer { this.commandBarComponentAdapter.onUpdateTabsButtons(buttons); } - public signInAad = () => { - TelemetryProcessor.trace(Action.SignInAad, undefined, { area: "Explorer" }); - sendMessage({ - type: MessageTypes.AadSignIn, - }); - }; - - public onSwitchToConnectionString = () => { - $("#connectWithAad").hide(); - $("#connectWithConnectionString").show(); - }; - - public clickHostedAccountSwitch = () => { - sendMessage({ - type: MessageTypes.UpdateAccountSwitch, - click: true, - }); - }; - - public clickHostedDirectorySwitch = () => { - sendMessage({ - type: MessageTypes.UpdateDirectoryControl, - click: true, - }); - }; - - public refreshDatabaseAccount = () => { - sendMessage({ - type: MessageTypes.RefreshDatabaseAccount, - }); - }; - private refreshAndExpandNewDatabases(newDatabases: ViewModels.Database[]): Q.Promise { // we reload collections for all databases so the resource tree reflects any collection-level changes // i.e addition of stored procedures, etc. @@ -1632,7 +1540,7 @@ export default class Explorer { } private async _refreshNotebooksEnabledStateForAccount(): Promise { - const authType = userContext.authType; + const { databaseAccount, authType } = userContext; if ( authType === AuthType.EncryptedToken || authType === AuthType.ResourceToken || @@ -1642,7 +1550,6 @@ export default class Explorer { return; } - const databaseAccount = this.databaseAccount(); const firstWriteLocation = databaseAccount?.properties?.writeLocations && databaseAccount?.properties?.writeLocations[0]?.locationName.toLowerCase(); @@ -1681,9 +1588,8 @@ export default class Explorer { } public _refreshSparkEnabledStateForAccount = async (): Promise => { - const subscriptionId = userContext.subscriptionId; + const { subscriptionId, authType } = userContext; const armEndpoint = configContext.ARM_ENDPOINT; - const authType = userContext.authType; if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) { // explorer is not aware of the database account yet this.isSparkEnabledForAccount(false); @@ -1710,9 +1616,8 @@ export default class Explorer { }; public _isAfecFeatureRegistered = async (featureName: string): Promise => { - const subscriptionId = userContext.subscriptionId; + const { subscriptionId, authType } = userContext; const armEndpoint = configContext.ARM_ENDPOINT; - const authType = userContext.authType; if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) { // explorer is not aware of the database account yet return false; @@ -2024,7 +1929,7 @@ export default class Explorer { } public async handleOpenFileAction(path: string): Promise { - if (this.isAccountReady() && !(await this._containsDefaultNotebookWorkspace(this.databaseAccount()))) { + if (this.isAccountReady() && !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) { this.closeAllPanes(); this._openSetupNotebooksPaneForQuickstart(); } diff --git a/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx index 42441a9a0..f6525e54d 100644 --- a/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx +++ b/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx @@ -1,5 +1,5 @@ +import { FocusZone } from "@fluentui/react"; import * as React from "react"; -import { FocusZone } from "office-ui-fabric-react/lib/FocusZone"; import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement"; export interface CaptionId { diff --git a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx index 7ba85919a..4d6da79f9 100644 --- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx +++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx @@ -1,6 +1,6 @@ +import { Dropdown, IDropdownOption, Stack, TextField } from "@fluentui/react"; import AddIcon from "images/Add-property.svg"; import DeleteIcon from "images/delete.svg"; -import { Dropdown, IDropdownOption, Stack, TextField } from "office-ui-fabric-react"; import React, { FunctionComponent, useRef, useState } from "react"; import { NormalizedEventKey } from "../../../Common/Constants"; import { GremlinPropertyValueType, InputPropertyValueTypeString, NewVertexData } from "../../../Contracts/ViewModels"; diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx index b45f5dc9d..520cdd372 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx @@ -3,12 +3,13 @@ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate * and update any knockout observables passed from the parent. */ +import { CommandBar, ICommandBarItemProps } from "@fluentui/react"; import * as ko from "knockout"; -import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar"; import * as React from "react"; import { ReactAdapter } from "../../../Bindings/ReactBindingHandler"; import { StyleConstants } from "../../../Common/Constants"; import * as ViewModels from "../../../Contracts/ViewModels"; +import { userContext } from "../../../UserContext"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; import Explorer from "../../Explorer"; import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory"; @@ -39,7 +40,7 @@ export class CommandBarComponentAdapter implements ReactAdapter { container.isResourceTokenCollectionNodeSelected, container.isHostedDataExplorerEnabled, container.isSynapseLinkUpdating, - container.databaseAccount, + userContext?.databaseAccount, this.isNotebookTabActive, container.isServerlessEnabled, ]; diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx index 0ac194686..138e4f5cd 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx @@ -239,21 +239,11 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo return undefined; } - if ( - container.databaseAccount && - container.databaseAccount() && - container.databaseAccount().properties && - container.databaseAccount().properties.enableAnalyticalStorage - ) { + if (userContext?.databaseAccount?.properties?.enableAnalyticalStorage) { return undefined; } - const capabilities = - (container.databaseAccount && - container.databaseAccount() && - container.databaseAccount().properties && - container.databaseAccount().properties.capabilities) || - []; + const capabilities = userContext?.databaseAccount?.properties?.capabilities || []; if (capabilities.some((capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics)) { return undefined; } diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx index 4a457b67c..3789ad6f1 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx @@ -1,6 +1,6 @@ -import * as CommandBarUtil from "./CommandBarUtil"; -import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar"; +import { ICommandBarItemProps } from "@fluentui/react"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; +import * as CommandBarUtil from "./CommandBarUtil"; describe("CommandBarUtil tests", () => { const createButton = (): CommandButtonComponentProps => { diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx index 77c9c14e1..2ab20ce85 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx @@ -1,9 +1,13 @@ +import { + Dropdown, + ICommandBarItemProps, + IComponentAsProps, + IconType, + IDropdownOption, + IDropdownStyles, +} from "@fluentui/react"; import ChevronDownIcon from "images/Chevron_down.svg"; import { Observable } from "knockout"; -import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar"; -import { Dropdown, IDropdownOption, IDropdownStyles } from "office-ui-fabric-react/lib/Dropdown"; -import { IconType } from "office-ui-fabric-react/lib/Icon"; -import { IComponentAsProps } from "office-ui-fabric-react/lib/Utilities"; import * as React from "react"; import _ from "underscore"; import { StyleConstants } from "../../../Common/Constants"; diff --git a/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx b/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx index 420b481ea..4317fed4e 100644 --- a/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx +++ b/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx @@ -1,9 +1,7 @@ -import * as React from "react"; +import { ProgressIndicator, Spinner, SpinnerSize, Stack } from "@fluentui/react"; import { Observable, Subscription } from "knockout"; +import * as React from "react"; import { MemoryUsageInfo } from "../../../Contracts/DataModels"; -import { ProgressIndicator } from "office-ui-fabric-react/lib/ProgressIndicator"; -import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner"; -import { Stack } from "office-ui-fabric-react/lib/Stack"; interface MemoryTrackerProps { memoryUsageInfo: Observable; diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx index 2ddd52edd..30aa5b038 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx @@ -2,6 +2,7 @@ * React component for control bar */ +import { Dropdown, IDropdownOption } from "@fluentui/react"; import LoaderIcon from "images/circular_loader_black_16x16.gif"; import { ReactComponent as ClearIcon } from "images/Clear1.svg"; import ErrorBlackIcon from "images/error_black.svg"; @@ -11,7 +12,6 @@ import InfoIcon from "images/info_color.svg"; import LoadingIcon from "images/loading.svg"; import ChevronDownIcon from "images/QueryBuilder/CollapseChevronDown_16x.png"; import ChevronUpIcon from "images/QueryBuilder/CollapseChevronUp_16x.png"; -import { Dropdown, IDropdownOption } from "office-ui-fabric-react"; import * as React from "react"; import AnimateHeight from "react-animate-height"; import { ClientDefaults, KeyCodes } from "../../../Common/Constants"; diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap index 6bcb9ab1b..3bced6c5f 100644 --- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap +++ b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap @@ -111,7 +111,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
- - { const explorer = window.dataExplorer; - if (!explorer || !explorer.databaseAccount() || !explorer.databaseAccount().id) { + const { databaseAccount } = userContext; + if (!databaseAccount?.id) { throw new Error("DataExplorer not initialized"); } const notebookWorkspaceManager = explorer.notebookWorkspaceManager; try { - await notebookWorkspaceManager.deleteNotebookWorkspaceAsync(explorer.databaseAccount().id, "default"); - await notebookWorkspaceManager.createNotebookWorkspaceAsync(explorer.databaseAccount().id, "default"); + await notebookWorkspaceManager.deleteNotebookWorkspaceAsync(databaseAccount?.id, "default"); + await notebookWorkspaceManager.createNotebookWorkspaceAsync(databaseAccount?.id, "default"); } catch (error) { Logger.logError(getErrorMessage(error), "NotebookContainerClient/recreateNotebookWorkspaceAsync"); return Promise.reject(error); diff --git a/src/Explorer/Notebook/NotebookManager.tsx b/src/Explorer/Notebook/NotebookManager.tsx index 53b3220c0..c97f14566 100644 --- a/src/Explorer/Notebook/NotebookManager.tsx +++ b/src/Explorer/Notebook/NotebookManager.tsx @@ -17,6 +17,7 @@ import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService"; import { JunoClient } from "../../Juno/JunoClient"; import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants"; import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor"; +import { userContext } from "../../UserContext"; import { getFullName } from "../../Utils/UserUtils"; import Explorer from "../Explorer"; import { ContextualPaneBase } from "../Panes/ContextualPaneBase"; @@ -56,7 +57,7 @@ export default class NotebookManager { public initialize(params: NotebookManagerOptions): void { this.params = params; - this.junoClient = new JunoClient(this.params.container.databaseAccount); + this.junoClient = new JunoClient(); this.gitHubOAuthService = new GitHubOAuthService(this.junoClient); this.gitHubClient = new GitHubClient(this.onGitHubClientError); @@ -73,7 +74,7 @@ export default class NotebookManager { this.notebookClient = new NotebookContainerClient( this.params.container.notebookServerInfo, - () => this.params.container.initNotebooks(this.params.container.databaseAccount()), + () => this.params.container.initNotebooks(userContext?.databaseAccount), (update: MemoryUsageInfo) => this.params.container.memoryUsageInfo(update) ); diff --git a/src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx b/src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx index b502d4c21..3e96b30b9 100644 --- a/src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx +++ b/src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx @@ -1,8 +1,7 @@ +import { IconButton, Spinner, SpinnerSize } from "@fluentui/react"; import * as React from "react"; -import { IconButton } from "office-ui-fabric-react/lib/Button"; -import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner"; -import "./Prompt.less"; import { PassedPromptProps } from "./Prompt"; +import "./Prompt.less"; export const promptContent = (props: PassedPromptProps): JSX.Element => { if (props.status === "busy") { diff --git a/src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx b/src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx index 8c4368b6e..3e9a3f41b 100644 --- a/src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx +++ b/src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx @@ -1,21 +1,15 @@ +import { ContextualMenuItemType, DirectionalHint, IconButton, IContextualMenuItem } from "@fluentui/react"; +import { CellId, CellType } from "@nteract/commutable"; +import { actions, AppState, DocumentRecordProps } from "@nteract/core"; +import * as selectors from "@nteract/selectors"; +import { CellToolbarContext } from "@nteract/stateful-components"; import { ContentRef } from "@nteract/types"; +import { RecordOf } from "immutable"; import * as React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; - -import { IconButton } from "office-ui-fabric-react/lib/Button"; -import { - DirectionalHint, - IContextualMenuItem, - ContextualMenuItemType, -} from "office-ui-fabric-react/lib/ContextualMenu"; -import { actions, AppState, DocumentRecordProps } from "@nteract/core"; -import { CellToolbarContext } from "@nteract/stateful-components"; -import { CellType, CellId } from "@nteract/commutable"; -import * as selectors from "@nteract/selectors"; -import { RecordOf } from "immutable"; -import * as cdbActions from "../NotebookComponent/actions"; import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants"; +import * as cdbActions from "../NotebookComponent/actions"; export interface ComponentProps { contentRef: ContentRef; diff --git a/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx b/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx index 40f42fd35..a9cf76757 100644 --- a/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx +++ b/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx @@ -15,6 +15,8 @@ import { CellOutputViewerProps } from "../../../../CellOutputViewer/CellOutputVi interface ComponentProps { id: string; contentRef: ContentRef; + outputsContainerClassName?: string; + outputClassName?: string; } interface StateProps { @@ -59,8 +61,10 @@ export class SandboxOutputs extends React.PureComponent outputToJS(output)), onMetadataChange: this.props.onMetadataChange, }; diff --git a/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less index f98d9729a..1a077c600 100644 --- a/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less +++ b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less @@ -1,10 +1,5 @@ -.shemaAnalyzerComponent { +.schemaAnalyzerComponent { width: 100%; height: 100%; overflow-y: auto; -} - -.schemaAnalyzerCard { - max-width: 4096px; - width: 100%; } \ No newline at end of file diff --git a/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx index cf53bf2db..063050b01 100644 --- a/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx +++ b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx @@ -1,14 +1,12 @@ +import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "@fluentui/react"; import { ImmutableOutput } from "@nteract/commutable"; import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core"; -import { KernelOutputError, Output, StreamText } from "@nteract/outputs"; -import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media"; -import { Card } from "@uifabric/react-cards"; import Immutable from "immutable"; -import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react"; import * as React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; import loadTransform from "../NotebookComponent/loadTransform"; +import SandboxOutputs from "../NotebookRenderer/outputs/SandboxOutputs"; import "./SchemaAnalyzerComponent.less"; interface SchemaAnalyzerComponentPureProps { @@ -91,70 +89,66 @@ export class SchemaAnalyzerComponent extends React.Component< const showSchemaOutput = isKernelIdle && outputs.size > 0; return ( - - - - - - - - - - - - - {showSchemaOutput ? ( - outputs.map((output, index) => ( - - - - - - - - - - - )) - ) : this.state.isFiltering ? ( - - {isKernelBusy && } +
+ + + + + + + + + + - ) : ( - <> + + {showSchemaOutput ? ( + + ) : this.state.isFiltering ? ( - + {isKernelBusy && } - - Explore your schema - - - - Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set. - - - - - - {isKernelBusy && } - - )} - + ) : ( + <> + + + + + Explore your schema + + + + Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set. + + + + + + {isKernelBusy && } + + )} + +
); } } diff --git a/src/Explorer/OpenFullScreen.tsx b/src/Explorer/OpenFullScreen.tsx index 711706cf7..b36feeb48 100644 --- a/src/Explorer/OpenFullScreen.tsx +++ b/src/Explorer/OpenFullScreen.tsx @@ -1,8 +1,7 @@ -import { Spinner, Stack, Text, TextField } from "office-ui-fabric-react"; -import { DefaultButton, PrimaryButton } from "office-ui-fabric-react/lib/Button"; +import { DefaultButton, PrimaryButton, Spinner, Stack, Text, TextField } from "@fluentui/react"; +import copyToClipboard from "clipboard-copy"; import * as React from "react"; import { useFullScreenURLs } from "../hooks/useFullScreenURLs"; -import copyToClipboard from "clipboard-copy"; export const OpenFullScreen: React.FunctionComponent = () => { const result = useFullScreenURLs(); diff --git a/src/Explorer/Panes/AddCollectionPane.test.ts b/src/Explorer/Panes/AddCollectionPane.test.ts index 887f8c5bb..3e36abe1f 100644 --- a/src/Explorer/Panes/AddCollectionPane.test.ts +++ b/src/Explorer/Panes/AddCollectionPane.test.ts @@ -4,47 +4,47 @@ import { updateUserContext } from "../../UserContext"; import Explorer from "../Explorer"; import AddCollectionPane from "./AddCollectionPane"; +const mockDatabaseAccount: DatabaseAccount = { + id: "mock", + kind: "DocumentDB", + location: "", + name: "mock", + properties: { + documentEndpoint: "", + cassandraEndpoint: "", + gremlinEndpoint: "", + tableEndpoint: "", + enableFreeTier: false, + }, + type: undefined, +}; + +const mockFreeTierDatabaseAccount: DatabaseAccount = { + id: "mock", + kind: "DocumentDB", + location: "", + name: "mock", + properties: { + documentEndpoint: "", + cassandraEndpoint: "", + gremlinEndpoint: "", + tableEndpoint: "", + enableFreeTier: true, + }, + type: undefined, +}; + describe("Add Collection Pane", () => { describe("isValid()", () => { - let explorer: Explorer; - const mockDatabaseAccount: DatabaseAccount = { - id: "mock", - kind: "DocumentDB", - location: "", - name: "mock", - properties: { - documentEndpoint: "", - cassandraEndpoint: "", - gremlinEndpoint: "", - tableEndpoint: "", - enableFreeTier: false, - }, - type: undefined, - tags: [], - }; - - const mockFreeTierDatabaseAccount: DatabaseAccount = { - id: "mock", - kind: "DocumentDB", - location: "", - name: "mock", - properties: { - documentEndpoint: "", - cassandraEndpoint: "", - gremlinEndpoint: "", - tableEndpoint: "", - enableFreeTier: true, - }, - type: undefined, - tags: [], - }; - - beforeEach(() => { - explorer = new Explorer(); - }); - it("should be true if graph API and partition key is not /id nor /label", () => { - explorer.defaultExperience(Constants.DefaultAccountExperience.Graph.toLowerCase()); + updateUserContext({ + databaseAccount: { + properties: { + capabilities: [{ name: "EnableGremlin" }], + }, + } as DatabaseAccount, + }); + const explorer = new Explorer(); const addCollectionPane = explorer.addCollectionPane as AddCollectionPane; addCollectionPane.partitionKey("/blah"); expect(addCollectionPane.isValid()).toBe(true); @@ -58,7 +58,7 @@ describe("Add Collection Pane", () => { }, } as DatabaseAccount, }); - + const explorer = new Explorer(); const addCollectionPane = explorer.addCollectionPane as AddCollectionPane; addCollectionPane.partitionKey("/id"); expect(addCollectionPane.isValid()).toBe(false); @@ -75,6 +75,7 @@ describe("Add Collection Pane", () => { }, } as DatabaseAccount, }); + const explorer = new Explorer(); const addCollectionPane = explorer.addCollectionPane as AddCollectionPane; addCollectionPane.partitionKey("/id"); @@ -85,7 +86,8 @@ describe("Add Collection Pane", () => { }); it("should display free tier text in upsell messaging", () => { - explorer.databaseAccount(mockFreeTierDatabaseAccount); + updateUserContext({ databaseAccount: mockFreeTierDatabaseAccount }); + const explorer = new Explorer(); const addCollectionPane = explorer.addCollectionPane as AddCollectionPane; expect(addCollectionPane.isFreeTierAccount()).toBe(true); expect(addCollectionPane.upsellMessage()).toContain("With free tier"); @@ -94,7 +96,8 @@ describe("Add Collection Pane", () => { }); it("should display standard texr in upsell messaging", () => { - explorer.databaseAccount(mockDatabaseAccount); + updateUserContext({ databaseAccount: mockDatabaseAccount }); + const explorer = new Explorer(); const addCollectionPane = explorer.addCollectionPane as AddCollectionPane; expect(addCollectionPane.isFreeTierAccount()).toBe(false); expect(addCollectionPane.upsellMessage()).toContain("Start at"); diff --git a/src/Explorer/Panes/AddCollectionPane.ts b/src/Explorer/Panes/AddCollectionPane.ts index 8085d885a..c626f151a 100644 --- a/src/Explorer/Panes/AddCollectionPane.ts +++ b/src/Explorer/Panes/AddCollectionPane.ts @@ -108,6 +108,8 @@ export default class AddCollectionPane extends ContextualPaneBase { this.collectionWithThroughputInShared = ko.observable(false); this.databaseIds = ko.observableArray(); this.uniqueKeys = ko.observableArray(); + this.isSharedAutoPilotSelected = ko.observable(); + this.isAutoPilotSelected = ko.observable(); if (this.container) { this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => { @@ -177,7 +179,7 @@ export default class AddCollectionPane extends ContextualPaneBase { return ""; } - const account = this.container.databaseAccount(); + const { databaseAccount: account } = userContext; if (!account) { return ""; } @@ -235,7 +237,7 @@ export default class AddCollectionPane extends ContextualPaneBase { return ""; } - const account = this.container.databaseAccount(); + const { databaseAccount: account } = userContext; if (!account) { return ""; } @@ -523,10 +525,7 @@ export default class AddCollectionPane extends ContextualPaneBase { }); this.isFreeTierAccount = ko.computed(() => { - const databaseAccount = this.container && this.container.databaseAccount && this.container.databaseAccount(); - const isFreeTierAccount = - databaseAccount && databaseAccount.properties && databaseAccount.properties.enableFreeTier; - return isFreeTierAccount; + return userContext?.databaseAccount?.properties?.enableFreeTier; }); this.showUpsellMessage = ko.pureComputed(() => { @@ -596,9 +595,7 @@ export default class AddCollectionPane extends ContextualPaneBase { }); this._isSynapseLinkEnabled = ko.computed(() => { - const databaseAccount = - (this.container && this.container.databaseAccount && this.container.databaseAccount()) || - ({} as DataModels.DatabaseAccount); + const databaseAccount = userContext?.databaseAccount || ({} as DataModels.DatabaseAccount); const properties = databaseAccount.properties || ({} as DataModels.DatabaseAccountExtendedProperties); // TODO: remove check for capability once all accounts have been migrated @@ -641,7 +638,7 @@ export default class AddCollectionPane extends ContextualPaneBase { } public getSharedThroughputDefault(): boolean { - const subscriptionType = userContext.subscriptionType; + const { subscriptionType } = userContext; if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) { return false; } @@ -809,7 +806,7 @@ export default class AddCollectionPane extends ContextualPaneBase { let indexingPolicy: DataModels.IndexingPolicy; let createMongoWildcardIndex: boolean; // todo - remove mongo indexing policy ticket # 616274 - if (userContext.apiType === "Mongo" && this.container.isEnableMongoCapabilityPresent()) { + if (userContext.apiType === "Mongo") { createMongoWildcardIndex = this.shouldCreateMongoWildcardIndex(); } else if (this.showIndexingOptionsForSharedThroughput()) { if (this.useIndexingForSharedThroughput()) { diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx index 271de5d69..ffbea654a 100644 --- a/src/Explorer/Panes/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel.tsx @@ -12,7 +12,7 @@ import { Stack, Text, TooltipHost, -} from "office-ui-fabric-react"; +} from "@fluentui/react"; import React from "react"; import * as Constants from "../../Common/Constants"; import { createCollection } from "../../Common/dataAccess/createCollection"; @@ -525,7 +525,7 @@ export class AddCollectionPanel extends React.Component - {this.props.explorer.isEnableMongoCapabilityPresent() && ( + {userContext.databaseAccount.properties.capabilities.find((c) => c.name === "EnableMongo") && ( *  @@ -841,7 +841,7 @@ export class AddCollectionPanel extends React.Component { describe("getSharedThroughputDefault()", () => { - let explorer: Explorer; - const mockDatabaseAccount: DatabaseAccount = { - id: "mock", - kind: "DocumentDB", - location: "", - name: "mock", - properties: { - documentEndpoint: "", - cassandraEndpoint: "", - gremlinEndpoint: "", - tableEndpoint: "", - enableFreeTier: false, - }, - type: undefined, - tags: [], - }; - - const mockFreeTierDatabaseAccount: DatabaseAccount = { - id: "mock", - kind: "DocumentDB", - location: "", - name: "mock", - properties: { - documentEndpoint: "", - cassandraEndpoint: "", - gremlinEndpoint: "", - tableEndpoint: "", - enableFreeTier: true, - }, - type: undefined, - tags: [], - }; - - beforeEach(() => { - explorer = new Explorer(); - }); - it("should be true if subscription type is Benefits", () => { updateUserContext({ subscriptionType: SubscriptionType.Benefits, }); + const explorer = new Explorer(); const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); }); @@ -56,6 +50,7 @@ describe("Add Database Pane", () => { updateUserContext({ subscriptionType: SubscriptionType.EA, }); + const explorer = new Explorer(); const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; expect(addDatabasePane.getSharedThroughputDefault()).toBe(false); }); @@ -64,6 +59,7 @@ describe("Add Database Pane", () => { updateUserContext({ subscriptionType: SubscriptionType.Free, }); + const explorer = new Explorer(); const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); }); @@ -72,6 +68,7 @@ describe("Add Database Pane", () => { updateUserContext({ subscriptionType: SubscriptionType.Internal, }); + const explorer = new Explorer(); const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); }); @@ -80,12 +77,14 @@ describe("Add Database Pane", () => { updateUserContext({ subscriptionType: SubscriptionType.PAYG, }); + const explorer = new Explorer(); const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); }); it("should display free tier text in upsell messaging", () => { - explorer.databaseAccount(mockFreeTierDatabaseAccount); + updateUserContext({ databaseAccount: mockFreeTierDatabaseAccount }); + const explorer = new Explorer(); const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; expect(addDatabasePane.isFreeTierAccount()).toBe(true); expect(addDatabasePane.upsellMessage()).toContain("With free tier"); @@ -94,7 +93,8 @@ describe("Add Database Pane", () => { }); it("should display standard texr in upsell messaging", () => { - explorer.databaseAccount(mockDatabaseAccount); + updateUserContext({ databaseAccount: mockDatabaseAccount }); + const explorer = new Explorer(); const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; expect(addDatabasePane.isFreeTierAccount()).toBe(false); expect(addDatabasePane.upsellMessage()).toContain("Start at"); diff --git a/src/Explorer/Panes/AddDatabasePane.ts b/src/Explorer/Panes/AddDatabasePane.ts index 640d0f502..d07efff58 100644 --- a/src/Explorer/Panes/AddDatabasePane.ts +++ b/src/Explorer/Panes/AddDatabasePane.ts @@ -112,18 +112,13 @@ export default class AddDatabasePane extends ContextualPaneBase { return ""; } - const account = this.container.databaseAccount(); + const { databaseAccount: account } = userContext; if (!account) { return ""; } - const regions = - (account && - account.properties && - account.properties.readLocations && - account.properties.readLocations.length) || - 1; - const multimaster = (account && account.properties && account.properties.enableMultipleWriteLocations) || false; + const regions = account?.properties?.readLocations?.length || 1; + const multimaster = account?.properties?.enableMultipleWriteLocations || false; let estimatedSpendAcknowledge: string; let estimatedSpend: string; @@ -175,10 +170,7 @@ export default class AddDatabasePane extends ContextualPaneBase { }); this.isFreeTierAccount = ko.computed(() => { - const databaseAccount = this.container && this.container.databaseAccount && this.container.databaseAccount(); - const isFreeTierAccount = - databaseAccount && databaseAccount.properties && databaseAccount.properties.enableFreeTier; - return isFreeTierAccount; + return userContext?.databaseAccount?.properties?.enableFreeTier; }); this.showUpsellMessage = ko.pureComputed(() => { @@ -336,7 +328,7 @@ export default class AddDatabasePane extends ContextualPaneBase { } public getSharedThroughputDefault(): boolean { - const subscriptionType = userContext.subscriptionType; + const { subscriptionType } = userContext; if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) { return false; diff --git a/src/Explorer/Panes/CassandraAddCollectionPane.ts b/src/Explorer/Panes/CassandraAddCollectionPane.ts index d3a2d2098..18879e6d3 100644 --- a/src/Explorer/Panes/CassandraAddCollectionPane.ts +++ b/src/Explorer/Panes/CassandraAddCollectionPane.ts @@ -78,10 +78,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase { this.canExceedMaximumValue = ko.pureComputed(() => this.container.canExceedMaximumValue()); this.isFreeTierAccount = ko.computed(() => { - const databaseAccount = this.container && this.container.databaseAccount && this.container.databaseAccount(); - const isFreeTierAccount = - databaseAccount && databaseAccount.properties && databaseAccount.properties.enableFreeTier; - return isFreeTierAccount; + return userContext?.databaseAccount?.properties?.enableFreeTier; }); this.tableId = ko.observable(""); @@ -116,7 +113,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase { this.resetData(); this.requestUnitsUsageCostDedicated = ko.computed(() => { - const account = this.container.databaseAccount(); + const { databaseAccount: account } = userContext; if (!account) { return ""; } @@ -165,18 +162,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase { }); this.requestUnitsUsageCostShared = ko.computed(() => { - const account = this.container.databaseAccount(); + const { databaseAccount: account } = userContext; if (!account) { return ""; } - const regions = - (account && - account.properties && - account.properties.readLocations && - account.properties.readLocations.length) || - 1; - const multimaster = (account && account.properties && account.properties.enableMultipleWriteLocations) || false; + const regions = account?.properties?.readLocations?.length || 1; + const multimaster = account?.properties?.enableMultipleWriteLocations || false; let estimatedSpend: string; let estimatedSharedSpendAcknowledge: string; if (!this.isSharedAutoPilotSelected()) { @@ -365,18 +357,19 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase { createTableQuery: createTableQuery, }; const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, addCollectionPaneStartMessage); + const { databaseAccount } = userContext; if (toCreateKeyspace) { createTableAndKeyspacePromise = (this.container.tableDataClient).createTableAndKeyspace( - this.container.databaseAccount().properties.cassandraEndpoint, - this.container.databaseAccount().id, + databaseAccount?.properties.cassandraEndpoint, + databaseAccount?.id, this.container, createTableQuery, createKeyspaceQuery ); } else { createTableAndKeyspacePromise = (this.container.tableDataClient).createTableAndKeyspace( - this.container.databaseAccount().properties.cassandraEndpoint, - this.container.databaseAccount().id, + databaseAccount?.properties.cassandraEndpoint, + databaseAccount?.id, this.container, createTableQuery ); diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx index 30e6bdeb5..41b52a189 100644 --- a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx +++ b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx @@ -1,4 +1,4 @@ -import { IDropdownOption } from "office-ui-fabric-react"; +import { IDropdownOption } from "@fluentui/react"; import React, { FormEvent, FunctionComponent, useEffect, useState } from "react"; import { HttpStatusCodes } from "../../../Common/Constants"; import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils"; diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx index 915c0bd30..47bac0e2e 100644 --- a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx +++ b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx @@ -8,7 +8,7 @@ import { SelectableOptionMenuItemType, Stack, Text, -} from "office-ui-fabric-react"; +} from "@fluentui/react"; import React, { FormEvent, FunctionComponent } from "react"; import { IPinnedRepo } from "../../../Juno/JunoClient"; import * as GitHubUtils from "../../../Utils/GitHubUtils"; diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx index cd420e790..1fdc2488b 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx @@ -1,4 +1,4 @@ -import { Text, TextField } from "office-ui-fabric-react"; +import { Text, TextField } from "@fluentui/react"; import React, { FunctionComponent, useState } from "react"; import { Areas } from "../../../Common/Constants"; import { deleteCollection } from "../../../Common/dataAccess/deleteCollection"; diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap index a78871304..d0082d724 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap @@ -523,7 +523,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect "borderColor": "#f3f2f1", "color": "#a19f9d", "cursor": "default", - "pointerEvents": "none", "selectors": Object { ":focus": Object { "outline": 0, @@ -786,6 +785,35 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect }, }, }, + "splitButtonMenuFocused": Object { + "outline": "transparent", + "position": "relative", + "selectors": Object { + ".ms-Fabric--isFocusVisible &:focus:after": Object { + "border": "1px solid #ffffff", + "bottom": 3, + "content": "\\"\\"", + "left": 3, + "outline": "1px solid #605e5c", + "position": "absolute", + "right": 3, + "selectors": Object { + "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { + "border": "none", + "bottom": -2, + "left": -2, + "right": -2, + "top": -2, + }, + }, + "top": 3, + "zIndex": 1, + }, + "::-moz-focus-inner": Object { + "border": "0", + }, + }, + }, "textContainer": Object { "display": "block", "flexGrow": 1, @@ -1071,7 +1099,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect >