diff --git a/jest.config.js b/jest.config.js index 2aff547f7..889b544e0 100644 --- a/jest.config.js +++ b/jest.config.js @@ -69,8 +69,8 @@ module.exports = { moduleNameMapper: { "^.*[.](svg|png|gif|less|css)$": "/mockModule", "@nteract/stateful-components/(.*)$": "/mockModule", + "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes "monaco-editor/(.*)$": "/__mocks__/monaco-editor", - "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes "^dnd-core$": "dnd-core/dist/cjs", "^react-dnd$": "react-dnd/dist/cjs", "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs", diff --git a/package-lock.json b/package-lock.json index 450d71a4e..bb3377ff6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2127,6 +2127,28 @@ "tslib": "^1.10.0" } }, + "@fluentui/font-icons-mdl2": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.0.5.tgz", + "integrity": "sha512-/2Qx/LCZH+rupbhzZ+WKCrw2XK3J2wj3pjMPLTLj/6rnmouA7yywFDiHIAseQXPhY34nzRVX4x3zEjz3RMWvmA==", + "requires": { + "@fluentui/set-version": "^8.0.3", + "@fluentui/style-utilities": "^8.0.5", + "tslib": "^1.10.0" + } + }, + "@fluentui/foundation-legacy": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.0.5.tgz", + "integrity": "sha512-bHODfopWfT4HfBvXFCyfKxi7/BrIVgKUvQ4X3L2GXUZv6jjQMvLPWZ1u8n2tdp91ch1KSWnBXklGaK/nyK1M5w==", + "requires": { + "@fluentui/merge-styles": "^8.0.4", + "@fluentui/set-version": "^8.0.3", + "@fluentui/style-utilities": "^8.0.5", + "@fluentui/utilities": "^8.0.5", + "tslib": "^1.10.0" + } + }, "@fluentui/keyboard-key": { "version": "0.2.17", "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.2.17.tgz", @@ -2135,13 +2157,259 @@ "tslib": "^1.10.0" } }, - "@fluentui/react-window-provider": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.2.tgz", - "integrity": "sha512-fGSgL3Vp/+6t1Ysfz21FWZmqsU+iFVxOigvHnm5uKVyyRPwtaabv/F6kQ2y5isLMI2YmJaUd2i0cDJKu8ggrvw==", + "@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": { - "@uifabric/set-version": "^7.0.24", + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/react": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.10.1.tgz", + "integrity": "sha512-J6wCfkkCzJ2Z9K6KVCrshpDDnhh5smKEGChsxMkLRoXYeAlVUMiS9lLg93PW+AbY4NfG+tNO2Ug8itNKpUmlYw==", + "requires": { + "@fluentui/date-time-utilities": "^8.0.2", + "@fluentui/font-icons-mdl2": "^8.0.4", + "@fluentui/foundation-legacy": "^8.0.4", + "@fluentui/merge-styles": "^8.0.3", + "@fluentui/react-focus": "^8.0.7", + "@fluentui/react-hooks": "^8.1.2", + "@fluentui/react-window-provider": "^2.0.2", + "@fluentui/set-version": "^8.0.2", + "@fluentui/style-utilities": "^8.0.4", + "@fluentui/theme": "^2.0.4", + "@fluentui/utilities": "^8.0.4", + "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^1.10.0" + }, + "dependencies": { + "@fluentui/date-time-utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.1.0.tgz", + "integrity": "sha512-1PSp/ufi5urnvxkbT9Lijsh7Y2PNEsZfpNXDVwOpPDqpRkRrd8Wr8IdRPQk7w6XLZIeDCiWIBXBRYCVp6KGbYg==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/react-window-provider": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.1.0.tgz", + "integrity": "sha512-LcNni1utHiXiCu8EbXL42o118yNRAWKX15qKd0iyMqcUg5RplOdWuaniohXv2gsmdNB0l3F5Tnujgayy0xPlvQ==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + } + } + }, + "@fluentui/react-focus": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.1.0.tgz", + "integrity": "sha512-yzfDnDrnHq5z4Nt1xY7LS+DtjbJmCdpDiTiQm8tnCj98qESzqqqAwjpSc+HFXVexBzlmPNf1hzc8BMCQOUF/7g==", + "requires": { + "@fluentui/keyboard-key": "^0.3.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/style-utilities": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "@fluentui/dom-utilities": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz", + "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "@fluentui/keyboard-key": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.3.0.tgz", + "integrity": "sha512-5GZ9038lwNK5BcgFkbXJs6zpZUlmyrszWbKPMqcHysMFBbL569VwV7zQt/yF3ivL0L4k46C+uXHbnFbMgZEJ4w==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@fluentui/utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz", + "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==", + "requires": { + "@fluentui/dom-utilities": "^2.1.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/react-hooks": { + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.1.3.tgz", + "integrity": "sha512-6iWYjfqXvEhHZoY4nmN6APoIdxwNxzVxXOJgq1Oo1nbR10E7Va7mz41gvlFAgg8OmH7mGpdSztlVj6TVl/TY2g==", + "requires": { + "@fluentui/react-window-provider": "^2.0.3", + "@fluentui/set-version": "^8.0.3", + "@fluentui/utilities": "^8.0.5", + "tslib": "^1.10.0" + }, + "dependencies": { + "@fluentui/react-window-provider": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.0.3.tgz", + "integrity": "sha512-eefkmzLJbYjVHtEtGbOwReyeYG+2bDefxdmvPRSVFlcRFCnasTvshuZj3xkaKSu5fsGzGw+f+ab3hDgLSETvbg==", + "requires": { + "@fluentui/set-version": "^8.0.3", + "tslib": "^1.10.0" + } + } + } + }, + "@fluentui/set-version": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.1.0.tgz", + "integrity": "sha512-FhruPyh+VoAVmqAadRxawMNB13syBLoT6PePdZ+sKW7rZVc2CWT3qw7w9O9x6MJeRNl6/6ZnjCo6sWyOyVEdNg==", + "requires": { + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/style-utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.1.0.tgz", + "integrity": "sha512-XUH+8T7/2HAMYzTLr20odD5lfKy56fJooFlkSmW0SSC6sOilHmrdPZCBSTV+WJzH/YY2ed/GnySIjCQOx5UsYg==", + "requires": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/theme": "^2.1.0", + "@fluentui/utilities": "^8.1.0", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + }, + "dependencies": { + "@fluentui/dom-utilities": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz", + "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "@fluentui/utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz", + "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==", + "requires": { + "@fluentui/dom-utilities": "^2.1.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/theme": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.1.0.tgz", + "integrity": "sha512-2jFun5LqUZJb+AiWeLOnNQTxrKWMCNHFTs4+QIUyL7ZPMAiNZyWMsQJfeGOujzdlReivZ7kONNQEi0LTJ0Tmzw==", + "requires": { + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "@fluentui/utilities": "^8.1.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "@fluentui/dom-utilities": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.1.0.tgz", + "integrity": "sha512-DMr0uH4EtyXgdpVLyvWq60YtWN38jx22rtdsEIbbBNYcFgcl3rRa7M8p/rnaw/k/KWX35H40AYga1SM6Zgpyww==", + "requires": { + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "@fluentui/utilities": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.1.0.tgz", + "integrity": "sha512-/yHnDkrIlyn/Jy3XWccNRyuujQDgUxz44OQDEiMSko50S/L7cVeWdIzG/CiIsCnKAgU4/QyzRo40Wdy3rdM8ag==", + "requires": { + "@fluentui/dom-utilities": "^2.1.0", + "@fluentui/merge-styles": "^8.1.0", + "@fluentui/set-version": "^8.1.0", + "tslib": "^2.1.0" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } + } + }, + "@fluentui/utilities": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.0.5.tgz", + "integrity": "sha512-epqvqV4YjKcbgShLhDk/y2Xa+6sUTBXry/BrMPNVwNOqdj2HCf4eCY+a1emFnytMpIVysfYZ6glIx9MNQ8JgNg==", + "requires": { + "@fluentui/dom-utilities": "^2.0.3", + "@fluentui/merge-styles": "^8.0.4", + "@fluentui/set-version": "^8.0.3", + "tslib": "^1.10.0" + }, + "dependencies": { + "@fluentui/dom-utilities": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.0.3.tgz", + "integrity": "sha512-RaUoEYd12TeEjvKLBtfXDZmjreaV6qIfBB7G+QCuBpv5FF7TjhrGK3WDZ7oaG0dkdegAx+ecyUFyOfoBRPJLkg==", + "requires": { + "@fluentui/set-version": "^8.0.3", + "tslib": "^1.10.0" + } + } } }, "@hapi/formula": { @@ -6105,17 +6373,6 @@ } } }, - "@uifabric/react-hooks": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.14.0.tgz", - "integrity": "sha512-Ndu/DEKHF4gFXEZa2AGgSkdWaj+njVrsSyXbkWRh2UZReFWnH1LMko9p/ZCwk1i9kAd5CUmyIfURUzIEya9YCg==", - "requires": { - "@fluentui/react-window-provider": "^1.0.2", - "@uifabric/set-version": "^7.0.24", - "@uifabric/utilities": "^7.33.5", - "tslib": "^1.10.0" - } - }, "@uifabric/set-version": { "version": "7.0.24", "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.24.tgz", @@ -6124,55 +6381,6 @@ "tslib": "^1.10.0" } }, - "@uifabric/styling": { - "version": "7.13.7", - "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.13.7.tgz", - "integrity": "sha512-XFaDkvQqhhHwlW9+Yd9LQogPq0a5TC4on2csRnJUwmlTJ4IQtgvbPdAxmxz+18HZMJezUXYn7/ubcQvNRMFSJQ==", - "requires": { - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/merge-styles": "^7.16.0", - "@uifabric/set-version": "^7.0.15", - "@uifabric/utilities": "^7.23.0", - "tslib": "^1.10.0" - }, - "dependencies": { - "@types/react": { - "version": "16.14.5", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz", - "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==", - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "@types/react-dom": { - "version": "16.9.12", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz", - "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==", - "requires": { - "@types/react": "^16" - } - }, - "@uifabric/utilities": { - "version": "7.33.5", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz", - "integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==", - "requires": { - "@fluentui/dom-utilities": "^1.1.2", - "@uifabric/merge-styles": "^7.19.2", - "@uifabric/set-version": "^7.0.24", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - } - }, - "csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" - } - } - }, "@uifabric/theme-samples": { "version": "7.2.34", "resolved": "https://registry.npmjs.org/@uifabric/theme-samples/-/theme-samples-7.2.34.tgz", @@ -6311,18 +6519,6 @@ } } }, - "@uifabric/utilities": { - "version": "7.33.5", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz", - "integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==", - "requires": { - "@fluentui/dom-utilities": "^1.1.2", - "@uifabric/merge-styles": "^7.19.2", - "@uifabric/set-version": "^7.0.24", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - } - }, "@uifabric/variants": { "version": "7.2.35", "resolved": "https://registry.npmjs.org/@uifabric/variants/-/variants-7.2.35.tgz", diff --git a/package.json b/package.json index 70b1bf588..07e35aea9 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@azure/ms-rest-nodeauth": "3.0.7", "@babel/plugin-proposal-class-properties": "7.12.1", "@babel/plugin-proposal-decorators": "7.12.12", + "@fluentui/react": "8.10.1", "@jupyterlab/services": "6.0.2", "@jupyterlab/terminal": "3.0.3", "@microsoft/applicationinsights-web": "2.6.1", @@ -43,8 +44,6 @@ "@types/mkdirp": "1.0.1", "@types/node-fetch": "2.5.7", "@uifabric/react-cards": "0.109.110", - "@uifabric/react-hooks": "7.14.0", - "@uifabric/styling": "7.13.7", "applicationinsights": "1.8.0", "bootstrap": "3.4.1", "canvas": "file:./canvas", @@ -77,7 +76,6 @@ "monaco-editor": "0.18.1", "ms": "2.1.3", "msal": "1.4.4", - "office-ui-fabric-react": "7.164.2", "p-retry": "4.2.0", "plotly.js-cartesian-dist-min": "1.52.3", "post-robot": "10.0.42", 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/TableEntity.tsx b/src/Common/TableEntity.tsx index 469a1b938..3a38f275e 100644 --- a/src/Common/TableEntity.tsx +++ b/src/Common/TableEntity.tsx @@ -8,7 +8,7 @@ import { Stack, TextField, TooltipHost, -} from "office-ui-fabric-react"; +} from "@fluentui/react"; import React, { FunctionComponent } from "react"; import DeleteIcon from "../../images/delete.svg"; import EditIcon from "../../images/Edit_entity.svg"; diff --git a/src/Common/Tooltip/Tooltip.tsx b/src/Common/Tooltip/Tooltip.tsx index cb47616f8..ee7b69425 100644 --- a/src/Common/Tooltip/Tooltip.tsx +++ b/src/Common/Tooltip/Tooltip.tsx @@ -1,5 +1,5 @@ -import { useId } from "@uifabric/react-hooks"; -import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip"; +import { ITooltipHostStyles, TooltipHost } from "@fluentui/react"; +import { useId } from "@fluentui/react-hooks"; import * as React from "react"; import InfoBubble from "../../../images/info-bubble.svg"; diff --git a/src/Common/Upload/Upload.tsx b/src/Common/Upload/Upload.tsx index 30cc6b51d..b8d8767c6 100644 --- a/src/Common/Upload/Upload.tsx +++ b/src/Common/Upload/Upload.tsx @@ -1,4 +1,4 @@ -import { Image, Stack, TextField } from "office-ui-fabric-react"; +import { Image, Stack, TextField } from "@fluentui/react"; import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react"; import FolderIcon from "../../../images/folder_16x16.svg"; import * as Constants from "../Constants"; 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" /> - { const createButton = (): CommandButtonComponentProps => { diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx index 4314df9c4..dd7f01209 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx @@ -1,18 +1,22 @@ -import _ from "underscore"; -import * as React from "react"; +import { + Dropdown, + ICommandBarItemProps, + IComponentAsProps, + IconType, + IDropdownOption, + IDropdownStyles, +} from "@fluentui/react"; import { Observable } from "knockout"; -import { IconType } from "office-ui-fabric-react/lib/Icon"; -import { IComponentAsProps } from "office-ui-fabric-react/lib/Utilities"; -import { StyleConstants } from "../../../Common/Constants"; -import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar"; -import { Dropdown, IDropdownStyles, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown"; -import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; +import * as React from "react"; +import _ from "underscore"; import ChevronDownIcon from "../../../../images/Chevron_down.svg"; -import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker"; -import { MemoryTrackerComponent } from "./MemoryTrackerComponent"; +import { StyleConstants } from "../../../Common/Constants"; import { MemoryUsageInfo } from "../../../Contracts/DataModels"; -import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor"; import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants"; +import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor"; +import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker"; +import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; +import { MemoryTrackerComponent } from "./MemoryTrackerComponent"; /** * Convert our NavbarButtonConfig to UI Fabric buttons 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 5e4c75179..f2c427c2b 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx @@ -2,7 +2,7 @@ * React component for control bar */ -import { Dropdown, IDropdownOption } from "office-ui-fabric-react"; +import { Dropdown, IDropdownOption } from "@fluentui/react"; import * as React from "react"; import AnimateHeight from "react-animate-height"; import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif"; diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap index b00632fdd..c28eb6008 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`] = `
- - { 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/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx index 1836a8a14..063050b01 100644 --- a/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx +++ b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx @@ -1,7 +1,7 @@ +import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "@fluentui/react"; import { ImmutableOutput } from "@nteract/commutable"; import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core"; import Immutable from "immutable"; -import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react"; import * as React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; 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/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx index 2a239e319..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"; 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 f35c9a2ce..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 >