sartography
/
spiffworkflow-frontend
mirror of https://github.com/sartography/spiffworkflow-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ran typescript migrate and fixed some issues w/ burnettk

This commit is contained in:
jasquat 2022-07-05 11:50:55 -04:00
parent 6353073189
commit 59d6192229
39 changed files with 1091 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
.eslintrc.js
View File

@ -11,7 +11,11 @@ module.exports = {
'plugin:jest/recommended',
'plugin:prettier/recommended',
'plugin:sonarjs/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
@ -19,15 +23,36 @@ module.exports = {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', 'sonarjs'],
plugins: ['react', 'sonarjs', '@typescript-eslint'],
rules: {
'jest/expect-expect': 'off',
'react/jsx-no-bind': 'off',
'jsx-a11y/no-autofocus': 'off',
'jsx-a11y/label-has-associated-control': 'off',
'no-console': 'off',
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
'react/jsx-filename-extension': [
1,
{ extensions: ['.js', '.jsx', '.tsx', '.ts'] },
],
'react/react-in-jsx-scope': 'off',
'no-unused-vars': ['error', { destructuredArrayIgnorePattern: '^_' }],
'react/require-default-props': 'off',
'no-unused-vars': [
'error',
{
destructuredArrayIgnorePattern: '^_',
varsIgnorePattern: '_',
argsIgnorePattern: '^_',
},
],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
},
};

4
craco.config.js
View File

@ -2,7 +2,7 @@ module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
test: /\.m?[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
@ -16,6 +16,7 @@ module.exports = {
},
],
'@babel/preset-react',
'@babel/plugin-transform-typescript',
],
},
},
@ -42,6 +43,7 @@ module.exports = {
presets: [
'@babel/preset-env',
['@babel/preset-react', { runtime: 'automatic' }],
'@babel/preset-typescript',
],
// plugins: [],
loaderOptions: (babelLoaderOptions) => {

575
package-lock.json generated
View File

@ -45,6 +45,8 @@
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"cypress": "^10.3.0",
"eslint": "^8.19.0",
"eslint_d": "^12.2.0",
@ -4643,13 +4645,13 @@
}
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.1.tgz",
"integrity": "sha512-6dM5NKT57ZduNnJfpY81Phe9nc9wolnMCnknb1im6brWi1RYv84nbMS3olJa27B6+irUVV1X/Wb+Am0FjJdGFw==",
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.5.tgz",
"integrity": "sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==",
"dependencies": {
"@typescript-eslint/scope-manager": "5.27.1",
"@typescript-eslint/type-utils": "5.27.1",
"@typescript-eslint/utils": "5.27.1",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/type-utils": "5.30.5",
"@typescript-eslint/utils": "5.30.5",
"debug": "^4.3.4",
"functional-red-black-tree": "^1.0.1",
"ignore": "^5.2.0",
@ -4674,6 +4676,119 @@
}
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
"integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
"integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==",
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/typescript-estree": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
"integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
"integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
"dependencies": {
"@types/json-schema": "^7.0.9",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/typescript-estree": "5.30.5",
"eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
"integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"eslint-visitor-keys": "^3.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/eslint-scope": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
"dependencies": {
"esrecurse": "^4.3.0",
"estraverse": "^4.1.1"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/estraverse": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
"engines": {
"node": ">=4.0"
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
@ -4707,13 +4822,13 @@
}
},
"node_modules/@typescript-eslint/parser": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.1.tgz",
"integrity": "sha512-7Va2ZOkHi5NP+AZwb5ReLgNF6nWLGTeUJfxdkVUAPPSaAdbWNnFZzLZ4EGGmmiCTg+AwlbE1KyUYTBglosSLHQ==",
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.5.tgz",
"integrity": "sha512-zj251pcPXI8GO9NDKWWmygP6+UjwWmrdf9qMW/L/uQJBM/0XbU2inxe5io/234y/RCvwpKEYjZ6c1YrXERkK4Q==",
"dependencies": {
"@typescript-eslint/scope-manager": "5.27.1",
"@typescript-eslint/types": "5.27.1",
"@typescript-eslint/typescript-estree": "5.27.1",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/typescript-estree": "5.30.5",
"debug": "^4.3.4"
},
"engines": {
@ -4732,6 +4847,90 @@
}
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
"integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
"integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==",
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
"integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
"integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"eslint-visitor-keys": "^3.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/parser/node_modules/semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@typescript-eslint/scope-manager": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz",
@ -4749,11 +4948,11 @@
}
},
"node_modules/@typescript-eslint/type-utils": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.27.1.tgz",
"integrity": "sha512-+UC1vVUWaDHRnC2cQrCJ4QtVjpjjCgjNFpg8b03nERmkHv9JV9X5M19D7UFMd+/G7T/sgFwX2pGmWK38rqyvXw==",
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.5.tgz",
"integrity": "sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==",
"dependencies": {
"@typescript-eslint/utils": "5.27.1",
"@typescript-eslint/utils": "5.30.5",
"debug": "^4.3.4",
"tsutils": "^3.21.0"
},
@ -4773,6 +4972,133 @@
}
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/scope-manager": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
"integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
"integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==",
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
"integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
"integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
"dependencies": {
"@types/json-schema": "^7.0.9",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/typescript-estree": "5.30.5",
"eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
"integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
"dependencies": {
"@typescript-eslint/types": "5.30.5",
"eslint-visitor-keys": "^3.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/eslint-scope": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
"dependencies": {
"esrecurse": "^4.3.0",
"estraverse": "^4.1.1"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/estraverse": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
"engines": {
"node": ">=4.0"
}
},
"node_modules/@typescript-eslint/type-utils/node_modules/semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@typescript-eslint/types": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.1.tgz",
@ -29112,13 +29438,13 @@
}
},
"@typescript-eslint/eslint-plugin": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.1.tgz",
"integrity": "sha512-6dM5NKT57ZduNnJfpY81Phe9nc9wolnMCnknb1im6brWi1RYv84nbMS3olJa27B6+irUVV1X/Wb+Am0FjJdGFw==",
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.5.tgz",
"integrity": "sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==",
"requires": {
"@typescript-eslint/scope-manager": "5.27.1",
"@typescript-eslint/type-utils": "5.27.1",
"@typescript-eslint/utils": "5.27.1",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/type-utils": "5.30.5",
"@typescript-eslint/utils": "5.30.5",
"debug": "^4.3.4",
"functional-red-black-tree": "^1.0.1",
"ignore": "^5.2.0",
@ -29127,6 +29453,70 @@
"tsutils": "^3.21.0"
},
"dependencies": {
"@typescript-eslint/scope-manager": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
"integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5"
}
},
"@typescript-eslint/types": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
"integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw=="
},
"@typescript-eslint/typescript-estree": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
"integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
}
},
"@typescript-eslint/utils": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
"integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
"requires": {
"@types/json-schema": "^7.0.9",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/typescript-estree": "5.30.5",
"eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0"
}
},
"@typescript-eslint/visitor-keys": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
"integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"eslint-visitor-keys": "^3.3.0"
}
},
"eslint-scope": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
"requires": {
"esrecurse": "^4.3.0",
"estraverse": "^4.1.1"
}
},
"estraverse": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
},
"semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
@ -29146,14 +29536,61 @@
}
},
"@typescript-eslint/parser": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.1.tgz",
"integrity": "sha512-7Va2ZOkHi5NP+AZwb5ReLgNF6nWLGTeUJfxdkVUAPPSaAdbWNnFZzLZ4EGGmmiCTg+AwlbE1KyUYTBglosSLHQ==",
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.5.tgz",
"integrity": "sha512-zj251pcPXI8GO9NDKWWmygP6+UjwWmrdf9qMW/L/uQJBM/0XbU2inxe5io/234y/RCvwpKEYjZ6c1YrXERkK4Q==",
"requires": {
"@typescript-eslint/scope-manager": "5.27.1",
"@typescript-eslint/types": "5.27.1",
"@typescript-eslint/typescript-estree": "5.27.1",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/typescript-estree": "5.30.5",
"debug": "^4.3.4"
},
"dependencies": {
"@typescript-eslint/scope-manager": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
"integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5"
}
},
"@typescript-eslint/types": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
"integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw=="
},
"@typescript-eslint/typescript-estree": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
"integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
}
},
"@typescript-eslint/visitor-keys": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
"integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"eslint-visitor-keys": "^3.3.0"
}
},
"semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
"requires": {
"lru-cache": "^6.0.0"
}
}
}
},
"@typescript-eslint/scope-manager": {
@ -29166,13 +29603,87 @@
}
},
"@typescript-eslint/type-utils": {
"version": "5.27.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.27.1.tgz",
"integrity": "sha512-+UC1vVUWaDHRnC2cQrCJ4QtVjpjjCgjNFpg8b03nERmkHv9JV9X5M19D7UFMd+/G7T/sgFwX2pGmWK38rqyvXw==",
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.5.tgz",
"integrity": "sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==",
"requires": {
"@typescript-eslint/utils": "5.27.1",
"@typescript-eslint/utils": "5.30.5",
"debug": "^4.3.4",
"tsutils": "^3.21.0"
},
"dependencies": {
"@typescript-eslint/scope-manager": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
"integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5"
}
},
"@typescript-eslint/types": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
"integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw=="
},
"@typescript-eslint/typescript-estree": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
"integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/visitor-keys": "5.30.5",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
}
},
"@typescript-eslint/utils": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
"integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
"requires": {
"@types/json-schema": "^7.0.9",
"@typescript-eslint/scope-manager": "5.30.5",
"@typescript-eslint/types": "5.30.5",
"@typescript-eslint/typescript-estree": "5.30.5",
"eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0"
}
},
"@typescript-eslint/visitor-keys": {
"version": "5.30.5",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
"integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
"requires": {
"@typescript-eslint/types": "5.30.5",
"eslint-visitor-keys": "^3.3.0"
}
},
"eslint-scope": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
"requires": {
"esrecurse": "^4.3.0",
"estraverse": "^4.1.1"
}
},
"estraverse": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
},
"semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
"requires": {
"lru-cache": "^6.0.0"
}
}
}
},
"@typescript-eslint/types": {

2
package.json
View File

@ -67,6 +67,8 @@
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"cypress": "^10.3.0",
"eslint": "^8.19.0",
"eslint_d": "^12.2.0",

3
src/App.js → src/App.tsx
View File

@ -20,6 +20,7 @@ export default function App() {
let errorTag = '';
if (errorMessage !== '') {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
errorTag = (
<div id="filter-errors" className="mt-4 alert alert-danger" role="alert">
{errorMessage}
@ -37,7 +38,9 @@ export default function App() {
<Routes>
<Route path="/" element={<AdminRoutes />} />
<Route path="/admin/*" element={<AdminRoutes />} />
{/* @ts-expect-error TS(2786): 'TaskList' cannot be used as a JSX component. */}
<Route path="/tasks" element={<TaskList />} />
{/* @ts-expect-error TS(2786): 'TaskShow' cannot be used as a JSX component. */}
<Route path="/tasks/:task_id" element={<TaskShow />} />
</Routes>
</BrowserRouter>

19
src/components/ErrorBoundary.js → src/components/ErrorBoundary.tsx
View File

@ -1,18 +1,23 @@
import React from 'react';
import PropTypes from 'prop-types';
class ErrorBoundary extends React.Component {
constructor(props) {
type Props = {
children?: React.ReactNode;
};
type State = any;
class ErrorBoundary extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
static getDerivedStateFromError(error: any) {
// Update state so the next render will show the fallback UI.
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
componentDidCatch(error: any, errorInfo: any) {
// You can also log the error to an error reporting service
console.log('HELLO: ', error, errorInfo);
}
@ -31,7 +36,3 @@ class ErrorBoundary extends React.Component {
}
export default ErrorBoundary;
ErrorBoundary.propTypes = {
children: PropTypes.string.isRequired,
};

23
src/components/FileInput.js → src/components/FileInput.tsx
View File

@ -1,10 +1,20 @@
import React from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
export default class FileInput extends React.Component {
constructor({ processGroupId, processModelId }) {
type Props = {
processGroupId: string;
processModelId: string;
};
export default class FileInput extends React.Component<Props> {
fileInput: any;
processGroupId: any;
processModelId: any;
constructor({ processGroupId, processModelId }: Props) {
super({ processGroupId, processModelId });
this.handleSubmit = this.handleSubmit.bind(this);
this.fileInput = React.createRef();
@ -12,7 +22,7 @@ export default class FileInput extends React.Component {
this.processModelId = processModelId;
}
handleSubmit(event) {
handleSubmit(event: any) {
event.preventDefault();
const url = `${BACKEND_BASE_URL}/process-models/${this.processGroupId}/${this.processModelId}/file`;
const formData = new FormData();
@ -60,8 +70,3 @@ export default class FileInput extends React.Component {
);
}
}
FileInput.propTypes = {
processGroupId: PropTypes.string.isRequired,
processModelId: PropTypes.string.isRequired,
};

35
src/components/NavigationBar.js
View File

@ -1,35 +0,0 @@
import { Navbar, Nav, Container } from 'react-bootstrap';
import { capitalizeFirstLetter } from '../helpers';
import logo from '../logo.svg';
// for ref: https://react-bootstrap.github.io/components/navbar/
export default function NavigationBar() {
const navItems = ['/admin', '/tasks'];
const navElements = navItems.map((navItem) => {
let className = '';
if (window.location.pathname.startsWith(navItem)) {
className = 'active';
}
const title = capitalizeFirstLetter(navItem.replace(/\/*/, ''));
return (
<Nav.Link href={navItem} className={className}>
{title}
</Nav.Link>
);
});
return (
<Navbar bg="dark" expand="lg" variant="dark">
<Container>
<Navbar.Brand href="/admin">
<img src={logo} className="app-logo" alt="logo" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">{navElements}</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

44
src/components/NavigationBar.tsx Normal file
View File

@ -0,0 +1,44 @@
import { Navbar, Nav, Container } from 'react-bootstrap';
import { capitalizeFirstLetter } from '../helpers';
// @ts-expect-error TS(2307): Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message
import logo from '../logo.svg';
// for ref: https://react-bootstrap.github.io/components/navbar/
export default function NavigationBar() {
const navItems = ['/admin', '/tasks'];
const navElements = navItems.map((navItem) => {
let className = '';
if (window.location.pathname.startsWith(navItem)) {
className = 'active';
}
const title = capitalizeFirstLetter(navItem.replace(/\/*/, ''));
return (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<Nav.Link href={navItem} className={className}>
{title}
</Nav.Link>
);
});
return (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<Navbar bg="dark" expand="lg" variant="dark">
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Container>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Navbar.Brand href="/admin">
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<img src={logo} className="app-logo" alt="logo" />
</Navbar.Brand>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Navbar.Toggle aria-controls="basic-navbar-nav" />
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Navbar.Collapse id="basic-navbar-nav">
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Nav className="me-auto">{navElements}</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

33
src/components/PaginationForTable.js → src/components/PaginationForTable.tsx
View File

@ -2,19 +2,29 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { Dropdown, Stack } from 'react-bootstrap';
import PropTypes from 'prop-types';
export const DEFAULT_PER_PAGE = 50;
export const DEFAULT_PAGE = 1;
type OwnProps = {
page: number;
perPage: number;
pagination: {
[key: string]: number;
};
tableToDisplay: string;
queryParamString?: string;
path: string;
};
export default function PaginationForTable({
page,
perPage,
pagination,
tableToDisplay,
queryParamString,
queryParamString = '',
path,
}) {
}: OwnProps) {
const PER_PAGE_OPTIONS = [2, 10, 50, 100];
const buildPerPageDropdown = () => {
@ -58,6 +68,7 @@ export default function PaginationForTable({
const buildPaginationNav = () => {
let previousPageTag = '';
if (page === 1) {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
previousPageTag = (
<li
data-qa="pagination-previous-button-inactive"
@ -70,6 +81,7 @@ export default function PaginationForTable({
</li>
);
} else {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
previousPageTag = (
<li className="page-item" key="previous">
<Link
@ -88,6 +100,7 @@ export default function PaginationForTable({
let nextPageTag = '';
if (page >= pagination.pages) {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
nextPageTag = (
<li
data-qa="pagination-next-button-inactive"
@ -100,6 +113,7 @@ export default function PaginationForTable({
</li>
);
} else {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
nextPageTag = (
<li className="page-item" key="next">
<Link
@ -151,16 +165,3 @@ export default function PaginationForTable({
</main>
);
}
PaginationForTable.propTypes = {
page: PropTypes.number.isRequired,
perPage: PropTypes.number.isRequired,
pagination: PropTypes.objectOf(PropTypes.number).isRequired,
tableToDisplay: PropTypes.string.isRequired,
queryParamString: PropTypes.string,
path: PropTypes.string.isRequired,
};
PaginationForTable.defaultProps = {
queryParamString: '',
};

69
src/components/ProcessBreadcrumb.js
View File

@ -1,69 +0,0 @@
import { Link } from 'react-router-dom';
import Breadcrumb from 'react-bootstrap/Breadcrumb';
import PropTypes from 'prop-types';
export default function ProcessBreadcrumb({
processModelId,
processGroupId,
linkProcessModel,
}) {
let processGroupBreadcrumb = '';
let processModelBreadcrumb = '';
if (processModelId) {
if (linkProcessModel) {
processModelBreadcrumb = (
<Breadcrumb.Item
linkAs={Link}
linkProps={{
to: `/admin/process-models/${processGroupId}/${processModelId}`,
}}
>
Process Model: {processModelId}
</Breadcrumb.Item>
);
} else {
processModelBreadcrumb = (
<Breadcrumb.Item active>
Process Model: {processModelId}
</Breadcrumb.Item>
);
}
processGroupBreadcrumb = (
<Breadcrumb.Item
linkAs={Link}
linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
>
Process Group: {processGroupId}
</Breadcrumb.Item>
);
} else if (processGroupId) {
processGroupBreadcrumb = (
<Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
);
}
return (
<main style={{ padding: '1rem 0' }}>
<Breadcrumb>
<Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
Home
</Breadcrumb.Item>
{processGroupBreadcrumb}
{processModelBreadcrumb}
</Breadcrumb>
</main>
);
}
ProcessBreadcrumb.propTypes = {
processModelId: PropTypes.string,
processGroupId: PropTypes.string,
linkProcessModel: PropTypes.bool,
};
ProcessBreadcrumb.defaultProps = {
processGroupId: null,
processModelId: null,
linkProcessModel: false,
};

6
src/components/ProcessBreadcrumb.test.js → src/components/ProcessBreadcrumb.test.tsx
View File

@ -4,7 +4,9 @@ import ProcessBreadcrumb from './ProcessBreadcrumb';
test('renders home link', () => {
render(
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<BrowserRouter>
{/* @ts-expect-error TS(2322): Type '{}' is not assignable to type 'never'. */}
<ProcessBreadcrumb />
</BrowserRouter>
);
@ -14,7 +16,9 @@ test('renders home link', () => {
test('renders process group when given processGroupId', async () => {
render(
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<BrowserRouter>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<ProcessBreadcrumb processGroupId="group-a" />
</BrowserRouter>
);
@ -28,7 +32,9 @@ test('renders process group when given processGroupId', async () => {
test('renders process model when given processModelId', async () => {
render(
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<BrowserRouter>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<ProcessBreadcrumb processGroupId="group-b" processModelId="model-c" />
</BrowserRouter>
);

73
src/components/ProcessBreadcrumb.tsx Normal file
View File

@ -0,0 +1,73 @@
import { Link } from 'react-router-dom';
import Breadcrumb from 'react-bootstrap/Breadcrumb';
type OwnProps = {
processModelId?: string;
processGroupId?: string;
linkProcessModel?: boolean;
};
export default function ProcessBreadcrumb({
processModelId,
processGroupId,
linkProcessModel = false,
}: OwnProps) {
let processGroupBreadcrumb = '';
let processModelBreadcrumb = '';
if (processModelId) {
if (linkProcessModel) {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
processModelBreadcrumb = (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<Breadcrumb.Item
linkAs={Link}
linkProps={{
to: `/admin/process-models/${processGroupId}/${processModelId}`,
}}
>
Process Model: {processModelId}
</Breadcrumb.Item>
);
} else {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
processModelBreadcrumb = (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<Breadcrumb.Item active>
Process Model: {processModelId}
</Breadcrumb.Item>
);
}
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
processGroupBreadcrumb = (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<Breadcrumb.Item
linkAs={Link}
linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
>
Process Group: {processGroupId}
</Breadcrumb.Item>
);
} else if (processGroupId) {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
processGroupBreadcrumb = (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
);
}
return (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<main style={{ padding: '1rem 0' }}>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Breadcrumb>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
Home
</Breadcrumb.Item>
{processGroupBreadcrumb}
{processModelBreadcrumb}
</Breadcrumb>
</main>
);
}

68
src/components/ReactDiagramEditor.js → src/components/ReactDiagramEditor.tsx
View File

@ -1,22 +1,27 @@
/* eslint-disable sonarjs/cognitive-complexity */
// @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
// @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
} from 'bpmn-js-properties-panel';
// @ts-expect-error TS(7016): Could not find a declaration file for module 'dmn-... Remove this comment to see the full error message
import DmnModeler from 'dmn-js/lib/Modeler';
import {
DmnPropertiesPanelModule,
DmnPropertiesProviderModule,
// @ts-expect-error TS(7016): Could not find a declaration file for module 'dmn-... Remove this comment to see the full error message
} from 'dmn-js-properties-panel';
import React, { useRef, useEffect, useState } from 'react';
// @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
import spiffworkflowIO from 'bpmn-js-spiffworkflow/app/spiffworkflow/InputOutput';
// @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
import spiffworkflowPanel from 'bpmn-js-spiffworkflow/app/spiffworkflow/PropertiesPanel';
import Button from 'react-bootstrap/Button';
import PropTypes from 'prop-types';
import { HOT_AUTH_TOKEN, BACKEND_BASE_URL } from '../config';
import 'bpmn-js/dist/assets/diagram-js.css';
@ -36,6 +41,17 @@ import 'dmn-js-properties-panel/dist/assets/properties-panel.css';
import 'bpmn-js-spiffworkflow/app/css/app.css';
type OwnProps = {
processModelId: string;
processGroupId: string;
saveDiagram: (..._args: any[]) => any;
diagramType: string;
diagramXML?: string;
fileName?: string;
onLaunchScriptEditor?: (..._args: any[]) => any;
url?: string;
};
// https://codesandbox.io/s/quizzical-lake-szfyo?file=/src/App.js was a handy reference
export default function ReactDiagramEditor({
processModelId,
@ -46,7 +62,7 @@ export default function ReactDiagramEditor({
fileName,
onLaunchScriptEditor,
url,
}) {
}: OwnProps) {
const [diagramXMLString, setDiagramXMLString] = useState('');
const [diagramModelerState, setDiagramModelerState] = useState(null);
const [performingXmlUpdates, setPerformingXmlUpdates] = useState(false);
@ -58,6 +74,7 @@ export default function ReactDiagramEditor({
return;
}
// @ts-expect-error TS(2531): Object is possibly 'null'.
document.getElementById('diagram-container').innerHTML = '';
const temp = document.createElement('template');
@ -70,9 +87,10 @@ export default function ReactDiagramEditor({
`;
const frag = temp.content;
// @ts-expect-error TS(2531): Object is possibly 'null'.
document.getElementById('diagram-container').appendChild(frag);
let diagramModeler = null;
let diagramModeler: any = null;
if (diagramType === 'bpmn') {
diagramModeler = new BpmnModeler({
@ -108,7 +126,7 @@ export default function ReactDiagramEditor({
});
}
function handleLaunchScriptEditor(element) {
function handleLaunchScriptEditor(element: any) {
if (onLaunchScriptEditor) {
setPerformingXmlUpdates(true);
const modeling = diagramModeler.get('modeling');
@ -118,7 +136,7 @@ export default function ReactDiagramEditor({
setDiagramModelerState(diagramModeler);
diagramModeler.on('launch.script.editor', (event) => {
diagramModeler.on('launch.script.editor', (event: any) => {
const { error, element } = event;
if (error) {
console.log(error);
@ -135,11 +153,11 @@ export default function ReactDiagramEditor({
return undefined;
}
function handleError(err) {
function handleError(err: any) {
console.log('ERROR:', err);
}
function onImportDone(event) {
function onImportDone(event: any) {
const { error } = event;
if (error) {
@ -149,20 +167,26 @@ export default function ReactDiagramEditor({
let modeler = diagramModelerState;
if (diagramType === 'dmn') {
// @ts-expect-error TS(2531): Object is possibly 'null'.
modeler = diagramModelerState.getActiveViewer();
}
// only get the canvas if the dmn active viewer is actually
// a Modeler and not an Editor which is what it will when we are
// actively editing a decision table
// @ts-expect-error TS(2531): Object is possibly 'null'.
if (modeler.constructor.name === 'Modeler') {
// @ts-expect-error TS(2531): Object is possibly 'null'.
modeler.get('canvas').zoom('fit-viewport');
}
}
diagramModelerState.on('import.done', onImportDone);
(diagramModelerState as any).on('import.done', onImportDone);
function displayDiagram(diagramModelerToUse, diagramXMLToDisplay) {
function displayDiagram(
diagramModelerToUse: any,
diagramXMLToDisplay: any
) {
if (alreadyImportedXmlRef.current) {
return;
}
@ -170,7 +194,7 @@ export default function ReactDiagramEditor({
alreadyImportedXmlRef.current = true;
}
function fetchDiagramFromURL(urlToUse) {
function fetchDiagramFromURL(urlToUse: any) {
fetch(urlToUse)
.then((response) => response.text())
.then((text) => setDiagramXMLString(text))
@ -218,7 +242,7 @@ export default function ReactDiagramEditor({
}
return () => {
diagramModelerState.destroy();
(diagramModelerState as any).destroy();
};
}, [
diagramModelerState,
@ -233,7 +257,8 @@ export default function ReactDiagramEditor({
]);
function handleSave() {
diagramModelerState.saveXML({ format: true }).then((xmlObject) => {
// @ts-expect-error TS(2531): Object is possibly 'null'.
diagramModelerState.saveXML({ format: true }).then((xmlObject: any) => {
saveDiagram(xmlObject.xml);
});
}
@ -246,22 +271,3 @@ export default function ReactDiagramEditor({
</div>
);
}
ReactDiagramEditor.propTypes = {
processModelId: PropTypes.string.isRequired,
processGroupId: PropTypes.string.isRequired,
saveDiagram: PropTypes.func.isRequired,
diagramType: PropTypes.string.isRequired,
diagramXML: PropTypes.string,
fileName: PropTypes.string,
onLaunchScriptEditor: PropTypes.func,
url: PropTypes.string,
};
ReactDiagramEditor.defaultProps = {
diagramXML: null,
fileName: null,
onLaunchScriptEditor: null,
url: null,
};

0
src/config.js → src/config.tsx
View File

1
src/contexts/ErrorContext.js → src/contexts/ErrorContext.tsx
View File

@ -1,4 +1,5 @@
import { createContext } from 'react';
// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
const ErrorContext = createContext();
export default ErrorContext;

0
src/helpers.test.js → src/helpers.test.tsx
View File

6
src/helpers.js → src/helpers.tsx
View File

@ -1,5 +1,5 @@
// https://www.30secondsofcode.org/js/s/slugify
export const slugifyString = (str) => {
export const slugifyString = (str: any) => {
return str
.toLowerCase()
.trim()
@ -9,11 +9,11 @@ export const slugifyString = (str) => {
.replace(/-+$/g, '');
};
export const capitalizeFirstLetter = (string) => {
export const capitalizeFirstLetter = (string: any) => {
return string.charAt(0).toUpperCase() + string.slice(1);
};
export const convertDateToSeconds = (date, onChangeFunction) => {
export const convertDateToSeconds = (date: any, onChangeFunction: any) => {
let dateInSeconds = date;
if (date !== null) {
let dateInMilliseconds = date;

2
src/index.js → src/index.tsx
View File

@ -7,6 +7,7 @@ import './index.css';
import reportWebVitals from './reportWebVitals';
// @ts-expect-error TS(2345): Argument of type 'HTMLElement | null' is not assig... Remove this comment to see the full error message
const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
@ -17,4 +18,5 @@ root.render(
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
reportWebVitals();

2
src/reportWebVitals.js → src/reportWebVitals.tsx
View File

@ -1,4 +1,4 @@
const reportWebVitals = (onPerfEntry) => {
const reportWebVitals = (onPerfEntry: any) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);

65
src/routes/AdminRoutes.js
View File

@ -1,65 +0,0 @@
import { Routes, Route } from 'react-router-dom';
import ProcessGroups from './ProcessGroups';
import ProcessGroupShow from './ProcessGroupShow';
import ProcessGroupNew from './ProcessGroupNew';
import ProcessGroupEdit from './ProcessGroupEdit';
import ProcessModelShow from './ProcessModelShow';
import ProcessModelEditDiagram from './ProcessModelEditDiagram';
import ProcessInstanceList from './ProcessInstanceList';
import ProcessInstanceReport from './ProcessInstanceReport';
import ProcessModelNew from './ProcessModelNew';
import ProcessModelEdit from './ProcessModelEdit';
import ProcessInstanceShow from './ProcessInstanceShow';
export default function AdminRoutes() {
return (
<Routes>
<Route path="/" element={<ProcessGroups />} />
<Route path="process-groups" element={<ProcessGroups />} />
<Route
path="process-groups/:process_group_id"
element={<ProcessGroupShow />}
/>
<Route path="process-groups/new" element={<ProcessGroupNew />} />
<Route
path="process-groups/:process_group_id/edit"
element={<ProcessGroupEdit />}
/>
<Route
path="process-models/:process_group_id/new"
element={<ProcessModelNew />}
/>
<Route
path="process-models/:process_group_id/:process_model_id"
element={<ProcessModelShow />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/file"
element={<ProcessModelEditDiagram />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/file/:file_name"
element={<ProcessModelEditDiagram />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/process-instances"
element={<ProcessInstanceList />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/process-instances/report"
element={<ProcessInstanceReport />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/edit"
element={<ProcessModelEdit />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
element={<ProcessInstanceShow />}
/>
</Routes>
);
}

89
src/routes/AdminRoutes.tsx Normal file
View File

@ -0,0 +1,89 @@
import { Routes, Route } from 'react-router-dom';
import ProcessGroups from './ProcessGroups';
import ProcessGroupShow from './ProcessGroupShow';
import ProcessGroupNew from './ProcessGroupNew';
import ProcessGroupEdit from './ProcessGroupEdit';
import ProcessModelShow from './ProcessModelShow';
import ProcessModelEditDiagram from './ProcessModelEditDiagram';
import ProcessInstanceList from './ProcessInstanceList';
import ProcessInstanceReport from './ProcessInstanceReport';
import ProcessModelNew from './ProcessModelNew';
import ProcessModelEdit from './ProcessModelEdit';
import ProcessInstanceShow from './ProcessInstanceShow';
export default function AdminRoutes() {
return (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<Routes>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route path="/" element={<ProcessGroups />} />
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route path="process-groups" element={<ProcessGroups />} />
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-groups/:process_group_id"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessGroupShow />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route path="process-groups/new" element={<ProcessGroupNew />} />
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-groups/:process_group_id/edit"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessGroupEdit />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/new"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessModelNew />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/:process_model_id"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessModelShow />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/:process_model_id/file"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessModelEditDiagram />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/:process_model_id/file/:file_name"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessModelEditDiagram />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/:process_model_id/process-instances"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessInstanceList />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/:process_model_id/process-instances/report"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessInstanceReport />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/:process_model_id/edit"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessModelEdit />}
/>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<Route
path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
element={<ProcessInstanceShow />}
/>
</Routes>
);
}

14
src/routes/ProcessGroupEdit.js → src/routes/ProcessGroupEdit.tsx
View File

@ -27,9 +27,10 @@ export default function ProcessGroupEdit() {
);
}, [params]);
const updateProcessGroup = (event) => {
const updateProcessGroup = (event: any) => {
event.preventDefault();
// @ts-expect-error TS(2531): Object is possibly 'null'.
fetch(`${BACKEND_BASE_URL}/process-groups/${processGroup.id}`, {
headers: new Headers({
'Content-Type': 'application/json',
@ -38,10 +39,12 @@ export default function ProcessGroupEdit() {
method: 'PUT',
body: JSON.stringify({
display_name: displayName,
// @ts-expect-error TS(2531): Object is possibly 'null'.
id: processGroup.id,
}),
}).then(
() => {
// @ts-expect-error TS(2531): Object is possibly 'null'.
navigate(`/admin/process-groups/${processGroup.id}`);
},
// Note: it's important to handle errors here
@ -54,6 +57,7 @@ export default function ProcessGroupEdit() {
};
const deleteProcessGroup = () => {
// @ts-expect-error TS(2531): Object is possibly 'null'.
fetch(`${BACKEND_BASE_URL}/process-groups/${processGroup.id}`, {
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
@ -69,15 +73,15 @@ export default function ProcessGroupEdit() {
);
};
const onDisplayNameChanged = (newDisplayName) => {
const onDisplayNameChanged = (newDisplayName: any) => {
setDisplayName(newDisplayName);
};
if (processGroup) {
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb processGroupId={processGroup.id} />
<h2>Edit Process Group: {processGroup.id}</h2>
<ProcessBreadcrumb processGroupId={(processGroup as any).id} />
<h2>Edit Process Group: {(processGroup as any).id}</h2>
<form onSubmit={updateProcessGroup}>
<label>Display Name:</label>
<input
@ -92,7 +96,7 @@ export default function ProcessGroupEdit() {
<Button type="submit">Submit</Button>
<Button
variant="secondary"
href={`/admin/process-groups/${processGroup.id}`}
href={`/admin/process-groups/${(processGroup as any).id}`}
>
Cancel
</Button>

4
src/routes/ProcessGroupNew.js → src/routes/ProcessGroupNew.tsx
View File

@ -10,7 +10,7 @@ export default function ProcessGroupNew() {
const [displayName, setDisplayName] = useState('');
const navigate = useNavigate();
const addProcessGroup = (event) => {
const addProcessGroup = (event: any) => {
event.preventDefault();
fetch(`${BACKEND_BASE_URL}/process-groups`, {
@ -36,7 +36,7 @@ export default function ProcessGroupNew() {
);
};
const onDisplayNameChanged = (newDisplayName) => {
const onDisplayNameChanged = (newDisplayName: any) => {
setDisplayName(newDisplayName);
if (!idHasBeenUpdatedByUser) {
setIdentifier(slugifyString(newDisplayName));

29
src/routes/ProcessGroupShow.js → src/routes/ProcessGroupShow.tsx
View File

@ -17,8 +17,10 @@ export default function ProcessGroupShow() {
const [pagination, setPagination] = useState(null);
useEffect(() => {
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
@ -59,13 +61,16 @@ export default function ProcessGroupShow() {
const buildTable = () => {
const rows = processModels.map((row) => {
return (
<tr key={row.id}>
<tr key={(row as any).id}>
<td>
<Link to={`/admin/process-models/${processGroup.id}/${row.id}`}>
{row.id}
<Link
// @ts-expect-error TS(2531): Object is possibly 'null'.
to={`/admin/process-models/${processGroup.id}/${(row as any).id}`}
>
{(row as any).id}
</Link>
</td>
<td>{row.display_name}</td>
<td>{(row as any).display_name}</td>
</tr>
);
});
@ -87,21 +92,26 @@ export default function ProcessGroupShow() {
if (processGroup && pagination) {
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb processGroupId={processGroup.id} />
<h2>Process Group: {processGroup.id}</h2>
{/* @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'. */}
<ProcessBreadcrumb processGroupId={(processGroup as any).id} />
<h2>Process Group: {(processGroup as any).id}</h2>
<ul>
<Stack direction="horizontal" gap={3}>
<Button href={`/admin/process-models/${processGroup.id}/new`}>
<Button
href={`/admin/process-models/${(processGroup as any).id}/new`}
>
Add a process model
</Button>
<Button
href={`/admin/process-groups/${processGroup.id}/edit`}
href={`/admin/process-groups/${(processGroup as any).id}/edit`}
variant="secondary"
>
Edit process group
@ -113,8 +123,9 @@ export default function ProcessGroupShow() {
page={page}
perPage={perPage}
pagination={pagination}
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
tableToDisplay={buildTable()}
path={`/admin/process-groups/${processGroup.id}`}
path={`/admin/process-groups/${(processGroup as any).id}`}
/>
</ul>
</main>

17
src/routes/ProcessGroups.js → src/routes/ProcessGroups.tsx
View File

@ -17,8 +17,10 @@ export default function ProcessGroups() {
const [pagination, setPagination] = useState(null);
useEffect(() => {
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
@ -45,11 +47,13 @@ export default function ProcessGroups() {
const buildTable = () => {
const rows = processGroups.map((row) => {
return (
<tr key={row.id}>
<tr key={(row as any).id}>
<td>
<Link to={`/admin/process-groups/${row.id}`}>{row.id}</Link>
<Link to={`/admin/process-groups/${(row as any).id}`}>
{(row as any).id}
</Link>
</td>
<td>{row.display_name}</td>
<td>{(row as any).display_name}</td>
</tr>
);
});
@ -68,22 +72,28 @@ export default function ProcessGroups() {
const processGroupsDisplayArea = () => {
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
let displayText = '';
if (processGroups?.length > 0) {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
displayText = (
<PaginationForTable
page={page}
perPage={perPage}
// @ts-expect-error TS(2322): Type 'null' is not assignable to type '{ [key: str... Remove this comment to see the full error message
pagination={pagination}
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
tableToDisplay={buildTable()}
path="/admin/process-groups"
/>
);
} else {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
displayText = <p>No Groups To Display</p>;
}
return displayText;
@ -92,6 +102,7 @@ export default function ProcessGroups() {
if (pagination) {
return (
<main style={{ padding: '1rem 0' }}>
{/* @ts-expect-error TS(2322): Type '{}' is not assignable to type 'never'. */}
<ProcessBreadcrumb />
<h2>Process Groups</h2>
<Button href="/admin/process-groups/new">Add a process group</Button>

50
src/routes/ProcessInstanceList.js → src/routes/ProcessInstanceList.tsx
View File

@ -7,6 +7,7 @@ import {
} from 'react-router-dom';
import { Button, Table, Stack, Dropdown } from 'react-bootstrap';
// @ts-expect-error TS(7016): Could not find a declaration file for module 'reac... Remove this comment to see the full error message
import DatePicker from 'react-datepicker';
import { format } from 'date-fns';
import {
@ -41,7 +42,7 @@ export default function ProcessInstanceList() {
const [endFrom, setEndFrom] = useState(null);
const [endTill, setEndTill] = useState(null);
const setErrorMessage = useContext(ErrorContext)[1];
const setErrorMessage = (useContext as any)(ErrorContext)[1];
const [processStatus, setProcessStatus] = useState(PROCESS_STATUSES[0]);
const parametersToAlwaysFilterBy = useMemo(() => {
@ -57,12 +58,14 @@ export default function ProcessInstanceList() {
function getProcessInstances() {
const page = searchParams.get('page') || DEFAULT_PAGE;
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
let queryParamString = `per_page=${perPage}&page=${page}`;
Object.keys(parametersToAlwaysFilterBy).forEach((paramName) => {
// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
const functionToCall = parametersToAlwaysFilterBy[paramName];
const searchParamValue = searchParams.get(paramName);
if (searchParamValue) {
@ -75,6 +78,7 @@ export default function ProcessInstanceList() {
queryParamString += `&process_status=${searchParams.get(
'process_status'
)}`;
// @ts-expect-error TS(2345): Argument of type 'string | null' is not assignable... Remove this comment to see the full error message
setProcessStatus(searchParams.get('process_status'));
}
@ -110,7 +114,7 @@ export default function ProcessInstanceList() {
// does the comparison, but also returns false if either argument
// is not truthy and therefore not comparable.
const isTrueComparison = (param1, operation, param2) => {
const isTrueComparison = (param1: any, operation: any, param2: any) => {
if (param1 && param2) {
switch (operation) {
case '<':
@ -125,10 +129,11 @@ export default function ProcessInstanceList() {
}
};
const handleFilter = (event) => {
const handleFilter = (event: any) => {
event.preventDefault();
const page = searchParams.get('page') || DEFAULT_PAGE;
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
@ -173,7 +178,12 @@ export default function ProcessInstanceList() {
);
};
const dateComponent = (labelString, name, initialDate, onChangeFunction) => {
const dateComponent = (
labelString: any,
name: any,
initialDate: any,
onChangeFunction: any
) => {
let selectedDate = null;
if (initialDate) {
selectedDate = new Date(initialDate * 1000);
@ -184,7 +194,7 @@ export default function ProcessInstanceList() {
<DatePicker
id={`date-picker-${name}`}
selected={selectedDate}
onChange={(date) => convertDateToSeconds(date, onChangeFunction)}
onChange={(date: any) => convertDateToSeconds(date, onChangeFunction)}
showTimeSelect
dateFormat={DATE_FORMAT}
/>
@ -270,32 +280,34 @@ export default function ProcessInstanceList() {
const buildTable = () => {
const rows = processInstances.map((row) => {
let formattedStartDate = '-';
if (row.start_in_seconds) {
const startDate = new Date(row.start_in_seconds * 1000);
if ((row as any).start_in_seconds) {
const startDate = new Date((row as any).start_in_seconds * 1000);
formattedStartDate = format(startDate, DATE_FORMAT);
}
let formattedEndDate = '-';
if (row.end_in_seconds) {
const endDate = new Date(row.end_in_seconds * 1000);
if ((row as any).end_in_seconds) {
const endDate = new Date((row as any).end_in_seconds * 1000);
formattedEndDate = format(endDate, DATE_FORMAT);
}
return (
<tr key={row.id}>
<tr key={(row as any).id}>
<td>
<Link
data-qa="process-instance-show-link"
to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${row.id}`}
to={`/admin/process-models/${params.process_group_id}/${
params.process_model_id
}/process-instances/${(row as any).id}`}
>
{row.id}
{(row as any).id}
</Link>
</td>
<td>{row.process_model_identifier}</td>
<td>{row.process_group_identifier}</td>
<td>{(row as any).process_model_identifier}</td>
<td>{(row as any).process_group_identifier}</td>
<td>{formattedStartDate}</td>
<td>{formattedEndDate}</td>
<td data-qa={`process-instance-status-${row.status}`}>
{row.status}
<td data-qa={`process-instance-status-${(row as any).status}`}>
{(row as any).status}
</td>
</tr>
);
@ -319,15 +331,20 @@ export default function ProcessInstanceList() {
if (pagination) {
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
return (
<main>
<ProcessBreadcrumb
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
processModelId={params.process_model_id}
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
processGroupId={params.process_group_id}
// @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
linkProcessModel="true"
/>
<h2>Process Instances for {params.process_model_id}</h2>
@ -336,6 +353,7 @@ export default function ProcessInstanceList() {
page={page}
perPage={perPage}
pagination={pagination}
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
tableToDisplay={buildTable()}
queryParamString={getSearchParamsAsQueryString()}
path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`}

21
src/routes/ProcessInstanceReport.js → src/routes/ProcessInstanceReport.tsx
View File

@ -22,6 +22,7 @@ export default function ProcessInstanceReport() {
function getProcessInstances() {
const page = searchParams.get('page') || DEFAULT_PAGE;
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
@ -55,13 +56,13 @@ export default function ProcessInstanceReport() {
const buildTable = () => {
const rows = processInstances.map((row) => {
return (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.data.month}</td>
<td>{row.data.milestone}</td>
<td>{row.data.req_id}</td>
<td>{row.data.feature}</td>
<td>{row.data.priority}</td>
<tr key={(row as any).id}>
<td>{(row as any).id}</td>
<td>{(row as any).data.month}</td>
<td>{(row as any).data.milestone}</td>
<td>{(row as any).data.req_id}</td>
<td>{(row as any).data.feature}</td>
<td>{(row as any).data.priority}</td>
</tr>
);
});
@ -84,15 +85,20 @@ export default function ProcessInstanceReport() {
if (pagination) {
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
return (
<main>
<ProcessBreadcrumb
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
processModelId={params.process_model_id}
// @ts-expect-error TS(2322): Type 'null' is not assignable to type 'never'.
processGroupId={processGroupId}
// @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
linkProcessModel="true"
/>
<h2>Process Instances for {params.process_model_id}</h2>
@ -100,6 +106,7 @@ export default function ProcessInstanceReport() {
page={page}
perPage={perPage}
pagination={pagination}
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
tableToDisplay={buildTable()}
path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report`}
/>

7
src/routes/ProcessInstanceShow.js → src/routes/ProcessInstanceShow.tsx
View File

@ -55,14 +55,17 @@ export default function ProcessInstanceShow() {
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
processModelId={params.process_model_id}
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
processGroupId={params.process_group_id}
// @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
linkProcessModel="true"
/>
<h2>Process Instance Id: {processInstance.id}</h2>
<h2>Process Instance Id: {(processInstance as any).id}</h2>
<h2>Data</h2>
<div>
<pre>{JSON.stringify(processInstance.data, null, 2)}</pre>
<pre>{JSON.stringify((processInstance as any).data, null, 2)}</pre>
</div>
<Button onClick={deleteProcessInstance} variant="danger">
Delete process instance

20
src/routes/ProcessModelEdit.js → src/routes/ProcessModelEdit.tsx
View File

@ -26,7 +26,7 @@ export default function ProcessModelEdit() {
);
}, [processModelPath]);
const updateProcessModel = (event) => {
const updateProcessModel = (event: any) => {
event.preventDefault();
fetch(`${BACKEND_BASE_URL}/${processModelPath}`, {
@ -36,12 +36,18 @@ export default function ProcessModelEdit() {
}),
method: 'PUT',
body: JSON.stringify({
// @ts-expect-error TS(2531): Object is possibly 'null'.
id: processModel.id,
display_name: displayName,
// @ts-expect-error TS(2531): Object is possibly 'null'.
description: processModel.description,
// @ts-expect-error TS(2531): Object is possibly 'null'.
process_group_id: processModel.process_group_id,
// @ts-expect-error TS(2531): Object is possibly 'null'.
is_master_spec: processModel.is_master_spec,
// @ts-expect-error TS(2531): Object is possibly 'null'.
standalone: processModel.standalone,
// @ts-expect-error TS(2531): Object is possibly 'null'.
library: processModel.library,
}),
}).then(
@ -59,7 +65,10 @@ export default function ProcessModelEdit() {
const deleteProcessModel = () => {
fetch(
`${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`,
`${BACKEND_BASE_URL}/process-models/${
// @ts-expect-error TS(2531): Object is possibly 'null'.
processModel.process_group_id
}/${processModel.id}`,
{
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
@ -76,15 +85,16 @@ export default function ProcessModelEdit() {
);
};
const onDisplayNameChanged = (newDisplayName) => {
const onDisplayNameChanged = (newDisplayName: any) => {
setDisplayName(newDisplayName);
};
if (processModel) {
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb processGroupId={processModel.id} />
<h2>Edit Process Group: {processModel.id}</h2>
{/* @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'. */}
<ProcessBreadcrumb processGroupId={(processModel as any).id} />
<h2>Edit Process Group: {(processModel as any).id}</h2>
<form onSubmit={updateProcessModel}>
<label>Display Name:</label>
<input

33
src/routes/ProcessModelEditDiagram.js → src/routes/ProcessModelEditDiagram.tsx
View File

@ -54,7 +54,7 @@ export default function ProcessModelEditDiagram() {
setNewFileName('');
};
const saveDiagram = (bpmnXML, fileName = params.file_name) => {
const saveDiagram = (bpmnXML: any, fileName = params.file_name) => {
setBpmnXmlForDiagramRendering(bpmnXML);
let url = `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/file`;
@ -96,7 +96,7 @@ export default function ProcessModelEditDiagram() {
);
};
const handleFileNameSave = (event) => {
const handleFileNameSave = (event: any) => {
event.preventDefault();
setShowFileNameEditor(false);
saveDiagram(bpmnXmlForDiagramRendering);
@ -134,7 +134,7 @@ export default function ProcessModelEditDiagram() {
);
};
const onLaunchScriptEditor = (element, modeling) => {
const onLaunchScriptEditor = (element: any, modeling: any) => {
setScriptText(element.businessObject.script || '');
setScriptModeling(modeling);
setScriptElement(element);
@ -143,8 +143,9 @@ export default function ProcessModelEditDiagram() {
const handleScriptEditorClose = () => {
setShowScriptEditor(false);
};
const handleEditorChange = (value) => {
const handleEditorChange = (value: any) => {
setScriptText(value);
// @ts-expect-error TS(2531): Object is possibly 'null'.
scriptModeling.updateProperties(scriptElement, {
scriptFormat: 'python',
script: value,
@ -153,7 +154,7 @@ export default function ProcessModelEditDiagram() {
const scriptEditor = () => {
let scriptName = '';
if (scriptElement) {
scriptName = scriptElement.di.bpmnElement.name;
scriptName = (scriptElement as any).di.bpmnElement.name;
}
return (
<Modal size="xl" show={showScriptEditor} onHide={handleScriptEditorClose}>
@ -185,23 +186,36 @@ export default function ProcessModelEditDiagram() {
if (isDmn()) {
return (
<ReactDiagramEditor
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
process_model_id={params.process_model_id}
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
process_group_id={params.process_group_id}
// @ts-expect-error TS(2322): Type '(bpmnXML: any, fileName?: string | undefined... Remove this comment to see the full error message
saveDiagram={saveDiagram}
// @ts-expect-error TS(2322): Type 'null' is not assignable to type 'never'.
diagramXML={bpmnXmlForDiagramRendering}
fileName={processModelFile ? processModelFile.name : null}
// @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'.
fileName={processModelFile ? (processModelFile as any).name : null}
// @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
diagramType="dmn"
/>
);
}
return (
<ReactDiagramEditor
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
process_model_id={params.process_model_id}
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
process_group_id={params.process_group_id}
// @ts-expect-error TS(2322): Type '(bpmnXML: any, fileName?: string | undefined... Remove this comment to see the full error message
saveDiagram={saveDiagram}
// @ts-expect-error TS(2322): Type 'null' is not assignable to type 'never'.
diagramXML={bpmnXmlForDiagramRendering}
fileName={processModelFile ? processModelFile.name : null}
// @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'.
fileName={processModelFile ? (processModelFile as any).name : null}
// @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
diagramType="bpmn"
// @ts-expect-error TS(2322): Type '(element: any, modeling: any) => void' is no... Remove this comment to see the full error message
onLaunchScriptEditor={onLaunchScriptEditor}
/>
);
@ -212,13 +226,16 @@ export default function ProcessModelEditDiagram() {
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
processGroupId={params.process_group_id}
// @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
processModelId={params.process_model_id}
// @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
linkProcessModel="true"
/>
<h2>
Process Model File
{processModelFile ? `: ${processModelFile.name}` : ''}
{processModelFile ? `: ${(processModelFile as any).name}` : ''}
</h2>
{appropriateEditor()}
{newFileNameBox()}

5
src/routes/ProcessModelNew.js → src/routes/ProcessModelNew.tsx
View File

@ -12,7 +12,7 @@ export default function ProcessModelNew() {
const [displayName, setDisplayName] = useState('');
const navigate = useNavigate();
const addProcessModel = (event) => {
const addProcessModel = (event: any) => {
event.preventDefault();
fetch(`${BACKEND_BASE_URL}/process-models`, {
@ -45,7 +45,7 @@ export default function ProcessModelNew() {
);
};
const onDisplayNameChanged = (newDisplayName) => {
const onDisplayNameChanged = (newDisplayName: any) => {
setDisplayName(newDisplayName);
if (!idHasBeenUpdatedByUser) {
setIdentifier(slugifyString(newDisplayName));
@ -54,6 +54,7 @@ export default function ProcessModelNew() {
return (
<main style={{ padding: '1rem 0' }}>
{/* @ts-expect-error TS(2322): Type '{}' is not assignable to type 'never'. */}
<ProcessBreadcrumb />
<h2>Add Process Model</h2>
<form onSubmit={addProcessModel}>

73
src/routes/ProcessModelShow.js → src/routes/ProcessModelShow.tsx
View File

@ -31,8 +31,9 @@ export default function ProcessModelShow() {
);
}, [params]);
const processModelRun = (processInstance) => {
const processModelRun = (processInstance: any) => {
fetch(
// @ts-expect-error TS(2531): Object is possibly 'null'.
`${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/${processInstance.id}/run`,
{
headers: new Headers({
@ -54,6 +55,7 @@ export default function ProcessModelShow() {
const processInstanceCreateAndRun = () => {
fetch(
// @ts-expect-error TS(2531): Object is possibly 'null'.
`${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`,
{
headers: new Headers({
@ -75,47 +77,50 @@ export default function ProcessModelShow() {
let processInstanceResultTag = '';
if (processInstanceResult) {
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
processInstanceResultTag = (
<pre>
{processInstanceResult.status}:{' '}
{JSON.stringify(processInstanceResult.data)}
{(processInstanceResult as any).status}:{' '}
{JSON.stringify((processInstanceResult as any).data)}
</pre>
);
}
if (processModel) {
let processModelFilesTag = '';
processModelFilesTag = processModel.files.map((fileBpmn) => {
if (fileBpmn.name.match(/\.(dmn|bpmn)$/)) {
let primarySuffix = '';
if (fileBpmn.name === processModel.primary_file_name) {
primarySuffix = '- Primary File';
const processModelFilesTag = (processModel as any).files.map(
(fileBpmn: any) => {
if (fileBpmn.name.match(/\.(dmn|bpmn)$/)) {
let primarySuffix = '';
// @ts-expect-error TS(2339): Property 'primary_file_name' does not exist on typ... Remove this comment to see the full error message
if (fileBpmn.name === processModel.primary_file_name) {
primarySuffix = '- Primary File';
}
return (
<li key={fileBpmn.name}>
<Link
to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file/${fileBpmn.name}`}
>
{fileBpmn.name}
</Link>
{primarySuffix}
</li>
);
}
return (
<li key={fileBpmn.name}>
<Link
to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file/${fileBpmn.name}`}
>
{fileBpmn.name}
</Link>
{primarySuffix}
</li>
);
return <li key={fileBpmn.name}>{fileBpmn.name}</li>;
}
return <li key={fileBpmn.name}>{fileBpmn.name}</li>;
});
);
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb
processGroupId={processModel.process_group_id}
processModelId={processModel.id}
processGroupId={(processModel as any).process_group_id}
processModelId={(processModel as any).id}
/>
<h2>Process Model: {processModel.id}</h2>
<h2>Process Model: {(processModel as any).id}</h2>
{processInstanceResultTag}
<FileInput
processModelId={processModel.id}
processGroupId={processModel.process_group_id}
processModelId={(processModel as any).id}
processGroupId={(processModel as any).process_group_id}
/>
<br />
<Stack direction="horizontal" gap={3}>
@ -123,19 +128,25 @@ export default function ProcessModelShow() {
Run
</Button>
<Button
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/edit`}
href={`/admin/process-models/${
(processModel as any).process_group_id
}/${(processModel as any).id}/edit`}
variant="secondary"
>
Edit process model
</Button>
<Button
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=bpmn`}
href={`/admin/process-models/${
(processModel as any).process_group_id
}/${(processModel as any).id}/file?file_type=bpmn`}
variant="warning"
>
Add New BPMN File
</Button>
<Button
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=dmn`}
href={`/admin/process-models/${
(processModel as any).process_group_id
}/${(processModel as any).id}/file?file_type=dmn`}
variant="success"
>
Add New DMN File
@ -144,7 +155,9 @@ export default function ProcessModelShow() {
<br />
<br />
<Link
to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/process-instances`}
to={`/admin/process-models/${
(processModel as any).process_group_id
}/${(processModel as any).id}/process-instances`}
>
Process Instances
</Link>

15
src/routes/TaskList.js → src/routes/TaskList.tsx
View File

@ -13,8 +13,10 @@ export default function TaskList() {
const [pagination, setPagination] = useState(null);
useEffect(() => {
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
@ -41,14 +43,14 @@ export default function TaskList() {
const buildTable = () => {
const rows = tasks.map((row) => {
return (
<tr key={row.id}>
<tr key={(row as any).id}>
<td>
<Link to={`/tasks/${row.id}`}>{row.id}</Link>
<Link to={`/tasks/${(row as any).id}`}>{(row as any).id}</Link>
</td>
<td>{row.process_instance_id}</td>
<td>{row.status}</td>
<td>{(row as any).process_instance_id}</td>
<td>{(row as any).status}</td>
<td>
<Button variant="primary" href={`/tasks/${row.id}`}>
<Button variant="primary" href={`/tasks/${(row as any).id}`}>
Start
</Button>
</td>
@ -72,9 +74,11 @@ export default function TaskList() {
if (pagination) {
const perPage = parseInt(
// @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
searchParams.get('per_page') || DEFAULT_PER_PAGE,
10
);
// @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
return (
<main>
@ -83,6 +87,7 @@ export default function TaskList() {
page={page}
perPage={perPage}
pagination={pagination}
// @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
tableToDisplay={buildTable()}
path="/tasks"
/>

14
src/routes/TaskShow.js → src/routes/TaskShow.tsx
View File

@ -11,6 +11,7 @@ export default function TaskShow() {
const navigate = useNavigate();
useEffect(() => {
// @ts-expect-error TS(2345): Argument of type 'string | undefined' is not assig... Remove this comment to see the full error message
const taskId = parseInt(params.task_id, 10);
fetch(`${BACKEND_BASE_URL}/tasks/${taskId}`, {
headers: new Headers({
@ -28,7 +29,8 @@ export default function TaskShow() {
);
}, [params.task_id]);
const handleFormSubmit = (event) => {
const handleFormSubmit = (event: any) => {
// @ts-expect-error TS(2531): Object is possibly 'null'.
fetch(`${BACKEND_BASE_URL}/tasks/${task.id}/submit`, {
headers: new Headers({
Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
@ -51,13 +53,13 @@ export default function TaskShow() {
return (
<main>
<Button href="/tasks">Go Back</Button>
<h1>Task ID: {task.id}</h1>
<h3>process_instance_id: {task.process_instance_id}</h3>
<h3>status: {task.status}</h3>
<h1>Task ID: {(task as any).id}</h1>
<h3>process_instance_id: {(task as any).process_instance_id}</h3>
<h3>status: {(task as any).status}</h3>
<Form
formData={JSON.parse(task.spiffworkflow_task_data)}
formData={JSON.parse((task as any).spiffworkflow_task_data)}
onSubmit={handleFormSubmit}
schema={JSON.parse(task.form_json)}
schema={JSON.parse((task as any).form_json)}
/>
</main>
);

7
src/routes/expenses.jsx
View File

@ -1,7 +0,0 @@
export default function Expenses() {
return (
<main style={{ padding: '1rem 0' }}>
<h2>Expenses</h2>
</main>
);
}

9
src/routes/expenses.tsx Normal file
View File

@ -0,0 +1,9 @@
export default function Expenses() {
return (
// @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
<main style={{ padding: '1rem 0' }}>
{/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
<h2>Expenses</h2>
</main>
);
}

0
src/setupTests.js → src/setupTests.tsx
View File

4
tsfixme.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
// declare global {
type $TSFixMe = any;
type $TSFixMeFunction = (...args: any[]) => any;
// }