starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-18 16:02:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): Buttons refactor (#2545)

Browse Source 
* feat(frontend): wip

* feat(frontend): button refactor wip

* feat(frontend): button refactor wip

* feat(frontend): fix build

* feat(frontend): fix build

* fix(frontend): fix build

* fix(frontend): fix buttons styles

* fix(frontend): remove dev file

* feat(frontend): clean up

* feat(frontend): done

* feat(frontend): done

* feat(frontend): remove duplicated componnet

* feat(frontend): wip

* feat(frontend): wip

* feat(frontend): forked Flow icons

* feat(frontend): remove legacy dropdown

* feat(frontend): migrated all + remove dependencies

* feat(frontend): clean up
This commit is contained in:
Faton Ramadani
2023-11-10 09:43:10 +01:00
committed by GitHub
parent d68ecf872d
commit cdc76994f8
168 changed files with 1635 additions and 2249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+331 -123
View File
@@ -217,22 +217,101 @@
}
},
"node_modules/@babel/code-frame": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
"integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
"version": "7.22.13",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
"integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/highlight": "^7.22.5"
"@babel/highlight": "^7.22.13",
"chalk": "^2.4.2"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/code-frame/node_modules/ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"peer": true,
"dependencies": {
"color-convert": "^1.9.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/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,
"peer": true,
"dependencies": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"peer": true,
"dependencies": {
"color-name": "1.1.3"
}
},
"node_modules/@babel/code-frame/node_modules/color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true,
"peer": true
},
"node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"dev": true,
"peer": true,
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/@babel/code-frame/node_modules/has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
"dev": true,
"peer": true,
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"peer": true,
"dependencies": {
"has-flag": "^3.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
"integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
"version": "7.22.20",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
"dev": true,
"peer": true,
"engines": {
@@ -240,14 +319,14 @@
}
},
"node_modules/@babel/highlight": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
"integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
"version": "7.22.20",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
"integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/helper-validator-identifier": "^7.22.5",
"chalk": "^2.0.0",
"@babel/helper-validator-identifier": "^7.22.20",
"chalk": "^2.4.2",
"js-tokens": "^4.0.0"
},
"engines": {
@@ -344,9 +423,9 @@
}
},
"node_modules/@csstools/css-parser-algorithms": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz",
"integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==",
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz",
"integrity": "sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==",
"dev": true,
"funding": [
{
@@ -363,13 +442,13 @@
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"@csstools/css-tokenizer": "^2.2.0"
"@csstools/css-tokenizer": "^2.2.1"
}
},
"node_modules/@csstools/css-tokenizer": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz",
"integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==",
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz",
"integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==",
"dev": true,
"funding": [
{
@@ -387,9 +466,9 @@
}
},
"node_modules/@csstools/media-query-list-parser": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.3.tgz",
"integrity": "sha512-ATul1u+pic4aVpstgueqxEv4MsObEbszAxfTXpx9LHaeD3LAh+wFqdCteyegWmjk0k5rkSCAvIOaJe9U3DD09w==",
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz",
"integrity": "sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==",
"dev": true,
"funding": [
{
@@ -406,8 +485,8 @@
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"@csstools/css-parser-algorithms": "^2.3.1",
"@csstools/css-tokenizer": "^2.2.0"
"@csstools/css-parser-algorithms": "^2.3.2",
"@csstools/css-tokenizer": "^2.2.1"
}
},
"node_modules/@esbuild/android-arm": {
@@ -1641,9 +1720,9 @@
}
},
"node_modules/@types/minimist": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
"integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.4.tgz",
"integrity": "sha512-Kfe/D3hxHTusnPNRbycJE1N77WHDsdS4AjUYIzlDzhDrS47NrwuL3YW4VITxwR7KCVpzwgy4Rbj829KSSQmwXQ==",
"dev": true,
"peer": true
},
@@ -1667,9 +1746,9 @@
}
},
"node_modules/@types/normalize-package-data": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
"integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.3.tgz",
"integrity": "sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==",
"dev": true,
"peer": true
},
@@ -2847,15 +2926,15 @@
}
},
"node_modules/cosmiconfig": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
"integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
"dev": true,
"peer": true,
"dependencies": {
"import-fresh": "^3.2.1",
"import-fresh": "^3.3.0",
"js-yaml": "^4.1.0",
"parse-json": "^5.0.0",
"parse-json": "^5.2.0",
"path-type": "^4.0.0"
},
"engines": {
@@ -2863,6 +2942,14 @@
},
"funding": {
"url": "https://github.com/sponsors/d-fischer"
},
"peerDependencies": {
"typescript": ">=4.9.5"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/cross-spawn": {
@@ -2900,13 +2987,13 @@
}
},
"node_modules/css-functions-list": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
"integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz",
"integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==",
"dev": true,
"peer": true,
"engines": {
"node": ">=12.22"
"node": ">=12 || >=16"
}
},
"node_modules/css-select": {
@@ -4134,22 +4221,23 @@
}
},
"node_modules/flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
"integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz",
"integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==",
"dev": true,
"dependencies": {
"flatted": "^3.1.0",
"flatted": "^3.2.9",
"keyv": "^4.5.3",
"rimraf": "^3.0.2"
},
"engines": {
"node": "^10.12.0 || >=12.0.0"
"node": ">=12.0.0"
}
},
"node_modules/flatted": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
"version": "3.2.9",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
"node_modules/form-data": {
@@ -4970,6 +5058,12 @@
"js-yaml": "bin/js-yaml.js"
}
},
"node_modules/json-buffer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
"dev": true
},
"node_modules/json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -5020,6 +5114,15 @@
"graceful-fs": "^4.1.6"
}
},
"node_modules/keyv": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
"dev": true,
"dependencies": {
"json-buffer": "3.0.1"
}
},
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5039,9 +5142,9 @@
}
},
"node_modules/known-css-properties": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
"integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
"version": "0.29.0",
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
"integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
"dev": true,
"peer": true
},
@@ -8468,9 +8571,9 @@
}
},
"node_modules/spdx-license-ids": {
"version": "3.0.13",
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
"integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
"version": "3.0.16",
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
"integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
"dev": true,
"peer": true
},
@@ -8575,25 +8678,25 @@
}
},
"node_modules/stylelint": {
"version": "15.10.2",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.2.tgz",
"integrity": "sha512-UxqSb3hB74g4DTO45QhUHkJMjKKU//lNUAOWyvPBVPZbCknJ5HjOWWZo+UDuhHa9FLeVdHBZXxu43eXkjyIPWg==",
"version": "15.11.0",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz",
"integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==",
"dev": true,
"peer": true,
"dependencies": {
"@csstools/css-parser-algorithms": "^2.3.0",
"@csstools/css-tokenizer": "^2.1.1",
"@csstools/media-query-list-parser": "^2.1.2",
"@csstools/css-parser-algorithms": "^2.3.1",
"@csstools/css-tokenizer": "^2.2.0",
"@csstools/media-query-list-parser": "^2.1.4",
"@csstools/selector-specificity": "^3.0.0",
"balanced-match": "^2.0.0",
"colord": "^2.9.3",
"cosmiconfig": "^8.2.0",
"css-functions-list": "^3.2.0",
"css-functions-list": "^3.2.1",
"css-tree": "^2.3.1",
"debug": "^4.3.4",
"fast-glob": "^3.3.0",
"fast-glob": "^3.3.1",
"fastest-levenshtein": "^1.0.16",
"file-entry-cache": "^6.0.1",
"file-entry-cache": "^7.0.0",
"global-modules": "^2.0.0",
"globby": "^11.1.0",
"globjoin": "^0.1.4",
@@ -8602,13 +8705,13 @@
"import-lazy": "^4.0.0",
"imurmurhash": "^0.1.4",
"is-plain-object": "^5.0.0",
"known-css-properties": "^0.27.0",
"known-css-properties": "^0.29.0",
"mathml-tag-names": "^2.1.3",
"meow": "^10.1.5",
"micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.4.25",
"postcss": "^8.4.28",
"postcss-resolve-nested-selector": "^0.1.1",
"postcss-safe-parser": "^6.0.0",
"postcss-selector-parser": "^6.0.13",
@@ -8675,6 +8778,19 @@
"dev": true,
"peer": true
},
"node_modules/stylelint/node_modules/file-entry-cache": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.1.tgz",
"integrity": "sha512-uLfFktPmRetVCbHe5UPuekWrQ6hENufnA46qEGbfACkK5drjTTdQYUragRgMjHldcbYG+nslUerqMPjbBSHXjQ==",
"dev": true,
"peer": true,
"dependencies": {
"flat-cache": "^3.1.1"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/stylelint/node_modules/postcss-selector-parser": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
@@ -10281,31 +10397,97 @@
}
},
"@babel/code-frame": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
"integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
"version": "7.22.13",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
"integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
"dev": true,
"peer": true,
"requires": {
"@babel/highlight": "^7.22.5"
"@babel/highlight": "^7.22.13",
"chalk": "^2.4.2"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"peer": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"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,
"peer": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"peer": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true,
"peer": true
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"dev": true,
"peer": true
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
"dev": true,
"peer": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"peer": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"@babel/helper-validator-identifier": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
"integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
"version": "7.22.20",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
"dev": true,
"peer": true
},
"@babel/highlight": {
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
"integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
"version": "7.22.20",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
"integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
"dev": true,
"peer": true,
"requires": {
"@babel/helper-validator-identifier": "^7.22.5",
"chalk": "^2.0.0",
"@babel/helper-validator-identifier": "^7.22.20",
"chalk": "^2.4.2",
"js-tokens": "^4.0.0"
},
"dependencies": {
@@ -10383,24 +10565,24 @@
}
},
"@csstools/css-parser-algorithms": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz",
"integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==",
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz",
"integrity": "sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==",
"dev": true,
"peer": true,
"requires": {}
},
"@csstools/css-tokenizer": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz",
"integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==",
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz",
"integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==",
"dev": true,
"peer": true
},
"@csstools/media-query-list-parser": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.3.tgz",
"integrity": "sha512-ATul1u+pic4aVpstgueqxEv4MsObEbszAxfTXpx9LHaeD3LAh+wFqdCteyegWmjk0k5rkSCAvIOaJe9U3DD09w==",
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz",
"integrity": "sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==",
"dev": true,
"peer": true,
"requires": {}
@@ -11278,9 +11460,9 @@
}
},
"@types/minimist": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
"integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.4.tgz",
"integrity": "sha512-Kfe/D3hxHTusnPNRbycJE1N77WHDsdS4AjUYIzlDzhDrS47NrwuL3YW4VITxwR7KCVpzwgy4Rbj829KSSQmwXQ==",
"dev": true,
"peer": true
},
@@ -11304,9 +11486,9 @@
}
},
"@types/normalize-package-data": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
"integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.3.tgz",
"integrity": "sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==",
"dev": true,
"peer": true
},
@@ -12084,15 +12266,15 @@
"dev": true
},
"cosmiconfig": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
"integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
"dev": true,
"peer": true,
"requires": {
"import-fresh": "^3.2.1",
"import-fresh": "^3.3.0",
"js-yaml": "^4.1.0",
"parse-json": "^5.0.0",
"parse-json": "^5.2.0",
"path-type": "^4.0.0"
}
},
@@ -12120,9 +12302,9 @@
"requires": {}
},
"css-functions-list": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
"integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz",
"integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==",
"dev": true,
"peer": true
},
@@ -13035,19 +13217,20 @@
}
},
"flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
"integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz",
"integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==",
"dev": true,
"requires": {
"flatted": "^3.1.0",
"flatted": "^3.2.9",
"keyv": "^4.5.3",
"rimraf": "^3.0.2"
}
},
"flatted": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
"version": "3.2.9",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
"form-data": {
@@ -13646,6 +13829,12 @@
"argparse": "^2.0.1"
}
},
"json-buffer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
"dev": true
},
"json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -13690,6 +13879,15 @@
"universalify": "^2.0.0"
}
},
"keyv": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
"dev": true,
"requires": {
"json-buffer": "3.0.1"
}
},
"kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -13703,9 +13901,9 @@
"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
},
"known-css-properties": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
"integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
"version": "0.29.0",
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
"integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
"dev": true,
"peer": true
},
@@ -16020,9 +16218,9 @@
}
},
"spdx-license-ids": {
"version": "3.0.13",
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
"integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
"version": "3.0.16",
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
"integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
"dev": true,
"peer": true
},
@@ -16103,25 +16301,25 @@
}
},
"stylelint": {
"version": "15.10.2",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.2.tgz",
"integrity": "sha512-UxqSb3hB74g4DTO45QhUHkJMjKKU//lNUAOWyvPBVPZbCknJ5HjOWWZo+UDuhHa9FLeVdHBZXxu43eXkjyIPWg==",
"version": "15.11.0",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz",
"integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==",
"dev": true,
"peer": true,
"requires": {
"@csstools/css-parser-algorithms": "^2.3.0",
"@csstools/css-tokenizer": "^2.1.1",
"@csstools/media-query-list-parser": "^2.1.2",
"@csstools/css-parser-algorithms": "^2.3.1",
"@csstools/css-tokenizer": "^2.2.0",
"@csstools/media-query-list-parser": "^2.1.4",
"@csstools/selector-specificity": "^3.0.0",
"balanced-match": "^2.0.0",
"colord": "^2.9.3",
"cosmiconfig": "^8.2.0",
"css-functions-list": "^3.2.0",
"css-functions-list": "^3.2.1",
"css-tree": "^2.3.1",
"debug": "^4.3.4",
"fast-glob": "^3.3.0",
"fast-glob": "^3.3.1",
"fastest-levenshtein": "^1.0.16",
"file-entry-cache": "^6.0.1",
"file-entry-cache": "^7.0.0",
"global-modules": "^2.0.0",
"globby": "^11.1.0",
"globjoin": "^0.1.4",
@@ -16130,13 +16328,13 @@
"import-lazy": "^4.0.0",
"imurmurhash": "^0.1.4",
"is-plain-object": "^5.0.0",
"known-css-properties": "^0.27.0",
"known-css-properties": "^0.29.0",
"mathml-tag-names": "^2.1.3",
"meow": "^10.1.5",
"micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.4.25",
"postcss": "^8.4.28",
"postcss-resolve-nested-selector": "^0.1.1",
"postcss-safe-parser": "^6.0.0",
"postcss-selector-parser": "^6.0.13",
@@ -16166,6 +16364,16 @@
"dev": true,
"peer": true
},
"file-entry-cache": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.1.tgz",
"integrity": "sha512-uLfFktPmRetVCbHe5UPuekWrQ6hENufnA46qEGbfACkK5drjTTdQYUragRgMjHldcbYG+nslUerqMPjbBSHXjQ==",
"dev": true,
"peer": true,
"requires": {
"flat-cache": "^3.1.1"
}
},
"postcss-selector-parser": {
"version": "6.0.13",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
frontend/package.json
+2 -4
View File
@@ -13,7 +13,8 @@
"generate-backend-client": "openapi --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions && sed -i '213 i \\ request.referrerPolicy = \"no-referrer\"\n' src/lib/gen/core/request.ts",
"generate-backend-client-mac": "openapi --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions",
"pretest": "tsc --incremental -p tests/tsconfig.json",
"test": "playwright test --config=tests-out/playwright.config.js"
"test": "playwright test --config=tests-out/playwright.config.js",
"delele-orphan-components": "sh scripts/delete-orphan-components.sh"
},
"devDependencies": {
"@floating-ui/core": "^1.3.1",
@@ -51,7 +52,6 @@
"style-to-object": "^0.4.1",
"stylelint-config-recommended": "^13.0.0",
"svelte": "^4.0.0",
"svelte-awesome": "^3.2.1",
"svelte-awesome-color-picker": "^2.4.5",
"svelte-check": "^3.4.3",
"svelte-floating-ui": "^1.5.3",
@@ -88,8 +88,6 @@
"type": "module",
"dependencies": {
"@aws-crypto/sha256-js": "^4.0.0",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@leeoniya/ufuzzy": "^1.0.8",
"@popperjs/core": "^2.11.6",
"@redocly/json-to-json-schema": "^0.0.1",
frontend/scripts/delete-orphan-components.sh
+72
View File
@@ -0,0 +1,72 @@
#!/bin/bash
# ANSI color codes
RED='\033[0;31m'
GREEN='\033[0;32m'
NC='\033[0m' # No Color
# get the list of all .svelte files
svelte_files=$(find src -type f -name "*.svelte")
# Array to hold unused files
declare -a unused_files
echo -e "${NC}Scanning src folder to find all .svelte files"
echo -e " ${GREEN}.${NC} means the .svelte is imported in another file"
echo -e " ${RED}x${NC} means the .svelte is not imported and should likely be removed"
# loop over each svelte file
for svelte_file in $svelte_files
do
# extract the filename
filename=$(basename -- "$svelte_file")
# skip files starting with '+'
if [[ "$filename" == +* ]]
then
echo -n -e "${GREEN}.${NC}"
continue
fi
# search for the filename in all files
found=$(grep -rl "$filename" src)
# if nothing was found, then the file is unused
if [[ -z $found ]]
then
echo -n -e "${RED}x${NC}"
unused_files+=("$svelte_file")
else
echo -n -e "${GREEN}.${NC}"
fi
done
# Print a newline after progress dots
echo
echo
# Print unused files
for file in "${unused_files[@]}"
do
echo -e "${RED}Unused Svelte file: $file${NC}"
done
# If no unused components found, print the message and exit
if [ ${#unused_files[@]} -eq 0 ]; then
echo -e "${GREEN}No unused components found.${NC}"
exit 0
fi
# Delete files if user confirms
if [ ${#unused_files[@]} -gt 0 ]; then
echo -e -n "${GREEN}Do you want to delete these ${#unused_files[@]} files? (y/n) ${NC}"
read answer
if [ "$answer" != "${answer#[Yy]}" ] ;then
for file in "${unused_files[@]}"
do
rm "$file"
echo -e "${RED}Deleted $file${NC}"
done
fi
fi
frontend/src/lib/components/AddUser.svelte
+2 -5
View File
@@ -69,11 +69,8 @@
containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
>
<svelte:fragment slot="button">
<Button color="dark" size="xs" nonCaptureEvent={true}>
<div class="flex flex-row gap-1 items-center">
<UserPlus size={16} />
Add new user
</div>
<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
Add new user
</Button>
</svelte:fragment>
<div class="flex flex-col w-72 p-2">
frontend/src/lib/components/ArgInput.svelte
+17 -15
View File
@@ -1,12 +1,9 @@
<script lang="ts">
import { faChevronDown, faChevronUp, faPlus } from '@fortawesome/free-solid-svg-icons'
import type { SchemaProperty } from '$lib/common'
import { setInputCat as computeInputCat } from '$lib/utils'
import { DollarSign, X } from 'lucide-svelte'
import { ChevronDown, DollarSign, Plus, X } from 'lucide-svelte'
import { createEventDispatcher } from 'svelte'
import autosize from 'svelte-autosize'
import Icon from 'svelte-awesome'
import Multiselect from 'svelte-multiselect'
import { fade } from 'svelte/transition'
import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
@@ -217,16 +214,21 @@
<ArrayTypeNarrowing bind:itemsType />
{:else if (type == 'string' && format != 'date-time') || ['number', 'object'].includes(type ?? '')}
<div class="p-2 my-1 text-xs border-solid border border-gray-200 rounded-lg">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span
class="underline"
on:click={() => {
seeEditable = !seeEditable
}}
>
Customize
<Icon class="ml-2" data={seeEditable ? faChevronUp : faChevronDown} scale={0.7} />
</span>
<div class="w-min">
<Button
on:click={() => {
seeEditable = !seeEditable
}}
endIcon={{
icon: ChevronDown,
classes: twMerge('rotate-0 duration-300', seeEditable ? '!rotate-180' : '')
}}
color="light"
size="xs"
>
Customize
</Button>
</div>
{#if seeEditable}
<div class="mt-2">
@@ -371,8 +373,8 @@
value = value.concat('')
}}
id="arg-input-add-item"
startIcon={{ icon: Plus }}
>
<Icon data={faPlus} class="mr-2" />
Add item
</Button>
</div>
frontend/src/lib/components/ChevronButton.svelte
-25
View File
@@ -1,25 +0,0 @@
<script lang="ts">
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
export let text: string
export let viewOptions = false
</script>
<button
type="submit"
class="mr-6 text-sm underline text-secondary inline-flex items-center"
on:click={() => {
viewOptions = !viewOptions
}}
>
<div>
{text}
<Icon data={viewOptions ? faChevronUp : faChevronDown} scale={0.5} />
</div>
</button>
{#if viewOptions}
<slot />
{/if}
frontend/src/lib/components/CliHelpBox.svelte
+12 -11
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { page } from '$app/stores'
import { workspaceStore } from '$lib/stores'
import InlineCodeCopy from './InlineCodeCopy.svelte'
import ClipboardPanel from './details/ClipboardPanel.svelte'
$: url = `${$page.url.protocol}//${$page.url.hostname}/`
</script>
@@ -9,17 +9,18 @@
<div>
<div class="text-sm font-semibold">CLI quick setup </div>
<div class="text-sm" role="alert" id="dynamic-input-help-box">
<ul class="pl-0 pt-2 list-decimal list-inside">
<li
>Install the latest wmill CLI from deno.land: <InlineCodeCopy
content={'deno install --unstable -A https://deno.land/x/wmill/main.ts'}
/></li
>
<li
>Setup the wmill cli for this workspace & remote: <InlineCodeCopy
<ul class="pl-0 pt-2 list-decimal list-inside flex flex-col gap-2">
<li>
Install the latest wmill CLI from deno.land:
<ClipboardPanel content={'deno install --unstable -A https://deno.land/x/wmill/main.ts'} />
</li>
<li>
Setup the wmill cli for this workspace & remote:
<ClipboardPanel
content={`wmill workspace add ${$workspaceStore} ${$workspaceStore} ${url}`}
/></li
>
/>
</li>
<li>Follow the prompts in your terminal</li>
<li>Use the run command above!</li>
</ul>
frontend/src/lib/components/CollapseLink.svelte
+3 -4
View File
@@ -1,10 +1,8 @@
<script lang="ts">
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import { Button } from './common'
import { slide } from 'svelte/transition'
import { twMerge } from 'tailwind-merge'
import { ChevronDown } from 'lucide-svelte'
export let open = false
export let text: string
@@ -17,8 +15,9 @@
color="light"
btnClasses="text-primary {small ? 'text-xs' : ''} "
on:click={() => (open = !open)}
endIcon={{ icon: ChevronDown, classes: open ? 'transform rotate-180' : '' }}
>
{text}&nbsp;<Icon data={open ? faChevronUp : faChevronDown} scale={0.5} />
{text}
</Button>
</div>
{#if open}
frontend/src/lib/components/ContentSearch.svelte
+5 -4
View File
@@ -2,7 +2,7 @@
import { AppService, FlowService, ResourceService, ScriptService } from '$lib/gen'
import { enterpriseLicense, workspaceStore } from '$lib/stores'
import { clickOutside } from '$lib/utils'
import { Boxes, Code2, LayoutDashboard, Loader2, X } from 'lucide-svelte'
import { Boxes, Code2, Edit, LayoutDashboard, Loader2, X } from 'lucide-svelte'
import Portal from 'svelte-portal'
import { twMerge } from 'tailwind-merge'
import SearchItems from './SearchItems.svelte'
@@ -10,7 +10,6 @@
import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
import FlowIcon from './home/FlowIcon.svelte'
import { Alert, Button } from './common'
import { faEdit } from '@fortawesome/free-solid-svg-icons'
import { goto } from '$app/navigation'
let search: string = ''
@@ -271,8 +270,10 @@
}}
color="light"
size="sm"
startIcon={{ icon: faEdit }}>Edit</Button
startIcon={{ icon: Edit }}
>
Edit
</Button>
</div>
</div>
</div>
@@ -309,7 +310,7 @@
}}
color="light"
size="sm"
startIcon={{ icon: faEdit }}>Edit</Button
startIcon={{ icon: Edit }}>Edit</Button
>
</div>
</div>
frontend/src/lib/components/CronBuilder.svelte
+2 -6
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import Section from './Section.svelte'
import { Button, Popup } from './common'
import { Clock } from 'lucide-svelte'
</script>
@@ -11,11 +10,8 @@
let:close
>
<svelte:fragment slot="button">
<Button color="dark" size="xs" nonCaptureEvent={true}>
<div class="flex flex-row gap-1 items-center">
<Clock size={16} />
Use simplified builder
</div>
<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Clock }}>
Use simplified builder
</Button>
</svelte:fragment>
<Section label="CRON Builder">
frontend/src/lib/components/DBSchemaExplorer.svelte
+4 -3
View File
@@ -16,7 +16,7 @@
import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql'
import GraphqlSchemaViewer from './GraphqlSchemaViewer.svelte'
import { faRefresh } from '@fortawesome/free-solid-svg-icons'
import { RefreshCcw } from 'lucide-svelte'
export let resourceType: string | undefined
export let resourcePath: string | undefined = undefined
@@ -284,12 +284,13 @@ GROUP BY table_name".replace('{dataset.id}', dataset.id)
<Button
on:click={getSchema}
startIcon={{
icon: faRefresh
icon: RefreshCcw
}}
{loading}
size="xs"
color="light"
>Refresh
>
Refresh
</Button>
</svelte:fragment>
{#if dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC)}
frontend/src/lib/components/Dev.svelte
+2 -2
View File
@@ -16,7 +16,6 @@
import { inferArgs } from '$lib/infer'
import { userStore, workspaceStore } from '$lib/stores'
import { emptySchema, getModifierKey, sendUserToast } from '$lib/utils'
import { faPlay } from '@fortawesome/free-solid-svg-icons'
import { Pane, Splitpanes } from 'svelte-splitpanes'
import { onDestroy, onMount, setContext } from 'svelte'
import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
@@ -32,6 +31,7 @@
import type { FlowEditorContext } from './flows/types'
import { dfs } from './flows/dfs'
import { loadSchemaFromModule } from './flows/flowInfers'
import { Play } from 'lucide-svelte'
$: token = $page.url.searchParams.get('wm_token') ?? undefined
$: workspace = $page.url.searchParams.get('workspace') ?? undefined
@@ -397,7 +397,7 @@
btnClasses="w-full"
size="xs"
startIcon={{
icon: faPlay,
icon: Play,
classes: 'animate-none'
}}
>
frontend/src/lib/components/Dropdown.svelte
-119
View File
@@ -1,119 +0,0 @@
<script lang="ts">
import type { DropdownItem } from '$lib/utils'
import { createEventDispatcher } from 'svelte'
import Icon from 'svelte-awesome'
import { MoreVertical } from 'lucide-svelte'
import { Button, Menu } from './common'
import { twMerge } from 'tailwind-merge'
type Alignment = 'start' | 'end'
type Side = 'top' | 'bottom'
type Placement = `${Side}-${Alignment}`
export let dropdownItems: DropdownItem[] | (() => DropdownItem[]) = []
export let name: string | undefined = undefined
export let placement: Placement = 'bottom-start'
export let btnClasses = ''
$: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses)
const dispatch = createEventDispatcher()
function computeDropdowns(): DropdownItem[] {
if (typeof dropdownItems === 'function') {
return dropdownItems()
} else {
return dropdownItems
}
}
</script>
<Menu {placement} let:close on:dropdownOpen on:dropdownClose>
<Button
nonCaptureEvent
color="light"
variant="border"
size="xs"
btnClasses={buttonClass}
{...$$restProps}
slot="trigger"
>
{#if !$$slots.default}
<MoreVertical size={16} />
{:else}
<slot />
{/if}
</Button>
{#if dropdownItems}
{#each computeDropdowns() as item, i}
{#if item.action}
<button
on:click|preventDefault|stopPropagation={(event) => {
if (!item.disabled) {
close()
item.action && item.action(event)
dispatch('click', { item: item?.eventName })
}
}}
class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-surface-hover hover:bg-opacity-30
px-4 py-2 text-sm text-primary text-left
{item.disabled ? 'bg-surface-disabled' : ''}
{item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
'delete'
? 'text-red-500'
: ''}"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
disabled={item.disabled}
>
{#if item.icon}
<Icon
data={item.icon}
scale={0.6}
class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-primary'}"
/>
{/if}
{item.displayName}
</button>
{:else if item.href && !item.disabled}
<a
href={item.href}
class="block w-full px-4 font-semibold text-left py-2 text-sm text-secondary hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
{item.disabled ? 'bg-gray-200' : ''}"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
class:disabled={item.disabled}
>
{#if item.icon}
<Icon
data={item.icon}
scale={0.6}
class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-secondary'}"
/>
{/if}
{item.displayName}
</a>
{:else}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span
class:bg-gray-200={item.disabled}
class="block font-semibold text-left px-4 py-2 text-sm text-secondary cursor-auto"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
on:click|preventDefault|stopPropagation
>
{#if item.icon}
<Icon
data={item.icon}
scale={0.6}
class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-secondary'}"
/>
{/if}
{item.displayName}
</span>
{/if}
{/each}
{/if}
</Menu>
frontend/src/lib/components/DropdownV2.svelte
+2 -2
View File
@@ -7,7 +7,7 @@
type Item = {
displayName: string
action?: (e: CustomEvent<any>) => void
icon: any
icon?: any
href?: string
disabled?: boolean
type?: 'action' | 'delete'
@@ -24,7 +24,7 @@
}
</script>
<Menu placement="bottom-end" justifyEnd>
<Menu placement="bottom-end" justifyEnd on:close on:open>
<div slot="trigger">
<MoreVertical size={16} class="w-8 h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md" />
</div>
frontend/src/lib/components/DurationMs.svelte
+7 -8
View File
@@ -1,20 +1,19 @@
<script lang="ts">
import { msToSec } from '$lib/utils'
import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
import { Icon } from 'svelte-awesome'
import { Badge } from './common'
import Tooltip from './Tooltip.svelte'
import { Hourglass } from 'lucide-svelte'
export let duration_ms: number
</script>
<Badge large>
<Icon data={faHourglassHalf} scale={0.7} class="mr-2" />
Ran in {msToSec(duration_ms)}s<Tooltip
>For scripts, this is the time that it took to execute from the time it was picked by a worker,
<Badge large icon={{ icon: Hourglass, position: 'left' }}>
Ran in {msToSec(duration_ms)}s
<Tooltip>
For scripts, this is the time that it took to execute from the time it was picked by a worker,
to the time the result was stored.<br />
For flows, it is the cumulative time of the execution of each steps. Suspend/sleep/transition times
are not accounted for, and each step's duration in a parallel branch would be added. Hence the time
here can differ from the time it took for the flow to have a result from start.</Tooltip
>
here can differ from the time it took for the flow to have a result from start.
</Tooltip>
</Badge>
frontend/src/lib/components/EditorBar.svelte
+12 -22
View File
@@ -5,16 +5,6 @@
<script lang="ts">
import { ResourceService, VariableService } from '$lib/gen'
import {
faBook,
faCube,
faDollarSign,
faHistory,
faPlus,
faRotate,
faRotateLeft
} from '@fortawesome/free-solid-svg-icons'
import { workspaceStore } from '$lib/stores'
import type Editor from './Editor.svelte'
import ItemPicker from './ItemPicker.svelte'
@@ -33,7 +23,7 @@
import { sendUserToast } from '$lib/toast'
import { getScriptByPath, scriptLangToEditorLang } from '$lib/scripts'
import Toggle from './Toggle.svelte'
import { Link, Users } from 'lucide-svelte'
import { DollarSign, History, Library, Link, Package, Plus, RotateCw, Users } from 'lucide-svelte'
import { capitalize, toCamel } from '$lib/utils'
import type { Schema, SchemaProperty, SupportedLanguage } from '$lib/common'
import ScriptVersionHistory from './ScriptVersionHistory.svelte'
@@ -293,7 +283,7 @@
variant="border"
color="blue"
size="sm"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={() => {
variableEditor.initNew()
}}
@@ -345,7 +335,7 @@
>
<div slot="submission" class="flex flex-row gap-x-1 mr-2">
<Button
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
target="_blank"
variant="border"
color="blue"
@@ -407,7 +397,7 @@
size="xs"
btnClasses="!font-medium text-tertiary"
spacingSize="md"
startIcon={{ icon: faDollarSign }}
startIcon={{ icon: DollarSign }}
{iconOnly}
>+Context Var
</Button>
@@ -420,7 +410,7 @@
on:click={variablePicker.openDrawer}
size="xs"
spacingSize="md"
startIcon={{ icon: faDollarSign }}
startIcon={{ icon: DollarSign }}
{iconOnly}
>
+Variable
@@ -436,7 +426,7 @@
color="light"
on:click={resourcePicker.openDrawer}
{iconOnly}
startIcon={{ icon: faCube }}
startIcon={{ icon: Package }}
>
+Resource
</Button>
@@ -451,7 +441,7 @@
color="light"
on:click={resourceTypePicker.openDrawer}
{iconOnly}
startIcon={{ icon: faCube }}
startIcon={{ icon: Package }}
>
+Type
</Button>
@@ -465,7 +455,7 @@
color="light"
on:click={clearContent}
{iconOnly}
startIcon={{ icon: faRotateLeft }}
startIcon={{ icon: RotateCw }}
>
Reset
</Button>
@@ -477,7 +467,7 @@
color="light"
on:click={() => editor?.reloadWebsocket()}
startIcon={{
icon: faRotate,
icon: RotateCw,
classes: websocketAlive[lang] == false ? 'animate-spin' : ''
}}
title="Reload assistants"
@@ -518,7 +508,7 @@
class="p-1 rounded hover:bg-gray-400 mx-1 border"
on:click={() => dispatch('collabPopup')}><Link size={12} /></button
>
<div class="isolate flex -space-x-2 overflow-hidden pl-2">
<div class="isolate flex -space-x-2 pl-2">
{#each collabUsers as user}
<span
class="inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
@@ -572,7 +562,7 @@
color="light"
on:click={() => (historyBrowserDrawerOpen = true)}
{iconOnly}
startIcon={{ icon: faHistory }}
startIcon={{ icon: History }}
title="See history"
>
History
@@ -586,7 +576,7 @@
color="light"
on:click={scriptPicker.openDrawer}
{iconOnly}
startIcon={{ icon: faBook }}
startIcon={{ icon: Library }}
title="Explore other scripts"
>
Library
frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
+13 -10
View File
@@ -8,9 +8,8 @@
import { emptySchema, emptyString, sendUserToast, tryEvery } from '$lib/utils'
import { JobService, Script, ScriptService, WorkspaceService } from '$lib/gen'
import { inferArgs } from '$lib/infer'
import Icon from 'svelte-awesome'
import { check } from 'svelte-awesome/icons'
import { faRotate, faRotateRight, faTimes } from '@fortawesome/free-solid-svg-icons'
import { CheckCircle2, RotateCw, XCircle } from 'lucide-svelte'
const slackRecoveryHandler = 'hub/2430/slack/schedule-recovery-handler-slack'
const slackHandlerScriptPath = 'hub/6512/workspace-or-schedule-error-handler-slack'
@@ -275,9 +274,12 @@
href="/workspace_settings?tab=slack">configure it here</a
>.
</p>
<Button variant="border" color="light" on:click={loadSlackResources}>
<Icon scale={0.8} data={faRotateRight} />
</Button>
<Button
variant="border"
color="light"
on:click={loadSlackResources}
startIcon={{ icon: RotateCw }}
/>
</div>
</Alert>
{:else}
@@ -291,18 +293,19 @@
{#if slackConnectionTestJob !== undefined}
<p class="text-normal text-2xs mt-1 gap-2">
{#if slackConnectionTestJob.in_progress}
<Icon scale={0.8} data={faRotate} class="mr-1" />
<RotateCw size={14} />
{:else if slackConnectionTestJob.is_success}
<Icon scale={0.8} data={check} class="mr-1 text-green-600" />
<CheckCircle2 size={14} class="text-green-600" />
{:else}
<Icon scale={0.8} data={faTimes} class="mr-1 text-red-700" />
<XCircle size={14} class="text-red-700" />
{/if}
Message sent via Windmill job
<a
target="_blank"
href={`/run/${slackConnectionTestJob.uuid}?workspace=${$workspaceStore}`}
>{slackConnectionTestJob.uuid}</a
>
{slackConnectionTestJob.uuid}
</a>
</p>
{/if}
{/if}
frontend/src/lib/components/FlowBuilder.svelte
+4 -5
View File
@@ -29,7 +29,6 @@
import { sendUserToast } from '$lib/toast'
import type { Drawer } from '$lib/components/common'
import { faCalendarAlt, faSave } from '@fortawesome/free-solid-svg-icons'
import { setContext, tick } from 'svelte'
import { writable, type Writable } from 'svelte/store'
import CenteredPage from './CenteredPage.svelte'
@@ -44,7 +43,7 @@
import { loadFlowSchedule, type Schedule } from './flows/scheduleUtils'
import type { FlowEditorContext } from './flows/types'
import { cleanInputs, emptyFlowModuleState } from './flows/utils'
import { DiffIcon, Pen } from 'lucide-svelte'
import { Calendar, Pen, Save, DiffIcon } from 'lucide-svelte'
import { createEventDispatcher } from 'svelte'
import Awareness from './Awareness.svelte'
import { getAllModules } from './flows/flowExplorer'
@@ -987,7 +986,7 @@
{#if $scheduleStore.enabled}
<Button
btnClasses="hidden lg:inline-flex"
startIcon={{ icon: faCalendarAlt }}
startIcon={{ icon: Calendar }}
variant="contained"
color="light"
size="xs"
@@ -1072,7 +1071,7 @@
<Button
loading={loadingDraft}
size="xs"
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
on:click={() => saveDraft()}
disabled={!newFlow && !savedFlow}
>
@@ -1081,7 +1080,7 @@
<Button
loading={loadingSave}
size="xs"
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
on:click={() => saveFlow()}
dropdownItems={!newFlow ? dropdownItems : undefined}
>
frontend/src/lib/components/FlowBuilderTutorials.svelte
+9 -5
View File
@@ -17,11 +17,15 @@
<button on:pointerdown|stopPropagation>
<ButtonDropdown hasPadding={false}>
<svelte:fragment slot="buttonReplacement">
<Button nonCaptureEvent size="xs" color="light" variant="border" id="tutorials-button">
<div class="flex flex-row gap-2 items-center">
<BookOpen size={16} />
Tutorials
</div>
<Button
nonCaptureEvent
size="xs"
color="light"
variant="border"
id="tutorials-button"
startIcon={{ icon: BookOpen }}
>
Tutorials
</Button>
</svelte:fragment>
<svelte:fragment slot="items">
frontend/src/lib/components/FlowMetadata.svelte
+53 -47
View File
@@ -1,24 +1,16 @@
<script lang="ts">
import type { Job } from '$lib/gen'
import JobStatus from '$lib/components/JobStatus.svelte'
import Icon from 'svelte-awesome'
import { displayDate } from '$lib/utils'
import {
faCalendar,
faClock,
faRobot,
faScroll,
faUser,
faBarsStaggered,
faMemory
} from '@fortawesome/free-solid-svg-icons'
import ScheduleEditor from './ScheduleEditor.svelte'
import TimeAgo from './TimeAgo.svelte'
import { workspaceStore } from '$lib/stores'
import Tooltip from './Tooltip.svelte'
import { Clock, MemoryStick, Calendar, Bot, User, Scroll } from 'lucide-svelte'
import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
export let job: Job
const SMALL_ICON_SCALE = 0.7
const SMALL_ICON_SIZE = 14
let scheduleEditor: ScheduleEditor
</script>
@@ -29,9 +21,9 @@
style="min-height: 150px;"
>
<JobStatus {job} />
<div>
<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} />
<span class="mx-2 text-2xs text-secondary">
<div class="flex flex-row gap-2 items-center">
<Clock size={SMALL_ICON_SIZE} class="text-secondary" />
<span class="text-2xs text-secondary">
{#if job['success'] != undefined}
Received job: {displayDate(job.created_at ?? '')}
{:else}
@@ -41,68 +33,82 @@
</span>
</div>
{#if job && 'started_at' in job && job.started_at}
<div>
<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
<div class="flex flex-row gap-2 items-center">
<Clock size={SMALL_ICON_SIZE} class="text-secondary" />
<span>
Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
<Tooltip>{job?.started_at}</Tooltip>
</span>
</div>
{/if}
{#if job && job['mem_peak']}
<div>
<Icon class="text-secondary" data={faMemory} scale={SMALL_ICON_SCALE} /><span class="mx-2">
Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span
>
<div class="flex flex-row gap-2 items-center">
<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary" />
<span> Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span>
</div>
{/if}
<div>
{#if job && job.parent_job}
{#if job.is_flow_step}
<Icon class="text-secondary" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
class="mx-2"
>
Step of flow <a href={`/run/${job.parent_job}?workspace=${$workspaceStore}`}
>{job.parent_job}</a
></span
>
<div class="flex flex-row gap-2 items-center">
<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
<span>
Step of flow
<a href={`/run/${job.parent_job}?workspace=${$workspaceStore}`}>
{job.parent_job}
</a>
</span>
</div>
{:else}
<Icon class="text-secondary" data={faRobot} scale={SMALL_ICON_SCALE} /><span class="mx-2">
Triggered by parent <a href={`/run/${job.parent_job}?workspace=${$workspaceStore}`}
>{job.parent_job}</a
></span
>
<div class="flex flex-row gap-2 items-center">
<Bot size={SMALL_ICON_SIZE} class="text-secondary" />
<span>
Triggered by parent
<a href={`/run/${job.parent_job}?workspace=${$workspaceStore}`}> {job.parent_job}</a>
</span>
</div>
{/if}
{:else if job && job.schedule_path}
<Icon class="text-secondary" data={faCalendar} scale={SMALL_ICON_SCALE} />
<span
>Triggered by the schedule: <button
class="break-words text-sm text-blue-600 font-normal"
on:click={() => scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
>{job.schedule_path}</button
></span
>
<div class="flex flex-row gap-2 items-center">
<Calendar size={SMALL_ICON_SIZE} class="text-secondary" />
<span>
Triggered by the schedule:
<button
class="break-words text-sm text-blue-600 font-normal"
on:click={() =>
scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
>
{job.schedule_path}
</button>
</span>
</div>
{/if}
{#if (job && job.job_kind == 'flow') || job?.job_kind == 'script'}
{@const stem = `/${job?.job_kind}s`}
{@const isScript = job?.job_kind === 'script'}
{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
<div>
<Icon class="text-secondary" data={faScroll} scale={SMALL_ICON_SCALE} /><span class="mx-2">
<div class="flex flex-row gap-2 items-center">
<Scroll size={SMALL_ICON_SIZE} class="text-secondary" />
<span>
<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
</span>
</div>
{/if}
<div>
<Icon class="text-secondary" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
<div class="flex flex-row gap-2 items-center">
<User size={SMALL_ICON_SIZE} class="text-secondary" />
<span>
By {job.created_by}
{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}but
permissioned as {job.permissioned_as}{/if}
{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}
but permissioned as {job.permissioned_as}
{/if}
</span>
</div>
</div>
<div class="text-secondary text-2xs pt-2">
run id: <a href={`/run/${job.id}?workspace=${job.workspace_id}`}>{job.id}</a>
run id:
<a href={`/run/${job.id}?workspace=${job.workspace_id}`}> {job.id} </a>
</div>
</div>
frontend/src/lib/components/FlowPreviewContent.svelte
+12 -12
View File
@@ -8,17 +8,15 @@
type OpenFlow
} from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons'
import { Badge, Button, Drawer, Kbd, Popup } from './common'
import { createEventDispatcher, getContext } from 'svelte'
import Icon from 'svelte-awesome'
import type { FlowEditorContext } from './flows/types'
import { runFlowPreview } from './flows/utils'
import SchemaForm from './SchemaForm.svelte'
import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
import FlowProgressBar from './flows/FlowProgressBar.svelte'
import CapturePayload from './flows/content/CapturePayload.svelte'
import { ArrowRight, Loader2 } from 'lucide-svelte'
import { ArrowRight, Play, RefreshCw, X } from 'lucide-svelte'
import { emptyString, getModifierKey } from '$lib/utils'
import DrawerContent from './common/drawer/DrawerContent.svelte'
import SavedInputs from './SavedInputs.svelte'
@@ -165,12 +163,14 @@
>
<div class="flex flex-row justify-between w-full items-center gap-x-2">
<div class="w-8">
<button
<Button
on:click={() => dispatch('close')}
class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
>
<Icon data={faClose} class="text-secondary" />
</button>
startIcon={{ icon: X }}
iconOnly
size="sm"
color="light"
btnClasses="hover:bg-surface-hover bg-surface-secondaryw-8 h-8 rounded-full p-0"
/>
</div>
{#if isRunning}
@@ -189,8 +189,8 @@
}}
size="sm"
btnClasses="w-full max-w-lg"
loading={true}
>
<Loader2 size={18} class="animate-spin mr-2" />
Cancel
</Button>
{:else}
@@ -209,7 +209,7 @@
branch_or_iteration_n: 0
})
}}
startIcon={{ icon: faPlay }}
startIcon={{ icon: Play }}
>
Re-start from
<Badge baseClass="ml-1" color="indigo">
@@ -223,7 +223,7 @@
title={`Re-start this flow from step ${selectedJobStep} (included).`}
variant="border"
color="blue"
startIcon={{ icon: faRefresh }}
startIcon={{ icon: RefreshCw }}
on:click={() => {
runPreview($previewArgs, {
flow_job_id: jobId,
@@ -286,7 +286,7 @@
{/if}
<Button
variant="contained"
startIcon={{ icon: isRunning ? faRefresh : faPlay }}
startIcon={{ icon: isRunning ? RefreshCw : Play }}
color="dark"
size="sm"
btnClasses="w-full max-w-lg"
frontend/src/lib/components/FlowStatusViewerInner.svelte
+6 -10
View File
@@ -3,8 +3,6 @@
import { workspaceStore } from '$lib/stores'
import FlowJobResult from './FlowJobResult.svelte'
import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte'
import Icon from 'svelte-awesome'
import { faChevronDown, faChevronUp, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher, getContext } from 'svelte'
import { onDestroy } from 'svelte'
import { Badge, Button, Tab } from './common'
@@ -14,7 +12,7 @@
import ModuleStatus from './ModuleStatus.svelte'
import { emptyString, msToSec, truncateRev } from '$lib/utils'
import JobArgs from './JobArgs.svelte'
import { Loader2 } from 'lucide-svelte'
import { ChevronDown, Hourglass, Loader2 } from 'lucide-svelte'
import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte'
import { deepEqual } from 'fast-equals'
import FlowTimeline from './FlowTimeline.svelte'
@@ -363,16 +361,14 @@
forloop_selected = loopJobId
}
}}
endIcon={{
icon: ChevronDown,
classes: forloop_selected == loopJobId ? '!rotate-180' : ''
}}
>
<span class="truncate font-mono">
#{($durationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0) + j + 1}: {loopJobId}
</span>
<Icon
class="ml-2"
data={forloop_selected == loopJobId ? faChevronUp : faChevronDown}
scale={0.8}
/>
</Button>
{/if}
<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
@@ -603,7 +599,7 @@
<ModuleStatus type={node.type} scheduled_for={node.scheduled_for} />
{#if node.duration_ms}
<Badge>
<Icon data={faHourglassHalf} scale={0.6} class="mr-2" />
<Hourglass class="mr-2" size={10} />
{msToSec(node.duration_ms)} s
</Badge>
{/if}
frontend/src/lib/components/FlowViewer.svelte
+2 -2
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import Highlight from 'svelte-highlight'
import json from 'svelte-highlight/languages/json'
import { faClipboard } from '@fortawesome/free-solid-svg-icons'
import type { FlowValue } from '$lib/gen'
import { Tab, Tabs, TabContent, Button } from './common'
import SchemaViewer from './SchemaViewer.svelte'
@@ -13,6 +12,7 @@
SVELVET_CONTEXT_KEY,
type SvelvetSettingsContext
} from './graph/svelvet/container/models'
import { Clipboard } from 'lucide-svelte'
setContext<SvelvetSettingsContext>(SVELVET_CONTEXT_KEY, {
fullHeight: true
@@ -98,7 +98,7 @@
color="light"
variant="border"
size="xs"
startIcon={{ icon: faClipboard }}
startIcon={{ icon: Clipboard }}
btnClasses="absolute top-2 right-2 w-min"
>
Copy content
frontend/src/lib/components/FolderEditor.svelte
+8 -9
View File
@@ -11,12 +11,11 @@
import TableCustom from './TableCustom.svelte'
import { Alert, Button, Drawer, DrawerContent } from './common'
import Skeleton from './common/skeleton/Skeleton.svelte'
import { Icon } from 'svelte-awesome'
import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons'
import GroupEditor from './GroupEditor.svelte'
import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
import Section from './Section.svelte'
import { Eye, Plus } from 'lucide-svelte'
export let name: string
let can_write = false
@@ -128,7 +127,7 @@
{#if !groupCreated}
<div class="flex flex-row">
<input class="mr-2" placeholder="New group name" bind:value={newGroupName} />
<Button size="md" startIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
<Button size="md" startIcon={{ icon: Plus }} disabled={!newGroupName} on:click={addGroup}>
New&nbsp;group
</Button>
</div>
@@ -171,18 +170,18 @@
size="xs"
disabled={!ownerItem || ownerItem == ''}
on:click={viewGroup.openDrawer}
>
<Icon scale={0.8} data={faEye} /></Button
>
startIcon={{ icon: Eye }}
iconOnly
/>
<Button
title="New Group"
btnClasses="!p-1.5"
variant="border"
on:click={newGroup.openDrawer}
size="xs"
>
<Icon scale={0.8} data={faPlus} /></Button
>
startIcon={{ icon: Plus }}
iconOnly
/>
{/if}
{/key}
<Button
frontend/src/lib/components/InlineCodeCopy.svelte
-15
View File
@@ -1,15 +0,0 @@
<script lang="ts">
import { copyToClipboard } from '$lib/utils'
import { faClipboard } from '@fortawesome/free-solid-svg-icons'
import { Icon } from 'svelte-awesome'
export let content: string
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<pre
class="bg-surface-secondary text-secondary p-2 font-mono text-sm whitespace-pre-wrap my-2 rounded-md"
>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
><Icon data={faClipboard} /></span
></pre
>
frontend/src/lib/components/InputTransformSchemaForm.svelte
+2 -2
View File
@@ -3,11 +3,11 @@
import { VariableService, type InputTransform } from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { allTrue } from '$lib/utils'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { Button } from './common'
import InputTransformForm from './InputTransformForm.svelte'
import ItemPicker from './ItemPicker.svelte'
import VariableEditor from './VariableEditor.svelte'
import { Plus } from 'lucide-svelte'
export let schema: Schema
export let args: Record<string, InputTransform | any> = {}
@@ -105,7 +105,7 @@
variant="border"
color="blue"
size="sm"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={() => {
variableEditor?.initNew?.()
}}
frontend/src/lib/components/InstanceSettings.svelte
+3 -4
View File
@@ -7,7 +7,6 @@
import Tooltip from '$lib/components/Tooltip.svelte'
import { sendUserToast } from '$lib/toast'
import OAuthSetting from '$lib/components/OAuthSetting.svelte'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { deepEqual } from 'fast-equals'
import OktaSetting from './OktaSetting.svelte'
import CloseButton from './common/CloseButton.svelte'
@@ -17,7 +16,7 @@
import { capitalize } from '$lib/utils'
import { enterpriseLicense } from '$lib/stores'
import CustomOauth from './CustomOauth.svelte'
import { AlertTriangle } from 'lucide-svelte'
import { AlertTriangle, Plus } from 'lucide-svelte'
import CustomSso from './CustomSso.svelte'
export let tab: string = 'Core'
@@ -258,7 +257,7 @@
color="blue"
hover="yo"
size="sm"
endIcon={{ icon: faPlus }}
endIcon={{ icon: Plus }}
disabled={clientName == ''}
on:click={() => {
oauths[clientName] = { id: '', secret: '', login_config: {} }
@@ -329,7 +328,7 @@
color="blue"
hover="yo"
size="sm"
endIcon={{ icon: faPlus }}
endIcon={{ icon: Plus }}
disabled={(oauth_name == 'custom' && resourceName == '') ||
(oauth_name == 'custom' && !$enterpriseLicense)}
on:click={() => {
frontend/src/lib/components/InviteUser.svelte
+2 -5
View File
@@ -66,11 +66,8 @@
<Popup floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
<svelte:fragment slot="button">
<Button color="dark" size="xs" nonCaptureEvent={true}>
<div class="flex flex-row gap-1 items-center">
<MailPlus size={16} />
Invite
</div>
<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: MailPlus }}>
Invite
</Button>
</svelte:fragment>
frontend/src/lib/components/JobStatus.svelte
+12 -28
View File
@@ -1,63 +1,47 @@
<script lang="ts">
import { displayDate } from '$lib/utils'
import {
faCalendar,
faCheck,
faCircle,
faClock,
faTimes
} from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import type { CompletedJob, QueuedJob } from '$lib/gen'
import Badge from './common/badge/Badge.svelte'
import { forLater } from '$lib/forLater'
import DurationMs from './DurationMs.svelte'
import { Calendar, CheckCircle2, Circle, Clock, XCircle } from 'lucide-svelte'
const SMALL_ICON_SCALE = 0.7
const SMALL_ICON_SIZE = 12
export let job: QueuedJob | CompletedJob | undefined
</script>
{#if job && 'success' in job && job.success}
<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
<Badge large color="green">
<Icon data={faCheck} scale={SMALL_ICON_SCALE} class="mr-2" />
<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
Success {job.is_skipped ? '(Skipped)' : ''}
</Badge>
<DurationMs duration_ms={job.duration_ms} />
</div>
{:else if job && 'success' in job}
<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
<Badge large color="red">
<Icon data={faTimes} scale={SMALL_ICON_SCALE} class="mr-2" />
Failed
</Badge>
<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
<DurationMs duration_ms={job.duration_ms} />
</div>
{:else if job && 'running' in job && job.running}
<div>
<Badge large color="yellow">
<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
Running {#if job.flow_status}({job.flow_status?.step + 1 ?? ''} of {job.raw_flow?.modules
?.length ?? '?'}){/if}
<Badge large color="yellow" icon={{ icon: Clock, position: 'left' }}>
Running
{#if job.flow_status}
({job.flow_status?.step + 1 ?? ''} of {job.raw_flow?.modules?.length ?? '?'})
{/if}
</Badge>
</div>
{:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
<div>
<Badge color="blue">
<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
<Badge color="blue" icon={{ icon: Calendar, position: 'left' }}>
Scheduled for {displayDate(job.scheduled_for)}
</Badge>
</div>
{:else if job && 'running' in job}
<div>
<Badge>
<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
Queued
</Badge>
<Badge icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
</div>
{:else}
<Icon class="text-gray-200" data={faCircle} scale={SMALL_ICON_SCALE} />
<Circle size={SMALL_ICON_SIZE} class="text-gray-200" />
{/if}
frontend/src/lib/components/LightweightArgInput.svelte
+2 -5
View File
@@ -1,10 +1,7 @@
<script lang="ts">
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { setInputCat as computeInputCat } from '$lib/utils'
import { Badge, Button } from './common'
import { createEventDispatcher } from 'svelte'
import Icon from 'svelte-awesome'
import FieldHeader from './FieldHeader.svelte'
import type { SchemaProperty } from '$lib/common'
import autosize from 'svelte-autosize'
@@ -14,7 +11,7 @@
import type { ComponentCustomCSS } from './apps/types'
import { twMerge } from 'tailwind-merge'
import { fade } from 'svelte/transition'
import { X } from 'lucide-svelte'
import { Plus, X } from 'lucide-svelte'
import LightweightResourcePicker from './LightweightResourcePicker.svelte'
import LightweightObjectResourceInput from './LightweightObjectResourceInput.svelte'
import DateTimeInput from './DateTimeInput.svelte'
@@ -265,8 +262,8 @@
}
value = value.concat('')
}}
startIcon={{ icon: Plus }}
>
<Icon data={faPlus} class="mr-2" />
Add
</Button>
</div>
frontend/src/lib/components/ModuleStatus.svelte
+4 -5
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import { FlowStatusModule } from '$lib/gen'
import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
import { Icon } from 'svelte-awesome'
import { Badge } from './common'
import { forLater } from '$lib/forLater'
import { displayDate } from '$lib/utils'
import { Hourglass } from 'lucide-svelte'
export let type: FlowStatusModule.type
export let scheduled_for: Date | undefined
@@ -12,17 +11,17 @@
{#if type == FlowStatusModule.type.WAITING_FOR_EVENTS}
<span class="italic text-waiting">
<Icon class=" mr-2" data={faHourglassHalf} />
<Hourglass />
Waiting to be resumed by resume events such as approvals
</span>
{:else if type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
<span class="italic text-tertiary">
<Icon data={faHourglassHalf} class="mr-2" />
<Hourglass />
Waiting for prior steps to complete
</span>
{:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
<span class="italic text-tertiary">
<Icon data={faHourglassHalf} class="mr-2" />
<Hourglass />
{#if scheduled_for && forLater(scheduled_for.toString())}
Job is scheduled to be executed at {displayDate(scheduled_for, true)}
{:else}
frontend/src/lib/components/OauthExtraParams.svelte
+5 -6
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import { Button } from './common'
import { Minus, Plus } from 'lucide-svelte'
export let extra_params: Record<string, string> = {}
@@ -25,9 +24,9 @@
extra_params_vec = extra_params_vec.filter((e) => e[0] != o[0])
sync()
}}
>
<Icon data={faMinus} />
</Button>
startIcon={{ icon: Minus }}
iconOnly
/>
</div>
{/each}
<div class="flex items-center mt-1">
@@ -36,7 +35,7 @@
color="blue"
hover="yo"
size="sm"
endIcon={{ icon: faPlus }}
endIcon={{ icon: Plus }}
on:click={() => {
extra_params_vec = extra_params_vec.concat([['key', 'value']])
sync()
frontend/src/lib/components/OauthScopes.svelte
+5 -6
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import { Button } from './common'
import { Minus, Plus } from 'lucide-svelte'
export let scopes: string[] = []
</script>
@@ -17,9 +16,9 @@
on:click={() => {
scopes = scopes.filter((el) => el != v)
}}
>
<Icon data={faMinus} />
</Button>
startIcon={{ icon: Minus }}
iconOnly
/>
</div>
{/each}
<div class="flex items-center mt-1">
@@ -28,7 +27,7 @@
color="blue"
hover="yo"
size="sm"
endIcon={{ icon: faPlus }}
endIcon={{ icon: Plus }}
on:click={() => {
scopes = scopes.concat('')
}}
frontend/src/lib/components/Path.svelte
+9 -16
View File
@@ -15,9 +15,7 @@
VariableService
} from '$lib/gen'
import { superadmin, userStore, workspaceStore } from '$lib/stores'
import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import { Icon } from 'svelte-awesome'
import { writable } from 'svelte/store'
import { Button, Drawer, DrawerContent } from './common'
import Badge from './common/badge/Badge.svelte'
@@ -27,7 +25,7 @@
import { random_adj } from './random_positive_adjetive'
import Required from './Required.svelte'
import Tooltip from './Tooltip.svelte'
import { Folder, User } from 'lucide-svelte'
import { Eye, Folder, Plus, User } from 'lucide-svelte'
type PathKind = 'resource' | 'script' | 'variable' | 'flow' | 'schedule' | 'app' | 'raw_app'
let meta: Meta | undefined = undefined
@@ -276,12 +274,7 @@
{#if !folderCreated}
<div class="flex flex-row">
<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
<Button
size="md"
startIcon={{ icon: faPlus }}
disabled={!newFolderName}
on:click={addFolder}
>
<Button size="md" startIcon={{ icon: Plus }} disabled={!newFolderName} on:click={addFolder}>
New&nbsp;folder
</Button>
</div>
@@ -384,9 +377,9 @@
size="xs"
disabled={!meta.owner || meta.owner == ''}
on:click={viewFolder.openDrawer}
>
<Icon scale={0.8} data={faEye} /></Button
>
iconOnly
startIcon={{ icon: Eye }}
/>
<Button
title="New folder"
btnClasses="!p-1.5"
@@ -395,10 +388,10 @@
size="xs"
{disabled}
on:click={newFolder.openDrawer}
>
<Icon scale={0.8} data={faPlus} /></Button
></div
>
iconOnly
startIcon={{ icon: Plus }}
/>
</div>
</label>
{/if}
</div>
frontend/src/lib/components/PropertyRow.svelte
+3 -3
View File
@@ -2,9 +2,9 @@
import Required from './Required.svelte'
import type { PropertyDisplayInfo } from '$lib/common'
import { createEventDispatcher } from 'svelte'
import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons'
import SchemaEditorProperty from './SchemaEditorProperty.svelte'
import { Button } from './common'
import { Pen, Trash } from 'lucide-svelte'
export let displayInfo: PropertyDisplayInfo
export let isAnimated: boolean
@@ -69,7 +69,7 @@
color="light"
variant="border"
size={lightMode ? 'xs' : 'sm'}
startIcon={{ icon: faPen }}
startIcon={{ icon: Pen }}
on:click={() => startEditArgument(displayInfo.name)}
iconOnly={lightMode}
>
@@ -81,7 +81,7 @@
variant="border"
btnClasses="mx-2"
size={lightMode ? 'xs' : 'sm'}
startIcon={{ icon: faTrash }}
startIcon={{ icon: Trash }}
on:click={() => handleDeleteArgument(getArgPath(displayInfo))}
iconOnly={lightMode}
>
frontend/src/lib/components/ResourceEditor.svelte
+2 -2
View File
@@ -8,7 +8,6 @@
import Required from './Required.svelte'
import { userStore, workspaceStore } from '$lib/stores'
import { faSave } from '@fortawesome/free-solid-svg-icons'
import autosize from 'svelte-autosize'
import DrawerContent from './common/drawer/DrawerContent.svelte'
import SchemaForm from './SchemaForm.svelte'
@@ -16,6 +15,7 @@
import Toggle from './Toggle.svelte'
import { sendUserToast } from '$lib/toast'
import TestConnection from './TestConnection.svelte'
import { Save } from 'lucide-svelte'
let path = ''
let initialPath = ''
@@ -207,7 +207,7 @@
</div>
<svelte:fragment slot="actions">
<Button
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
on:click={editResource}
disabled={!can_write || !isValid || jsonError != ''}
>
frontend/src/lib/components/ResourcePicker.svelte
+14 -11
View File
@@ -1,9 +1,7 @@
<script lang="ts">
import { ResourceService } from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher, onMount } from 'svelte'
import Icon from 'svelte-awesome'
import Select from './apps/svelte-select/lib/index'
import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
import AppConnect from './AppConnect.svelte'
@@ -11,6 +9,7 @@
import ResourceEditor from './ResourceEditor.svelte'
import DBSchemaExplorer from './DBSchemaExplorer.svelte'
import DarkModeObserver from './DarkModeObserver.svelte'
import { Pen, Plus, RotateCw } from 'lucide-svelte'
const dispatch = createEventDispatcher()
@@ -120,9 +119,13 @@
/>
{#if value && value != ''}
<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>
<Icon scale={0.8} data={faPen} /></Button
>
<Button
variant="border"
size="xs"
on:click={() => resourceEditor?.initEdit?.(value ?? '')}
startIcon={{ icon: Pen }}
iconOnly
/>
{/if}
<Button
@@ -130,9 +133,9 @@
variant="border"
size="xs"
on:click={() => appConnect?.open?.(resourceType)}
>
<Icon scale={0.8} data={faPlus} />
</Button>
startIcon={{ icon: Plus }}
iconOnly
/>
<Button
variant="border"
color="light"
@@ -140,9 +143,9 @@
on:click={() => {
loadResources(resourceType)
}}
>
<Icon scale={0.8} data={faRotateRight} />
</Button>
startIcon={{ icon: RotateCw }}
iconOnly
/>
</div>
{#if showSchemaExplorer}
<DBSchemaExplorer {resourceType} resourcePath={value} />
frontend/src/lib/components/RunForm.svelte
+2 -2
View File
@@ -11,7 +11,6 @@
import { userStore } from '$lib/stores'
import CliHelpBox from './CliHelpBox.svelte'
import { Badge, Button, Kbd } from './common'
import InlineCodeCopy from './InlineCodeCopy.svelte'
import SchemaForm from './SchemaForm.svelte'
import SharedBadge from './SharedBadge.svelte'
import Toggle from './Toggle.svelte'
@@ -19,6 +18,7 @@
import CollapseLink from './CollapseLink.svelte'
import { SCRIPT_VIEW_SHOW_RUN_FROM_CLI, SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER } from '$lib/consts'
import TimeAgo from './TimeAgo.svelte'
import ClipboardPanel from './details/ClipboardPanel.svelte'
export let runnable:
| {
@@ -238,7 +238,7 @@
{#if SCRIPT_VIEW_SHOW_RUN_FROM_CLI}
<CollapseLink small text="Run it from CLI">
<div class="mt-2" />
<InlineCodeCopy content={cliCommand} />
<ClipboardPanel content={cliCommand} />
<CliHelpBox />
</CollapseLink>
{/if}
frontend/src/lib/components/RunPageSchedules.svelte
+3 -4
View File
@@ -1,12 +1,11 @@
<script lang="ts">
import { faCalendar } from '@fortawesome/free-solid-svg-icons'
import ScheduleEditor from './ScheduleEditor.svelte'
import { Badge, Button } from './common'
import { workspaceStore } from '$lib/stores'
import { ScheduleService, type Schedule } from '$lib/gen'
import { sendUserToast } from '$lib/toast'
import Toggle from './Toggle.svelte'
import { ListOrdered, PenBox } from 'lucide-svelte'
import { ListOrdered, Calendar, PenBox } from 'lucide-svelte'
import JobArgs from './JobArgs.svelte'
import Skeleton from './common/skeleton/Skeleton.svelte'
import Tooltip from './Tooltip.svelte'
@@ -87,7 +86,7 @@
variant="border"
color="light"
size="xs"
startIcon={{ icon: faCalendar }}
startIcon={{ icon: Calendar }}
>
New Schedule
</Button>
@@ -166,7 +165,7 @@
<div class="grid grid-cols-6 text-2xs items-center py-2"
><div class="col-span-3 truncate">{schedule.path}</div><div>{schedule.schedule}</div>
<div>{schedule.enabled ? 'on' : 'off'}</div>
<button on:click={() => scheduleEditor?.openEdit(path, isFlow)}>edit</button>
<button on:click={() => scheduleEditor?.openEdit(path, isFlow)}>Edit</button>
</div>
{/each}
</div>
frontend/src/lib/components/SavedInputs.svelte
+2 -3
View File
@@ -3,11 +3,10 @@
import { InputService, type Input, RunnableType, type CreateInput } from '$lib/gen/index.js'
import { userStore, workspaceStore } from '$lib/stores.js'
import { classNames, displayDate, sendUserToast } from '$lib/utils.js'
import { faSave } from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import { Pane, Splitpanes } from 'svelte-splitpanes'
import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
import { ArrowLeftIcon, Edit, ExternalLink, X } from 'lucide-svelte'
import { ArrowLeftIcon, Edit, ExternalLink, Save, X } from 'lucide-svelte'
import Toggle from './Toggle.svelte'
import Tooltip from './Tooltip.svelte'
import TimeAgo from './TimeAgo.svelte'
@@ -156,7 +155,7 @@
on:click={() => saveInput(args)}
disabled={!isValid}
loading={savingInputs}
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
color="light"
size="xs"
>
frontend/src/lib/components/ScheduleEditorInner.svelte
+7 -12
View File
@@ -10,7 +10,7 @@
import ErrorOrRecoveryHandler from '$lib/components/ErrorOrRecoveryHandler.svelte'
import Toggle from '$lib/components/Toggle.svelte'
import Tooltip from '$lib/components/Tooltip.svelte'
import Dropdown from '$lib/components/Dropdown.svelte'
import Dropdown from '$lib/components/DropdownV2.svelte'
import {
FlowService,
ScheduleService,
@@ -21,10 +21,9 @@
} from '$lib/gen'
import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
import { canWrite, emptyString, formatCron, sendUserToast } from '$lib/utils'
import { faList, faSave } from '@fortawesome/free-solid-svg-icons'
import { Save } from 'lucide-svelte'
import { createEventDispatcher } from 'svelte'
import Section from '$lib/components/Section.svelte'
import { List, Save } from 'lucide-svelte'
let initialPath = ''
let edit = true
@@ -350,7 +349,7 @@
<Button
size="sm"
variant="border"
startIcon={{ icon: faList }}
startIcon={{ icon: List }}
disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
href={`/runs/${script_path}`}
>
@@ -374,7 +373,7 @@
</div>
{/if}
<Button
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
disabled={!allowSchedule ||
pathError != '' ||
emptyString(script_path) ||
@@ -387,7 +386,7 @@
</Button>
</svelte:fragment>
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-12">
{#if !edit}
<Section label="Metadata">
<Path
@@ -453,9 +452,7 @@
<svelte:fragment slot="action">
<div class="flex flex-row items-center gap-2">
<Dropdown
placement="bottom-end"
name="Save as default"
dropdownItems={[
items={[
{
displayName: `Future schedules only`,
action: () => saveAsDefaultErrorHandler(false)
@@ -552,9 +549,7 @@
<svelte:fragment slot="action">
<div class="flex flex-row items-center gap-2">
<Dropdown
placement="bottom-end"
name="Save as default"
dropdownItems={[
items={[
{
displayName: `Future schedules only`,
action: () => saveAsDefaultRecoveryHandler(false)
frontend/src/lib/components/SchemaEditor.svelte
+2 -2
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import type { Schema, SchemaProperty, PropertyDisplayInfo } from '$lib/common'
import { emptySchema, emptyString, sendUserToast } from '$lib/utils'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { Button } from './common'
import { createEventDispatcher } from 'svelte'
import type { ModalSchemaProperty } from './SchemaModal.svelte'
@@ -13,6 +12,7 @@
import Tooltip from './Tooltip.svelte'
import { flip } from 'svelte/animate'
import Portal from 'svelte-portal'
import { Plus } from 'lucide-svelte'
export let isFlowInput = false
@@ -276,7 +276,7 @@
variant="contained"
color="dark"
size="sm"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={() => {
schemaModal.openDrawer(Object.assign({}, DEFAULT_PROPERTY))
}}
frontend/src/lib/components/SchemaForm.svelte
+2 -2
View File
@@ -3,7 +3,6 @@
import { VariableService } from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { allTrue } from '$lib/utils'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import ArgInput from './ArgInput.svelte'
import { Button } from './common'
import ItemPicker from './ItemPicker.svelte'
@@ -11,6 +10,7 @@
import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
import { getResourceTypes } from './resourceTypesStore'
import { Plus } from 'lucide-svelte'
export let schema: Schema | any
export let schemaSkippedValues: string[] = []
@@ -205,7 +205,7 @@
variant="border"
color="blue"
size="sm"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={() => variableEditor?.initNew?.()}
>
New Variable
frontend/src/lib/components/ScriptBuilder.svelte
+6 -8
View File
@@ -22,7 +22,6 @@
import Path from './Path.svelte'
import ScriptEditor from './ScriptEditor.svelte'
import { Alert, Badge, Button, Drawer, Kbd, SecondsInput, Tab, TabContent, Tabs } from './common'
import { faSave } from '@fortawesome/free-solid-svg-icons'
import LanguageIcon from './common/languageIcons/LanguageIcon.svelte'
import type { SupportedLanguage } from '$lib/common'
import Tooltip from './Tooltip.svelte'
@@ -40,6 +39,7 @@
Pen,
Plus,
Rocket,
Save,
Settings,
X
} from 'lucide-svelte'
@@ -675,7 +675,7 @@
<svelte:fragment slot="right">
<input
type="number"
class="!w-14 ml-4"
class="!w-16 ml-4"
disabled={script.priority === undefined}
bind:value={script.priority}
on:focus
@@ -855,16 +855,14 @@
on:click={() => {
metadataOpen = true
}}
startIcon={{ icon: Settings }}
>
<div class="flex flex-row gap-2 items-center">
<Settings size={14} />
Settings
</div>
Settings
</Button>
<Button
loading={loadingDraft}
size="xs"
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
on:click={() => saveDraft()}
disabled={initialPath != '' && !savedScript}
>
@@ -876,7 +874,7 @@
<Button
loading={loadingSave}
size="xs"
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
on:click={() => editScript()}
dropdownItems={computeDropdownItems(initialPath)}
>
frontend/src/lib/components/ScriptEditor.svelte
+11 -9
View File
@@ -5,14 +5,12 @@
import { CompletedJob, Job, JobService, SettingsService } from '$lib/gen'
import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
import { copyToClipboard, emptySchema, getModifierKey, sendUserToast } from '$lib/utils'
import { faClipboard, faPlay } from '@fortawesome/free-solid-svg-icons'
import Editor from './Editor.svelte'
import { inferArgs } from '$lib/infer'
import type { Preview } from '$lib/gen/models/Preview'
import { Pane, Splitpanes } from 'svelte-splitpanes'
import SchemaForm from './SchemaForm.svelte'
import LogPanel from './scriptEditor/LogPanel.svelte'
import { faGithub } from '@fortawesome/free-brands-svg-icons'
import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte'
import TestJobLoader from './TestJobLoader.svelte'
import { createEventDispatcher, onDestroy, onMount } from 'svelte'
@@ -23,8 +21,8 @@
import { scriptLangToEditorLang } from '$lib/scripts'
import { WebsocketProvider } from 'y-websocket'
import Modal from './common/modal/Modal.svelte'
import { Icon } from 'svelte-awesome'
import DiffEditor from './DiffEditor.svelte'
import { Clipboard, Github, Play } from 'lucide-svelte'
// Exported
export let schema: Schema | any = emptySchema()
@@ -221,9 +219,13 @@
<div>Have others join by sharing the following url:</div>
<div class="flex gap-2 pr-4">
<input type="text" disabled value={collabUrl()} />
<button on:click={() => copyToClipboard(collabUrl())} class="text-secondary ml-2">
<Icon data={faClipboard} />
</button>
<Button
color="light"
startIcon={{ icon: Clipboard }}
iconOnly
on:click={() => copyToClipboard(collabUrl())}
/>
</div>
</Modal>
<div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
@@ -258,9 +260,9 @@
href="https://www.windmill.dev/docs/cli_local_dev/vscode-extension"
color="light"
size="xs"
btnClasses="mr-1 hidden lg:block"
btnClasses="hidden lg:flex"
startIcon={{
icon: faGithub
icon: Github
}}
>
Use VScode
@@ -337,7 +339,7 @@
btnClasses="w-full"
size="xs"
startIcon={{
icon: faPlay,
icon: Play,
classes: 'animate-none'
}}
>
frontend/src/lib/components/ScriptPicker.svelte
+22 -12
View File
@@ -13,10 +13,8 @@
import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
import { Code2 } from 'lucide-svelte'
import { Code, Code2, ExternalLink, Pen, RefreshCw } from 'lucide-svelte'
import type { SupportedLanguage } from '$lib/common'
import { faExternalLink, faRotateRight } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import FlowIcon from './home/FlowIcon.svelte'
import DarkModeObserver from './DarkModeObserver.svelte'
import { truncate } from '$lib/utils'
@@ -122,43 +120,55 @@
{/if}
{#if allowRefresh}
<Button variant="border" color="light" wrapperClasses="self-stretch" on:click={loadItems}
><Icon scale={0.8} data={faRotateRight} /></Button
>
<Button
variant="border"
color="light"
wrapperClasses="self-stretch"
on:click={loadItems}
startIcon={{ icon: RefreshCw }}
iconOnly
/>
{/if}
{#if scriptPath !== undefined && scriptPath !== ''}
{#if itemKind == 'flow'}
<div class="flex gap-2">
<Button
endIcon={{ icon: faExternalLink }}
endIcon={{ icon: ExternalLink }}
target="_blank"
color="light"
size="xs"
href="/flows/edit/{scriptPath}">edit</Button
variant="border"
href="/flows/edit/{scriptPath}">Edit</Button
>
<Button
color="light"
size="xs"
variant="border"
on:click={async () => {
drawerFlowViewer.openDrawer()
}}
>
view
View
</Button>
</div>
{:else}
<div class="flex gap-2">
<Button
endIcon={{ icon: faExternalLink }}
startIcon={{ icon: Pen }}
target="_blank"
color="light"
size="xs"
href="/scripts/edit/{scriptPath}">edit</Button
href="/scripts/edit/{scriptPath}"
variant="border"
>
Edit
</Button>
<Button
color="light"
size="xs"
variant="border"
startIcon={{ icon: Code }}
on:click={async () => {
const { language, content } = await getScriptByPath(scriptPath ?? '')
code = content
@@ -166,7 +176,7 @@
drawerViewer.openDrawer()
}}
>
view
View
</Button>
</div>
{/if}
frontend/src/lib/components/ScriptVersionHistory.svelte
+5 -2
View File
@@ -17,11 +17,14 @@
let selectedVersion: string | undefined = undefined
let versions: string[] | undefined = undefined
let loading: boolean = false
async function loadVersions() {
loading = true
versions = (
await ScriptService.getScriptByPath({ workspace: $workspaceStore!, path: scriptPath })
).parent_hashes
loading = false
}
loadVersions()
@@ -31,8 +34,8 @@
<Pane size={20}>
<PanelSection title="Past Versions">
<div class="flex flex-col gap-2 w-full">
{#if versions}
{#if versions.length > 0}
{#if !loading}
{#if versions && versions.length > 0}
<div class="flex gap-2 flex-col">
{#each versions ?? [] as version}
<!-- svelte-ignore a11y-click-events-have-key-events -->
frontend/src/lib/components/SettingSection.svelte
-47
View File
@@ -1,47 +0,0 @@
<script lang="ts">
import { ChevronDown } from 'lucide-svelte'
import { slide } from 'svelte/transition'
import type { IntRange } from '../common'
import Tooltip from './Tooltip.svelte'
export let title: string
export let tooltip: string = ''
export let element: `h${IntRange<1, 6>}` = 'h2'
export let accordion = false
let showContent = !accordion
</script>
<div class="border-b [&:has(button:hover)]:border-gray-400 duration-200 pb-1 mt-8 mb-2">
{#if accordion}
<button
class="flex w-full justify-start items-center"
on:click={() => (showContent = !showContent)}
>
<span class="rounded-full hover:bg-gray-100 focus:bg-gray-100 p-1 mr-1">
<ChevronDown size={22} class="rotate-0 duration-300 {showContent ? '!-rotate-180' : ''}" />
</span>
<svelte:element this={element}>
{title}
{#if tooltip}
<Tooltip scale={0.9} class="mb-0.5">
{tooltip}
</Tooltip>
{/if}
</svelte:element>
</button>
{:else}
<svelte:element this={element}>
{title}
{#if tooltip}
<Tooltip scale={0.9} class="mb-0.5">
{tooltip}
</Tooltip>
{/if}
</svelte:element>
{/if}
</div>
{#if showContent}
<div transition:slide|local={{ duration: 300 }}>
<slot />
</div>
{/if}
frontend/src/lib/components/Slider.svelte
+12 -4
View File
@@ -1,8 +1,9 @@
<script lang="ts">
import { ChevronDown, ChevronUp } from 'lucide-svelte'
import { ChevronDown } from 'lucide-svelte'
import { slide } from 'svelte/transition'
import Button from './common/button/Button.svelte'
import Tooltip from './Tooltip.svelte'
import { twMerge } from 'tailwind-merge'
export let text: string
export let tooltip: string | undefined = undefined
@@ -10,13 +11,20 @@
export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
</script>
<Button color="light" on:click={() => (view = !view)} {size} variant="border"
<Button
color="light"
on:click={() => (view = !view)}
{size}
variant="border"
endIcon={{
icon: ChevronDown,
classes: twMerge('duration-300 ', view ? 'rotate-180' : 'rotate-0')
}}
>{text}
{#if tooltip}
<Tooltip wrapperClass="mx-1">{tooltip}</Tooltip>
{/if}
{#if !view}<ChevronDown />{:else}<ChevronUp />{/if}</Button
>
</Button>
{#if view}
<div class="my-4 px-2" transition:slide|local><slot /></div>
{/if}
frontend/src/lib/components/UserSettings.svelte
+13 -15
View File
@@ -3,10 +3,17 @@
import type { TruncatedToken, NewToken } from '$lib/gen'
import { UserService } from '$lib/gen'
import { displayDate, copyToClipboard } from '$lib/utils'
import { faClipboard, faPlus } from '@fortawesome/free-solid-svg-icons'
import TableCustom from '$lib/components/TableCustom.svelte'
import { Button } from '$lib/components/common'
import Icon from 'svelte-awesome'
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { sendUserToast } from '$lib/toast'
import Tooltip from './Tooltip.svelte'
import Version from './Version.svelte'
import { Clipboard, Plus } from 'lucide-svelte'
import DarkModeToggle from './sidebar/DarkModeToggle.svelte'
export let scopes: string[] | undefined = undefined
@@ -18,16 +25,6 @@
let newTokenExpiration: number | undefined
let displayCreateToken = scopes != undefined
let login_type = 'none'
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { sendUserToast } from '$lib/toast'
import Tooltip from './Tooltip.svelte'
import Version from './Version.svelte'
import DarkModeToggle from './sidebar/DarkModeToggle.svelte'
let drawer: Drawer
export function openDrawer() {
@@ -152,7 +149,7 @@
<div class="flex justify-end border-b pb-1">
<Button
size="sm"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
btnClasses={displayCreateToken ? 'hidden' : ''}
on:click={() => {
displayCreateToken = !displayCreateToken
@@ -176,8 +173,9 @@
: 'hidden'} border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
>
<div>
Added token: <button on:click={() => copyToClipboard(newToken ?? '')} class="inline"
>{newToken} <Icon data={faClipboard} />
Added token: <button on:click={() => copyToClipboard(newToken ?? '')} class="inline">
{newToken}
<Clipboard size={12} />
</button>
</div>
<div class="pt-1 text-xs ml-2">
frontend/src/lib/components/VariableEditor.svelte
+2 -2
View File
@@ -10,13 +10,13 @@
import Alert from './common/alert/Alert.svelte'
import autosize from 'svelte-autosize'
import Toggle from './Toggle.svelte'
import { faSave } from '@fortawesome/free-solid-svg-icons'
import SimpleEditor from './SimpleEditor.svelte'
import { sendUserToast } from '$lib/toast'
import { canWrite, isOwner } from '$lib/utils'
import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
import Section from './Section.svelte'
import { Save } from 'lucide-svelte'
const dispatch = createEventDispatcher()
@@ -234,7 +234,7 @@
<Button
on:click={() => (edit ? updateVariable() : createVariable())}
disabled={!can_write || !valid || pathError != ''}
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
color="dark"
size="sm"
>
frontend/src/lib/components/WorkspaceGroup.svelte
+3 -3
View File
@@ -395,9 +395,9 @@
drawer.openDrawer()
}}
>
<div class="flex flex-row gap-1 items-center"
>{config == undefined ? 'create' : 'edit'} config</div
>
<div class="flex flex-row gap-1 items-center">
{config == undefined ? 'create' : 'edit'} config
</div>
</Button>
{#if config}
frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+2 -3
View File
@@ -1,8 +1,6 @@
<script lang="ts">
import { Button } from '$lib/components/common'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { getContext } from 'svelte'
import { Icon } from 'svelte-awesome'
import { initConfig, initOutput } from '../../editor/appUtils'
import { components } from '../../editor/component'
import type { AppInput } from '../../inputType'
@@ -14,6 +12,7 @@
import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
import { twMerge } from 'tailwind-merge'
import ResolveStyle from '../helpers/ResolveStyle.svelte'
import { User } from 'lucide-svelte'
export let id: string
export let componentInput: AppInput | undefined
@@ -120,7 +119,7 @@
Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
<strong>
User Input
<Icon data={faUser} scale={1.3} class="rounded-sm bg-surface-secondary p-1 ml-0.5" />
<User size={20} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
</strong>
</div>
{/if}
frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+2 -4
View File
@@ -1,14 +1,12 @@
<script lang="ts">
import { Button } from '$lib/components/common'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { getContext } from 'svelte'
import { Icon } from 'svelte-awesome'
import type { AppInput } from '../../inputType'
import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
import AlignWrapper from '../helpers/AlignWrapper.svelte'
import type RunnableComponent from '../helpers/RunnableComponent.svelte'
import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
import { User } from 'lucide-svelte'
import { initCss } from '../../utils'
import { initConfig, initOutput } from '../../editor/appUtils'
import { components } from '../../editor/component'
@@ -117,7 +115,7 @@
Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
<strong>
User Input
<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
<User size={20} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
</strong>
</div>
{/if}
frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
+8 -20
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import Button from '$lib/components/common/button/Button.svelte'
import { faDownload } from '@fortawesome/free-solid-svg-icons'
import type { Table } from '@tanstack/svelte-table'
import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-svelte'
import { ChevronLeft, ChevronRight, Download } from 'lucide-svelte'
import type { Readable } from 'svelte/store'
import { twMerge } from 'tailwind-merge'
@@ -72,15 +71,10 @@
$table.previousPage()
}}
disabled={!$table.getCanPreviousPage()}
loading={isPreviousLoading && loading}
startIcon={{ icon: ChevronLeft }}
>
<div class="flex flex-row gap-1 items-center">
{#if isPreviousLoading && loading}
<Loader2 size={14} class="animate-spin" />
{:else}
<ChevronLeft size={14} />
{/if}
Previous
</div>
Previous
</Button>
<Button
size="xs2"
@@ -91,16 +85,10 @@
$table.nextPage()
}}
disabled={!$table.getCanNextPage()}
loading={isNextLoading && loading}
endIcon={{ icon: ChevronRight }}
>
<div class="flex flex-row gap-1 items-center">
Next
{#if isNextLoading && loading}
<Loader2 size={14} class="animate-spin" />
{:else}
<ChevronRight size={14} />
{/if}
</div>
Next
</Button>
{$table.getState().pagination.pageIndex + 1}
{$table.getPageCount() > 0 ? ` of ${$table.getPageCount()}` : ''}
@@ -116,7 +104,7 @@
color="light"
btnClasses="!py-1"
on:click={downloadResultAsCSV}
startIcon={{ icon: faDownload }}
startIcon={{ icon: Download }}
>
Download
</Button>
frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
-29
View File
@@ -1,29 +0,0 @@
<script lang="ts">
import { getContext } from 'svelte'
import { findGridItem } from '../../editor/appUtils'
import type { AppViewerContext } from '../../types'
export let id: string
export let shouldWrap: boolean = false
const { app, breakpoint, mode } = getContext<AppViewerContext>('AppViewerContext')
$: gridItem = findGridItem($app, id)
let wrapper: HTMLElement
$: {
if (wrapper && gridItem && shouldWrap) {
const wrapperHeight = wrapper.getBoundingClientRect().height
const width = $breakpoint === 'sm' ? 3 : 12
gridItem[width].h = Math.ceil(wrapperHeight / 36)
}
}
</script>
{#if shouldWrap && $mode !== 'preview'}
<div class="h-full w-full" bind:this={wrapper}>
<slot />
</div>
{:else}
<slot />
{/if}
frontend/src/lib/components/apps/editor/AppEditor.svelte
+1 -2
View File
@@ -24,7 +24,6 @@
import Tabs from '$lib/components/common/tabs/Tabs.svelte'
import { userStore, workspaceStore } from '$lib/stores'
import { classNames, encodeState } from '$lib/utils'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import AppPreview from './AppPreview.svelte'
import ComponentList from './componentsPanel/ComponentList.svelte'
import ContextPanel from './contextPanel/ContextPanel.svelte'
@@ -730,7 +729,7 @@
variant="border"
color="blue"
size="sm"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={() => {
variableEditor?.initNew?.()
}}
frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+8 -8
View File
@@ -23,11 +23,11 @@
import { AppService, DraftService, Job, Policy } from '$lib/gen'
import { redo, undo } from '$lib/history'
import { enterpriseLicense, workspaceStore } from '$lib/stores'
import { faClipboard, faSave } from '@fortawesome/free-solid-svg-icons'
import {
AlignHorizontalSpaceAround,
BellOff,
Bug,
Clipboard,
DiffIcon,
Expand,
FileJson,
@@ -38,10 +38,10 @@
Loader2,
MoreVertical,
RefreshCw,
Save,
Smartphone
} from 'lucide-svelte'
import { getContext } from 'svelte'
import { Icon } from 'svelte-awesome'
import { Pane, Splitpanes } from 'svelte-splitpanes'
import {
classNames,
@@ -607,7 +607,7 @@
<div slot="actions">
<Button
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
disabled={pathError != ''}
on:click={() => saveInitialDraft()}
>
@@ -694,7 +694,7 @@
</div>
</Button>
<Button
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
disabled={pathError != ''}
on:click={() => {
if (appPath == '') {
@@ -755,7 +755,7 @@
>
{url}
<span class="text-gray-700 ml-2">
<Icon data={faClipboard} />
<Clipboard />
</span>
</a>
</div>
@@ -1130,16 +1130,16 @@
<PreviewToggle loading={loading.save} />
<Button
loading={loading.save}
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
on:click={() => saveDraft()}
disabled={$page.params.path !== undefined && !savedApp}
size="xs"
disabled={$page.params.path !== undefined && !savedApp}
>
Save draft&nbsp;<Kbd small>Ctrl</Kbd><Kbd small>S</Kbd>
</Button>
<Button
loading={loading.save}
startIcon={{ icon: faSave }}
startIcon={{ icon: Save }}
on:click={save}
size="xs"
dropdownItems={appPath != ''
frontend/src/lib/components/apps/editor/AppExportButton.svelte
+2 -2
View File
@@ -4,11 +4,11 @@
import { copyToClipboard } from '$lib/utils'
import { faClipboard } from '@fortawesome/free-solid-svg-icons'
import { Highlight } from 'svelte-highlight'
import json from 'svelte-highlight/languages/json'
import { Button } from '../../common'
import type { App } from '../types'
import { Clipboard } from 'lucide-svelte'
let jsonViewerDrawer: Drawer
@@ -28,7 +28,7 @@
color="dark"
variant="border"
size="sm"
startIcon={{ icon: faClipboard }}
startIcon={{ icon: Clipboard }}
btnClasses="absolute top-2 right-2 w-min"
>
Copy content
frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
+3 -4
View File
@@ -2,14 +2,13 @@
import { Badge, Button } from '$lib/components/common'
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
import { faSave } from '@fortawesome/free-solid-svg-icons'
import JsonEditor from './settingsPanel/inputEditor/JsonEditor.svelte'
import { AppService, DraftService } from '$lib/gen'
import { sendUserToast } from '$lib/toast'
import { workspaceStore } from '$lib/stores'
import { createEventDispatcher } from 'svelte'
import { Loader2 } from 'lucide-svelte'
import { Loader2, Save } from 'lucide-svelte'
let jsonViewerDrawer: Drawer
@@ -80,9 +79,9 @@
{/if}
<svelte:fragment slot="actions">
<Button on:click={saveDraft} startIcon={{ icon: faSave }}>Save as draft</Button>
<Button on:click={saveDraft} startIcon={{ icon: Save }}>Save as draft</Button>
<Button on:click={saveApp} startIcon={{ icon: faSave }}>Deploy</Button>
<Button on:click={saveApp} startIcon={{ icon: Save }}>Deploy</Button>
</svelte:fragment>
</DrawerContent>
</Drawer>
frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
+2 -4
View File
@@ -95,11 +95,9 @@
css: theme
}
}}
startIcon={{ icon: GitBranch }}
>
<div class="flex flex-row gap-2 items-center">
<GitBranch size={16} />
Fork theme to edit
</div>
Fork theme to edit
</Button>
</div>
</ThemeCodePreview>
frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
+2 -4
View File
@@ -120,11 +120,9 @@
previewTheme.set(undefined)
previewThemePath = undefined
}}
startIcon={{ icon: EyeOff }}
>
<div class="flex flex-row gap-1 items-center">
<EyeOff size={16} />
Clear preview
</div>
Clear preview
</Button>
{/if}
</div>
frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
+9 -10
View File
@@ -148,19 +148,18 @@
{/if}
{#if type === 'inlined'}
<Button color="light" size="xs" on:click={() => toggleUpdate(row)}>
<div class="flex flex-row gap-1 items-center">
<Save size={16} />
Update
</div>
<Button
color="light"
size="xs"
on:click={() => toggleUpdate(row)}
startIcon={{ icon: Save }}
>
Update
</Button>
{/if}
{#if $app?.theme?.type !== 'path' || $app.theme.path !== row.path}
<Button color="light" size="xs" on:click={preview}>
<div class="flex flex-row gap-1 items-center">
<Eye size={16} />
Preview
</div>
<Button color="light" size="xs" on:click={preview} startIcon={{ icon: Eye }}>
Preview
</Button>
<Button color="dark" size="xs2" on:click={apply}>Apply</Button>
{/if}
frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+2 -3
View File
@@ -10,8 +10,7 @@
import { emptySchema } from '$lib/utils'
import { getScriptByPath } from '$lib/scripts'
import { faCodeBranch } from '@fortawesome/free-solid-svg-icons'
import { Building, Globe2 } from 'lucide-svelte'
import { Building, GitFork, Globe2 } from 'lucide-svelte'
import { createEventDispatcher, getContext } from 'svelte'
import { fly } from 'svelte/transition'
import type { AppViewerContext } from '../../types'
@@ -172,7 +171,7 @@
size="xs"
variant="border"
color="blue"
startIcon={{ icon: faCodeBranch }}
startIcon={{ icon: GitFork }}
btnClasses="truncate"
>
Fork a script
frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
+2 -2
View File
@@ -2,8 +2,8 @@
import { Button, Drawer, DrawerContent } from '$lib/components/common'
import type Editor from '$lib/components/Editor.svelte'
import ScriptEditor from '$lib/components/ScriptEditor.svelte'
import { faSave } from '@fortawesome/free-solid-svg-icons'
import type { InlineScript } from '../../types'
import { Save } from 'lucide-svelte'
let scriptEditorDrawer: Drawer
export let inlineScript: InlineScript
@@ -37,7 +37,7 @@
/>
{/if}
<svelte:fragment slot="actions">
<Button startIcon={{ icon: faSave }} disabled>Automatically Saved</Button>
<Button startIcon={{ icon: Save }} disabled>Automatically Saved</Button>
</svelte:fragment>
</DrawerContent>
</Drawer>
frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
+9 -16
View File
@@ -11,14 +11,6 @@
StaticAppInput,
UserAppInput
} from '../../inputType'
import {
faCodeBranch,
faExternalLinkAlt,
faEye,
faPen,
faRefresh,
faTrashAlt
} from '@fortawesome/free-solid-svg-icons'
import type { AppViewerContext } from '../../types'
import { workspaceStore } from '$lib/stores'
import { createEventDispatcher } from 'svelte'
@@ -29,6 +21,7 @@
import { getScriptByPath } from '$lib/scripts'
import { sendUserToast } from '$lib/toast'
import { autoPlacement } from '@floating-ui/core'
import { ExternalLink, Eye, GitFork, Pen, RefreshCw, Trash } from 'lucide-svelte'
export let runnable: RunnableByPath
export let fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
@@ -115,7 +108,7 @@
<Button
variant="border"
size="xs"
startIcon={{ icon: faRefresh }}
startIcon={{ icon: RefreshCw }}
on:click={async () => {
sendUserToast('Refreshing inputs')
refresh(runnable)
@@ -129,7 +122,7 @@
size="xs"
variant="border"
color="red"
startIcon={{ icon: faTrashAlt }}
startIcon={{ icon: Trash }}
on:click={() => {
dispatch('delete')
}}
@@ -140,7 +133,7 @@
<Button
variant="border"
size="xs"
startIcon={{ icon: faEye }}
startIcon={{ icon: Eye }}
on:click={() => {
flowPath = runnable.path
drawerFlowViewer.openDrawer()
@@ -151,16 +144,16 @@
<Button
variant="border"
size="xs"
startIcon={{ icon: faPen }}
endIcon={{ icon: faExternalLinkAlt }}
startIcon={{ icon: Pen }}
endIcon={{ icon: ExternalLink }}
target="_blank"
href="/flows/edit/{runnable.path}?nodraft=true">Edit</Button
>
<Button
variant="border"
size="xs"
startIcon={{ icon: faEye }}
endIcon={{ icon: faExternalLinkAlt }}
startIcon={{ icon: Eye }}
endIcon={{ icon: ExternalLink }}
target="_blank"
href="/flows/get/{runnable.path}?workspace={$workspaceStore}"
>
@@ -170,7 +163,7 @@
<Button
size="xs"
variant="border"
startIcon={{ icon: faCodeBranch }}
startIcon={{ icon: GitFork }}
on:click={() => {
fork(runnable.path)
}}
frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+2 -3
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { Button } from '$lib/components/common'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { GripVertical, X } from 'lucide-svelte'
import { GripVertical, Plus, X } from 'lucide-svelte'
import { createEventDispatcher } from 'svelte'
import type { InputType, StaticInput, StaticOptions } from '../../inputType'
import SubTypeEditor from './SubTypeEditor.svelte'
@@ -219,7 +218,7 @@
{/each}
</section>
{/if}
<Button size="xs" color="light" startIcon={{ icon: faPlus }} on:click={() => addElementByType()}>
<Button size="xs" color="light" startIcon={{ icon: Plus }} on:click={() => addElementByType()}>
Add
</Button>
frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
+6 -12
View File
@@ -187,11 +187,9 @@
component.customCss[cssKey].style = ''
}
}}
endIcon={{ icon: MoveRight }}
>
<div class="flex flex-row gap-2 items-center">
Migrate
<MoveRight size={16} />
</div>
Migrate
</Button>
</div>
<div class="border p-2 rounded-md">
@@ -240,11 +238,9 @@
$app.css[type][cssKey].style = ''
}
}}
endIcon={{ icon: MoveRight }}
>
<div class="flex flex-row gap-2 items-center">
Migrate
<MoveRight size={16} />
</div>
Migrate
</Button>
</div>
<div class="border p-2 rounded-md">
@@ -289,11 +285,9 @@
migrationModalOpen = false
}}
disabled={migrations.size === 0}
endIcon={{ icon: MoveRight }}
>
<div class="flex flex-row gap-2 items-center">
Apply migration
<MoveRight size={16} />
</div>
Apply migration
</Button>
</div>
</div>
frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+3 -4
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import Button from '$lib/components/common/button/Button.svelte'
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'
import { getContext } from 'svelte'
import type { AppEditorContext, AppViewerContext, GridItem, RichConfiguration } from '../../types'
import PanelSection from './common/PanelSection.svelte'
@@ -25,7 +24,7 @@
import { push } from '$lib/history'
import Kbd from '$lib/components/common/kbd/Kbd.svelte'
import StylePanel from './StylePanel.svelte'
import { Delete, ExternalLink } from 'lucide-svelte'
import { ChevronLeft, Delete, ExternalLink } from 'lucide-svelte'
import GridCondition from './GridCondition.svelte'
import { isTriggerable } from './script/utils'
import { inferDeps } from '../appUtilsInfer'
@@ -184,7 +183,7 @@
</a>
</div>
<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
<div class="flex min-h-[calc(100%-32px)] flex-col min-w-[150px] w-full divide-y">
<ComponentPanelDataSource bind:component={componentSettings.item.data}>
{#if component.componentInput}
<PanelSection
@@ -376,7 +375,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faChevronLeft }}
startIcon={{ icon: ChevronLeft }}
on:click={() => secondaryMenuLeft.toggle(StylePanel, {})}
>
Show
frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
+2 -3
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import type { AppInputSpec } from '../../inputType'
import Button from '$lib/components/common/button/Button.svelte'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import PanelSection from './common/PanelSection.svelte'
import { dndzone } from 'svelte-dnd-action'
import { GripVertical, X } from 'lucide-svelte'
import { GripVertical, Plus, X } from 'lucide-svelte'
import InputsSpecEditor from './InputsSpecEditor.svelte'
import { generateRandomString } from '$lib/utils'
import Alert from '$lib/components/common/alert/Alert.svelte'
@@ -209,7 +208,7 @@
size="xs"
color="light"
variant="border"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={addCondition}
iconOnly
/>
frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte
+2 -2
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import Button from '$lib/components/common/button/Button.svelte'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import type { GridItem, RichConfigurations } from '../../types'
import PanelSection from './common/PanelSection.svelte'
import Toggle from '$lib/components/Toggle.svelte'
import InputsSpecsEditor from './InputsSpecsEditor.svelte'
import GroupManagementDrawer from '../componentsPanel/GroupManagementDrawer.svelte'
import { Plus } from 'lucide-svelte'
export let groupFields: RichConfigurations | undefined
export let item: GridItem
@@ -105,7 +105,7 @@
size="sm"
color="light"
variant="border"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={() => addField(fieldName)}
iconOnly
/>
frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
+3 -3
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import Button from '$lib/components/common/button/Button.svelte'
import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
import { getContext } from 'svelte'
import type { AppViewerContext } from '../../types'
import { deleteGridItem } from '../appUtils'
import type { AppComponent } from '../component'
import PanelSection from './common/PanelSection.svelte'
import { Plus, Trash } from 'lucide-svelte'
export let panes: number[]
export let component: AppComponent
@@ -65,7 +65,7 @@
}}
iconOnly
btnClasses="!text-red-500"
startIcon={{ icon: faTrashAlt }}
startIcon={{ icon: Trash }}
/>
</div>
</div>
@@ -74,7 +74,7 @@
size="xs"
color="light"
variant="border"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={addTab}
iconOnly
/>
frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+2 -3
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import Button from '$lib/components/common/button/Button.svelte'
import CloseButton from '$lib/components/common/CloseButton.svelte'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { getContext, tick } from 'svelte'
import type { AppViewerContext, RichConfiguration } from '../../types'
import { deleteGridItem } from '../appUtils'
@@ -9,7 +8,7 @@
import PanelSection from './common/PanelSection.svelte'
import { dndzone } from 'svelte-dnd-action'
import { generateRandomString } from '$lib/utils'
import { GripVertical } from 'lucide-svelte'
import { GripVertical, Plus } from 'lucide-svelte'
import GridTabDisabled from './GridTabDisabled.svelte'
export let tabs: string[] = []
@@ -204,7 +203,7 @@
size="xs"
color="light"
variant="border"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
on:click={addTab}
iconOnly
/>
frontend/src/lib/components/apps/editor/settingsPanel/PickFlow.svelte
-43
View File
@@ -1,43 +0,0 @@
<script lang="ts">
import ItemPicker from '$lib/components/ItemPicker.svelte'
import { FlowService } from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { createEventDispatcher } from 'svelte'
import Button from '$lib/components/common/button/Button.svelte'
import { Icon } from 'svelte-awesome'
import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons'
type Item = { summary: String; path: String; version?: String }
let itemPicker: ItemPicker
const dispatch = createEventDispatcher()
async function loadItems(): Promise<Item[]> {
return await FlowService.listFlows({ workspace: $workspaceStore! })
}
</script>
<ItemPicker
bind:this={itemPicker}
pickCallback={(path, summary) => {
dispatch('pick', { path, summary })
}}
itemName="Flow"
extraField="summary"
{loadItems}
/>
<Button
on:click={() => itemPicker.openDrawer()}
btnClasses="w-24 truncate"
size="sm"
spacingSize="md"
variant="border"
color="light"
>
<div class="flex justify-center flex-col items-center gap-2">
<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
<span class="text-xs">Flow</span>
</div>
</Button>
frontend/src/lib/components/apps/editor/settingsPanel/PickInlineScript.svelte
-43
View File
@@ -1,43 +0,0 @@
<script lang="ts">
import ItemPicker from '$lib/components/ItemPicker.svelte'
import { createEventDispatcher } from 'svelte'
import Button from '$lib/components/common/button/Button.svelte'
import { MousePointerClick } from 'lucide-svelte'
export let scripts: Item[]
type Item = { summary: string }
let itemPicker: ItemPicker
const dispatch = createEventDispatcher()
async function loadItems(): Promise<Item[]> {
return scripts
}
</script>
<ItemPicker
bind:this={itemPicker}
pickCallback={(path, summary) => {
dispatch('pick', { path, summary })
}}
itemName={'Script'}
extraField="summary"
noItemMessage={`There are no inline scripts.<br>
Click '<span class="font-semibold">Add script</span>' on the left panel to create one.`}
{loadItems}
/>
<Button
on:click={() => itemPicker?.openDrawer()}
btnClasses="w-24 truncate"
size="sm"
spacingSize="md"
variant="border"
color="light"
>
<div class="flex justify-center flex-col items-center gap-2">
<MousePointerClick size={18} />
<span class="text-xs">Pick</span>
</div>
</Button>
frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
+8 -5
View File
@@ -53,11 +53,14 @@
<div class="flex flex-row gap-2 items-center flex-wrap">
{#each remainingColumns as column}
<Button on:click={() => dispatch('add', column)} size="xs2" color="light" variant="border">
<div class="flex flex-row gap-2 items-center">
<Plus size="12" />
{column}
</div>
<Button
on:click={() => dispatch('add', column)}
size="xs2"
color="light"
variant="border"
startIcon={{ icon: Plus }}
>
{column}
</Button>
{/each}
</div>
frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+8 -6
View File
@@ -3,14 +3,12 @@
import Button from '$lib/components/common/button/Button.svelte'
import { getNextId } from '$lib/components/flows/idUtils'
import { classNames } from '$lib/utils'
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
import { getContext } from 'svelte'
import { Icon } from 'svelte-awesome'
import type { AppViewerContext, BaseAppComponent } from '../../types'
import { appComponentFromType } from '../appUtils'
import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component'
import PanelSection from './common/PanelSection.svelte'
import { Inspect, List, ToggleRightIcon } from 'lucide-svelte'
import { Inspect, List, ToggleRightIcon, Trash } from 'lucide-svelte'
export let components: (BaseAppComponent &
(ButtonComponent | CheckboxComponent | SelectComponent))[]
@@ -71,9 +69,13 @@
{/if}
</div>
<div>
<Button variant="border" color="red" on:click={() => deleteComponent(component.id)}>
<Icon class="h-3" data={faTrashAlt} />
</Button>
<Button
variant="border"
color="red"
on:click={() => deleteComponent(component.id)}
startIcon={{ icon: Trash }}
iconOnly
/>
</div>
</div>
{/each}
frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
+4 -7
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import type { AppViewerContext } from '../../../types'
import { Badge, Button } from '$lib/components/common'
import { faClose } from '@fortawesome/free-solid-svg-icons'
import { getContext } from 'svelte'
import type { ConnectedAppInput, InputConnection } from '../../../inputType'
import { Plug } from 'lucide-svelte'
import { Plug, UserX } from 'lucide-svelte'
export let componentInput: ConnectedAppInput
@@ -27,7 +26,7 @@
<Button
size="xs"
startIcon={{ icon: faClose }}
startIcon={{ icon: UserX }}
color="red"
variant="border"
on:click={() => {
@@ -52,10 +51,8 @@
}
}
}}
endIcon={{ icon: Plug }}
>
<div class="flex flex-row gap-1 items-center">
<span>Connect</span>
<Plug size={14} />
</div>
Connect
</Button>
{/if}
frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+3 -4
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import { faMousePointer, faPlus } from '@fortawesome/free-solid-svg-icons'
import { Button, Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
import PickHubScript from '$lib/components/flows/pickers/PickHubScript.svelte'
import { Building, Globe2 } from 'lucide-svelte'
import { Building, Globe2, MousePointer, Plus } from 'lucide-svelte'
import InlineScriptList from './InlineScriptList.svelte'
import type { Runnable, StaticAppInput } from '$lib/components/apps/inputType'
import WorkspaceScriptList from './WorkspaceScriptList.svelte'
@@ -194,7 +193,7 @@
size="xs"
color="light"
variant="border"
startIcon={{ icon: faPlus }}
startIcon={{ icon: Plus }}
btnClasses="truncate w-full"
id="app-editor-create-inline-script"
>
@@ -206,7 +205,7 @@
size="xs"
color="blue"
variant="border"
startIcon={{ icon: faMousePointer }}
startIcon={{ icon: MousePointer }}
btnClasses="truncate w-full"
>
{#if onlyFlow}Select a flow{:else}Select a script or flow{/if}
frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
+2 -4
View File
@@ -145,11 +145,9 @@
onConnect: applyConnection
}
}}
startIcon={{ icon: Plus }}
>
<div class="flex flex-row gap-1 items-center">
<Plus size={14} />
Add dependency
</div>
Add dependency
</Button>
</div>
{#if (inlineScript?.suggestedRefreshOn ?? []).length > 0}
frontend/src/lib/components/auditLogs/AuditLogDetails.svelte
+4 -8
View File
@@ -49,11 +49,9 @@
variant="contained"
size="xs"
target="_blank"
endIcon={{ icon: ArrowRight }}
>
<div class="flex flex-row gap-1 items-center">
View flow
<ArrowRight size={14} />
</div>
View flow
</Button>
{/if}
{#if [AuditLog.operation.APPS_UPDATE, AuditLog.operation.APPS_CREATE].includes(log.operation)}
@@ -63,11 +61,9 @@
variant="contained"
size="xs"
target="_blank"
endIcon={{ icon: ArrowRight }}
>
<div class="flex flex-row gap-1 items-center">
View app
<ArrowRight size={14} />
</div>
View app
</Button>
{/if}
{/if}
frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
+2 -5
View File
@@ -8,11 +8,8 @@
containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
>
<svelte:fragment slot="button">
<Button color="dark" size="xs" nonCaptureEvent={true}>
<div class="flex flex-row gap-1 items-center">
<Filter size={16} />
Filters
</div>
<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
Filters
</Button>
</svelte:fragment>
<div class="flex flex-col w-80">
frontend/src/lib/components/auditLogs/AuditLogsChart.svelte
-113
View File
@@ -1,113 +0,0 @@
<script lang="ts">
import { Bar } from 'svelte-chartjs'
import 'chartjs-adapter-date-fns'
import zoomPlugin from 'chartjs-plugin-zoom'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
CategoryScale,
LinearScale,
PointElement,
TimeScale,
LogarithmicScale,
BarElement
} from 'chart.js'
import type { AuditLog } from '$lib/gen'
export let logs: AuditLog[] | undefined = []
$: groupedLogs =
logs?.reverse().reduce((acc, log) => {
const date = new Date(log.timestamp)
const dateKey = date.toLocaleDateString()
if (!acc[dateKey]) {
acc[dateKey] = []
}
acc[dateKey].push(log)
return acc
}, {} as Record<string, AuditLog[]>) ?? {}
$: barOptions = {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 0
},
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: false,
stacked: true
},
y: {
display: false,
stacked: true
}
},
barThickness: 6,
barPercentage: 0.4
}
ChartJS.register(
Title,
Tooltip,
Legend,
zoomPlugin,
LineElement,
CategoryScale,
LinearScale,
LogarithmicScale,
PointElement,
TimeScale,
BarElement
)
$: data = {
labels: Object.keys(groupedLogs),
datasets: [
{
label: '% of executions',
data: Object.values(groupedLogs).map(
(logs) => logs.filter((log) => log.action_kind === 'Execute').length
),
backgroundColor: ['#60a5fa'],
borderWidth: 0
},
{
label: '% of creation',
data: Object.values(groupedLogs).map(
// @ts-ignore
(logs) => logs.filter((log) => log.action_kind === 'Create').length
),
backgroundColor: ['#4ade80'],
borderWidth: 0
},
{
label: '% of updates',
data: Object.values(groupedLogs).map(
// @ts-ignore
(logs) => logs.filter((log) => log.action_kind === 'Update').length
),
backgroundColor: ['#facc15'],
borderWidth: 0
},
{
label: '% of deletions',
data: Object.values(groupedLogs).map(
(logs) => logs.filter((log) => log.action_kind === 'Delete').length
),
backgroundColor: ['#f87171'],
borderWidth: 0
}
]
}
</script>
<Bar {data} options={barOptions} />
frontend/src/lib/components/common/CloseButton.svelte
+13 -10
View File
@@ -1,18 +1,21 @@
<script>
import { faClose } from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import { Icon } from 'svelte-awesome'
import Button from './button/Button.svelte'
import { X } from 'lucide-svelte'
import { twMerge } from 'tailwind-merge'
export let noBg = false
const dispatch = createEventDispatcher()
</script>
<button
<Button
on:click={() => dispatch('close')}
class="hover:bg-surface-hover {noBg
? ''
: 'bg-surface-secondary'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
>
<Icon data={faClose} class="text-secondary" />
</button>
startIcon={{ icon: X }}
iconOnly
size="sm"
color="light"
btnClasses={twMerge(
'hover:bg-surface-hover w-8 h-8 rounded-full p-0',
noBg ? '' : 'bg-surface-secondary'
)}
/>
frontend/src/lib/components/common/alert/Alert.svelte
+7 -13
View File
@@ -1,14 +1,8 @@
<script lang="ts">
import { classNames } from '$lib/utils'
import {
faCheckCircle,
faInfoCircle,
faWarning,
type IconDefinition
} from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import type { AlertType } from './model'
import Tooltip from '$lib/components/Tooltip.svelte'
import { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-svelte'
export let type: AlertType = 'info'
export let title: string
@@ -18,11 +12,11 @@
export let size: 'xs' | 'sm' = 'sm'
const icons: Record<AlertType, IconDefinition> = {
info: faInfoCircle,
warning: faWarning,
error: faWarning,
success: faCheckCircle
const icons: Record<AlertType, any> = {
info: Info,
warning: AlertCircle,
error: AlertTriangle,
success: CheckCircle2
}
const classes: Record<AlertType, Record<string, string>> = {
@@ -63,7 +57,7 @@
>
<div class="flex">
<div class="flex h-8 w-8 items-center justify-center rounded-full">
<Icon data={icons[type]} class={classes[type].iconClass} />
<svelte:component this={icons[type]} class={classes[type].iconClass} size={16} />
</div>
<div class="ml-2 w-full">
frontend/src/lib/components/common/badge/Badge.svelte
+9 -13
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import { classNames } from '$lib/utils'
import { faClose } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import { type BadgeColor, type BadgeIconProps, ColorModifier } from './model'
import { X } from 'lucide-svelte'
export let color: BadgeColor = 'gray'
export let large = false
@@ -15,11 +14,6 @@
export let capitalize = false
export let icon: BadgeIconProps | undefined = undefined
let defaulIconProps = {
position: 'left',
scale: 0.7
}
let hidden = false
const colors: Record<BadgeColor, string> = {
gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
@@ -51,9 +45,9 @@
href &&
(color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]),
rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5',
'flex flex-row gap-1 items-center',
$$props.class
)
$: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined }
const handleHide = () => (hidden = !hidden)
</script>
@@ -71,15 +65,17 @@
class:hidden
class:capitalize
>
{#if iconProps.data && iconProps.position === 'left'}
<Icon {...iconProps} />
{#if icon?.icon && icon.position === 'left'}
<svelte:component this={icon.icon} size={14} />
{/if}
<slot />
{#if iconProps.data && iconProps.position === 'right'}
<Icon {...iconProps} />
{#if icon?.icon && icon.position === 'right'}
<svelte:component this={icon.icon} size={14} />
{/if}
{#if dismissable}
<Icon data={faClose} on:click={handleHide} class={classNames('mx-0.5')} />
<button on:click={handleHide}>
<X size={10} />
</button>
{/if}
</svelte:element>
</span>
frontend/src/lib/components/common/badge/model.ts
+2 -3
View File
@@ -1,9 +1,8 @@
import type { IconProps } from 'svelte-awesome/components/Icon.svelte'
type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo'
export const ColorModifier = 'dark-'
export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`
export interface BadgeIconProps extends IconProps {
export interface BadgeIconProps {
position?: 'left' | 'right'
icon: any
}
frontend/src/lib/components/common/button/Button.svelte
+24 -18
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import Icon from 'svelte-awesome'
import { ButtonType } from './model'
import { Loader2 } from 'lucide-svelte'
import { twMerge } from 'tailwind-merge'
@@ -19,8 +18,7 @@
export let href: string | undefined = undefined
export let target: '_self' | '_blank' | undefined = undefined
export let iconOnly: boolean = false
export let startIcon: ButtonType.Icon | undefined = undefined
export let endIcon: ButtonType.Icon | undefined = undefined
export let element: ButtonType.Element | undefined = undefined
export let id: string = ''
export let nonCaptureEvent: boolean = false
@@ -30,6 +28,9 @@
export let style: string = ''
export let download: string | undefined = undefined
export let startIcon: ButtonType.Icon | undefined = undefined
export let endIcon: ButtonType.Icon | undefined = undefined
type MenuItem = {
label: string
onClick?: () => void
@@ -108,10 +109,6 @@
}
}
$: isSmall = size === 'xs' || size === 'sm'
$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes)
$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes)
$: buttonClass = twMerge(
'w-full',
colorVariants?.[color]?.[variant],
@@ -120,10 +117,19 @@
ButtonType.SpacingClasses[spacingSize][variant],
'focus:ring-2 font-semibold',
dropdownItems ? 'rounded-l-md h-full' : 'rounded-md',
'justify-center items-center text-center whitespace-nowrap inline-flex',
'justify-center items-center text-center whitespace-nowrap inline-flex gap-2',
btnClasses,
'transition-all '
'transition-all'
)
const iconMap = {
xs: 14,
sm: 16,
md: 16,
lg: 18
}
$: lucideIconSize = iconMap[size] ?? 12
</script>
<div
@@ -158,15 +164,15 @@
>
{#if loading}
<Loader2 class="animate-spin mr-1" size={14} />
{:else if startIcon}
<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
{:else if startIcon?.icon}
<svelte:component this={startIcon.icon} class={startIcon.classes} size={lucideIconSize} />
{/if}
{#if !iconOnly}
<slot />
{/if}
{#if endIcon}
<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
{#if endIcon?.icon}
<svelte:component this={endIcon.icon} class={endIcon.classes} size={lucideIconSize} />
{/if}
</a>
{:else}
@@ -189,15 +195,15 @@
>
{#if loading}
<Loader2 class="animate-spin mr-1" size={14} />
{:else if startIcon}
<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
{:else if startIcon?.icon}
<svelte:component this={startIcon.icon} class={startIcon.classes} size={lucideIconSize} />
{/if}
{#if !iconOnly}
<slot />
{/if}
{#if endIcon}
<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
{#if endIcon?.icon}
<svelte:component this={endIcon.icon} class={endIcon.classes} size={lucideIconSize} />
{/if}
</button>
{/if}
@@ -216,7 +222,7 @@
)}
>
{#if item.icon}
<svelte:component this={item.icon} class="w-4 h-4" />
<svelte:component this={item.icon} class="w-4 h-4" size={lucideIconSize} />
{/if}
{item.label}
</div>
frontend/src/lib/components/common/button/model.ts
+2 -1
View File
@@ -7,8 +7,9 @@ export namespace ButtonType {
export type Target = '_self' | '_blank'
export type Element = HTMLButtonElement | HTMLAnchorElement
export interface Icon {
icon: any
icon?: any | undefined
classes?: string
faIcon?: any | undefined
}
export const FontSizeClasses: Record<ButtonType.Size, string> = {
frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+2 -3
View File
@@ -1,11 +1,10 @@
<script lang="ts">
import { classNames } from '$lib/utils'
import { faWarning } from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import Icon from 'svelte-awesome'
import { fade } from 'svelte/transition'
import Button from '../button/Button.svelte'
import Badge from '../badge/Badge.svelte'
import { AlertTriangle } from 'lucide-svelte'
export let title: string
export let confirmationText: string
@@ -62,7 +61,7 @@
<div
class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-800/50"
>
<Icon data={faWarning} class="text-red-500 dark:text-red-400" />
<AlertTriangle class="text-red-500 dark:text-red-400" />
</div>
<div class="ml-4 text-left flex-1">
<h3 class="text-lg font-medium text-primary">
frontend/src/lib/components/common/fileInput/FileInput.svelte
+2 -3
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import { FileUp } from 'lucide-svelte'
import { FileUp, Trash } from 'lucide-svelte'
import Button from '../../common/button/Button.svelte'
import { faTrash } from '@fortawesome/free-solid-svg-icons'
import { twMerge } from 'tailwind-merge'
import type { ReadFileAs } from './model'
@@ -126,7 +125,7 @@
variant="border"
iconOnly
btnClasses="bg-transparent"
startIcon={{ icon: faTrash }}
startIcon={{ icon: Trash }}
on:click={() => removeFile(i)}
/>
</li>
frontend/src/lib/components/common/menu/MenuV2.svelte
+2
View File
@@ -4,6 +4,7 @@
import { offset, flip, shift } from 'svelte-floating-ui/dom'
import { createFloatingActions } from 'svelte-floating-ui'
import { twMerge } from 'tailwind-merge'
import ResolveOpen from './ResolveOpen.svelte'
export let placement: any = 'bottom-start'
export let justifyEnd: boolean = false
@@ -16,6 +17,7 @@
</script>
<Menu let:open as="div" class="relative hover:z-50 flex w-full h-8">
<ResolveOpen {open} on:open on:close />
<div use:floatingRef class="w-full">
<MenuButton class={twMerge('w-full', justifyEnd ? 'flex justify-end' : '')}>
<slot name="trigger" />
frontend/src/lib/components/common/menu/MenuWrapper.svelte
-51
View File
@@ -1,51 +0,0 @@
<script lang="ts">
import { Menu, Transition, MenuItems, MenuButton } from '@rgossiaux/svelte-headlessui'
import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
import Portal from 'svelte-portal'
const [popperRef, popperContent] = createPopperActions({ placement: 'auto' })
const popperOptions: PopperOptions<{}> = {
placement: 'right-end',
strategy: 'fixed',
modifiers: [
{ name: 'offset', options: { offset: [-100, 125] } },
{
name: 'arrow',
options: {
padding: 10
}
}
]
}
</script>
<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
<span use:popperRef>
<MenuButton class="w-full">
<slot />
</MenuButton>
</span>
<Portal>
<div use:popperContent={popperOptions} class="z-[6000]">
<Transition
show={open}
enter="transition ease-out duration-[25ms]"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-[25ms]"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<MenuItems
class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-surface shadow-md focus:outline-none"
>
<div class="my-1">
<slot name="items" />
</div>
</MenuItems>
</Transition>
</div>
</Portal>
</Menu>
frontend/src/lib/components/common/menu/ResolveOpen.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
export let open: boolean = false
$: {
if (open) {
dispatch('open')
} else {
dispatch('close')
}
}
</script>
frontend/src/lib/components/common/table/AppRow.svelte
+33 -30
View File
@@ -1,25 +1,28 @@
<script lang="ts">
import Dropdown from '$lib/components/Dropdown.svelte'
import Dropdown from '$lib/components/DropdownV2.svelte'
import type MoveDrawer from '$lib/components/MoveDrawer.svelte'
import SharedBadge from '$lib/components/SharedBadge.svelte'
import type ShareModal from '$lib/components/ShareModal.svelte'
import { AppService, AppWithLastVersion, DraftService, type ListableApp } from '$lib/gen'
import { userStore, workspaceStore } from '$lib/stores'
import {
faCodeFork,
faEdit,
faExternalLink,
faFileExport,
faHistory,
faShare,
faTrashAlt
} from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import Button from '../button/Button.svelte'
import Row from './Row.svelte'
import DraftBadge from '$lib/components/DraftBadge.svelte'
import Badge from '../badge/Badge.svelte'
import { Eye } from 'lucide-svelte'
import {
ExternalLink,
Eye,
File,
FileJson,
FileUp,
GitFork,
Globe,
History,
Pen,
Share,
Trash
} from 'lucide-svelte'
import { goto } from '$app/navigation'
import { page } from '$app/stores'
import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
@@ -106,7 +109,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faEdit }}
startIcon={{ icon: Pen }}
href="/apps/edit/{path}?nodraft=true"
>
Edit
@@ -118,7 +121,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faCodeFork }}
startIcon={{ icon: GitFork }}
href="/apps/add?template={path}"
>
Fork
@@ -128,14 +131,15 @@
{/if}
</span>
<Dropdown
placement="bottom-end"
dropdownItems={() => {
items={() => {
if (draft_only) {
return [
{
displayName: 'Delete',
icon: faTrashAlt,
icon: Trash,
action: async (event) => {
// TODO
// @ts-ignore
if (event?.shiftKey) {
await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
dispatch('change')
@@ -151,7 +155,7 @@
},
{
displayName: 'View/Edit JSON',
icon: faFileExport,
icon: File,
action: () => {
loadAppJson()
}
@@ -161,12 +165,12 @@
return [
{
displayName: 'Duplicate/Fork',
icon: faCodeFork,
icon: GitFork,
href: `/apps/add?template=${path}`
},
{
displayName: 'Move/Rename',
icon: faFileExport,
icon: FileUp,
action: () => {
moveDrawer.openDrawer(path, summary, 'app')
},
@@ -174,26 +178,26 @@
},
{
displayName: 'Deploy to staging/prod',
icon: faFileExport,
icon: Globe,
action: () => {
deploymentDrawer.openDrawer(path, 'app')
}
},
{
displayName: 'View/Edit JSON',
icon: faFileExport,
icon: FileJson,
action: () => {
loadAppJson()
}
},
{
displayName: 'Deployments',
icon: faHistory,
icon: History,
action: () => loadDeployements()
},
{
displayName: canWrite ? 'Share' : 'See Permissions',
icon: faShare,
icon: Share,
action: () => {
shareModal.openDrawer && shareModal.openDrawer(path, 'app')
}
@@ -202,7 +206,7 @@
? [
{
displayName: 'Go to public page',
icon: faExternalLink,
icon: ExternalLink,
action: async () => {
let secretUrl = await AppService.getPublicSecretOfApp({
workspace: $workspaceStore ?? '',
@@ -221,7 +225,7 @@
? [
{
displayName: 'Delete Draft',
icon: faTrashAlt,
icon: Trash,
action: async () => {
await DraftService.deleteDraft({
workspace: $workspaceStore ?? '',
@@ -237,8 +241,10 @@
: []),
{
displayName: 'Delete',
icon: faTrashAlt,
icon: Trash,
action: async (event) => {
// TODO
// @ts-ignore
if (event?.shiftKey) {
await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
dispatch('change')
@@ -254,12 +260,9 @@
}
]
}}
on:dropdownOpen={() => {
on:open={() => {
menuOpen = true
}}
on:dropdownClose={() => {
menuOpen = false
}}
/>
</svelte:fragment>
</Row>
frontend/src/lib/components/common/table/FlowRow.svelte
+32 -32
View File
@@ -1,23 +1,12 @@
<script lang="ts">
import { goto } from '$app/navigation'
import Dropdown from '$lib/components/Dropdown.svelte'
import Dropdown from '$lib/components/DropdownV2.svelte'
import type MoveDrawer from '$lib/components/MoveDrawer.svelte'
import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
import SharedBadge from '$lib/components/SharedBadge.svelte'
import type ShareModal from '$lib/components/ShareModal.svelte'
import { FlowService, type Flow, DraftService } from '$lib/gen'
import { userStore, workspaceStore } from '$lib/stores'
import {
faArchive,
faCalendarAlt,
faCodeFork,
faCopy,
faEdit,
faFileExport,
faList,
faShare,
faTrashAlt
} from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import Badge from '../badge/Badge.svelte'
import Button from '../button/Button.svelte'
@@ -26,6 +15,18 @@
import { sendUserToast } from '$lib/toast'
import { DELETE, copyToClipboard, isOwner } from '$lib/utils'
import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
import {
Pen,
GitFork,
Trash,
List,
FileUp,
Globe,
Calendar,
Share,
Archive,
Clipboard
} from 'lucide-svelte'
export let flow: Flow & { has_draft?: boolean; draft_only?: boolean; canWrite: boolean }
export let marked: string | undefined
@@ -71,6 +72,7 @@
{#if menuOpen}
<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
{/if}
<Row
href="/flows/get/{path}?workspace={$workspaceStore}"
kind="flow"
@@ -101,7 +103,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faEdit }}
startIcon={{ icon: Pen }}
href="/flows/edit/{path}?nodraft=true"
>
Edit
@@ -113,7 +115,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faCodeFork }}
startIcon={{ icon: GitFork }}
href="/flows/add?template={path}"
>
Fork
@@ -124,15 +126,15 @@
</span>
<Dropdown
placement="bottom-end"
dropdownItems={() => {
items={() => {
let owner = isOwner(path, $userStore, $workspaceStore)
if (draft_only) {
return [
{
displayName: 'Delete',
icon: faTrashAlt,
icon: Trash,
action: (event) => {
// @ts-ignore
if (event?.shiftKey) {
deleteFlow(path)
} else {
@@ -149,17 +151,17 @@
return [
{
displayName: 'Duplicate/Fork',
icon: faCodeFork,
icon: GitFork,
href: `/flows/add?template=${path}`
},
{
displayName: 'View runs',
icon: faList,
icon: List,
href: `/runs/${path}`
},
{
displayName: 'Move/Rename',
icon: faFileExport,
icon: FileUp,
action: () => {
moveDrawer.openDrawer(path, summary, 'flow')
},
@@ -167,14 +169,14 @@
},
{
displayName: 'Copy path',
icon: faCopy,
icon: Clipboard,
action: () => {
copyToClipboard(path)
}
},
{
displayName: 'Deploy to staging/prod',
icon: faFileExport,
icon: Globe,
action: () => {
deploymentDrawer.openDrawer(path, 'flow')
},
@@ -182,22 +184,22 @@
},
{
displayName: 'Schedule',
icon: faCalendarAlt,
icon: Calendar,
action: () => {
scheduleEditor.openNew(true, path)
scheduleEditor?.openNew(true, path)
},
disabled: archived
},
{
displayName: owner ? 'Share' : 'See Permissions',
icon: faShare,
icon: Share,
action: () => {
shareModal.openDrawer && shareModal.openDrawer(path, 'flow')
}
},
{
displayName: archived ? 'Unarchive' : 'Archive',
icon: faArchive,
icon: Archive,
action: () => {
path && archiveFlow(path, !archived)
},
@@ -208,7 +210,7 @@
? [
{
displayName: 'Delete Draft',
icon: faTrashAlt,
icon: Trash,
action: async () => {
await DraftService.deleteDraft({
workspace: $workspaceStore ?? '',
@@ -224,8 +226,9 @@
: []),
{
displayName: 'Delete',
icon: faTrashAlt,
icon: Trash,
action: (event) => {
// @ts-ignore
if (event?.shiftKey) {
deleteFlow(path)
} else {
@@ -239,12 +242,9 @@
}
]
}}
on:dropdownOpen={() => {
on:open={() => {
menuOpen = true
}}
on:dropdownClose={() => {
menuOpen = false
}}
/>
</svelte:fragment>
</Row>
frontend/src/lib/components/common/table/RawAppRow.svelte
+11 -21
View File
@@ -1,11 +1,10 @@
<script lang="ts">
import Dropdown from '$lib/components/Dropdown.svelte'
import Dropdown from '$lib/components/DropdownV2.svelte'
import type MoveDrawer from '$lib/components/MoveDrawer.svelte'
import SharedBadge from '$lib/components/SharedBadge.svelte'
import type ShareModal from '$lib/components/ShareModal.svelte'
import { RawAppService, type ListableRawApp } from '$lib/gen'
import { userStore, workspaceStore } from '$lib/stores'
import { faEdit, faFileExport, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import Button from '../button/Button.svelte'
import Row from './Row.svelte'
@@ -14,6 +13,7 @@
import FileInput from '../fileInput/FileInput.svelte'
import { goto } from '$app/navigation'
import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
import { FileUp, Globe, Pen, Share, Trash } from 'lucide-svelte'
export let app: ListableRawApp & { canWrite: boolean }
export let marked: string | undefined
@@ -77,7 +77,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faEdit }}
startIcon={{ icon: Pen }}
on:click={() => updateAppDrawer?.toggleDrawer?.()}
>
Edit
@@ -87,20 +87,11 @@
{/if}
</span>
<Dropdown
placement="bottom-end"
dropdownItems={() => {
items={() => {
return [
{
displayName: 'Move/Rename',
icon: faFileExport,
action: () => {
moveDrawer.openDrawer(path, summary, 'raw_app')
},
disabled: !canWrite
},
{
displayName: 'Move/Rename',
icon: faFileExport,
icon: FileUp,
action: () => {
moveDrawer.openDrawer(path, summary, 'raw_app')
},
@@ -108,22 +99,24 @@
},
{
displayName: 'Deploy to prod/staging',
icon: faFileExport,
icon: Globe,
action: () => {
deploymentDrawer.openDrawer(path, 'raw_app')
}
},
{
displayName: canWrite ? 'Share' : 'See Permissions',
icon: faShare,
icon: Share,
action: () => {
shareModal.openDrawer && shareModal.openDrawer(path, 'raw_app')
}
},
{
displayName: 'Delete',
icon: faTrashAlt,
icon: Trash,
action: async (event) => {
// TODO
// @ts-ignore
if (event?.shiftKey) {
await RawAppService.deleteRawApp({ workspace: $workspaceStore ?? '', path })
dispatch('change')
@@ -139,12 +132,9 @@
}
]
}}
on:dropdownOpen={() => {
on:open={() => {
menuOpen = true
}}
on:dropdownClose={() => {
menuOpen = false
}}
/>
</svelte:fragment>
</Row>
frontend/src/lib/components/common/table/RowIcon.svelte
+2 -5
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import { classNames } from '$lib/utils'
import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons'
import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
import { Code2, LayoutDashboard } from 'lucide-svelte'
import Icon from 'svelte-awesome'
export let kind: 'script' | 'flow' | 'app' | 'raw_app'
export let href: string = '#'
@@ -24,9 +23,7 @@
<a {href} class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
{#if kind === 'flow'}
<span class="ml-1 mb-0.5 -mt-0.5">
<Icon data={faBarsStaggered} scale={1} class="mr-0.5 text-[#14b8a6]" />
</span>
<BarsStaggered size={20} class=" text-[#14b8a6] p-0.5" />
{:else if kind === 'app' || kind === 'raw_app'}
<LayoutDashboard size={20} color={iconColor} />
{:else if kind === 'script'}
frontend/src/lib/components/common/table/ScriptRow.svelte
+33 -34
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation'
import Dropdown from '$lib/components/Dropdown.svelte'
import Dropdown from '$lib/components/DropdownV2.svelte'
import type MoveDrawer from '$lib/components/MoveDrawer.svelte'
import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
import SharedBadge from '$lib/components/SharedBadge.svelte'
@@ -8,18 +8,7 @@
import { ScriptService, type Script, DraftService } from '$lib/gen'
import { userStore, workspaceStore } from '$lib/stores'
import {
faArchive,
faCalendarAlt,
faCode,
faCodeFork,
faCopy,
faEdit,
faFileExport,
faList,
faShare,
faTrashAlt
} from '@fortawesome/free-solid-svg-icons'
import { createEventDispatcher } from 'svelte'
import Badge from '../badge/Badge.svelte'
import Button from '../button/Button.svelte'
@@ -29,6 +18,18 @@
import { copyToClipboard, DELETE, isOwner } from '$lib/utils'
import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
import { LanguageIcon } from '../languageIcons'
import {
Archive,
Calendar,
Code,
Copy,
FileUp,
GitFork,
List,
Pen,
Share,
Trash
} from 'lucide-svelte'
export let script: Script & { canWrite: boolean }
export let marked: string | undefined
@@ -129,7 +130,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faEdit }}
startIcon={{ icon: Pen }}
href="/scripts/edit/{path}"
>
Edit
@@ -141,7 +142,7 @@
color="light"
size="xs"
variant="border"
startIcon={{ icon: faCodeFork }}
startIcon={{ icon: GitFork }}
href="/scripts/add?template={path}"
>
Fork
@@ -151,22 +152,23 @@
{/if}
</span>
<Dropdown
placement="bottom-end"
dropdownItems={() => {
items={() => {
let owner = isOwner(path, $userStore, $workspaceStore)
if (draft_only) {
return [
{
displayName: 'View code',
icon: faCode,
icon: Code,
action: () => {
showCode(script.path, script.summary)
}
},
{
displayName: 'Delete',
icon: faTrashAlt,
icon: Trash,
action: (event) => {
// TODO
// @ts-ignore
if (event?.shiftKey) {
deleteScript(path)
} else {
@@ -183,19 +185,19 @@
return [
{
displayName: 'View code',
icon: faCode,
icon: Code,
action: () => {
showCode(script.path, script.summary)
}
},
{
displayName: 'Duplicate/Fork',
icon: faCodeFork,
icon: GitFork,
href: `/scripts/add?template=${path}`
},
{
displayName: 'Move/Rename',
icon: faFileExport,
icon: FileUp,
action: () => {
moveDrawer.openDrawer(path, summary, 'script')
},
@@ -203,7 +205,7 @@
},
{
displayName: 'Deploy to staging/prod',
icon: faFileExport,
icon: FileUp,
action: () => {
deploymentDrawer.openDrawer(path, 'script')
},
@@ -211,12 +213,12 @@
},
{
displayName: 'View runs',
icon: faList,
icon: List,
href: `/runs/${path}`
},
{
displayName: 'Schedule',
icon: faCalendarAlt,
icon: Calendar,
action: () => {
scheduleEditor.openNew(false, path)
},
@@ -224,7 +226,7 @@
},
{
displayName: owner ? 'Share' : 'See Permissions',
icon: faShare,
icon: Share,
action: () => {
shareModal.openDrawer && shareModal.openDrawer(path, 'script')
},
@@ -232,14 +234,14 @@
},
{
displayName: 'Copy path',
icon: faCopy,
icon: Copy,
action: () => {
copyToClipboard(path)
}
},
{
displayName: archived ? 'Unarchive' : 'Archive',
icon: faArchive,
icon: Archive,
action: () => {
archived ? path && unarchiveScript(path) : path && archiveScript(path)
},
@@ -251,7 +253,7 @@
? [
{
displayName: 'Delete Draft',
icon: faTrashAlt,
icon: Trash,
action: async () => {
await DraftService.deleteDraft({
workspace: $workspaceStore ?? '',
@@ -269,7 +271,7 @@
? [
{
displayName: 'Delete',
icon: faTrashAlt,
icon: Trash,
action: (event) => {
if (event?.shiftKey) {
deleteScript(path)
@@ -286,12 +288,9 @@
: [])
]
}}
on:dropdownOpen={() => {
on:open={() => {
menuOpen = true
}}
on:dropdownClose={() => {
menuOpen = false
}}
/>
</svelte:fragment>
</Row>
frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte
+8 -9
View File
@@ -3,8 +3,6 @@
import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
import { getContext } from 'svelte'
import { Icon } from 'svelte-awesome'
import { faAdd, faClose, faMagicWandSparkles } from '@fortawesome/free-solid-svg-icons'
import { capitalize, classNames } from '$lib/utils'
import { APP_TO_ICON_COMPONENT } from '../icons'
import { charsToNumber, numberToChars } from '../flows/idUtils'
@@ -12,6 +10,7 @@
import Alert from '../common/alert/Alert.svelte'
import type { FlowEditorContext } from '../flows/types'
import type { FlowModule } from '$lib/gen'
import { Plus, Wand2, X } from 'lucide-svelte'
export let getHubCompletions: (text: string, idx: number, type: 'trigger' | 'script') => void
export let genFlow: (index: number, modules: FlowModule[], stepOnly?: boolean) => void
@@ -90,7 +89,7 @@
})
}}
>
<Icon data={faClose} />
<X />
</button>
{/if}
</div>
@@ -113,7 +112,7 @@
this={APP_TO_ICON_COMPONENT[copilotModule.selectedCompletion['app']]}
/>
{:else}
<Icon data={faMagicWandSparkles} />
<Wand2 />
{/if}
</div>
@@ -146,7 +145,7 @@
}
}}
>
<Icon data={faClose} />
<X />
</button>
</div>
{#if $currentStepStore !== undefined && i < charsToNumber($currentStepStore)}
@@ -188,7 +187,7 @@
<div
class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
>
<Icon data={faMagicWandSparkles} />
<Wand2 />
</div>
<div class="w-full text-left text-sm">
@@ -213,7 +212,7 @@
<div
class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
>
<Icon data={faMagicWandSparkles} />
<Wand2 />
</div>
<div class="w-full text-left text-sm">
@@ -270,7 +269,7 @@
{#if flowCopilotMode !== 'trigger'}
<div class="flex justify-start">
<Button
startIcon={{ icon: faAdd }}
startIcon={{ icon: Plus }}
size="xs"
variant="border"
on:click={() =>
@@ -297,7 +296,7 @@
? genFlow(charsToNumber($currentStepStore), $flowStore.value.modules)
: genFlow(0, $flowStore.value.modules)}
spacingSize="md"
startIcon={{ icon: faMagicWandSparkles }}
startIcon={{ icon: Wand2 }}
disabled={$modulesStore.find((m) => m.source === undefined) !== undefined}
>
{$currentStepStore !== undefined

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