mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-24 12:14:17 +00:00
Compare commits
2 Commits
dependabot
...
copilot/su
| Author | SHA1 | Date | |
|---|---|---|---|
|
29e88cb754 | ||
|
9487879159 |
513
package-lock.json
generated
513
package-lock.json
generated
@@ -56,7 +56,7 @@
|
||||
"allotment": "1.20.2",
|
||||
"applicationinsights": "1.8.0",
|
||||
"bootstrap": "3.4.1",
|
||||
"canvas": "3.2.1",
|
||||
"canvas": "2.11.2",
|
||||
"clean-webpack-plugin": "4.0.0",
|
||||
"clipboard-copy": "4.0.1",
|
||||
"copy-webpack-plugin": "11.0.0",
|
||||
@@ -7397,6 +7397,73 @@
|
||||
"@lumino/virtualdom": "^1.14.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
|
||||
"integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
|
||||
"dependencies": {
|
||||
"detect-libc": "^2.0.0",
|
||||
"https-proxy-agent": "^5.0.0",
|
||||
"make-dir": "^3.1.0",
|
||||
"node-fetch": "^2.6.7",
|
||||
"nopt": "^5.0.0",
|
||||
"npmlog": "^5.0.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"semver": "^7.3.5",
|
||||
"tar": "^6.1.11"
|
||||
},
|
||||
"bin": {
|
||||
"node-pre-gyp": "bin/node-pre-gyp"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp/node_modules/make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
|
||||
"dependencies": {
|
||||
"semver": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp/node_modules/make-dir/node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
|
||||
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp/node_modules/rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
|
||||
"deprecated": "Rimraf versions prior to v4 are no longer supported",
|
||||
"dependencies": {
|
||||
"glob": "^7.1.3"
|
||||
},
|
||||
"bin": {
|
||||
"rimraf": "bin.js"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
|
||||
"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@microsoft/applicationinsights-analytics-js": {
|
||||
"version": "2.6.1",
|
||||
"license": "MIT",
|
||||
@@ -13387,6 +13454,11 @@
|
||||
"version": "2.0.6",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
|
||||
},
|
||||
"node_modules/abort-controller": {
|
||||
"version": "3.0.0",
|
||||
"license": "MIT",
|
||||
@@ -13476,7 +13548,6 @@
|
||||
},
|
||||
"node_modules/agent-base": {
|
||||
"version": "6.0.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "4"
|
||||
@@ -13721,6 +13792,37 @@
|
||||
"diagnostic-channel-publishers": "0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/aproba": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
|
||||
"integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
|
||||
},
|
||||
"node_modules/are-we-there-yet": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
|
||||
"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
|
||||
"deprecated": "This package is no longer supported.",
|
||||
"dependencies": {
|
||||
"delegates": "^1.0.0",
|
||||
"readable-stream": "^3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/are-we-there-yet/node_modules/readable-stream": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
"util-deprecate": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"license": "Python-2.0"
|
||||
@@ -14771,6 +14873,7 @@
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -14842,7 +14945,9 @@
|
||||
},
|
||||
"node_modules/bl": {
|
||||
"version": "4.1.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"buffer": "^5.5.0",
|
||||
"inherits": "^2.0.4",
|
||||
@@ -14851,6 +14956,7 @@
|
||||
},
|
||||
"node_modules/bl/node_modules/buffer": {
|
||||
"version": "5.7.1",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -14866,6 +14972,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"base64-js": "^1.3.1",
|
||||
"ieee754": "^1.1.13"
|
||||
@@ -14873,7 +14980,9 @@
|
||||
},
|
||||
"node_modules/bl/node_modules/readable-stream": {
|
||||
"version": "3.6.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
@@ -15219,17 +15328,17 @@
|
||||
]
|
||||
},
|
||||
"node_modules/canvas": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.1.tgz",
|
||||
"integrity": "sha512-ej1sPFR5+0YWtaVp6S1N1FVz69TQCqmrkGeRvQxZeAB1nAIcjNTHVwrZtYtWFFBmQsF40/uDLehsW5KuYC99mg==",
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
|
||||
"integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"node-addon-api": "^7.0.0",
|
||||
"prebuild-install": "^7.1.3"
|
||||
"@mapbox/node-pre-gyp": "^1.0.0",
|
||||
"nan": "^2.17.0",
|
||||
"simple-get": "^3.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.12.0 || >= 20.9.0"
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/capture-exit": {
|
||||
@@ -15443,12 +15552,6 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/chownr": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
|
||||
"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/chrome-trace-event": {
|
||||
"version": "1.0.3",
|
||||
"license": "MIT",
|
||||
@@ -15698,6 +15801,14 @@
|
||||
"version": "1.1.3",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/color-support": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
|
||||
"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
|
||||
"bin": {
|
||||
"color-support": "bin.js"
|
||||
}
|
||||
},
|
||||
"node_modules/colorette": {
|
||||
"version": "2.0.20",
|
||||
"dev": true,
|
||||
@@ -15886,6 +15997,11 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
|
||||
"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"dev": true,
|
||||
@@ -17247,18 +17363,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/decompress-response": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
|
||||
"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
|
||||
"license": "MIT",
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
|
||||
"integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
|
||||
"dependencies": {
|
||||
"mimic-response": "^3.1.0"
|
||||
"mimic-response": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/dedent": {
|
||||
@@ -17297,15 +17409,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/deep-extend": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
|
||||
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"license": "MIT"
|
||||
@@ -17473,6 +17576,11 @@
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/delegates": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
||||
"integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
|
||||
},
|
||||
"node_modules/denodeify": {
|
||||
"version": "1.2.1",
|
||||
"dev": true,
|
||||
@@ -17519,9 +17627,7 @@
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
|
||||
"version": "2.0.3",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
@@ -18994,15 +19100,6 @@
|
||||
"version": "2.0.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/expand-template": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
|
||||
"integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
|
||||
"license": "(MIT OR WTFPL)",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/expect": {
|
||||
"version": "29.7.0",
|
||||
"resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
|
||||
@@ -19998,12 +20095,6 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/fs-constants": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
|
||||
"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fs-extra": {
|
||||
"version": "7.0.0",
|
||||
"dev": true,
|
||||
@@ -20017,6 +20108,33 @@
|
||||
"node": ">=6 <7 || >=8"
|
||||
}
|
||||
},
|
||||
"node_modules/fs-minipass": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
|
||||
"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
|
||||
"dependencies": {
|
||||
"minipass": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/fs-minipass/node_modules/minipass": {
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
|
||||
"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
|
||||
"dependencies": {
|
||||
"yallist": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/fs-minipass/node_modules/yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
|
||||
},
|
||||
"node_modules/fs-monkey": {
|
||||
"version": "1.0.5",
|
||||
"dev": true,
|
||||
@@ -20090,6 +20208,26 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/gauge": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
|
||||
"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
|
||||
"deprecated": "This package is no longer supported.",
|
||||
"dependencies": {
|
||||
"aproba": "^1.0.3 || ^2.0.0",
|
||||
"color-support": "^1.1.2",
|
||||
"console-control-strings": "^1.0.0",
|
||||
"has-unicode": "^2.0.1",
|
||||
"object-assign": "^4.1.1",
|
||||
"signal-exit": "^3.0.0",
|
||||
"string-width": "^4.2.3",
|
||||
"strip-ansi": "^6.0.1",
|
||||
"wide-align": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"license": "MIT",
|
||||
@@ -20171,12 +20309,6 @@
|
||||
"assert-plus": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/github-from-package": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
|
||||
"integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/glob": {
|
||||
"version": "7.2.3",
|
||||
"license": "ISC",
|
||||
@@ -20513,6 +20645,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-unicode": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
|
||||
"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
|
||||
},
|
||||
"node_modules/has-value": {
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
@@ -21220,7 +21357,6 @@
|
||||
},
|
||||
"node_modules/https-proxy-agent": {
|
||||
"version": "5.0.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"agent-base": "6",
|
||||
@@ -21304,6 +21440,7 @@
|
||||
},
|
||||
"node_modules/ieee754": {
|
||||
"version": "1.2.1",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -21492,6 +21629,7 @@
|
||||
},
|
||||
"node_modules/ini": {
|
||||
"version": "1.3.8",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/internal-slot": {
|
||||
@@ -21793,7 +21931,6 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
|
||||
"devOptional": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
@@ -29386,12 +29523,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/mimic-response": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
|
||||
"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
|
||||
"license": "MIT",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
|
||||
"integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
@@ -29467,6 +29603,42 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/minipass": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
|
||||
"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/minizlib": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
|
||||
"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
|
||||
"dependencies": {
|
||||
"minipass": "^3.0.0",
|
||||
"yallist": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/minizlib/node_modules/minipass": {
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
|
||||
"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
|
||||
"dependencies": {
|
||||
"yallist": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/minizlib/node_modules/yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
|
||||
},
|
||||
"node_modules/mixin-deep": {
|
||||
"version": "1.3.2",
|
||||
"license": "MIT",
|
||||
@@ -29488,12 +29660,6 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/mkdirp-classic": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
|
||||
"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.29.4",
|
||||
"license": "MIT",
|
||||
@@ -29575,8 +29741,7 @@
|
||||
"node_modules/nan": {
|
||||
"version": "2.20.0",
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.20.0.tgz",
|
||||
"integrity": "sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==",
|
||||
"optional": true
|
||||
"integrity": "sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw=="
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
@@ -29621,12 +29786,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/napi-build-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
|
||||
"integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/native-promise-only": {
|
||||
"version": "0.8.1",
|
||||
"dev": true,
|
||||
@@ -29711,42 +29870,12 @@
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/node-abi": {
|
||||
"version": "3.87.0",
|
||||
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.87.0.tgz",
|
||||
"integrity": "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"semver": "^7.3.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/node-abi/node_modules/semver": {
|
||||
"version": "7.7.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
|
||||
"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/node-abort-controller": {
|
||||
"version": "3.1.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/node-addon-api": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-dir": {
|
||||
"version": "0.1.17",
|
||||
"dev": true,
|
||||
@@ -29807,6 +29936,20 @@
|
||||
"url": "https://github.com/sponsors/antelle"
|
||||
}
|
||||
},
|
||||
"node_modules/nopt": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
|
||||
"integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
|
||||
"dependencies": {
|
||||
"abbrev": "1"
|
||||
},
|
||||
"bin": {
|
||||
"nopt": "bin/nopt.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-package-data": {
|
||||
"version": "2.5.0",
|
||||
"license": "BSD-2-Clause",
|
||||
@@ -29839,6 +29982,18 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/npmlog": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
|
||||
"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
|
||||
"deprecated": "This package is no longer supported.",
|
||||
"dependencies": {
|
||||
"are-we-there-yet": "^2.0.0",
|
||||
"console-control-strings": "^1.1.0",
|
||||
"gauge": "^3.0.0",
|
||||
"set-blocking": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nth-check": {
|
||||
"version": "2.1.1",
|
||||
"dev": true,
|
||||
@@ -30925,32 +31080,6 @@
|
||||
"version": "4.2.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/prebuild-install": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
|
||||
"integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"detect-libc": "^2.0.0",
|
||||
"expand-template": "^2.0.3",
|
||||
"github-from-package": "0.0.0",
|
||||
"minimist": "^1.2.3",
|
||||
"mkdirp-classic": "^0.5.3",
|
||||
"napi-build-utils": "^2.0.0",
|
||||
"node-abi": "^3.3.0",
|
||||
"pump": "^3.0.0",
|
||||
"rc": "^1.2.7",
|
||||
"simple-get": "^4.0.0",
|
||||
"tar-fs": "^2.0.0",
|
||||
"tunnel-agent": "^0.6.0"
|
||||
},
|
||||
"bin": {
|
||||
"prebuild-install": "bin.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
"license": "MIT",
|
||||
@@ -31380,30 +31509,6 @@
|
||||
"version": "0.5.1",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/rc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
|
||||
"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
|
||||
"license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
|
||||
"dependencies": {
|
||||
"deep-extend": "^0.6.0",
|
||||
"ini": "~1.3.0",
|
||||
"minimist": "^1.2.0",
|
||||
"strip-json-comments": "~2.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"rc": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/rc/node_modules/strip-json-comments": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
|
||||
"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/re-resizable": {
|
||||
"version": "6.9.11",
|
||||
"license": "MIT",
|
||||
@@ -33498,8 +33603,6 @@
|
||||
},
|
||||
"node_modules/simple-concat": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
|
||||
"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -33517,26 +33620,11 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/simple-get": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
|
||||
"integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
|
||||
"integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
|
||||
"dependencies": {
|
||||
"decompress-response": "^6.0.0",
|
||||
"decompress-response": "^4.2.0",
|
||||
"once": "^1.3.1",
|
||||
"simple-concat": "^1.0.0"
|
||||
}
|
||||
@@ -34034,7 +34122,6 @@
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"devOptional": true,
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
@@ -34047,8 +34134,7 @@
|
||||
"node_modules/string-width/node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"devOptional": true
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
|
||||
},
|
||||
"node_modules/string.prototype.matchall": {
|
||||
"version": "4.0.10",
|
||||
@@ -34324,48 +34410,35 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/tar-fs": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
|
||||
"integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
|
||||
"license": "MIT",
|
||||
"node_modules/tar": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
|
||||
"integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
|
||||
"dependencies": {
|
||||
"chownr": "^1.1.1",
|
||||
"mkdirp-classic": "^0.5.2",
|
||||
"pump": "^3.0.0",
|
||||
"tar-stream": "^2.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/tar-stream": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
|
||||
"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bl": "^4.0.3",
|
||||
"end-of-stream": "^1.4.1",
|
||||
"fs-constants": "^1.0.0",
|
||||
"inherits": "^2.0.3",
|
||||
"readable-stream": "^3.1.1"
|
||||
"chownr": "^2.0.0",
|
||||
"fs-minipass": "^2.0.0",
|
||||
"minipass": "^5.0.0",
|
||||
"minizlib": "^2.1.1",
|
||||
"mkdirp": "^1.0.3",
|
||||
"yallist": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/tar-stream/node_modules/readable-stream": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
"util-deprecate": "^1.0.1"
|
||||
},
|
||||
"node_modules/tar/node_modules/chownr": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
|
||||
"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/tar/node_modules/yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
|
||||
},
|
||||
"node_modules/temp": {
|
||||
"version": "0.8.4",
|
||||
"dev": true,
|
||||
@@ -36470,6 +36543,14 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/wide-align": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
|
||||
"integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
|
||||
"dependencies": {
|
||||
"string-width": "^1.0.2 || 2 || 3 || 4"
|
||||
}
|
||||
},
|
||||
"node_modules/wildcard": {
|
||||
"version": "2.0.1",
|
||||
"dev": true,
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
"allotment": "1.20.2",
|
||||
"applicationinsights": "1.8.0",
|
||||
"bootstrap": "3.4.1",
|
||||
"canvas": "3.2.1",
|
||||
"canvas": "2.11.2",
|
||||
"clean-webpack-plugin": "4.0.0",
|
||||
"clipboard-copy": "4.0.1",
|
||||
"copy-webpack-plugin": "11.0.0",
|
||||
|
||||
@@ -46,10 +46,6 @@ export type DataExploreMessageV3 =
|
||||
params: {
|
||||
updateType: "created" | "deleted" | "settings";
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: FabricMessageTypes.RestoreContainer;
|
||||
params: [];
|
||||
};
|
||||
export interface GetCosmosTokenMessageOptions {
|
||||
verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Dialog } from "../../Explorer/Controls/Dialog";
|
||||
import { SidePanel } from "../../Explorer/Panes/PanelContainerComponent";
|
||||
import CopyJobCommandBar from "./CommandBar/CopyJobCommandBar";
|
||||
import "./containerCopyStyles.less";
|
||||
import { MonitorCopyJobsRefState } from "./MonitorCopyJobs/MonitorCopyJobRefState";
|
||||
@@ -16,6 +18,8 @@ const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ explorer }) => {
|
||||
<div id="containerCopyWrapper" className="flexContainer hideOverflows">
|
||||
<CopyJobCommandBar explorer={explorer} />
|
||||
<MonitorCopyJobs ref={monitorCopyJobsRef} explorer={explorer} />
|
||||
<SidePanel />
|
||||
<Dialog />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
AddGlobalSecondaryIndexPanelProps,
|
||||
} from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel";
|
||||
import { useDatabases } from "Explorer/useDatabases";
|
||||
import { isFabric, isFabricNative, openRestoreContainerDialog } from "Platform/Fabric/FabricUtil";
|
||||
import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
|
||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
||||
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||
@@ -35,7 +35,6 @@ import StoredProcedure from "./Tree/StoredProcedure";
|
||||
import Trigger from "./Tree/Trigger";
|
||||
import UserDefinedFunction from "./Tree/UserDefinedFunction";
|
||||
import { useSelectedNode } from "./useSelectedNode";
|
||||
import { extractFeatures } from "../Platform/Hosted/extractFeatures";
|
||||
|
||||
export interface CollectionContextMenuButtonParams {
|
||||
databaseId: string;
|
||||
@@ -61,17 +60,6 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
|
||||
},
|
||||
];
|
||||
|
||||
if (isFabricNative() && !userContext.fabricContext?.isReadOnly) {
|
||||
const features = extractFeatures();
|
||||
if (features?.enableRestoreContainer) {
|
||||
items.push({
|
||||
iconSrc: AddCollectionIcon,
|
||||
onClick: () => openRestoreContainerDialog(),
|
||||
label: `Restore ${getCollectionName()}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
|
||||
items.push({
|
||||
iconSrc: DeleteDatabaseIcon,
|
||||
|
||||
@@ -54,6 +54,6 @@
|
||||
.mainButtonsContainer {
|
||||
display: flex;
|
||||
gap: 0 16px;
|
||||
margin: 40px auto
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
@@ -164,23 +164,6 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
|
||||
const container = explorer;
|
||||
const subscriptions: Array<{ dispose: () => void }> = [];
|
||||
|
||||
let title: string;
|
||||
let subtitle: string;
|
||||
|
||||
switch (userContext.apiType) {
|
||||
case "Postgres":
|
||||
title = "Welcome to Azure Cosmos DB for PostgreSQL";
|
||||
subtitle = "Get started with our sample datasets, documentation, and additional tools.";
|
||||
break;
|
||||
case "VCoreMongo":
|
||||
title = "Welcome to Azure DocumentDB (with MongoDB compatibility)";
|
||||
subtitle = "Get started with our sample datasets, documentation, and additional tools.";
|
||||
break;
|
||||
default:
|
||||
title = "Welcome to Azure Cosmos DB";
|
||||
subtitle = "Globally distributed, multi-model database service for any scale";
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
subscriptions.push(
|
||||
{
|
||||
@@ -919,11 +902,10 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
|
||||
return (
|
||||
<div className={styles.splashScreenContainer}>
|
||||
<div className={styles.splashScreen}>
|
||||
<h2 className={styles.title} role="heading" aria-label={title}>
|
||||
{title}
|
||||
<span className="activePatch"></span>
|
||||
<h2 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
|
||||
Welcome to Azure Cosmos DB<span className="activePatch"></span>
|
||||
</h2>
|
||||
<div className={styles.subtitle}>{subtitle}</div>
|
||||
<div className={styles.subtitle}>Globally distributed, multi-model database service for any scale</div>
|
||||
{getSplashScreenButtons()}
|
||||
{useCarousel.getState().showCoachMark && (
|
||||
<Coachmark
|
||||
|
||||
193
src/Main.tsx
193
src/Main.tsx
@@ -2,18 +2,9 @@
|
||||
import "./ReactDevTools";
|
||||
|
||||
// CSS Dependencies
|
||||
import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
|
||||
import { FluentProvider, makeStyles, webDarkTheme, webLightTheme } from "@fluentui/react-components";
|
||||
import { Platform } from "ConfigContext";
|
||||
import ContainerCopyPanel from "Explorer/ContainerCopy/ContainerCopyPanel";
|
||||
import Explorer from "Explorer/Explorer";
|
||||
import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
|
||||
import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
|
||||
import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
|
||||
import { userContext } from "UserContext";
|
||||
import { initializeIcons } from "@fluentui/react";
|
||||
import "allotment/dist/style.css";
|
||||
import "bootstrap/dist/css/bootstrap.css";
|
||||
import { useCarousel } from "hooks/useCarousel";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "../externals/jquery-ui.min.css";
|
||||
@@ -24,13 +15,8 @@ import "../externals/jquery.dataTables.min.css";
|
||||
import "../externals/jquery.typeahead.min.css";
|
||||
import "../externals/jquery.typeahead.min.js";
|
||||
// Image Dependencies
|
||||
import { SidePanel } from "Explorer/Panes/PanelContainerComponent";
|
||||
import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
|
||||
import { SidebarContainer } from "Explorer/Sidebar";
|
||||
import { KeyboardShortcutRoot } from "KeyboardShortcuts";
|
||||
import "allotment/dist/style.css";
|
||||
import "../images/CosmosDB_rgb_ui_lighttheme.ico";
|
||||
import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
|
||||
import "../images/favicon.ico";
|
||||
import "../less/TableStyles/CustomizeColumns.less";
|
||||
import "../less/TableStyles/EntityEditor.less";
|
||||
@@ -42,179 +28,29 @@ import "../less/infobox.less";
|
||||
import "../less/menus.less";
|
||||
import "../less/messagebox.less";
|
||||
import "../less/resourceTree.less";
|
||||
import * as StyleConstants from "./Common/StyleConstants";
|
||||
import "./Explorer/Controls/Accordion/AccordionComponent.less";
|
||||
import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
|
||||
import { Dialog } from "./Explorer/Controls/Dialog";
|
||||
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
|
||||
import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
|
||||
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
|
||||
import "./Explorer/Controls/TreeComponent/treeComponent.less";
|
||||
import { ErrorBoundary } from "./Explorer/ErrorBoundary";
|
||||
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
|
||||
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
|
||||
import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
|
||||
import "./Explorer/Menus/CommandBar/ConnectionStatusComponent.less";
|
||||
import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
|
||||
import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
|
||||
import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import "./Explorer/Panes/PanelComponent.less";
|
||||
import "./Explorer/SplashScreen/SplashScreen.less";
|
||||
import "./Libs/jquery";
|
||||
import MetricScenario from "./Metrics/MetricEvents";
|
||||
import { MetricScenarioProvider, useMetricScenario } from "./Metrics/MetricScenarioProvider";
|
||||
import { ApplicationMetricPhase } from "./Metrics/ScenarioConfig";
|
||||
import { useInteractive } from "./Metrics/useMetricPhases";
|
||||
import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
|
||||
import { MetricScenarioProvider } from "./Metrics/MetricScenarioProvider";
|
||||
import Root from "./RootComponents/Root";
|
||||
import "./Shared/appInsights";
|
||||
import { useConfig } from "./hooks/useConfig";
|
||||
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
|
||||
import { useThemeStore } from "./hooks/useTheme";
|
||||
import "./less/DarkModeMenus.less";
|
||||
import "./less/ThemeSystem.less";
|
||||
|
||||
// Initialize icons before React is loaded
|
||||
initializeIcons(undefined, { disableWarnings: true });
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
height: "100vh",
|
||||
width: "100vw",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
});
|
||||
|
||||
const App = (): JSX.Element => {
|
||||
const config = useConfig();
|
||||
const styles = useStyles();
|
||||
// theme is used for application-wide styling
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const theme = useTheme();
|
||||
|
||||
// Load Fabric theme and styles only once when platform is Fabric
|
||||
React.useEffect(() => {
|
||||
if (config?.platform === Platform.Fabric) {
|
||||
loadTheme(appThemeFabric);
|
||||
import("../less/documentDBFabric.less");
|
||||
}
|
||||
StyleConstants.updateStyles();
|
||||
}, [config?.platform]);
|
||||
|
||||
const explorer = useKnockoutExplorer(config?.platform);
|
||||
|
||||
// Scenario-based health tracking: start ApplicationLoad and complete phases.
|
||||
const { startScenario, completePhase } = useMetricScenario();
|
||||
React.useEffect(() => {
|
||||
startScenario(MetricScenario.ApplicationLoad);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (explorer) {
|
||||
completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [explorer]);
|
||||
|
||||
if (!explorer) {
|
||||
return <LoadingExplorer />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="Main" className={styles.root}>
|
||||
<KeyboardShortcutRoot>
|
||||
<div className="flexContainer" aria-hidden="false">
|
||||
{userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
|
||||
<>
|
||||
<ContainerCopyPanel explorer={explorer} />
|
||||
<SidePanel />
|
||||
<Dialog />
|
||||
</>
|
||||
) : (
|
||||
<DivExplorer explorer={explorer} />
|
||||
)}
|
||||
</div>
|
||||
</KeyboardShortcutRoot>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
|
||||
const isCarouselOpen = useCarousel((state) => state.shouldOpen);
|
||||
const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
|
||||
useInteractive(MetricScenario.ApplicationLoad);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flexContainer"
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
}}
|
||||
aria-hidden="false"
|
||||
data-test="DataExplorerRoot"
|
||||
>
|
||||
<div
|
||||
id="divExplorer"
|
||||
className="flexContainer hideOverflows"
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
}}
|
||||
>
|
||||
<div id="freeTierTeachingBubble"> </div>
|
||||
<CommandBar container={explorer} />
|
||||
<SidebarContainer explorer={explorer} />
|
||||
<div
|
||||
className="dataExplorerErrorConsoleContainer"
|
||||
role="contentinfo"
|
||||
aria-label="Notification console"
|
||||
id="explorerNotificationConsole"
|
||||
style={{
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
}}
|
||||
>
|
||||
<NotificationConsole />
|
||||
</div>
|
||||
</div>
|
||||
<SidePanel />
|
||||
<Dialog />
|
||||
{<QuickstartCarousel isOpen={isCarouselOpen} />}
|
||||
{<SQLQuickstartTutorial />}
|
||||
{<MongoQuickstartTutorial />}
|
||||
{<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Root: React.FC = () => {
|
||||
// Use React state to track isDarkMode and subscribe to changes
|
||||
const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
|
||||
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
|
||||
|
||||
// Subscribe to theme changes
|
||||
React.useEffect(() => {
|
||||
return useThemeStore.subscribe((state) => {
|
||||
setIsDarkMode(state.isDarkMode);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<FluentProvider theme={currentTheme}>
|
||||
<App />
|
||||
</FluentProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
const mainElement = document.getElementById("Main");
|
||||
if (mainElement) {
|
||||
ReactDOM.render(
|
||||
@@ -224,24 +60,3 @@ if (mainElement) {
|
||||
mainElement,
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingExplorer(): JSX.Element {
|
||||
const styles = useStyles();
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className="splashLoaderContainer">
|
||||
<div className="splashLoaderContentContainer">
|
||||
<p className="connectExplorerContent">
|
||||
<img src={hdeConnectImage} alt="Azure Cosmos DB" />
|
||||
</p>
|
||||
<p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
|
||||
Welcome to Azure Cosmos DB
|
||||
</p>
|
||||
<p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
|
||||
Connecting...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import MetricScenario from "./MetricEvents";
|
||||
import { MetricPhase } from "./ScenarioConfig";
|
||||
import { scenarioMonitor } from "./ScenarioMonitor";
|
||||
|
||||
interface MetricScenarioContextValue {
|
||||
export interface MetricScenarioContextValue {
|
||||
startScenario: (scenario: MetricScenario) => void;
|
||||
startPhase: (scenario: MetricScenario, phase: MetricPhase) => void;
|
||||
completePhase: (scenario: MetricScenario, phase: MetricPhase) => void;
|
||||
|
||||
@@ -105,12 +105,6 @@ const requestAndStoreAccessToken = async (): Promise<void> => {
|
||||
});
|
||||
};
|
||||
|
||||
export const openRestoreContainerDialog = (): void => {
|
||||
if (isFabricNative()) {
|
||||
sendCachedDataMessage(FabricMessageTypes.RestoreContainer, []);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check token validity and schedule a refresh if necessary
|
||||
* @param tokenTimestamp
|
||||
|
||||
@@ -40,7 +40,6 @@ export type Features = {
|
||||
readonly disableConnectionStringLogin: boolean;
|
||||
readonly enableContainerCopy: boolean;
|
||||
readonly enableCloudShell: boolean;
|
||||
readonly enableRestoreContainer: boolean; // only for Fabric
|
||||
|
||||
// can be set via both flight and feature flag
|
||||
autoscaleDefault: boolean;
|
||||
@@ -112,7 +111,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
|
||||
enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
|
||||
disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
|
||||
enableContainerCopy: "true" === get("enablecontainercopy"),
|
||||
enableRestoreContainer: "true" === get("enablerestorecontainer"),
|
||||
enableCloudShell: true,
|
||||
};
|
||||
}
|
||||
|
||||
316
src/RootComponents/App.test.tsx
Normal file
316
src/RootComponents/App.test.tsx
Normal file
@@ -0,0 +1,316 @@
|
||||
import { loadTheme } from "@fluentui/react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import { updateStyles } from "../Common/StyleConstants";
|
||||
import { Platform } from "../ConfigContext";
|
||||
import { useConfig } from "../hooks/useConfig";
|
||||
import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
|
||||
import { MetricScenarioContextValue, useMetricScenario } from "../Metrics/MetricScenarioProvider";
|
||||
import App from "./App";
|
||||
|
||||
const mockUserContext = {
|
||||
features: { enableContainerCopy: false },
|
||||
apiType: "SQL",
|
||||
};
|
||||
|
||||
jest.mock("@fluentui/react", () => ({
|
||||
loadTheme: jest.fn(),
|
||||
makeStyles: jest.fn(() => () => ({
|
||||
root: "mock-app-root-class",
|
||||
})),
|
||||
MessageBarType: {
|
||||
error: "error",
|
||||
warning: "warning",
|
||||
info: "info",
|
||||
success: "success",
|
||||
},
|
||||
SpinnerSize: {
|
||||
xSmall: "xSmall",
|
||||
small: "small",
|
||||
medium: "medium",
|
||||
large: "large",
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock("../Common/StyleConstants", () => ({
|
||||
StyleConstants: {
|
||||
BaseMedium: "#000000",
|
||||
AccentMediumHigh: "#0078d4",
|
||||
AccentMedium: "#106ebe",
|
||||
AccentLight: "#deecf9",
|
||||
AccentAccentExtra: "#0078d4",
|
||||
FabricAccentMediumHigh: "#0078d4",
|
||||
FabricAccentMedium: "#106ebe",
|
||||
FabricAccentLight: "#deecf9",
|
||||
PortalAccentMediumHigh: "#0078d4",
|
||||
PortalAccentMedium: "#106ebe",
|
||||
PortalAccentLight: "#deecf9",
|
||||
},
|
||||
updateStyles: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("./LoadingExplorer", () => {
|
||||
const MockLoadingExplorer = () => {
|
||||
return <div data-testid="mock-loading-explorer">Loading Explorer</div>;
|
||||
};
|
||||
MockLoadingExplorer.displayName = "MockLoadingExplorer";
|
||||
return MockLoadingExplorer;
|
||||
});
|
||||
|
||||
jest.mock("./ExplorerContainer", () => {
|
||||
const MockExplorerContainer = ({ explorer }: { explorer: unknown }) => {
|
||||
return (
|
||||
<div data-testid="mock-explorer-container">Explorer Container - {explorer ? "with explorer" : "no explorer"}</div>
|
||||
);
|
||||
};
|
||||
MockExplorerContainer.displayName = "MockExplorerContainer";
|
||||
return MockExplorerContainer;
|
||||
});
|
||||
|
||||
jest.mock("../Explorer/ContainerCopy/ContainerCopyPanel", () => {
|
||||
const MockContainerCopyPanel = ({ explorer }: { explorer: unknown }) => {
|
||||
return (
|
||||
<div data-testid="mock-container-copy-panel">
|
||||
Container Copy Panel - {explorer ? "with explorer" : "no explorer"}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
MockContainerCopyPanel.displayName = "MockContainerCopyPanel";
|
||||
return MockContainerCopyPanel;
|
||||
});
|
||||
|
||||
jest.mock("../KeyboardShortcuts", () => ({
|
||||
KeyboardShortcutRoot: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="mock-keyboard-shortcut-root">{children}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock("../UserContext", () => ({
|
||||
get userContext() {
|
||||
return mockUserContext;
|
||||
},
|
||||
}));
|
||||
|
||||
const mockConfig = {
|
||||
platform: Platform.Portal,
|
||||
};
|
||||
|
||||
const mockExplorer = {
|
||||
id: "test-explorer",
|
||||
name: "Test Explorer",
|
||||
};
|
||||
|
||||
jest.mock("../hooks/useConfig", () => ({
|
||||
useConfig: jest.fn(() => mockConfig),
|
||||
}));
|
||||
|
||||
jest.mock("../hooks/useKnockoutExplorer", () => ({
|
||||
useKnockoutExplorer: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("../Metrics/MetricScenarioProvider", () => ({
|
||||
useMetricScenario: jest.fn(() => ({
|
||||
startScenario: jest.fn(),
|
||||
completePhase: jest.fn(),
|
||||
})),
|
||||
}));
|
||||
|
||||
jest.mock("../Metrics/MetricEvents", () => ({
|
||||
__esModule: true,
|
||||
default: {
|
||||
ApplicationLoad: "ApplicationLoad",
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock("../Metrics/ScenarioConfig", () => ({
|
||||
ApplicationMetricPhase: {
|
||||
ExplorerInitialized: "ExplorerInitialized",
|
||||
},
|
||||
CommonMetricPhase: {
|
||||
Interactive: "Interactive",
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock("../Platform/Fabric/FabricTheme", () => ({
|
||||
appThemeFabric: { name: "fabric-theme" },
|
||||
}));
|
||||
|
||||
describe("App", () => {
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
mockUserContext.features = { enableContainerCopy: false };
|
||||
mockUserContext.apiType = "SQL";
|
||||
});
|
||||
let mockStartScenario: jest.Mock;
|
||||
let mockCompletePhase: jest.Mock;
|
||||
let mockUseKnockoutExplorer: jest.Mock;
|
||||
let mockUseConfig: jest.Mock;
|
||||
let mockLoadTheme: jest.Mock;
|
||||
let mockUpdateStyles: jest.Mock;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
|
||||
mockStartScenario = jest.fn();
|
||||
mockCompletePhase = jest.fn();
|
||||
|
||||
mockUseKnockoutExplorer = jest.mocked(useKnockoutExplorer);
|
||||
mockUseConfig = jest.mocked(useConfig);
|
||||
mockLoadTheme = jest.mocked(loadTheme);
|
||||
mockUpdateStyles = jest.mocked(updateStyles);
|
||||
|
||||
const mockUseMetricScenario = jest.mocked(useMetricScenario);
|
||||
mockUseMetricScenario.mockReturnValue({
|
||||
startScenario: mockStartScenario,
|
||||
completePhase: mockCompletePhase,
|
||||
} as unknown as MetricScenarioContextValue);
|
||||
|
||||
mockUseConfig.mockReturnValue(mockConfig);
|
||||
mockUseKnockoutExplorer.mockReturnValue(null);
|
||||
});
|
||||
|
||||
test("should render loading explorer when explorer is not ready", () => {
|
||||
mockUseKnockoutExplorer.mockReturnValue(null);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(screen.getByTestId("mock-loading-explorer")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should render explorer container when explorer is ready", () => {
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("mock-loading-explorer")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should start metric scenario on mount", () => {
|
||||
render(<App />);
|
||||
|
||||
expect(mockStartScenario).toHaveBeenCalledWith("ApplicationLoad");
|
||||
expect(mockStartScenario).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test("should complete metric phase when explorer is initialized", async () => {
|
||||
const { rerender } = render(<App />);
|
||||
|
||||
expect(mockCompletePhase).not.toHaveBeenCalled();
|
||||
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
rerender(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockCompletePhase).toHaveBeenCalledWith("ApplicationLoad", "ExplorerInitialized");
|
||||
});
|
||||
});
|
||||
|
||||
test("should load fabric theme when platform is Fabric", () => {
|
||||
const fabricConfig = { platform: Platform.Fabric };
|
||||
mockUseConfig.mockReturnValue(fabricConfig);
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
|
||||
});
|
||||
|
||||
test("should not load fabric theme when platform is not Fabric", () => {
|
||||
const portalConfig = { platform: Platform.Portal };
|
||||
mockUseConfig.mockReturnValue(portalConfig);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(mockLoadTheme).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should always call updateStyles", () => {
|
||||
render(<App />);
|
||||
|
||||
expect(mockUpdateStyles).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should render container copy panel when container copy is enabled and API is SQL", () => {
|
||||
mockUserContext.features = { enableContainerCopy: true };
|
||||
mockUserContext.apiType = "SQL";
|
||||
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(screen.getByTestId("mock-container-copy-panel")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should render explorer container when container copy is disabled", () => {
|
||||
mockUserContext.features = { enableContainerCopy: false };
|
||||
mockUserContext.apiType = "SQL";
|
||||
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should render explorer container when API is not SQL", () => {
|
||||
mockUserContext.features = { enableContainerCopy: true };
|
||||
mockUserContext.apiType = "MongoDB";
|
||||
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should have correct DOM structure", () => {
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
const { container } = render(<App />);
|
||||
|
||||
const mainDiv = container.querySelector("#Main");
|
||||
expect(mainDiv).toBeInTheDocument();
|
||||
expect(mainDiv).toHaveClass("mock-app-root-class");
|
||||
|
||||
expect(screen.getByTestId("mock-keyboard-shortcut-root")).toBeInTheDocument();
|
||||
|
||||
const flexContainer = container.querySelector(".flexContainer");
|
||||
expect(flexContainer).toBeInTheDocument();
|
||||
expect(flexContainer).toHaveAttribute("aria-hidden", "false");
|
||||
});
|
||||
|
||||
test("should handle config changes for Fabric platform", () => {
|
||||
const { rerender } = render(<App />);
|
||||
|
||||
const fabricConfig = { platform: Platform.Fabric };
|
||||
mockUseConfig.mockReturnValue(fabricConfig);
|
||||
|
||||
rerender(<App />);
|
||||
|
||||
expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
|
||||
});
|
||||
|
||||
test("should pass explorer to child components", () => {
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(screen.getByText("Explorer Container - with explorer")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should handle null config gracefully", () => {
|
||||
mockUseConfig.mockReturnValue(null);
|
||||
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
|
||||
|
||||
expect(() => render(<App />)).not.toThrow();
|
||||
|
||||
expect(mockLoadTheme).not.toHaveBeenCalled();
|
||||
expect(mockUpdateStyles).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
73
src/RootComponents/App.tsx
Normal file
73
src/RootComponents/App.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { loadTheme, makeStyles } from "@fluentui/react";
|
||||
import React from "react";
|
||||
import * as StyleConstants from "../Common/StyleConstants";
|
||||
import { Platform } from "../ConfigContext";
|
||||
import ContainerCopyPanel from "../Explorer/ContainerCopy/ContainerCopyPanel";
|
||||
import { useConfig } from "../hooks/useConfig";
|
||||
import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
|
||||
import { KeyboardShortcutRoot } from "../KeyboardShortcuts";
|
||||
import MetricScenario from "../Metrics/MetricEvents";
|
||||
import { useMetricScenario } from "../Metrics/MetricScenarioProvider";
|
||||
import { ApplicationMetricPhase } from "../Metrics/ScenarioConfig";
|
||||
import { appThemeFabric } from "../Platform/Fabric/FabricTheme";
|
||||
import { userContext } from "../UserContext";
|
||||
import ExplorerContainer from "./ExplorerContainer";
|
||||
import LoadingExplorer from "./LoadingExplorer";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
height: "100vh",
|
||||
width: "100vw",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
});
|
||||
|
||||
const App = (): JSX.Element => {
|
||||
const config = useConfig();
|
||||
const styles = useStyles();
|
||||
// Load Fabric theme and styles only once when platform is Fabric
|
||||
React.useEffect(() => {
|
||||
if (config?.platform === Platform.Fabric) {
|
||||
loadTheme(appThemeFabric);
|
||||
import("../../less/documentDBFabric.less");
|
||||
}
|
||||
StyleConstants.updateStyles();
|
||||
}, [config?.platform]);
|
||||
|
||||
const explorer = useKnockoutExplorer(config?.platform);
|
||||
|
||||
// Scenario-based health tracking: start ApplicationLoad and complete phases.
|
||||
const { startScenario, completePhase } = useMetricScenario();
|
||||
React.useEffect(() => {
|
||||
startScenario(MetricScenario.ApplicationLoad);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (explorer) {
|
||||
completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [explorer]);
|
||||
|
||||
if (!explorer) {
|
||||
return <LoadingExplorer />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="Main" className={styles.root}>
|
||||
<KeyboardShortcutRoot>
|
||||
<div className="flexContainer" aria-hidden="false">
|
||||
{userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
|
||||
<ContainerCopyPanel explorer={explorer} />
|
||||
) : (
|
||||
<ExplorerContainer explorer={explorer} />
|
||||
)}
|
||||
</div>
|
||||
</KeyboardShortcutRoot>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
183
src/RootComponents/ExplorerContainer.test.tsx
Normal file
183
src/RootComponents/ExplorerContainer.test.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import "@testing-library/jest-dom";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import Explorer from "../Explorer/Explorer";
|
||||
import { useCarousel } from "../hooks/useCarousel";
|
||||
import { useInteractive } from "../Metrics/useMetricPhases";
|
||||
import ExplorerContainer from "./ExplorerContainer";
|
||||
|
||||
jest.mock("../Explorer/Controls/Dialog", () => ({
|
||||
Dialog: () => <div data-testid="mock-dialog">Dialog</div>,
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/Menus/CommandBar/CommandBarComponentAdapter", () => ({
|
||||
CommandBar: ({ container }: { container: Explorer }) => (
|
||||
<div data-testid="mock-command-bar">CommandBar - {container ? "with explorer" : "no explorer"}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/Menus/NotificationConsole/NotificationConsoleComponent", () => ({
|
||||
NotificationConsole: () => <div data-testid="mock-notification-console">NotificationConsole</div>,
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/Panes/PanelContainerComponent", () => ({
|
||||
SidePanel: () => <div data-testid="mock-side-panel">SidePanel</div>,
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/QueryCopilot/CopilotCarousel", () => ({
|
||||
QueryCopilotCarousel: ({ isOpen, explorer }: { isOpen: boolean; explorer: Explorer }) => (
|
||||
<div data-testid="mock-copilot-carousel">
|
||||
CopilotCarousel - {isOpen ? "open" : "closed"} - {explorer ? "with explorer" : "no explorer"}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/Quickstart/QuickstartCarousel", () => ({
|
||||
QuickstartCarousel: ({ isOpen }: { isOpen: boolean }) => (
|
||||
<div data-testid="mock-quickstart-carousel">QuickstartCarousel - {isOpen ? "open" : "closed"}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial", () => ({
|
||||
MongoQuickstartTutorial: () => <div data-testid="mock-mongo-tutorial">MongoQuickstartTutorial</div>,
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial", () => ({
|
||||
SQLQuickstartTutorial: () => <div data-testid="mock-sql-tutorial">SQLQuickstartTutorial</div>,
|
||||
}));
|
||||
|
||||
jest.mock("../Explorer/Sidebar", () => ({
|
||||
SidebarContainer: ({ explorer }: { explorer: Explorer }) => (
|
||||
<div data-testid="mock-sidebar-container">SidebarContainer - {explorer ? "with explorer" : "no explorer"}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock("../hooks/useCarousel", () => ({
|
||||
useCarousel: jest.fn((selector) => {
|
||||
if (selector.toString().includes("shouldOpen")) {
|
||||
return true;
|
||||
}
|
||||
if (selector.toString().includes("showCopilotCarousel")) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock("../Metrics/useMetricPhases", () => ({
|
||||
useInteractive: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("../Metrics/MetricEvents", () => ({
|
||||
__esModule: true,
|
||||
default: {
|
||||
ApplicationLoad: "ApplicationLoad",
|
||||
},
|
||||
}));
|
||||
|
||||
describe("ExplorerContainer", () => {
|
||||
let mockExplorer: Explorer;
|
||||
|
||||
beforeEach(() => {
|
||||
mockExplorer = {
|
||||
id: "test-explorer",
|
||||
name: "Test Explorer",
|
||||
} as unknown as Explorer;
|
||||
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test("should render explorer container with all components", () => {
|
||||
const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
|
||||
|
||||
const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
|
||||
expect(mainContainer).toBeInTheDocument();
|
||||
expect(mainContainer).toHaveClass("flexContainer");
|
||||
|
||||
expect(screen.getByTestId("mock-command-bar")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-sidebar-container")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-notification-console")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-side-panel")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-dialog")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-quickstart-carousel")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-sql-tutorial")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-mongo-tutorial")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-copilot-carousel")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should pass explorer to components that need it", () => {
|
||||
render(<ExplorerContainer explorer={mockExplorer} />);
|
||||
|
||||
expect(screen.getByText("CommandBar - with explorer")).toBeInTheDocument();
|
||||
expect(screen.getByText("SidebarContainer - with explorer")).toBeInTheDocument();
|
||||
expect(screen.getByText("CopilotCarousel - closed - with explorer")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should have correct DOM structure", () => {
|
||||
const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
|
||||
|
||||
const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
|
||||
expect(mainContainer).toBeInTheDocument();
|
||||
expect(mainContainer).toHaveAttribute("aria-hidden", "false");
|
||||
|
||||
const divExplorer = container.querySelector("#divExplorer");
|
||||
expect(divExplorer).toBeInTheDocument();
|
||||
expect(divExplorer).toHaveClass("flexContainer", "hideOverflows");
|
||||
|
||||
const freeTierBubble = container.querySelector("#freeTierTeachingBubble");
|
||||
expect(freeTierBubble).toBeInTheDocument();
|
||||
|
||||
const notificationContainer = container.querySelector("#explorerNotificationConsole");
|
||||
expect(notificationContainer).toBeInTheDocument();
|
||||
expect(notificationContainer).toHaveClass("dataExplorerErrorConsoleContainer");
|
||||
expect(notificationContainer).toHaveAttribute("role", "contentinfo");
|
||||
expect(notificationContainer).toHaveAttribute("aria-label", "Notification console");
|
||||
});
|
||||
|
||||
test("should apply correct inline styles", () => {
|
||||
const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
|
||||
|
||||
const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
|
||||
expect(mainContainer).toHaveStyle({
|
||||
flex: "1",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
});
|
||||
|
||||
const divExplorer = container.querySelector("#divExplorer");
|
||||
expect(divExplorer).toHaveStyle({
|
||||
flex: "1",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
});
|
||||
});
|
||||
|
||||
test("should handle carousel states correctly", () => {
|
||||
const mockUseCarousel = jest.mocked(useCarousel);
|
||||
|
||||
mockUseCarousel.mockImplementation((selector: { toString: () => string | string[] }) => {
|
||||
if (selector.toString().includes("shouldOpen")) {
|
||||
return false;
|
||||
}
|
||||
if (selector.toString().includes("showCopilotCarousel")) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
render(<ExplorerContainer explorer={mockExplorer} />);
|
||||
|
||||
expect(screen.getByText("QuickstartCarousel - closed")).toBeInTheDocument();
|
||||
expect(screen.getByText("CopilotCarousel - open - with explorer")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should call useInteractive hook with correct metric", () => {
|
||||
const mockUseInteractive = jest.mocked(useInteractive);
|
||||
|
||||
render(<ExplorerContainer explorer={mockExplorer} />);
|
||||
|
||||
expect(mockUseInteractive).toHaveBeenCalledWith("ApplicationLoad");
|
||||
});
|
||||
});
|
||||
71
src/RootComponents/ExplorerContainer.tsx
Normal file
71
src/RootComponents/ExplorerContainer.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
import { Dialog } from "../Explorer/Controls/Dialog";
|
||||
import Explorer from "../Explorer/Explorer";
|
||||
import { CommandBar } from "../Explorer/Menus/CommandBar/CommandBarComponentAdapter";
|
||||
import { NotificationConsole } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import { SidePanel } from "../Explorer/Panes/PanelContainerComponent";
|
||||
import { QueryCopilotCarousel } from "../Explorer/QueryCopilot/CopilotCarousel";
|
||||
import { QuickstartCarousel } from "../Explorer/Quickstart/QuickstartCarousel";
|
||||
import { MongoQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
|
||||
import { SQLQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
|
||||
import { SidebarContainer } from "../Explorer/Sidebar";
|
||||
import { useCarousel } from "../hooks/useCarousel";
|
||||
import MetricScenario from "../Metrics/MetricEvents";
|
||||
import { useInteractive } from "../Metrics/useMetricPhases";
|
||||
|
||||
const ExplorerContainer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
|
||||
const isCarouselOpen = useCarousel((state) => state.shouldOpen);
|
||||
const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
|
||||
useInteractive(MetricScenario.ApplicationLoad);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flexContainer"
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
}}
|
||||
aria-hidden="false"
|
||||
data-test="DataExplorerRoot"
|
||||
>
|
||||
<div
|
||||
id="divExplorer"
|
||||
className="flexContainer hideOverflows"
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
}}
|
||||
>
|
||||
<div id="freeTierTeachingBubble"> </div>
|
||||
<CommandBar container={explorer} />
|
||||
<SidebarContainer explorer={explorer} />
|
||||
<div
|
||||
className="dataExplorerErrorConsoleContainer"
|
||||
role="contentinfo"
|
||||
aria-label="Notification console"
|
||||
id="explorerNotificationConsole"
|
||||
style={{
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
}}
|
||||
>
|
||||
<NotificationConsole />
|
||||
</div>
|
||||
</div>
|
||||
<SidePanel />
|
||||
<Dialog />
|
||||
{<QuickstartCarousel isOpen={isCarouselOpen} />}
|
||||
{<SQLQuickstartTutorial />}
|
||||
{<MongoQuickstartTutorial />}
|
||||
{<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExplorerContainer;
|
||||
71
src/RootComponents/LoadingExplorer.test.tsx
Normal file
71
src/RootComponents/LoadingExplorer.test.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import "@testing-library/jest-dom";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import LoadingExplorer from "./LoadingExplorer";
|
||||
|
||||
jest.mock("../../images/HdeConnectCosmosDB.svg", () => "test-hde-connect-image.svg");
|
||||
|
||||
jest.mock("@fluentui/react-components", () => ({
|
||||
makeStyles: jest.fn(() => () => ({
|
||||
root: "mock-root-class",
|
||||
})),
|
||||
}));
|
||||
|
||||
describe("LoadingExplorer", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test("should render loading explorer component", () => {
|
||||
render(<LoadingExplorer />);
|
||||
|
||||
const container = screen.getByRole("alert");
|
||||
expect(container).toBeInTheDocument();
|
||||
expect(container).toHaveTextContent("Connecting...");
|
||||
});
|
||||
|
||||
test("should display welcome title", () => {
|
||||
render(<LoadingExplorer />);
|
||||
|
||||
const title = screen.getByText("Welcome to Azure Cosmos DB");
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveAttribute("id", "explorerLoadingStatusTitle");
|
||||
});
|
||||
|
||||
test("should display connecting status text", () => {
|
||||
render(<LoadingExplorer />);
|
||||
|
||||
const statusText = screen.getByText("Connecting...");
|
||||
expect(statusText).toBeInTheDocument();
|
||||
expect(statusText).toHaveAttribute("id", "explorerLoadingStatusText");
|
||||
expect(statusText).toHaveAttribute("role", "alert");
|
||||
});
|
||||
|
||||
test("should render Azure Cosmos DB image", () => {
|
||||
render(<LoadingExplorer />);
|
||||
|
||||
const image = screen.getByAltText("Azure Cosmos DB");
|
||||
expect(image).toBeInTheDocument();
|
||||
expect(image).toHaveAttribute("src", "test-hde-connect-image.svg");
|
||||
});
|
||||
|
||||
test("should have correct class structure", () => {
|
||||
render(<LoadingExplorer />);
|
||||
|
||||
const splashContainer = document.querySelector(".splashLoaderContainer");
|
||||
expect(splashContainer).toBeInTheDocument();
|
||||
|
||||
const contentContainer = document.querySelector(".splashLoaderContentContainer");
|
||||
expect(contentContainer).toBeInTheDocument();
|
||||
|
||||
const connectContent = document.querySelector(".connectExplorerContent");
|
||||
expect(connectContent).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should apply CSS classes correctly", () => {
|
||||
const { container } = render(<LoadingExplorer />);
|
||||
|
||||
const rootDiv = container.firstChild as HTMLElement;
|
||||
expect(rootDiv).toHaveClass("mock-root-class");
|
||||
});
|
||||
});
|
||||
36
src/RootComponents/LoadingExplorer.tsx
Normal file
36
src/RootComponents/LoadingExplorer.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { makeStyles } from "@fluentui/react-components";
|
||||
import React from "react";
|
||||
import hdeConnectImage from "../../images/HdeConnectCosmosDB.svg";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
height: "100vh",
|
||||
width: "100vw",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
});
|
||||
|
||||
function LoadingExplorer(): JSX.Element {
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className="splashLoaderContainer">
|
||||
<div className="splashLoaderContentContainer">
|
||||
<p className="connectExplorerContent">
|
||||
<img src={hdeConnectImage} alt="Azure Cosmos DB" />
|
||||
</p>
|
||||
<p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
|
||||
Welcome to Azure Cosmos DB
|
||||
</p>
|
||||
<p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
|
||||
Connecting...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoadingExplorer;
|
||||
107
src/RootComponents/Root.test.tsx
Normal file
107
src/RootComponents/Root.test.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import "@testing-library/jest-dom";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import Root from "./Root";
|
||||
|
||||
jest.mock("../Explorer/ErrorBoundary", () => ({
|
||||
ErrorBoundary: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="mock-error-boundary">{children}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock("@fluentui/react-components", () => ({
|
||||
FluentProvider: ({ children, theme }: { children: React.ReactNode; theme: { colorNeutralBackground1: string } }) => (
|
||||
<div
|
||||
data-testid="mock-fluent-provider"
|
||||
data-theme={theme.colorNeutralBackground1 === "dark" ? "webDarkTheme" : "webLightTheme"}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
webLightTheme: { colorNeutralBackground1: "light" },
|
||||
webDarkTheme: { colorNeutralBackground1: "dark" },
|
||||
}));
|
||||
|
||||
jest.mock("./App", () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="mock-app">App</div>,
|
||||
}));
|
||||
|
||||
const createMockStore = (isDarkMode: boolean = false) => ({
|
||||
getState: jest.fn(() => ({ isDarkMode })),
|
||||
subscribe: jest.fn(() => jest.fn()),
|
||||
});
|
||||
|
||||
const mockThemeStore = createMockStore(false);
|
||||
|
||||
jest.mock("../hooks/useTheme", () => ({
|
||||
get useThemeStore() {
|
||||
return mockThemeStore;
|
||||
},
|
||||
}));
|
||||
|
||||
describe("Root", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test("should render Root component with all child components", () => {
|
||||
render(<Root />);
|
||||
|
||||
expect(screen.getByTestId("mock-error-boundary")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-fluent-provider")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("mock-app")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should have correct component hierarchy", () => {
|
||||
render(<Root />);
|
||||
|
||||
const errorBoundary = screen.getByTestId("mock-error-boundary");
|
||||
const fluentProvider = screen.getByTestId("mock-fluent-provider");
|
||||
const app = screen.getByTestId("mock-app");
|
||||
|
||||
expect(errorBoundary).toContainElement(fluentProvider);
|
||||
expect(fluentProvider).toContainElement(app);
|
||||
});
|
||||
|
||||
test("should subscribe to theme changes on mount", () => {
|
||||
render(<Root />);
|
||||
|
||||
expect(mockThemeStore.subscribe).toHaveBeenCalled();
|
||||
expect(mockThemeStore.subscribe).toHaveBeenCalledWith(expect.any(Function));
|
||||
});
|
||||
|
||||
test("should get initial theme state", () => {
|
||||
render(<Root />);
|
||||
|
||||
expect(mockThemeStore.getState).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should handle component unmounting", () => {
|
||||
const mockUnsubscribe = jest.fn();
|
||||
mockThemeStore.subscribe.mockReturnValue(mockUnsubscribe);
|
||||
|
||||
const { unmount } = render(<Root />);
|
||||
|
||||
unmount();
|
||||
|
||||
expect(mockUnsubscribe).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should call getState to initialize theme", () => {
|
||||
render(<Root />);
|
||||
|
||||
expect(mockThemeStore.getState).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test("should handle theme subscription properly", () => {
|
||||
render(<Root />);
|
||||
|
||||
expect(mockThemeStore.subscribe).toHaveBeenCalledTimes(1);
|
||||
expect(mockThemeStore.getState).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should render without errors", () => {
|
||||
expect(() => render(<Root />)).not.toThrow();
|
||||
});
|
||||
});
|
||||
28
src/RootComponents/Root.tsx
Normal file
28
src/RootComponents/Root.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
|
||||
import React from "react";
|
||||
import { ErrorBoundary } from "../Explorer/ErrorBoundary";
|
||||
import { useThemeStore } from "../hooks/useTheme";
|
||||
import App from "./App";
|
||||
|
||||
const Root: React.FC = () => {
|
||||
// Use React state to track isDarkMode and subscribe to changes
|
||||
const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
|
||||
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
|
||||
|
||||
// Subscribe to theme changes
|
||||
React.useEffect(() => {
|
||||
return useThemeStore.subscribe((state) => {
|
||||
setIsDarkMode(state.isDarkMode);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<FluentProvider theme={currentTheme}>
|
||||
<App />
|
||||
</FluentProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
export default Root;
|
||||
@@ -43,7 +43,6 @@ describe("AuthorizationUtils", () => {
|
||||
partitionKeyDefault: false,
|
||||
partitionKeyDefault2: false,
|
||||
notebooksDownBanner: false,
|
||||
enableRestoreContainer: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user