Upgrade Fluent UI v8 (#688)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
This commit is contained in:
Hardikkumar Nai 2021-05-06 04:56:03 +05:30 committed by GitHub
parent bd47e5ed49
commit 23223cfb23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
126 changed files with 5586 additions and 5870 deletions

View File

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

350
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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 {

View File

@ -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";

View File

@ -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";

View File

@ -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";

View File

@ -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;

View File

@ -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";

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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";

View File

@ -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 {

View File

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

View File

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

View File

@ -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 => {

View File

@ -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

View File

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

View File

@ -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";

View File

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

View File

@ -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") {

View File

@ -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;

View File

@ -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";

View File

@ -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();

View File

@ -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";

View File

@ -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";

View File

@ -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";

View File

@ -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";

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

Some files were not shown because too many files have changed in this diff Show More