From 79469bd2b1160460402a96d1bc4ef5731ce077b6 Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Tue, 6 Aug 2024 20:11:05 -0400 Subject: [PATCH] Missing node dialog revamp (#322) * Basic rework of load workflow warning dialog * Better style * Add vue jest support * Mock vue component in jest test * nit * Make dialog maximizable --- jest.config.ts | 2 + package-lock.json | 355 ++++++++++++++++++ package.json | 2 + src/App.vue | 2 + src/components/dialog/GlobalDialog.vue | 34 ++ .../dialog/content/LoadWorkflowWarning.vue | 138 +++++++ src/scripts/app.ts | 62 +-- src/services/dialogService.ts | 15 + src/stores/dialogStore.ts | 38 ++ tests-ui/globalSetup.ts | 6 + 10 files changed, 599 insertions(+), 55 deletions(-) create mode 100644 src/components/dialog/GlobalDialog.vue create mode 100644 src/components/dialog/content/LoadWorkflowWarning.vue create mode 100644 src/services/dialogService.ts create mode 100644 src/stores/dialogStore.ts diff --git a/jest.config.ts b/jest.config.ts index 1803a8109..65935392e 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -3,7 +3,9 @@ import type { JestConfigWithTsJest } from 'ts-jest' const jestConfig: JestConfigWithTsJest = { testMatch: ['**/tests-ui/**/*.test.ts'], testEnvironment: 'jsdom', + moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'ts', 'tsx'], transform: { + '^.+\\.vue$': '@vue/vue3-jest', '^.+\\.m?[tj]sx?$': [ 'ts-jest', { diff --git a/package-lock.json b/package-lock.json index f32011bbf..cbb32b6e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,8 @@ "@types/jest": "^29.5.12", "@types/lodash": "^4.17.6", "@types/node": "^20.14.8", + "@vue/test-utils": "^2.4.6", + "@vue/vue3-jest": "^29.2.6", "autoprefixer": "^10.4.19", "babel-plugin-transform-import-meta": "^2.2.1", "babel-plugin-transform-rename-import": "^2.3.0", @@ -3280,6 +3282,13 @@ "node": ">= 8" } }, + "node_modules/@one-ini/wasm": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz", + "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==", + "dev": true, + "license": "MIT" + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -3719,6 +3728,20 @@ "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==", "dev": true }, + "node_modules/@types/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/strip-json-comments": { + "version": "0.0.30", + "resolved": "https://registry.npmjs.org/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz", + "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -4090,6 +4113,79 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz", "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==" }, + "node_modules/@vue/test-utils": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz", + "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==", + "dev": true, + "license": "MIT", + "dependencies": { + "js-beautify": "^1.14.9", + "vue-component-type-helpers": "^2.0.0" + } + }, + "node_modules/@vue/vue3-jest": { + "version": "29.2.6", + "resolved": "https://registry.npmjs.org/@vue/vue3-jest/-/vue3-jest-29.2.6.tgz", + "integrity": "sha512-Hy4i2BsV5fUmER5LplYiAeRkLTDCSB3ZbnAeEawXtjto/ILaOnamBAoAvEqARgPpR6NRtiYjSgGKmllMtnFd9g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/plugin-transform-modules-commonjs": "^7.2.0", + "chalk": "^2.1.0", + "convert-source-map": "^1.6.0", + "css-tree": "^2.0.1", + "source-map": "0.5.6", + "tsconfig": "^7.0.0" + }, + "engines": { + "node": ">10" + }, + "peerDependencies": { + "@babel/core": "7.x", + "babel-jest": "29.x", + "jest": "29.x", + "typescript": ">= 4.3", + "vue": "^3.0.0-0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@vue/vue3-jest/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@vue/vue3-jest/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true, + "license": "MIT" + }, + "node_modules/@vue/vue3-jest/node_modules/source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -4097,6 +4193,16 @@ "deprecated": "Use your platform's native atob() and btoa() methods instead", "dev": true }, + "node_modules/abbrev": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz", + "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", @@ -4952,6 +5058,17 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/config-chain": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", + "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ini": "^1.3.4", + "proto-list": "~1.2.1" + } + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -5088,6 +5205,20 @@ "node": ">= 8" } }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -5287,6 +5418,74 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "node_modules/editorconfig": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz", + "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@one-ini/wasm": "0.1.1", + "commander": "^10.0.0", + "minimatch": "9.0.1", + "semver": "^7.5.3" + }, + "bin": { + "editorconfig": "bin/editorconfig" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/editorconfig/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/editorconfig/node_modules/commander": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", + "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + } + }, + "node_modules/editorconfig/node_modules/minimatch": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz", + "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/editorconfig/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.817", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.817.tgz", @@ -6417,6 +6616,13 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/ini": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + "dev": true, + "license": "ISC" + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -8250,6 +8456,85 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-beautify": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz", + "integrity": "sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==", + "dev": true, + "license": "MIT", + "dependencies": { + "config-chain": "^1.1.13", + "editorconfig": "^1.0.4", + "glob": "^10.3.3", + "js-cookie": "^3.0.5", + "nopt": "^7.2.0" + }, + "bin": { + "css-beautify": "js/bin/css-beautify.js", + "html-beautify": "js/bin/html-beautify.js", + "js-beautify": "js/bin/js-beautify.js" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/js-beautify/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/js-beautify/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/js-beautify/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -8841,6 +9126,13 @@ "tmpl": "1.0.5" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true, + "license": "CC0-1.0" + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -8972,6 +9264,22 @@ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, + "node_modules/nopt": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz", + "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==", + "dev": true, + "license": "ISC", + "dependencies": { + "abbrev": "^2.0.0" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -9631,6 +9939,13 @@ "node": ">= 6" } }, + "node_modules/proto-list": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", + "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", + "dev": true, + "license": "ISC" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -10683,6 +10998,39 @@ } } }, + "node_modules/tsconfig": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-7.0.0.tgz", + "integrity": "sha512-vZXmzPrL+EmC4T/4rVlT2jNVMWCi/O4DIiSj3UHg1OE5kCKbk4mfrXc6dZksLgRM/TZlKnousKH9bbTazUWRRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/strip-bom": "^3.0.0", + "@types/strip-json-comments": "0.0.30", + "strip-bom": "^3.0.0", + "strip-json-comments": "^2.0.0" + } + }, + "node_modules/tsconfig/node_modules/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/tsconfig/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==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tslib": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", @@ -11002,6 +11350,13 @@ } } }, + "node_modules/vue-component-type-helpers": { + "version": "2.0.29", + "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.29.tgz", + "integrity": "sha512-58i+ZhUAUpwQ+9h5Hck0D+jr1qbYl4voRt5KffBx8qzELViQ4XdT/Tuo+mzq8u63teAG8K0lLaOiL5ofqW38rg==", + "dev": true, + "license": "MIT" + }, "node_modules/vue-eslint-parser": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz", diff --git a/package.json b/package.json index 8a2bb06b4..0ce65ff57 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,8 @@ "@types/jest": "^29.5.12", "@types/lodash": "^4.17.6", "@types/node": "^20.14.8", + "@vue/test-utils": "^2.4.6", + "@vue/vue3-jest": "^29.2.6", "autoprefixer": "^10.4.19", "babel-plugin-transform-import-meta": "^2.2.1", "babel-plugin-transform-rename-import": "^2.3.0", diff --git a/src/App.vue b/src/App.vue index b4cefc69f..5b70dd026 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,7 @@ @@ -15,6 +16,7 @@ import { useSettingStore } from './stores/settingStore' import { useI18n } from 'vue-i18n' import { useWorkspaceStore } from './stores/workspaceStateStore' import NodeLibrarySideBarTab from './components/sidebar/tabs/NodeLibrarySideBarTab.vue' +import GlobalDialog from './components/dialog/GlobalDialog.vue' const isLoading = computed(() => useWorkspaceStore().spinner) const theme = computed(() => diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue new file mode 100644 index 000000000..e64e2b579 --- /dev/null +++ b/src/components/dialog/GlobalDialog.vue @@ -0,0 +1,34 @@ + + + + diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue new file mode 100644 index 000000000..d4306d5ed --- /dev/null +++ b/src/components/dialog/content/LoadWorkflowWarning.vue @@ -0,0 +1,138 @@ + + + + + + + diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 91a55bbba..bbcd12901 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -43,6 +43,7 @@ import { } from '@/stores/nodeDefStore' import { Vector2 } from '@comfyorg/litegraph' import _ from 'lodash' +import { showLoadWorkflowWarning } from '@/services/dialogService' export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview' @@ -2123,62 +2124,13 @@ export class ComfyApp { } showMissingNodesError(missingNodeTypes, hasAddedNodes = true) { - let seenTypes = new Set() + if (this.vueAppReady) + showLoadWorkflowWarning({ + missingNodeTypes, + hasAddedNodes, + maximizable: true + }) - this.ui.dialog.show( - $el('div.comfy-missing-nodes', [ - $el('span', { - textContent: - 'When loading the graph, the following node types were not found: ' - }), - $el( - 'ul', - Array.from(new Set(missingNodeTypes)) - .map((t) => { - let children = [] - if (typeof t === 'object') { - // @ts-expect-error - if (seenTypes.has(t.type)) return null - // @ts-expect-error - seenTypes.add(t.type) - // @ts-expect-error - children.push($el('span', { textContent: t.type })) - // @ts-expect-error - if (t.hint) { - // @ts-expect-error - children.push($el('span', { textContent: t.hint })) - } - // @ts-expect-error - if (t.action) { - children.push( - $el('button', { - // @ts-expect-error - onclick: t.action.callback, - // @ts-expect-error - textContent: t.action.text - }) - ) - } - } else { - if (seenTypes.has(t)) return null - seenTypes.add(t) - // @ts-expect-error - children.push($el('span', { textContent: t })) - } - return $el('li', children) - }) - .filter(Boolean) - ), - ...(hasAddedNodes - ? [ - $el('span', { - textContent: - 'Nodes that have failed to load will show as red on the graph.' - }) - ] - : []) - ]) - ) this.logging.addEntry('Comfy.App', 'warn', { MissingNodes: missingNodeTypes }) diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts new file mode 100644 index 000000000..305b1545e --- /dev/null +++ b/src/services/dialogService.ts @@ -0,0 +1,15 @@ +import { useDialogStore } from '@/stores/dialogStore' +import LoadWorkflowWarning from '@/components/dialog/content/LoadWorkflowWarning.vue' +import { markRaw } from 'vue' + +export function showLoadWorkflowWarning(props: { + missingNodeTypes: any[] + hasAddedNodes: boolean + [key: string]: any +}) { + const dialogStore = useDialogStore() + dialogStore.showDialog({ + component: markRaw(LoadWorkflowWarning), + props + }) +} diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts new file mode 100644 index 000000000..8395c6085 --- /dev/null +++ b/src/stores/dialogStore.ts @@ -0,0 +1,38 @@ +// We should consider moving to https://primevue.org/dynamicdialog/ once everything is in Vue. +// Currently we need to bridge between legacy app code and Vue app with a Pinia store. + +import { defineStore } from 'pinia' +import { Component } from 'vue' + +interface DialogState { + isVisible: boolean + title: string + component: Component | null + props: Record +} + +export const useDialogStore = defineStore('dialog', { + state: (): DialogState => ({ + isVisible: false, + title: '', + component: null, + props: {} + }), + + actions: { + showDialog(options: { + title?: string + component: Component + props?: Record + }) { + this.title = options.title + this.component = options.component + this.props = options.props || {} + this.isVisible = true + }, + + closeDialog() { + this.isVisible = false + } + } +}) diff --git a/tests-ui/globalSetup.ts b/tests-ui/globalSetup.ts index e3cf4c131..439563e1b 100644 --- a/tests-ui/globalSetup.ts +++ b/tests-ui/globalSetup.ts @@ -12,4 +12,10 @@ module.exports = async function () { HTMLCanvasElement.prototype.getContext = nop localStorage['Comfy.Settings.Comfy.Logging.Enabled'] = 'false' + + jest.mock('@/services/dialogService', () => { + return { + showLoadWorkflowWarning: jest.fn() + } + }) }