Squashed 'spiffworkflow-frontend/' content from commit 75dbea67
git-subtree-dir: spiffworkflow-frontend git-subtree-split: 75dbea67346d1b0c161b1d7582eeb5442aec5762
This commit is contained in:
Jon Herron
commit
2382c3f0ab
|
|
@ -0,0 +1,58 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
},
|
||||
extends: [
|
||||
'react-app',
|
||||
'react-app/jest',
|
||||
'plugin:react/recommended',
|
||||
'airbnb',
|
||||
'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,
|
||||
},
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
},
|
||||
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', '.tsx', '.ts'] },
|
||||
],
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/require-default-props': 'off',
|
||||
'no-unused-vars': [
|
||||
'error',
|
||||
{
|
||||
destructuredArrayIgnorePattern: '^_',
|
||||
varsIgnorePattern: '_',
|
||||
argsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'import/extensions': [
|
||||
'error',
|
||||
'ignorePackages',
|
||||
{
|
||||
js: 'never',
|
||||
jsx: 'never',
|
||||
ts: 'never',
|
||||
tsx: 'never',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: github-actions
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: daily
|
||||
- package-ecosystem: npm
|
||||
directory: "/.github/workflows"
|
||||
schedule:
|
||||
interval: daily
|
||||
- package-ecosystem: npm
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: daily
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
name: Dependabot auto-merge
|
||||
on:
|
||||
workflow_run:
|
||||
workflows: ["Tests"]
|
||||
# completed does not mean success of Tests workflow. see below checking github.event.workflow_run.conclusion
|
||||
types:
|
||||
- completed
|
||||
|
||||
# workflow_call is used to indicate that a workflow can be called by another workflow. When a workflow is triggered with the workflow_call event, the event payload in the called workflow is the same event payload from the calling workflow. For more information see, "Reusing workflows."
|
||||
|
||||
# https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
|
||||
# maybe hook into this instead of workflow_run:
|
||||
# on:
|
||||
# pull_request:
|
||||
# pull_request_target:
|
||||
# types: [labeled]
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
|
||||
jobs:
|
||||
# print the context for debugging in case a job gets skipped
|
||||
printJob:
|
||||
name: Print event
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Dump GitHub context
|
||||
env:
|
||||
GITHUB_CONTEXT: ${{ toJson(github) }}
|
||||
run: |
|
||||
echo "$GITHUB_CONTEXT"
|
||||
|
||||
dependabot:
|
||||
runs-on: ubuntu-latest
|
||||
if: ${{ github.actor == 'dependabot[bot]' && github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' }}
|
||||
steps:
|
||||
- name: Development Code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
###### GET PR NUMBER
|
||||
# we saved the pr_number in tests.yml. fetch it so we can merge the correct PR.
|
||||
# https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#workflow_run
|
||||
- name: 'Download artifact'
|
||||
uses: actions/github-script@v6
|
||||
with:
|
||||
script: |
|
||||
let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
run_id: context.payload.workflow_run.id,
|
||||
});
|
||||
let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => {
|
||||
return artifact.name == "pr_number"
|
||||
})[0];
|
||||
let download = await github.rest.actions.downloadArtifact({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
artifact_id: matchArtifact.id,
|
||||
archive_format: 'zip',
|
||||
});
|
||||
let fs = require('fs');
|
||||
fs.writeFileSync(`${process.env.GITHUB_WORKSPACE}/pr_number.zip`, Buffer.from(download.data));
|
||||
- name: 'Unzip artifact'
|
||||
run: unzip pr_number.zip
|
||||
###########
|
||||
|
||||
- name: print pr number
|
||||
run: cat pr_number
|
||||
- name: actually merge it
|
||||
run: gh pr merge --auto --merge "$(cat pr_number)"
|
||||
env:
|
||||
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
name: Tests
|
||||
|
||||
on:
|
||||
- push
|
||||
- pull_request
|
||||
|
||||
# https://docs.github.com/en/actions/using-workflows/reusing-workflows
|
||||
|
||||
jobs:
|
||||
tests:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Development Code
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
# Disabling shallow clone is recommended for improving relevancy of reporting in sonarcloud
|
||||
fetch-depth: 0
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
- run: npm install
|
||||
- run: npm run lint
|
||||
- run: npm test
|
||||
- run: npm run build --if-present
|
||||
- name: SonarCloud Scan
|
||||
# thought about just skipping dependabot
|
||||
# if: ${{ github.actor != 'dependabot[bot]' }}
|
||||
# but figured all pull requests seems better, since none of them will have access to sonarcloud.
|
||||
# however, with just skipping pull requests, the build associated with "Triggered via push" is also associated with the pull request and also fails hitting sonarcloud
|
||||
# if: ${{ github.event_name != 'pull_request' }}
|
||||
# so just skip everything but main
|
||||
if: github.ref_name == 'main'
|
||||
uses: sonarsource/sonarcloud-github-action@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
|
||||
# part about saving PR number and then using it from auto-merge-dependabot-prs from:
|
||||
# https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#workflow_run
|
||||
- name: Save PR number
|
||||
if: ${{ github.event_name == 'pull_request' }}
|
||||
env:
|
||||
PR_NUMBER: ${{ github.event.number }}
|
||||
run: |
|
||||
mkdir -p ./pr
|
||||
echo "$PR_NUMBER" > ./pr/pr_number
|
||||
- uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: pr_number
|
||||
path: pr/
|
||||
|
||||
cypress-run:
|
||||
runs-on: ubuntu-20.04
|
||||
steps:
|
||||
- name: Checkout Frontend
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
path: spiffworkflow-frontend
|
||||
- name: Checkout Backend
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
repository: sartography/spiffworkflow-backend
|
||||
path: spiffworkflow-backend
|
||||
- name: Checkout Samples
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
repository: sartography/sample-process-models
|
||||
path: sample-process-models
|
||||
- name: start_keycloak
|
||||
working-directory: ./spiffworkflow-backend
|
||||
run: ./bin/start_keycloak
|
||||
- name: start_backend
|
||||
working-directory: ./spiffworkflow-backend
|
||||
run: ./bin/build_and_run_with_docker_compose
|
||||
timeout-minutes: 20
|
||||
env:
|
||||
SPIFFWORKFLOW_BACKEND_LOAD_FIXTURE_DATA: "true"
|
||||
SPIFFWORKFLOW_BACKEND_PERMISSIONS_FILE_NAME: "acceptance_tests.yml"
|
||||
- name: start_frontend
|
||||
working-directory: ./spiffworkflow-frontend
|
||||
run: ./bin/build_and_run_with_docker_compose
|
||||
- name: wait_for_backend
|
||||
working-directory: ./spiffworkflow-backend
|
||||
run: ./bin/wait_for_server_to_be_up 5
|
||||
- name: wait_for_frontend
|
||||
working-directory: ./spiffworkflow-frontend
|
||||
run: ./bin/wait_for_frontend_to_be_up 5
|
||||
- name: wait_for_keycloak
|
||||
working-directory: ./spiffworkflow-backend
|
||||
run: ./bin/wait_for_keycloak 5
|
||||
- name: Cypress run
|
||||
uses: cypress-io/github-action@v4
|
||||
with:
|
||||
working-directory: ./spiffworkflow-frontend
|
||||
browser: chrome
|
||||
# only record on push, not pull_request, since we do not have secrets for PRs,
|
||||
# so the required CYPRESS_RECORD_KEY will not be available.
|
||||
record: ${{ github.event_name == 'push' }}
|
||||
env:
|
||||
# pass the Dashboard record key as an environment variable
|
||||
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
|
||||
# pass GitHub token to allow accurately detecting a build vs a re-run build
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
- name: get_backend_logs_from_docker_compose
|
||||
if: failure()
|
||||
working-directory: ./spiffworkflow-backend
|
||||
run: ./bin/get_logs_from_docker_compose >./log/docker_compose.log
|
||||
- name: Upload logs
|
||||
if: failure()
|
||||
uses: "actions/upload-artifact@v3.0.0"
|
||||
with:
|
||||
name: spiffworkflow-backend-logs
|
||||
path: "./spiffworkflow-backend/log/*.log"
|
||||
|
||||
# https://github.com/cypress-io/github-action#artifacts
|
||||
- name: upload_screenshots
|
||||
uses: actions/upload-artifact@v2
|
||||
if: failure()
|
||||
with:
|
||||
name: cypress-screenshots
|
||||
path: ./spiffworkflow-frontend/cypress/screenshots
|
||||
# Test run video was always captured, so this action uses "always()" condition
|
||||
- name: upload_videos
|
||||
uses: actions/upload-artifact@v2
|
||||
if: failure()
|
||||
with:
|
||||
name: cypress-videos
|
||||
path: ./spiffworkflow-frontend/cypress/videos
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
cypress/videos
|
||||
cypress/screenshots
|
||||
|
||||
# i keep accidentally committing these
|
||||
/test*.json
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
singleQuote: true,
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
nodejs 18.3.0
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
### STAGE 1: Build ###
|
||||
FROM quay.io/sartography/node:latest
|
||||
RUN mkdir /app
|
||||
WORKDIR /app
|
||||
ADD package.json /app/
|
||||
ADD package-lock.json /app/
|
||||
COPY . /app/
|
||||
|
||||
# npm ci because it respects the lock file.
|
||||
# --ignore-scripts because authors can do bad things in postinstall scripts.
|
||||
# https://cheatsheetseries.owasp.org/cheatsheets/NPM_Security_Cheat_Sheet.html
|
||||
# npx can-i-ignore-scripts can check that it's safe to ignore scripts.
|
||||
RUN npm ci --ignore-scripts && npm run build
|
||||
|
||||
ENTRYPOINT ["/app/bin/boot_server_in_docker"]
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
GNU LESSER GENERAL PUBLIC LICENSE
|
||||
Version 2.1, February 1999
|
||||
|
||||
Copyright (C) 1991, 1999 Free Software Foundation, Inc.
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
[This is the first released version of the Lesser GPL. It also counts
|
||||
as the successor of the GNU Library Public License, version 2, hence
|
||||
the version number 2.1.]
|
||||
|
||||
Preamble
|
||||
|
||||
The licenses for most software are designed to take away your
|
||||
freedom to share and change it. By contrast, the GNU General Public
|
||||
Licenses are intended to guarantee your freedom to share and change
|
||||
free software--to make sure the software is free for all its users.
|
||||
|
||||
This license, the Lesser General Public License, applies to some
|
||||
specially designated software packages--typically libraries--of the
|
||||
Free Software Foundation and other authors who decide to use it. You
|
||||
can use it too, but we suggest you first think carefully about whether
|
||||
this license or the ordinary General Public License is the better
|
||||
strategy to use in any particular case, based on the explanations below.
|
||||
|
||||
When we speak of free software, we are referring to freedom of use,
|
||||
not price. Our General Public Licenses are designed to make sure that
|
||||
you have the freedom to distribute copies of free software (and charge
|
||||
for this service if you wish); that you receive source code or can get
|
||||
it if you want it; that you can change the software and use pieces of
|
||||
it in new free programs; and that you are informed that you can do
|
||||
these things.
|
||||
|
||||
To protect your rights, we need to make restrictions that forbid
|
||||
distributors to deny you these rights or to ask you to surrender these
|
||||
rights. These restrictions translate to certain responsibilities for
|
||||
you if you distribute copies of the library or if you modify it.
|
||||
|
||||
For example, if you distribute copies of the library, whether gratis
|
||||
or for a fee, you must give the recipients all the rights that we gave
|
||||
you. You must make sure that they, too, receive or can get the source
|
||||
code. If you link other code with the library, you must provide
|
||||
complete object files to the recipients, so that they can relink them
|
||||
with the library after making changes to the library and recompiling
|
||||
it. And you must show them these terms so they know their rights.
|
||||
|
||||
We protect your rights with a two-step method: (1) we copyright the
|
||||
library, and (2) we offer you this license, which gives you legal
|
||||
permission to copy, distribute and/or modify the library.
|
||||
|
||||
To protect each distributor, we want to make it very clear that
|
||||
there is no warranty for the free library. Also, if the library is
|
||||
modified by someone else and passed on, the recipients should know
|
||||
that what they have is not the original version, so that the original
|
||||
author's reputation will not be affected by problems that might be
|
||||
introduced by others.
|
||||
|
||||
Finally, software patents pose a constant threat to the existence of
|
||||
any free program. We wish to make sure that a company cannot
|
||||
effectively restrict the users of a free program by obtaining a
|
||||
restrictive license from a patent holder. Therefore, we insist that
|
||||
any patent license obtained for a version of the library must be
|
||||
consistent with the full freedom of use specified in this license.
|
||||
|
||||
Most GNU software, including some libraries, is covered by the
|
||||
ordinary GNU General Public License. This license, the GNU Lesser
|
||||
General Public License, applies to certain designated libraries, and
|
||||
is quite different from the ordinary General Public License. We use
|
||||
this license for certain libraries in order to permit linking those
|
||||
libraries into non-free programs.
|
||||
|
||||
When a program is linked with a library, whether statically or using
|
||||
a shared library, the combination of the two is legally speaking a
|
||||
combined work, a derivative of the original library. The ordinary
|
||||
General Public License therefore permits such linking only if the
|
||||
entire combination fits its criteria of freedom. The Lesser General
|
||||
Public License permits more lax criteria for linking other code with
|
||||
the library.
|
||||
|
||||
We call this license the "Lesser" General Public License because it
|
||||
does Less to protect the user's freedom than the ordinary General
|
||||
Public License. It also provides other free software developers Less
|
||||
of an advantage over competing non-free programs. These disadvantages
|
||||
are the reason we use the ordinary General Public License for many
|
||||
libraries. However, the Lesser license provides advantages in certain
|
||||
special circumstances.
|
||||
|
||||
For example, on rare occasions, there may be a special need to
|
||||
encourage the widest possible use of a certain library, so that it becomes
|
||||
a de-facto standard. To achieve this, non-free programs must be
|
||||
allowed to use the library. A more frequent case is that a free
|
||||
library does the same job as widely used non-free libraries. In this
|
||||
case, there is little to gain by limiting the free library to free
|
||||
software only, so we use the Lesser General Public License.
|
||||
|
||||
In other cases, permission to use a particular library in non-free
|
||||
programs enables a greater number of people to use a large body of
|
||||
free software. For example, permission to use the GNU C Library in
|
||||
non-free programs enables many more people to use the whole GNU
|
||||
operating system, as well as its variant, the GNU/Linux operating
|
||||
system.
|
||||
|
||||
Although the Lesser General Public License is Less protective of the
|
||||
users' freedom, it does ensure that the user of a program that is
|
||||
linked with the Library has the freedom and the wherewithal to run
|
||||
that program using a modified version of the Library.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow. Pay close attention to the difference between a
|
||||
"work based on the library" and a "work that uses the library". The
|
||||
former contains code derived from the library, whereas the latter must
|
||||
be combined with the library in order to run.
|
||||
|
||||
GNU LESSER GENERAL PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. This License Agreement applies to any software library or other
|
||||
program which contains a notice placed by the copyright holder or
|
||||
other authorized party saying it may be distributed under the terms of
|
||||
this Lesser General Public License (also called "this License").
|
||||
Each licensee is addressed as "you".
|
||||
|
||||
A "library" means a collection of software functions and/or data
|
||||
prepared so as to be conveniently linked with application programs
|
||||
(which use some of those functions and data) to form executables.
|
||||
|
||||
The "Library", below, refers to any such software library or work
|
||||
which has been distributed under these terms. A "work based on the
|
||||
Library" means either the Library or any derivative work under
|
||||
copyright law: that is to say, a work containing the Library or a
|
||||
portion of it, either verbatim or with modifications and/or translated
|
||||
straightforwardly into another language. (Hereinafter, translation is
|
||||
included without limitation in the term "modification".)
|
||||
|
||||
"Source code" for a work means the preferred form of the work for
|
||||
making modifications to it. For a library, complete source code means
|
||||
all the source code for all modules it contains, plus any associated
|
||||
interface definition files, plus the scripts used to control compilation
|
||||
and installation of the library.
|
||||
|
||||
Activities other than copying, distribution and modification are not
|
||||
covered by this License; they are outside its scope. The act of
|
||||
running a program using the Library is not restricted, and output from
|
||||
such a program is covered only if its contents constitute a work based
|
||||
on the Library (independent of the use of the Library in a tool for
|
||||
writing it). Whether that is true depends on what the Library does
|
||||
and what the program that uses the Library does.
|
||||
|
||||
1. You may copy and distribute verbatim copies of the Library's
|
||||
complete source code as you receive it, in any medium, provided that
|
||||
you conspicuously and appropriately publish on each copy an
|
||||
appropriate copyright notice and disclaimer of warranty; keep intact
|
||||
all the notices that refer to this License and to the absence of any
|
||||
warranty; and distribute a copy of this License along with the
|
||||
Library.
|
||||
|
||||
You may charge a fee for the physical act of transferring a copy,
|
||||
and you may at your option offer warranty protection in exchange for a
|
||||
fee.
|
||||
|
||||
2. You may modify your copy or copies of the Library or any portion
|
||||
of it, thus forming a work based on the Library, and copy and
|
||||
distribute such modifications or work under the terms of Section 1
|
||||
above, provided that you also meet all of these conditions:
|
||||
|
||||
a) The modified work must itself be a software library.
|
||||
|
||||
b) You must cause the files modified to carry prominent notices
|
||||
stating that you changed the files and the date of any change.
|
||||
|
||||
c) You must cause the whole of the work to be licensed at no
|
||||
charge to all third parties under the terms of this License.
|
||||
|
||||
d) If a facility in the modified Library refers to a function or a
|
||||
table of data to be supplied by an application program that uses
|
||||
the facility, other than as an argument passed when the facility
|
||||
is invoked, then you must make a good faith effort to ensure that,
|
||||
in the event an application does not supply such function or
|
||||
table, the facility still operates, and performs whatever part of
|
||||
its purpose remains meaningful.
|
||||
|
||||
(For example, a function in a library to compute square roots has
|
||||
a purpose that is entirely well-defined independent of the
|
||||
application. Therefore, Subsection 2d requires that any
|
||||
application-supplied function or table used by this function must
|
||||
be optional: if the application does not supply it, the square
|
||||
root function must still compute square roots.)
|
||||
|
||||
These requirements apply to the modified work as a whole. If
|
||||
identifiable sections of that work are not derived from the Library,
|
||||
and can be reasonably considered independent and separate works in
|
||||
themselves, then this License, and its terms, do not apply to those
|
||||
sections when you distribute them as separate works. But when you
|
||||
distribute the same sections as part of a whole which is a work based
|
||||
on the Library, the distribution of the whole must be on the terms of
|
||||
this License, whose permissions for other licensees extend to the
|
||||
entire whole, and thus to each and every part regardless of who wrote
|
||||
it.
|
||||
|
||||
Thus, it is not the intent of this section to claim rights or contest
|
||||
your rights to work written entirely by you; rather, the intent is to
|
||||
exercise the right to control the distribution of derivative or
|
||||
collective works based on the Library.
|
||||
|
||||
In addition, mere aggregation of another work not based on the Library
|
||||
with the Library (or with a work based on the Library) on a volume of
|
||||
a storage or distribution medium does not bring the other work under
|
||||
the scope of this License.
|
||||
|
||||
3. You may opt to apply the terms of the ordinary GNU General Public
|
||||
License instead of this License to a given copy of the Library. To do
|
||||
this, you must alter all the notices that refer to this License, so
|
||||
that they refer to the ordinary GNU General Public License, version 2,
|
||||
instead of to this License. (If a newer version than version 2 of the
|
||||
ordinary GNU General Public License has appeared, then you can specify
|
||||
that version instead if you wish.) Do not make any other change in
|
||||
these notices.
|
||||
|
||||
Once this change is made in a given copy, it is irreversible for
|
||||
that copy, so the ordinary GNU General Public License applies to all
|
||||
subsequent copies and derivative works made from that copy.
|
||||
|
||||
This option is useful when you wish to copy part of the code of
|
||||
the Library into a program that is not a library.
|
||||
|
||||
4. You may copy and distribute the Library (or a portion or
|
||||
derivative of it, under Section 2) in object code or executable form
|
||||
under the terms of Sections 1 and 2 above provided that you accompany
|
||||
it with the complete corresponding machine-readable source code, which
|
||||
must be distributed under the terms of Sections 1 and 2 above on a
|
||||
medium customarily used for software interchange.
|
||||
|
||||
If distribution of object code is made by offering access to copy
|
||||
from a designated place, then offering equivalent access to copy the
|
||||
source code from the same place satisfies the requirement to
|
||||
distribute the source code, even though third parties are not
|
||||
compelled to copy the source along with the object code.
|
||||
|
||||
5. A program that contains no derivative of any portion of the
|
||||
Library, but is designed to work with the Library by being compiled or
|
||||
linked with it, is called a "work that uses the Library". Such a
|
||||
work, in isolation, is not a derivative work of the Library, and
|
||||
therefore falls outside the scope of this License.
|
||||
|
||||
However, linking a "work that uses the Library" with the Library
|
||||
creates an executable that is a derivative of the Library (because it
|
||||
contains portions of the Library), rather than a "work that uses the
|
||||
library". The executable is therefore covered by this License.
|
||||
Section 6 states terms for distribution of such executables.
|
||||
|
||||
When a "work that uses the Library" uses material from a header file
|
||||
that is part of the Library, the object code for the work may be a
|
||||
derivative work of the Library even though the source code is not.
|
||||
Whether this is true is especially significant if the work can be
|
||||
linked without the Library, or if the work is itself a library. The
|
||||
threshold for this to be true is not precisely defined by law.
|
||||
|
||||
If such an object file uses only numerical parameters, data
|
||||
structure layouts and accessors, and small macros and small inline
|
||||
functions (ten lines or less in length), then the use of the object
|
||||
file is unrestricted, regardless of whether it is legally a derivative
|
||||
work. (Executables containing this object code plus portions of the
|
||||
Library will still fall under Section 6.)
|
||||
|
||||
Otherwise, if the work is a derivative of the Library, you may
|
||||
distribute the object code for the work under the terms of Section 6.
|
||||
Any executables containing that work also fall under Section 6,
|
||||
whether or not they are linked directly with the Library itself.
|
||||
|
||||
6. As an exception to the Sections above, you may also combine or
|
||||
link a "work that uses the Library" with the Library to produce a
|
||||
work containing portions of the Library, and distribute that work
|
||||
under terms of your choice, provided that the terms permit
|
||||
modification of the work for the customer's own use and reverse
|
||||
engineering for debugging such modifications.
|
||||
|
||||
You must give prominent notice with each copy of the work that the
|
||||
Library is used in it and that the Library and its use are covered by
|
||||
this License. You must supply a copy of this License. If the work
|
||||
during execution displays copyright notices, you must include the
|
||||
copyright notice for the Library among them, as well as a reference
|
||||
directing the user to the copy of this License. Also, you must do one
|
||||
of these things:
|
||||
|
||||
a) Accompany the work with the complete corresponding
|
||||
machine-readable source code for the Library including whatever
|
||||
changes were used in the work (which must be distributed under
|
||||
Sections 1 and 2 above); and, if the work is an executable linked
|
||||
with the Library, with the complete machine-readable "work that
|
||||
uses the Library", as object code and/or source code, so that the
|
||||
user can modify the Library and then relink to produce a modified
|
||||
executable containing the modified Library. (It is understood
|
||||
that the user who changes the contents of definitions files in the
|
||||
Library will not necessarily be able to recompile the application
|
||||
to use the modified definitions.)
|
||||
|
||||
b) Use a suitable shared library mechanism for linking with the
|
||||
Library. A suitable mechanism is one that (1) uses at run time a
|
||||
copy of the library already present on the user's computer system,
|
||||
rather than copying library functions into the executable, and (2)
|
||||
will operate properly with a modified version of the library, if
|
||||
the user installs one, as long as the modified version is
|
||||
interface-compatible with the version that the work was made with.
|
||||
|
||||
c) Accompany the work with a written offer, valid for at
|
||||
least three years, to give the same user the materials
|
||||
specified in Subsection 6a, above, for a charge no more
|
||||
than the cost of performing this distribution.
|
||||
|
||||
d) If distribution of the work is made by offering access to copy
|
||||
from a designated place, offer equivalent access to copy the above
|
||||
specified materials from the same place.
|
||||
|
||||
e) Verify that the user has already received a copy of these
|
||||
materials or that you have already sent this user a copy.
|
||||
|
||||
For an executable, the required form of the "work that uses the
|
||||
Library" must include any data and utility programs needed for
|
||||
reproducing the executable from it. However, as a special exception,
|
||||
the materials to be distributed need not include anything that is
|
||||
normally distributed (in either source or binary form) with the major
|
||||
components (compiler, kernel, and so on) of the operating system on
|
||||
which the executable runs, unless that component itself accompanies
|
||||
the executable.
|
||||
|
||||
It may happen that this requirement contradicts the license
|
||||
restrictions of other proprietary libraries that do not normally
|
||||
accompany the operating system. Such a contradiction means you cannot
|
||||
use both them and the Library together in an executable that you
|
||||
distribute.
|
||||
|
||||
7. You may place library facilities that are a work based on the
|
||||
Library side-by-side in a single library together with other library
|
||||
facilities not covered by this License, and distribute such a combined
|
||||
library, provided that the separate distribution of the work based on
|
||||
the Library and of the other library facilities is otherwise
|
||||
permitted, and provided that you do these two things:
|
||||
|
||||
a) Accompany the combined library with a copy of the same work
|
||||
based on the Library, uncombined with any other library
|
||||
facilities. This must be distributed under the terms of the
|
||||
Sections above.
|
||||
|
||||
b) Give prominent notice with the combined library of the fact
|
||||
that part of it is a work based on the Library, and explaining
|
||||
where to find the accompanying uncombined form of the same work.
|
||||
|
||||
8. You may not copy, modify, sublicense, link with, or distribute
|
||||
the Library except as expressly provided under this License. Any
|
||||
attempt otherwise to copy, modify, sublicense, link with, or
|
||||
distribute the Library is void, and will automatically terminate your
|
||||
rights under this License. However, parties who have received copies,
|
||||
or rights, from you under this License will not have their licenses
|
||||
terminated so long as such parties remain in full compliance.
|
||||
|
||||
9. You are not required to accept this License, since you have not
|
||||
signed it. However, nothing else grants you permission to modify or
|
||||
distribute the Library or its derivative works. These actions are
|
||||
prohibited by law if you do not accept this License. Therefore, by
|
||||
modifying or distributing the Library (or any work based on the
|
||||
Library), you indicate your acceptance of this License to do so, and
|
||||
all its terms and conditions for copying, distributing or modifying
|
||||
the Library or works based on it.
|
||||
|
||||
10. Each time you redistribute the Library (or any work based on the
|
||||
Library), the recipient automatically receives a license from the
|
||||
original licensor to copy, distribute, link with or modify the Library
|
||||
subject to these terms and conditions. You may not impose any further
|
||||
restrictions on the recipients' exercise of the rights granted herein.
|
||||
You are not responsible for enforcing compliance by third parties with
|
||||
this License.
|
||||
|
||||
11. If, as a consequence of a court judgment or allegation of patent
|
||||
infringement or for any other reason (not limited to patent issues),
|
||||
conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot
|
||||
distribute so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you
|
||||
may not distribute the Library at all. For example, if a patent
|
||||
license would not permit royalty-free redistribution of the Library by
|
||||
all those who receive copies directly or indirectly through you, then
|
||||
the only way you could satisfy both it and this License would be to
|
||||
refrain entirely from distribution of the Library.
|
||||
|
||||
If any portion of this section is held invalid or unenforceable under any
|
||||
particular circumstance, the balance of the section is intended to apply,
|
||||
and the section as a whole is intended to apply in other circumstances.
|
||||
|
||||
It is not the purpose of this section to induce you to infringe any
|
||||
patents or other property right claims or to contest validity of any
|
||||
such claims; this section has the sole purpose of protecting the
|
||||
integrity of the free software distribution system which is
|
||||
implemented by public license practices. Many people have made
|
||||
generous contributions to the wide range of software distributed
|
||||
through that system in reliance on consistent application of that
|
||||
system; it is up to the author/donor to decide if he or she is willing
|
||||
to distribute software through any other system and a licensee cannot
|
||||
impose that choice.
|
||||
|
||||
This section is intended to make thoroughly clear what is believed to
|
||||
be a consequence of the rest of this License.
|
||||
|
||||
12. If the distribution and/or use of the Library is restricted in
|
||||
certain countries either by patents or by copyrighted interfaces, the
|
||||
original copyright holder who places the Library under this License may add
|
||||
an explicit geographical distribution limitation excluding those countries,
|
||||
so that distribution is permitted only in or among countries not thus
|
||||
excluded. In such case, this License incorporates the limitation as if
|
||||
written in the body of this License.
|
||||
|
||||
13. The Free Software Foundation may publish revised and/or new
|
||||
versions of the Lesser General Public License from time to time.
|
||||
Such new versions will be similar in spirit to the present version,
|
||||
but may differ in detail to address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Library
|
||||
specifies a version number of this License which applies to it and
|
||||
"any later version", you have the option of following the terms and
|
||||
conditions either of that version or of any later version published by
|
||||
the Free Software Foundation. If the Library does not specify a
|
||||
license version number, you may choose any version ever published by
|
||||
the Free Software Foundation.
|
||||
|
||||
14. If you wish to incorporate parts of the Library into other free
|
||||
programs whose distribution conditions are incompatible with these,
|
||||
write to the author to ask for permission. For software which is
|
||||
copyrighted by the Free Software Foundation, write to the Free
|
||||
Software Foundation; we sometimes make exceptions for this. Our
|
||||
decision will be guided by the two goals of preserving the free status
|
||||
of all derivatives of our free software and of promoting the sharing
|
||||
and reuse of software generally.
|
||||
|
||||
NO WARRANTY
|
||||
|
||||
15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO
|
||||
WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
|
||||
EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
|
||||
OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY
|
||||
KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
|
||||
LIBRARY IS WITH YOU. SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME
|
||||
THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN
|
||||
WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY
|
||||
AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU
|
||||
FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
|
||||
CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
|
||||
LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
|
||||
RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
|
||||
FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF
|
||||
SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
|
||||
DAMAGES.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Libraries
|
||||
|
||||
If you develop a new library, and you want it to be of the greatest
|
||||
possible use to the public, we recommend making it free software that
|
||||
everyone can redistribute and change. You can do so by permitting
|
||||
redistribution under these terms (or, alternatively, under the terms of the
|
||||
ordinary General Public License).
|
||||
|
||||
To apply these terms, attach the following notices to the library. It is
|
||||
safest to attach them to the start of each source file to most effectively
|
||||
convey the exclusion of warranty; and each file should have at least the
|
||||
"copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the library's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This library is free software; you can redistribute it and/or
|
||||
modify it under the terms of the GNU Lesser General Public
|
||||
License as published by the Free Software Foundation; either
|
||||
version 2.1 of the License, or (at your option) any later version.
|
||||
|
||||
This library is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||
Lesser General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Lesser General Public
|
||||
License along with this library; if not, write to the Free Software
|
||||
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
|
||||
USA
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or your
|
||||
school, if any, to sign a "copyright disclaimer" for the library, if
|
||||
necessary. Here is a sample; alter the names:
|
||||
|
||||
Yoyodyne, Inc., hereby disclaims all copyright interest in the
|
||||
library `Frob' (a library for tweaking knobs) written by James Random
|
||||
Hacker.
|
||||
|
||||
<signature of Ty Coon>, 1 April 1990
|
||||
Ty Coon, President of Vice
|
||||
|
||||
That's all there is to it!
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
# spiffworkflow-frontend
|
||||
|
||||
[](https://github.com/sartography/spiffworkflow-frontend/actions/workflows/tests.yml)
|
||||
|
||||
## NOTE: This is still in development. NOT READY FOR GENERAL USE!!!!!
|
||||
|
||||
This is the frontend part of an app that leverages
|
||||
[spiffworkflow](https://github.com/sartography/spiffworkflow) for managing and
|
||||
running business processes. The backend portion can be found at
|
||||
https://github.com/sartography/spiffworkflow-backend.
|
||||
|
||||
This project was bootstrapped with [Create React
|
||||
App](https://github.com/facebook/create-react-app), and the balance of this
|
||||
README contains information about how to use apps that are bootstrapped with
|
||||
that project.
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
### `npm run lint`
|
||||
|
||||
Check for lint in code.
|
||||
|
||||
### `npm run lint:fix`
|
||||
|
||||
Fix lint in code.
|
||||
|
||||
### `npm run format`
|
||||
|
||||
Probably just stick with lint:fix which also runs prettier.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
function error_handler() {
|
||||
>&2 echo "Exited with BAD EXIT CODE '${2}' in ${0} script at line: ${1}."
|
||||
exit "$2"
|
||||
}
|
||||
trap 'error_handler ${LINENO} $?' ERR
|
||||
set -o errtrace -o errexit -o nounset -o pipefail
|
||||
|
||||
exec ./node_modules/.bin/serve -s build -l "$PORT0"
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
function error_handler() {
|
||||
>&2 echo "Exited with BAD EXIT CODE '${2}' in ${0} script at line: ${1}."
|
||||
exit "$2"
|
||||
}
|
||||
trap 'error_handler ${LINENO} $?' ERR
|
||||
set -o errtrace -o errexit -o nounset -o pipefail
|
||||
|
||||
# if [[ -z "${BPMN_SPEC_ABSOLUTE_DIR:-}" ]]; then
|
||||
# script_dir="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
|
||||
# export BPMN_SPEC_ABSOLUTE_DIR="$script_dir/../../sample-process-models"
|
||||
# fi
|
||||
|
||||
additional_args=""
|
||||
if [[ "${RUN_WITH_DAEMON:-}" != "false" ]]; then
|
||||
additional_args="${additional_args} -d"
|
||||
fi
|
||||
|
||||
docker compose build
|
||||
docker compose stop
|
||||
|
||||
docker compose up $additional_args
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
function error_handler() {
|
||||
>&2 echo "Exited with BAD EXIT CODE '${2}' in ${0} script at line: ${1}."
|
||||
exit "$2"
|
||||
}
|
||||
trap 'error_handler ${LINENO} $?' ERR
|
||||
set -o errtrace -o errexit -o nounset -o pipefail
|
||||
|
||||
git pull
|
||||
./bin/build_and_run_with_docker_compose
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
function error_handler() {
|
||||
>&2 echo "Exited with BAD EXIT CODE '${2}' in ${0} script at line: ${1}."
|
||||
exit "$2"
|
||||
}
|
||||
trap 'error_handler ${LINENO} $?' ERR
|
||||
set -o errtrace -o errexit -o nounset -o pipefail
|
||||
|
||||
command="${1:-}"
|
||||
if [[ -z "$command" ]]; then
|
||||
command=open
|
||||
else
|
||||
shift
|
||||
fi
|
||||
|
||||
./node_modules/.bin/cypress "$command" --e2e --browser chrome "$@"
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
function error_handler() {
|
||||
>&2 echo "Exited with BAD EXIT CODE '${2}' in ${0} script at line: ${1}."
|
||||
exit "$2"
|
||||
}
|
||||
trap 'error_handler ${LINENO} $?' ERR
|
||||
set -o errtrace -o errexit -o nounset -o pipefail
|
||||
|
||||
max_attempts="${1:-}"
|
||||
if [[ -z "$max_attempts" ]]; then
|
||||
max_attempts=100
|
||||
fi
|
||||
|
||||
echo "waiting for backend to come up..."
|
||||
attempts=0
|
||||
while [[ "$(curl -s -o /dev/null -w '%{http_code}' http://localhost:7001)" != "200" ]]; do
|
||||
if [[ "$attempts" -gt "$max_attempts" ]]; then
|
||||
>&2 echo "ERROR: Server not up after $max_attempts attempts. There is probably a problem"
|
||||
exit 1
|
||||
fi
|
||||
attempts=$(( attempts + 1 ))
|
||||
sleep 1
|
||||
done
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.m?[jt]sx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
[
|
||||
'@babel/plugin-transform-react-jsx',
|
||||
{
|
||||
pragma: 'h',
|
||||
pragmaFrag: 'Fragment',
|
||||
},
|
||||
],
|
||||
'@babel/preset-react',
|
||||
'@babel/plugin-transform-typescript',
|
||||
{
|
||||
importSource: '@bpmn-io/properties-panel/preact',
|
||||
runtime: 'automatic',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
webpack: {
|
||||
configure: {
|
||||
resolve: {
|
||||
alias: {
|
||||
inferno:
|
||||
process.env.NODE_ENV !== 'production'
|
||||
? 'inferno/dist/index.dev.esm.js'
|
||||
: 'inferno/dist/index.esm.js',
|
||||
react: 'preact/compat',
|
||||
'react-dom/test-utils': 'preact/test-utils',
|
||||
'react-dom': 'preact/compat', // Must be below test-utils
|
||||
'react/jsx-runtime': 'preact/jsx-runtime',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
babel: {
|
||||
presets: [
|
||||
'@babel/preset-env',
|
||||
['@babel/preset-react', { runtime: 'automatic' }],
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
// plugins: [],
|
||||
loaderOptions: (babelLoaderOptions) => {
|
||||
return babelLoaderOptions;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/* eslint-disable */
|
||||
const { defineConfig } = require('cypress');
|
||||
|
||||
module.exports = defineConfig({
|
||||
projectId: 'crax1q',
|
||||
chromeWebSecurity: false,
|
||||
e2e: {
|
||||
baseUrl: 'http://localhost:7001',
|
||||
setupNodeEvents(_on, _config) {
|
||||
// implement node event listeners here
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"extends": [
|
||||
"plugin:cypress/recommended"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
describe('process-groups', () => {
|
||||
beforeEach(() => {
|
||||
cy.login();
|
||||
});
|
||||
afterEach(() => {
|
||||
cy.logout();
|
||||
});
|
||||
|
||||
it('can perform crud operations', () => {
|
||||
const uuid = () => Cypress._.random(0, 1e6);
|
||||
const id = uuid();
|
||||
const groupDisplayName = `Test Group 1 ${id}`;
|
||||
const newGroupDisplayName = `${groupDisplayName} edited`;
|
||||
const groupId = `test-group-1-${id}`;
|
||||
cy.createGroup(groupId, groupDisplayName);
|
||||
|
||||
cy.contains('Process Groups').click();
|
||||
cy.contains(groupDisplayName).click();
|
||||
cy.url().should('include', `process-groups/${groupId}`);
|
||||
cy.contains(`Process Group: ${groupDisplayName}`);
|
||||
|
||||
cy.contains('Edit process group').click();
|
||||
cy.get('input[name=display_name]').clear().type(newGroupDisplayName);
|
||||
cy.contains('Submit').click();
|
||||
cy.contains(`Process Group: ${newGroupDisplayName}`);
|
||||
|
||||
cy.contains('Edit process group').click();
|
||||
cy.get('input[name=display_name]').should(
|
||||
'have.value',
|
||||
newGroupDisplayName
|
||||
);
|
||||
|
||||
cy.contains('Delete').click();
|
||||
cy.contains('Are you sure');
|
||||
cy.contains('OK').click();
|
||||
cy.url().should('include', `process-groups`);
|
||||
cy.contains(groupId).should('not.exist');
|
||||
});
|
||||
|
||||
it('can paginate items', () => {
|
||||
cy.basicPaginationTest();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
import { format } from 'date-fns';
|
||||
import { DATE_FORMAT, PROCESS_STATUSES } from '../../src/config';
|
||||
|
||||
const filterByDate = (fromDate) => {
|
||||
cy.get('#date-picker-start-from').clear().type(format(fromDate, DATE_FORMAT));
|
||||
cy.contains('Start Range').click();
|
||||
cy.get('#date-picker-end-from').clear().type(format(fromDate, DATE_FORMAT));
|
||||
cy.contains('Start Range').click();
|
||||
cy.contains('Filter').click();
|
||||
};
|
||||
|
||||
const updateDmnText = (oldText, newText, elementId = 'wonderful_process') => {
|
||||
// this will break if there are more elements added to the drd
|
||||
cy.get(`g[data-element-id=${elementId}]`).click().should('exist');
|
||||
cy.get('.dmn-icon-decision-table').click();
|
||||
cy.contains(oldText).clear().type(`"${newText}"`);
|
||||
|
||||
// wait for a little bit for the xml to get set before saving
|
||||
// FIXME: gray out save button or add spinner while xml is loading
|
||||
cy.wait(500);
|
||||
cy.contains('Save').click();
|
||||
};
|
||||
|
||||
const updateBpmnPythonScript = (pythonScript, elementId = 'process_script') => {
|
||||
cy.get(`g[data-element-id=${elementId}]`).click().should('exist');
|
||||
cy.contains(/^Script$/).click();
|
||||
cy.get('textarea[name="pythonScript_bpmn:script"]')
|
||||
.clear()
|
||||
.type(pythonScript);
|
||||
|
||||
// wait for a little bit for the xml to get set before saving
|
||||
cy.wait(500);
|
||||
cy.contains('Save').click();
|
||||
};
|
||||
|
||||
const updateBpmnPythonScriptWithMonaco = (
|
||||
pythonScript,
|
||||
elementId = 'process_script'
|
||||
) => {
|
||||
cy.get(`g[data-element-id=${elementId}]`).click().should('exist');
|
||||
// sometimes, we click on the script task and panel doesn't update to include script task stuff. not sure why.
|
||||
cy.contains(/^Script$/).click();
|
||||
cy.contains('Launch Editor').click();
|
||||
// sometimes, Loading... appears for more than 4 seconds. not sure why.
|
||||
cy.contains('Loading...').should('not.exist');
|
||||
cy.get('.monaco-editor textarea:first')
|
||||
.click()
|
||||
.focused() // change subject to currently focused element
|
||||
// .type('{ctrl}a') // had been doing it this way, but it turns out to be flaky relative to clear()
|
||||
.clear()
|
||||
.type(pythonScript);
|
||||
|
||||
cy.contains('Close').click();
|
||||
// wait for a little bit for the xml to get set before saving
|
||||
cy.wait(500);
|
||||
cy.contains('Save').click();
|
||||
};
|
||||
|
||||
describe('process-instances', () => {
|
||||
beforeEach(() => {
|
||||
cy.login();
|
||||
cy.navigateToProcessModel(
|
||||
'Acceptance Tests Group One',
|
||||
'acceptance-tests-model-1'
|
||||
);
|
||||
});
|
||||
afterEach(() => {
|
||||
cy.logout();
|
||||
});
|
||||
|
||||
it('can create a new instance and can modify', () => {
|
||||
const originalDmnOutputForKevin = 'Very wonderful';
|
||||
const newDmnOutputForKevin = 'The new wonderful';
|
||||
const dmnOutputForDan = 'pretty wonderful';
|
||||
|
||||
const originalPythonScript = 'person = "Kevin"';
|
||||
const newPythonScript = 'person = "Dan"';
|
||||
|
||||
const dmnFile = 'awesome_decision.dmn';
|
||||
const bpmnFile = 'process_model_one.bpmn';
|
||||
|
||||
cy.contains(originalDmnOutputForKevin).should('not.exist');
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
// Change dmn
|
||||
cy.contains(dmnFile).click();
|
||||
cy.contains(`Process Model File: ${dmnFile}`);
|
||||
updateDmnText(originalDmnOutputForKevin, newDmnOutputForKevin);
|
||||
|
||||
cy.contains('acceptance-tests-model-1').click();
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
cy.contains(dmnFile).click();
|
||||
cy.contains(`Process Model File: ${dmnFile}`);
|
||||
updateDmnText(newDmnOutputForKevin, originalDmnOutputForKevin);
|
||||
cy.contains('acceptance-tests-model-1').click();
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
// Change bpmn
|
||||
cy.contains(bpmnFile).click();
|
||||
cy.contains(`Process Model File: ${bpmnFile}`);
|
||||
updateBpmnPythonScript(newPythonScript);
|
||||
cy.contains('acceptance-tests-model-1').click();
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
cy.contains(bpmnFile).click();
|
||||
cy.contains(`Process Model File: ${bpmnFile}`);
|
||||
updateBpmnPythonScript(originalPythonScript);
|
||||
cy.contains('acceptance-tests-model-1').click();
|
||||
cy.runPrimaryBpmnFile();
|
||||
});
|
||||
|
||||
it('can create a new instance and can modify with monaco text editor', () => {
|
||||
const originalPythonScript = 'person = "Kevin"';
|
||||
const newPythonScript = 'person = "Mike"';
|
||||
const bpmnFile = 'process_model_one.bpmn';
|
||||
|
||||
// Change bpmn
|
||||
cy.contains(bpmnFile).click();
|
||||
cy.contains(`Process Model File: ${bpmnFile}`);
|
||||
updateBpmnPythonScriptWithMonaco(newPythonScript);
|
||||
cy.contains('acceptance-tests-model-1').click();
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
cy.contains(bpmnFile).click();
|
||||
cy.contains(`Process Model File: ${bpmnFile}`);
|
||||
updateBpmnPythonScriptWithMonaco(originalPythonScript);
|
||||
cy.contains('acceptance-tests-model-1').click();
|
||||
cy.runPrimaryBpmnFile();
|
||||
});
|
||||
|
||||
it('can paginate items', () => {
|
||||
// make sure we have some process instances
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
cy.getBySel('process-instance-list-link').click();
|
||||
cy.basicPaginationTest();
|
||||
});
|
||||
|
||||
it('can display logs', () => {
|
||||
// make sure we have some process instances
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.getBySel('process-instance-list-link').click();
|
||||
cy.getBySel('process-instance-show-link').first().click();
|
||||
cy.getBySel('process-instance-log-list-link').click();
|
||||
cy.contains('process_model_one');
|
||||
cy.contains('State change to COMPLETED');
|
||||
cy.basicPaginationTest();
|
||||
});
|
||||
|
||||
it('can filter', () => {
|
||||
cy.getBySel('process-instance-list-link').click();
|
||||
cy.assertAtLeastOneItemInPaginatedResults();
|
||||
|
||||
PROCESS_STATUSES.forEach((processStatus) => {
|
||||
if (!['all', 'waiting'].includes(processStatus)) {
|
||||
cy.get('[name=process-status-selection]').click();
|
||||
cy.get('[name=process-status-selection]').type(processStatus);
|
||||
cy.get(`[aria-label=${processStatus}]`).click();
|
||||
cy.contains('Process Status').click();
|
||||
cy.contains('Filter').click();
|
||||
cy.assertAtLeastOneItemInPaginatedResults();
|
||||
cy.getBySel(`process-instance-status-${processStatus}`).contains(
|
||||
processStatus
|
||||
);
|
||||
// there should really only be one, but in CI there are sometimes more
|
||||
cy.get('button[aria-label=Remove]:first').click();
|
||||
}
|
||||
});
|
||||
|
||||
const date = new Date();
|
||||
date.setHours(date.getHours() - 1);
|
||||
filterByDate(date);
|
||||
cy.assertAtLeastOneItemInPaginatedResults();
|
||||
|
||||
date.setHours(date.getHours() + 2);
|
||||
filterByDate(date);
|
||||
cy.assertNoItemInPaginatedResults();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
describe('process-models', () => {
|
||||
beforeEach(() => {
|
||||
cy.login();
|
||||
});
|
||||
afterEach(() => {
|
||||
cy.logout();
|
||||
});
|
||||
|
||||
it('can perform crud operations', () => {
|
||||
const uuid = () => Cypress._.random(0, 1e6);
|
||||
const id = uuid();
|
||||
const groupId = 'acceptance-tests-group-one';
|
||||
const groupDisplayName = 'Acceptance Tests Group One';
|
||||
const modelDisplayName = `Test Model 2 ${id}`;
|
||||
const newModelDisplayName = `${modelDisplayName} edited`;
|
||||
const modelId = `test-model-2-${id}`;
|
||||
cy.contains(groupDisplayName).click();
|
||||
cy.createModel(groupId, modelId, modelDisplayName);
|
||||
cy.contains(`Process Group: ${groupId}`).click();
|
||||
cy.contains(modelId);
|
||||
|
||||
cy.contains(modelId).click();
|
||||
cy.url().should('include', `process-models/${groupId}/${modelId}`);
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
|
||||
cy.contains('Edit process model').click();
|
||||
cy.get('input[name=display_name]').clear().type(newModelDisplayName);
|
||||
cy.contains('Submit').click();
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
|
||||
cy.contains('Edit process model').click();
|
||||
cy.get('input[name=display_name]').should(
|
||||
'have.value',
|
||||
newModelDisplayName
|
||||
);
|
||||
|
||||
cy.contains('Delete').click();
|
||||
cy.contains('Are you sure');
|
||||
cy.contains('OK').click();
|
||||
cy.url().should('include', `process-groups/${groupId}`);
|
||||
cy.contains(modelId).should('not.exist');
|
||||
});
|
||||
|
||||
it('can create new bpmn, dmn, and json files', () => {
|
||||
const uuid = () => Cypress._.random(0, 1e6);
|
||||
const id = uuid();
|
||||
const groupId = 'acceptance-tests-group-one';
|
||||
const groupDisplayName = 'Acceptance Tests Group One';
|
||||
const modelDisplayName = `Test Model 2 ${id}`;
|
||||
const modelId = `test-model-2-${id}`;
|
||||
|
||||
const bpmnFileName = `bpmn_test_file_${id}`;
|
||||
const dmnFileName = `dmn_test_file_${id}`;
|
||||
const jsonFileName = `json_test_file_${id}`;
|
||||
|
||||
cy.contains(groupDisplayName).click();
|
||||
cy.createModel(groupId, modelId, modelDisplayName);
|
||||
cy.contains(`Process Group: ${groupId}`).click();
|
||||
cy.contains(modelId);
|
||||
|
||||
cy.contains(modelId).click();
|
||||
cy.url().should('include', `process-models/${groupId}/${modelId}`);
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
cy.contains(`${bpmnFileName}.bpmn`).should('not.exist');
|
||||
cy.contains(`${dmnFileName}.dmn`).should('not.exist');
|
||||
cy.contains(`${jsonFileName}.json`).should('not.exist');
|
||||
|
||||
// add new bpmn file
|
||||
cy.contains('Add New BPMN File').click();
|
||||
cy.contains(/^Process Model File$/);
|
||||
cy.get('g[data-element-id=StartEvent_1]').click().should('exist');
|
||||
cy.contains('General').click();
|
||||
cy.get('#bio-properties-panel-name').clear().type('Start Event Name');
|
||||
cy.wait(500);
|
||||
cy.contains('Save').click();
|
||||
cy.contains('Start Event Name');
|
||||
cy.get('input[name=file_name]').type(bpmnFileName);
|
||||
cy.contains('Save Changes').click();
|
||||
cy.contains(`Process Model File: ${bpmnFileName}`);
|
||||
cy.contains(modelId).click();
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
cy.contains(`${bpmnFileName}.bpmn`).should('exist');
|
||||
|
||||
// add new dmn file
|
||||
cy.contains('Add New DMN File').click();
|
||||
cy.contains(/^Process Model File$/);
|
||||
cy.get('g[data-element-id=decision_1]').click().should('exist');
|
||||
cy.contains('General').click();
|
||||
cy.contains('Save').click();
|
||||
cy.get('input[name=file_name]').type(dmnFileName);
|
||||
cy.contains('Save Changes').click();
|
||||
cy.contains(`Process Model File: ${dmnFileName}`);
|
||||
cy.contains(modelId).click();
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
cy.contains(`${dmnFileName}.dmn`).should('exist');
|
||||
|
||||
// add new json file
|
||||
cy.contains('Add New JSON File').click();
|
||||
cy.contains(/^Process Model File$/);
|
||||
// Some reason, cypress evals json strings so we have to escape it it with '{{}'
|
||||
cy.get('.view-line').type('{{} "test_key": "test_value" }');
|
||||
cy.contains('Save').click();
|
||||
cy.get('input[name=file_name]').type(jsonFileName);
|
||||
cy.contains('Save Changes').click();
|
||||
cy.contains(`Process Model File: ${jsonFileName}`);
|
||||
// wait for json to load before clicking away to avoid network errors
|
||||
cy.wait(500);
|
||||
cy.contains(modelId).click();
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
cy.contains(`${jsonFileName}.json`).should('exist');
|
||||
|
||||
cy.contains('Edit process model').click();
|
||||
cy.contains('Delete').click();
|
||||
cy.contains('Are you sure');
|
||||
cy.contains('OK').click();
|
||||
cy.url().should('include', `process-groups/${groupId}`);
|
||||
cy.contains(modelId).should('not.exist');
|
||||
});
|
||||
|
||||
it('can upload and run a bpmn file', () => {
|
||||
const uuid = () => Cypress._.random(0, 1e6);
|
||||
const id = uuid();
|
||||
const groupId = 'acceptance-tests-group-one';
|
||||
const groupDisplayName = 'Acceptance Tests Group One';
|
||||
const modelDisplayName = `Test Model 2 ${id}`;
|
||||
const modelId = `test-model-2-${id}`;
|
||||
cy.contains('Add a process group');
|
||||
cy.contains(groupDisplayName).click();
|
||||
cy.createModel(groupId, modelId, modelDisplayName);
|
||||
|
||||
// seeing if getBySel works better, because we are seeing tests fail in CI
|
||||
// when looking for the "Add a process model" link, so it seems like the
|
||||
// click on the breadcrumb element must have failed.
|
||||
cy.getBySel('process-group-breadcrumb-link').click();
|
||||
// cy.contains(`Process Group: ${groupId}`).click();
|
||||
|
||||
cy.contains('Add a process model');
|
||||
|
||||
cy.contains(modelId).click();
|
||||
cy.url().should('include', `process-models/${groupId}/${modelId}`);
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
|
||||
cy.get('input[type=file]').selectFile(
|
||||
'cypress/fixtures/test_bpmn_file_upload.bpmn'
|
||||
);
|
||||
cy.contains('Submit').click();
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
cy.getBySel('process-instance-list-link').click();
|
||||
cy.getBySel('process-instance-show-link').click();
|
||||
cy.contains('Delete').click();
|
||||
cy.contains('Are you sure');
|
||||
cy.contains('OK').click();
|
||||
cy.contains(`Process Instances for: ${groupId}/${modelId}`);
|
||||
cy.contains(modelId).click();
|
||||
|
||||
cy.contains('Edit process model').click();
|
||||
cy.contains('Delete').click();
|
||||
cy.contains('Are you sure');
|
||||
cy.contains('OK').click();
|
||||
cy.url().should('include', `process-groups/${groupId}`);
|
||||
cy.contains(modelId).should('not.exist');
|
||||
});
|
||||
|
||||
it('can paginate items', () => {
|
||||
cy.contains('Acceptance Tests Group One').click();
|
||||
cy.basicPaginationTest();
|
||||
});
|
||||
|
||||
it('can allow searching for model', () => {
|
||||
cy.get('[name=process-model-selection]').click();
|
||||
cy.get('[name=process-model-selection]').type('model-3');
|
||||
cy.get(
|
||||
`[aria-label="acceptance-tests-group-one/acceptance-tests-model-3"]`
|
||||
).click();
|
||||
|
||||
cy.contains('Process Instances').click();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
const submitInputIntoFormField = (taskName, fieldKey, fieldValue) => {
|
||||
cy.contains(`Task: ${taskName}`);
|
||||
cy.get(fieldKey).clear().type(fieldValue);
|
||||
cy.contains('Submit').click();
|
||||
};
|
||||
|
||||
const checkFormFieldIsReadOnly = (formName, fieldKey) => {
|
||||
cy.contains(`Task: ${formName}`);
|
||||
cy.get(fieldKey).invoke('attr', 'readonly').should('exist');
|
||||
};
|
||||
|
||||
const checkTaskHasClass = (taskName, className) => {
|
||||
cy.get(`g[data-element-id=${taskName}]`).should('have.class', className);
|
||||
};
|
||||
|
||||
describe('tasks', () => {
|
||||
beforeEach(() => {
|
||||
cy.login();
|
||||
});
|
||||
afterEach(() => {
|
||||
cy.logout();
|
||||
});
|
||||
|
||||
it('can complete and navigate a form', () => {
|
||||
const groupDisplayName = 'Acceptance Tests Group One';
|
||||
const modelId = `acceptance-tests-model-2`;
|
||||
const completedTaskClassName = 'completed-task-highlight';
|
||||
const activeTaskClassName = 'active-task-highlight';
|
||||
|
||||
cy.navigateToProcessModel(groupDisplayName, modelId);
|
||||
|
||||
// avoid reloading so we can click on the task link that appears on running the process instance
|
||||
cy.runPrimaryBpmnFile(false);
|
||||
|
||||
cy.contains('my task').click();
|
||||
|
||||
submitInputIntoFormField(
|
||||
'get_user_generated_number_one',
|
||||
'#root_user_generated_number_1',
|
||||
2
|
||||
);
|
||||
submitInputIntoFormField(
|
||||
'get_user_generated_number_two',
|
||||
'#root_user_generated_number_2',
|
||||
3
|
||||
);
|
||||
|
||||
cy.contains('Task: get_user_generated_number_three');
|
||||
cy.getBySel('form-nav-form2').click();
|
||||
checkFormFieldIsReadOnly(
|
||||
'get_user_generated_number_two',
|
||||
'#root_user_generated_number_2'
|
||||
);
|
||||
cy.getBySel('form-nav-form1').click();
|
||||
checkFormFieldIsReadOnly(
|
||||
'get_user_generated_number_one',
|
||||
'#root_user_generated_number_1'
|
||||
);
|
||||
|
||||
cy.getBySel('form-nav-form3').should('have.text', 'form3 - Current');
|
||||
cy.getBySel('form-nav-form3').click();
|
||||
submitInputIntoFormField(
|
||||
'get_user_generated_number_three',
|
||||
'#root_user_generated_number_3',
|
||||
4
|
||||
);
|
||||
|
||||
cy.contains('Task: get_user_generated_number_four');
|
||||
cy.navigateToProcessModel(groupDisplayName, modelId);
|
||||
cy.getBySel('process-instance-list-link').click();
|
||||
cy.assertAtLeastOneItemInPaginatedResults();
|
||||
|
||||
// This should get the first one which should be the one we just completed
|
||||
cy.getBySel('process-instance-show-link').first().click();
|
||||
cy.contains('Process Instance Id: ');
|
||||
|
||||
cy.get(`g[data-element-id=form3]`).click();
|
||||
cy.contains('"user_generated_number_1": 2');
|
||||
cy.contains('"user_generated_number_2": 3');
|
||||
cy.contains('"user_generated_number_3": 4');
|
||||
cy.contains('"user_generated_number_4": 5').should('not.exist');
|
||||
checkTaskHasClass('form1', completedTaskClassName);
|
||||
checkTaskHasClass('form2', completedTaskClassName);
|
||||
checkTaskHasClass('form3', completedTaskClassName);
|
||||
checkTaskHasClass('form4', activeTaskClassName);
|
||||
cy.get('.modal .btn-close').click();
|
||||
|
||||
cy.navigateToHome();
|
||||
cy.contains('Tasks').should('exist');
|
||||
|
||||
// FIXME: this will probably need a better way to link to the proper form that we want
|
||||
cy.contains('Complete Task').click();
|
||||
|
||||
submitInputIntoFormField(
|
||||
'get_user_generated_number_four',
|
||||
'#root_user_generated_number_4',
|
||||
5
|
||||
);
|
||||
cy.url().should('include', '/tasks');
|
||||
|
||||
cy.navigateToProcessModel(groupDisplayName, modelId);
|
||||
cy.getBySel('process-instance-list-link').click();
|
||||
cy.assertAtLeastOneItemInPaginatedResults();
|
||||
|
||||
// This should get the first one which should be the one we just completed
|
||||
cy.getBySel('process-instance-show-link').first().click();
|
||||
cy.contains('Process Instance Id: ');
|
||||
cy.contains('Status: complete');
|
||||
});
|
||||
|
||||
it('can paginate items', () => {
|
||||
cy.navigateToProcessModel(
|
||||
'Acceptance Tests Group One',
|
||||
'acceptance-tests-model-2'
|
||||
);
|
||||
|
||||
// make sure we have some tasks
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
cy.runPrimaryBpmnFile();
|
||||
|
||||
cy.navigateToHome();
|
||||
cy.basicPaginationTest();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "Using fixtures to represent data",
|
||||
"email": "hello@cypress.io",
|
||||
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_96f6665" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.0.0-dev">
|
||||
<bpmn:process id="Process_bd2e724" isExecutable="true">
|
||||
<bpmn:startEvent id="StartEvent_1">
|
||||
<bpmn:outgoing>Flow_07vd2ar</bpmn:outgoing>
|
||||
</bpmn:startEvent>
|
||||
<bpmn:scriptTask id="Activity_19x24om" name="script" scriptFormat="python">
|
||||
<bpmn:incoming>Flow_07vd2ar</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_1alkjjb</bpmn:outgoing>
|
||||
<bpmn:script>the_variable = "champion"</bpmn:script>
|
||||
</bpmn:scriptTask>
|
||||
<bpmn:sequenceFlow id="Flow_07vd2ar" sourceRef="StartEvent_1" targetRef="Activity_19x24om" />
|
||||
<bpmn:endEvent id="Event_1f9iw7j">
|
||||
<bpmn:incoming>Flow_1alkjjb</bpmn:incoming>
|
||||
</bpmn:endEvent>
|
||||
<bpmn:sequenceFlow id="Flow_1alkjjb" sourceRef="Activity_19x24om" targetRef="Event_1f9iw7j" />
|
||||
</bpmn:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_bd2e724">
|
||||
<bpmndi:BPMNEdge id="Flow_07vd2ar_di" bpmnElement="Flow_07vd2ar">
|
||||
<di:waypoint x="215" y="177" />
|
||||
<di:waypoint x="290" y="177" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1alkjjb_di" bpmnElement="Flow_1alkjjb">
|
||||
<di:waypoint x="390" y="177" />
|
||||
<di:waypoint x="442" y="177" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
|
||||
<dc:Bounds x="179" y="159" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0p4ehi1_di" bpmnElement="Activity_19x24om">
|
||||
<dc:Bounds x="290" y="137" width="100" height="80" />
|
||||
<bpmndi:BPMNLabel />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1f9iw7j_di" bpmnElement="Event_1f9iw7j">
|
||||
<dc:Bounds x="442" y="159" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn:definitions>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import { string } from 'prop-types';
|
||||
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
|
||||
Cypress.Commands.add('getBySel', (selector, ...args) => {
|
||||
return cy.get(`[data-qa=${selector}]`, ...args);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('navigateToHome', () => {
|
||||
cy.getBySel('nav-home').click();
|
||||
});
|
||||
|
||||
Cypress.Commands.add('navigateToAdmin', () => {
|
||||
cy.getBySel('spiffworkflow-logo').click();
|
||||
});
|
||||
|
||||
Cypress.Commands.add('login', (selector, ...args) => {
|
||||
cy.visit('/admin');
|
||||
cy.get('#username').type('ciadmin1');
|
||||
cy.get('#password').type('ciadmin1');
|
||||
cy.get('#kc-login').click();
|
||||
});
|
||||
|
||||
Cypress.Commands.add('logout', (selector, ...args) => {
|
||||
cy.getBySel('logout-button').click();
|
||||
|
||||
// otherwise we can click logout, quickly load the next page, and the javascript
|
||||
// doesn't have time to actually sign you out
|
||||
cy.contains('Sign in to your account');
|
||||
});
|
||||
|
||||
Cypress.Commands.add('createGroup', (groupId, groupDisplayName) => {
|
||||
cy.contains(groupId).should('not.exist');
|
||||
cy.contains('Add a process group').click();
|
||||
cy.get('input[name=display_name]').type(groupDisplayName);
|
||||
cy.get('input[name=display_name]').should('have.value', groupDisplayName);
|
||||
cy.get('input[name=id]').should('have.value', groupId);
|
||||
cy.contains('Submit').click();
|
||||
|
||||
cy.url().should('include', `process-groups/${groupId}`);
|
||||
cy.contains(`Process Group: ${groupDisplayName}`);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('createModel', (groupId, modelId, modelDisplayName) => {
|
||||
cy.contains(modelId).should('not.exist');
|
||||
|
||||
cy.contains('Add a process model').click();
|
||||
cy.get('input[name=display_name]').type(modelDisplayName);
|
||||
cy.get('input[name=display_name]').should('have.value', modelDisplayName);
|
||||
cy.get('input[name=id]').should('have.value', modelId);
|
||||
cy.contains('Submit').click();
|
||||
|
||||
cy.url().should('include', `process-models/${groupId}/${modelId}`);
|
||||
cy.contains(`Process Model: ${modelId}`);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('runPrimaryBpmnFile', (reload = true) => {
|
||||
cy.contains('Run').click();
|
||||
cy.contains(/Process Instance.*kicked off/);
|
||||
if (reload) {
|
||||
cy.reload(true);
|
||||
cy.contains(/Process Instance.*kicked off/).should('not.exist');
|
||||
}
|
||||
});
|
||||
|
||||
Cypress.Commands.add(
|
||||
'navigateToProcessModel',
|
||||
(groupDisplayName, modelDisplayName) => {
|
||||
cy.navigateToAdmin();
|
||||
cy.contains(groupDisplayName).click();
|
||||
cy.contains(`Process Group: ${groupDisplayName}`);
|
||||
// https://stackoverflow.com/q/51254946/6090676
|
||||
cy.getBySel('process-model-show-link').contains(modelDisplayName).click();
|
||||
// cy.url().should('include', `process-models/${groupDisplayName}/${modelDisplayName}`);
|
||||
cy.contains(`Process Model: ${modelDisplayName}`);
|
||||
}
|
||||
);
|
||||
|
||||
Cypress.Commands.add('basicPaginationTest', () => {
|
||||
cy.get('#pagination-page-dropdown')
|
||||
.type('typing_to_open_dropdown_box....FIXME')
|
||||
.find('.dropdown-item')
|
||||
.contains(/^2$/)
|
||||
.click();
|
||||
|
||||
cy.contains(/^1-2 of \d+$/);
|
||||
cy.getBySel('pagination-previous-button-inactive');
|
||||
cy.getBySel('pagination-next-button').click();
|
||||
cy.contains(/^3-4 of \d+$/);
|
||||
cy.getBySel('pagination-previous-button').click();
|
||||
cy.contains(/^1-2 of \d+$/);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('assertAtLeastOneItemInPaginatedResults', () => {
|
||||
cy.getBySel('total-paginated-items')
|
||||
.invoke('text')
|
||||
.then(parseFloat)
|
||||
.should('be.gt', 0);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('assertNoItemInPaginatedResults', () => {
|
||||
cy.getBySel('total-paginated-items').contains('0');
|
||||
});
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// ***********************************************************
|
||||
// This example support/e2e.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands';
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
version: "3.8"
|
||||
services:
|
||||
spiffworkflow-frontend:
|
||||
container_name: spiffworkflow-frontend
|
||||
# command: tail -f /etc/hostname
|
||||
build:
|
||||
context: .
|
||||
environment:
|
||||
- APPLICATION_ROOT=/
|
||||
- PORT0=7001
|
||||
ports:
|
||||
- "7001:7001"
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,108 @@
|
|||
{
|
||||
"name": "spiffworkflow-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.18.10",
|
||||
"@babel/plugin-transform-react-jsx": "^7.18.6",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@bpmn-io/properties-panel": "^0.19.0",
|
||||
"@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",
|
||||
"@monaco-editor/react": "^4.4.5",
|
||||
"@rjsf/core": "^4.2.0",
|
||||
"@tanstack/react-table": "^8.2.2",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^14.4.2",
|
||||
"@types/jest": "^28.1.4",
|
||||
"@types/node": "^18.6.5",
|
||||
"@types/react": "^18.0.17",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"autoprefixer": "10.4.8",
|
||||
"axios": "^0.27.2",
|
||||
"bootstrap": "^5.2.0",
|
||||
"bpmn-js": "^9.3.2",
|
||||
"bpmn-js-properties-panel": "^1.5.0",
|
||||
"bpmn-js-spiffworkflow": "sartography/bpmn-js-spiffworkflow#feature/script_unit_tests",
|
||||
"craco": "^0.0.3",
|
||||
"date-fns": "^2.28.0",
|
||||
"diagram-js": "^8.5.0",
|
||||
"dmn-js": "^12.2.0",
|
||||
"dmn-js-properties-panel": "^1.1.0",
|
||||
"dmn-js-shared": "^12.1.1",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"keycloak-js": "^18.0.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.5.0",
|
||||
"react-bootstrap-typeahead": "^6.0.0",
|
||||
"react-datepicker": "^4.8.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-jsonschema-form": "^1.8.1",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"serve": "^14.0.0",
|
||||
"timepicker": "^1.13.18",
|
||||
"typescript": "^4.7.4",
|
||||
"web-vitals": "^3.0.2"
|
||||
},
|
||||
"overrides": {
|
||||
"postcss-preset-env": {
|
||||
"autoprefixer": "10.4.5"
|
||||
},
|
||||
"@ginkgo-bioworks/react-json-schema-form-builder": {
|
||||
"react": "^18.2.0",
|
||||
"bootstrap": "^5.2.0-beta1"
|
||||
},
|
||||
"dmn-js-properties-panel": {
|
||||
"@bpmn-io/properties-panel": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"start": "ESLINT_NO_DEV_ERRORS=true PORT=7001 craco start",
|
||||
"build": "craco build",
|
||||
"test": "react-scripts test --coverage",
|
||||
"t": "npm test -- --watchAll=false",
|
||||
"eject": "craco eject",
|
||||
"format": "prettier --write src/**/*.js{,x}",
|
||||
"lint": "./node_modules/.bin/eslint src *.js",
|
||||
"lint:fix": "./node_modules/.bin/eslint --fix src *.js"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.30.5",
|
||||
"@typescript-eslint/parser": "^5.30.6",
|
||||
"cypress": "^10.8.0",
|
||||
"eslint": "^8.19.0",
|
||||
"eslint_d": "^12.2.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.6.1",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-react": "^7.31.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-sonarjs": "^0.15.0",
|
||||
"prettier": "^2.7.1",
|
||||
"safe-regex": "^2.1.1",
|
||||
"ts-migrate": "^0.1.30"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Frontend for managing and running business processes with spiffworkflow"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>spiffworkflow-frontend</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"realm": "spiffworkflow",
|
||||
"auth-server-url": "http://localhost:7002/",
|
||||
"ssl-required": "external",
|
||||
"resource": "spiffworkflow-frontend",
|
||||
"public-client": true,
|
||||
"confidential-port": 0
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_96f6665" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.0.0-dev">
|
||||
<bpmn:process id="{{PROCESS_ID}}" isExecutable="true">
|
||||
<bpmn:startEvent id="StartEvent_1" />
|
||||
</bpmn:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="{{PROCESS_ID}}">
|
||||
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
|
||||
<dc:Bounds x="179" y="159" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn:definitions>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" id="Definitions_76910d7" name="DRD" namespace="http://camunda.org/schema/1.0/dmn">
|
||||
<decision id="decision_1" name="Decision 1">
|
||||
<decisionTable id="decisionTable_1">
|
||||
<input id="input_1">
|
||||
<inputExpression id="inputExpression_1" typeRef="string">
|
||||
<text></text>
|
||||
</inputExpression>
|
||||
</input>
|
||||
<output id="output_1" typeRef="string" />
|
||||
</decisionTable>
|
||||
</decision>
|
||||
<dmndi:DMNDI>
|
||||
<dmndi:DMNDiagram id="DMNDiagram_1cykosu">
|
||||
<dmndi:DMNShape id="DMNShape_1dhfq2s" dmnElementRef="decision_1">
|
||||
<dc:Bounds height="80" width="180" x="157" y="151" />
|
||||
</dmndi:DMNShape>
|
||||
</dmndi:DMNDiagram>
|
||||
</dmndi:DMNDI>
|
||||
</definitions>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
sonar.projectKey=sartography_spiffworkflow-frontend
|
||||
sonar.organization=sartography
|
||||
sonar.host.url=https://sonarcloud.io
|
||||
sonar.sources=src
|
||||
sonar.javascript.lcov.reportPaths=coverage/lcov.info
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import { useMemo, useState } from 'react';
|
||||
import { Container } from 'react-bootstrap';
|
||||
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import ErrorContext from './contexts/ErrorContext';
|
||||
import NavigationBar from './components/NavigationBar';
|
||||
|
||||
import HomePage from './routes/HomePage';
|
||||
import TaskShow from './routes/TaskShow';
|
||||
import ErrorBoundary from './components/ErrorBoundary';
|
||||
import AdminRoutes from './routes/AdminRoutes';
|
||||
import SubNavigation from './components/SubNavigation';
|
||||
|
||||
export default function App() {
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
const errorContextValueArray = useMemo(
|
||||
() => [errorMessage, setErrorMessage],
|
||||
[errorMessage]
|
||||
);
|
||||
|
||||
let errorTag = null;
|
||||
if (errorMessage !== '') {
|
||||
errorTag = (
|
||||
<div id="filter-errors" className="mt-4 alert alert-danger" role="alert">
|
||||
{errorMessage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorContext.Provider value={errorContextValueArray}>
|
||||
<NavigationBar />
|
||||
<Container>
|
||||
{errorTag}
|
||||
<ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<SubNavigation />
|
||||
<main style={{ padding: '1rem 0' }}>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/tasks" element={<HomePage />} />
|
||||
<Route path="/admin/*" element={<AdminRoutes />} />
|
||||
<Route
|
||||
path="/tasks/:process_instance_id/:task_id"
|
||||
element={<TaskShow />}
|
||||
/>
|
||||
<Route
|
||||
path="/tasks/:process_instance_id/:task_id"
|
||||
element={<TaskShow />}
|
||||
/>
|
||||
</Routes>
|
||||
</main>
|
||||
</BrowserRouter>
|
||||
</ErrorBoundary>
|
||||
</Container>
|
||||
</ErrorContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#js-properties-panel {
|
||||
width: 400px;
|
||||
}
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.content > .message {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: table;
|
||||
font-size: 16px;
|
||||
color: #111;
|
||||
}
|
||||
.content > .message .note {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
}
|
||||
.content > .message.error .details {
|
||||
max-width: 500px;
|
||||
font-size: 12px;
|
||||
margin: 20px auto;
|
||||
text-align: left;
|
||||
color: #BD2828;
|
||||
}
|
||||
.content > .message.error pre {
|
||||
border: solid 1px #BD2828;
|
||||
background: #fefafa;
|
||||
padding: 10px;
|
||||
color: #BD2828;
|
||||
}
|
||||
.content:not(.with-error) .error,
|
||||
.content.with-error .intro,
|
||||
.content.with-diagram .intro {
|
||||
display: none;
|
||||
}
|
||||
.content .canvas {
|
||||
width: 100%;
|
||||
}
|
||||
.content .canvas,
|
||||
.content .properties-panel-parent {
|
||||
display: none;
|
||||
}
|
||||
.content.with-diagram .canvas,
|
||||
.content.with-diagram .properties-panel-parent {
|
||||
display: block;
|
||||
}
|
||||
.buttons {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.buttons > li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.buttons > li > a {
|
||||
background: #DDD;
|
||||
border: solid 1px #666;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
}
|
||||
.buttons a {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.buttons a.active {
|
||||
opacity: 1;
|
||||
}
|
||||
.properties-panel-parent {
|
||||
border-left: 1px solid #ccc;
|
||||
overflow: auto;
|
||||
}
|
||||
.properties-panel-parent:empty {
|
||||
display: none;
|
||||
}
|
||||
.properties-panel-parent > .djs-properties-panel {
|
||||
padding-bottom: 70px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import { useState } from 'react';
|
||||
import { Button, Modal } from 'react-bootstrap';
|
||||
|
||||
type OwnProps = {
|
||||
description?: string;
|
||||
buttonLabel: string;
|
||||
onConfirmation: (..._args: any[]) => any;
|
||||
title?: string;
|
||||
confirmButtonLabel?: string;
|
||||
};
|
||||
|
||||
export default function ButtonWithConfirmation({
|
||||
description,
|
||||
buttonLabel,
|
||||
onConfirmation,
|
||||
title = 'Are you sure?',
|
||||
confirmButtonLabel = 'OK',
|
||||
}: OwnProps) {
|
||||
const [showConfirmationPrompt, setShowConfirmationPrompt] = useState(false);
|
||||
|
||||
const handleShowConfirmationPrompt = () => {
|
||||
setShowConfirmationPrompt(true);
|
||||
};
|
||||
const handleConfirmationPromptCancel = () => {
|
||||
setShowConfirmationPrompt(false);
|
||||
};
|
||||
|
||||
const modalBodyElement = () => {
|
||||
if (description) {
|
||||
return <Modal.Body>{description}</Modal.Body>;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleConfirmation = () => {
|
||||
onConfirmation();
|
||||
setShowConfirmationPrompt(false);
|
||||
};
|
||||
|
||||
const confirmationDialog = () => {
|
||||
return (
|
||||
<Modal
|
||||
show={showConfirmationPrompt}
|
||||
onHide={handleConfirmationPromptCancel}
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
{modalBodyElement()}
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleConfirmationPromptCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" onClick={handleConfirmation}>
|
||||
{confirmButtonLabel}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={handleShowConfirmationPrompt} variant="danger">
|
||||
{buttonLabel}
|
||||
</Button>
|
||||
{confirmationDialog()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
|
||||
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: any) {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: any, errorInfo: any) {
|
||||
console.error(error, errorInfo);
|
||||
if (error.constructor.name === 'AggregateError') {
|
||||
console.error(error.message);
|
||||
console.error(error.name);
|
||||
console.error(error.errors);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { hasError } = this.state;
|
||||
const { children } = this.props;
|
||||
|
||||
if (hasError) {
|
||||
return <h1>Something went wrong.</h1>;
|
||||
}
|
||||
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
type Props = {
|
||||
processGroupId: string;
|
||||
processModelId: string;
|
||||
onUploadedCallback?: (..._args: any[]) => any;
|
||||
};
|
||||
|
||||
export default class FileInput extends React.Component<Props> {
|
||||
fileInput: any;
|
||||
|
||||
processGroupId: any;
|
||||
|
||||
processModelId: any;
|
||||
|
||||
onUploadedCallback: any;
|
||||
|
||||
constructor({ processGroupId, processModelId, onUploadedCallback }: Props) {
|
||||
super({ processGroupId, processModelId, onUploadedCallback });
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.fileInput = React.createRef();
|
||||
this.processGroupId = processGroupId;
|
||||
this.processModelId = processModelId;
|
||||
this.onUploadedCallback = onUploadedCallback;
|
||||
}
|
||||
|
||||
handleSubmit(event: any) {
|
||||
event.preventDefault();
|
||||
const url = `/process-models/${this.processGroupId}/${this.processModelId}/files`;
|
||||
const formData = new FormData();
|
||||
formData.append('file', this.fileInput.current.files[0]);
|
||||
formData.append('fileName', this.fileInput.current.files[0].name);
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: this.onUploadedCallback,
|
||||
httpMethod: 'POST',
|
||||
postBody: formData,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<label>
|
||||
Upload file:
|
||||
<input type="file" ref={this.fileInput} />
|
||||
</label>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import { Button, Navbar, Nav, Container } from 'react-bootstrap';
|
||||
// import { capitalizeFirstLetter } from '../helpers';
|
||||
// @ts-expect-error TS(2307) FIXME: Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message
|
||||
import logo from '../logo.svg';
|
||||
import UserService from '../services/UserService';
|
||||
|
||||
// for ref: https://react-bootstrap.github.io/components/navbar/
|
||||
export default function NavigationBar() {
|
||||
// const navItems: string[] = [];
|
||||
// if (UserService.hasRole(['admin'])) {
|
||||
// navItems.push('/admin');
|
||||
// }
|
||||
// navItems.push('/tasks');
|
||||
//
|
||||
// const navElements = navItems.map((navItem) => {
|
||||
// let className = '';
|
||||
// if (window.location.pathname.startsWith(navItem)) {
|
||||
// className = 'active';
|
||||
// }
|
||||
// const navItemWithoutSlash = navItem.replace(/\/*/, '');
|
||||
// const title = capitalizeFirstLetter(navItemWithoutSlash);
|
||||
// return (
|
||||
// <Nav.Link
|
||||
// href={navItem}
|
||||
// className={className}
|
||||
// data-qa={`nav-item-${navItemWithoutSlash}`}
|
||||
// >
|
||||
// {title}
|
||||
// </Nav.Link>
|
||||
// );
|
||||
// });
|
||||
const navElements = null;
|
||||
|
||||
const handleLogout = () => {
|
||||
UserService.doLogout();
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
UserService.doLogin();
|
||||
};
|
||||
|
||||
const loginLink = () => {
|
||||
if (!UserService.isLoggedIn()) {
|
||||
return (
|
||||
<Navbar.Collapse className="justify-content-end">
|
||||
<Navbar.Text>
|
||||
<Button variant="link" onClick={handleLogin}>
|
||||
Login
|
||||
</Button>
|
||||
</Navbar.Text>
|
||||
</Navbar.Collapse>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const logoutLink = () => {
|
||||
if (UserService.isLoggedIn()) {
|
||||
return (
|
||||
<Navbar.Collapse className="justify-content-end">
|
||||
<Navbar.Text>
|
||||
Signed in as: <strong>{UserService.getUsername()}</strong>
|
||||
</Navbar.Text>
|
||||
<Navbar.Text>
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={handleLogout}
|
||||
data-qa="logout-button"
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</Navbar.Text>
|
||||
</Navbar.Collapse>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<Navbar bg="dark" expand="lg" variant="dark">
|
||||
<Container>
|
||||
<Navbar.Brand data-qa="spiffworkflow-logo" 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>
|
||||
{loginLink()}
|
||||
{logoutLink()}
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Dropdown, Stack } from 'react-bootstrap';
|
||||
|
||||
export const DEFAULT_PER_PAGE = 50;
|
||||
export const DEFAULT_PAGE = 1;
|
||||
|
||||
type OwnProps = {
|
||||
page: number;
|
||||
perPage: number;
|
||||
perPageOptions?: number[];
|
||||
pagination: {
|
||||
[key: string]: number;
|
||||
};
|
||||
tableToDisplay: any;
|
||||
queryParamString?: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
export default function PaginationForTable({
|
||||
page,
|
||||
perPage,
|
||||
perPageOptions,
|
||||
pagination,
|
||||
tableToDisplay,
|
||||
queryParamString = '',
|
||||
path,
|
||||
}: OwnProps) {
|
||||
const PER_PAGE_OPTIONS = [2, 10, 50, 100];
|
||||
|
||||
const buildPerPageDropdown = () => {
|
||||
const perPageDropdownRows = (perPageOptions || PER_PAGE_OPTIONS).map(
|
||||
(perPageOption) => {
|
||||
if (perPageOption === perPage) {
|
||||
return (
|
||||
<Dropdown.Item
|
||||
key={perPageOption}
|
||||
href={`${path}?page=1&per_page=${perPageOption}`}
|
||||
active
|
||||
>
|
||||
{perPageOption}
|
||||
</Dropdown.Item>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Dropdown.Item
|
||||
key={perPageOption}
|
||||
href={`${path}?page=1&per_page=${perPageOption}`}
|
||||
>
|
||||
{perPageOption}
|
||||
</Dropdown.Item>
|
||||
);
|
||||
}
|
||||
);
|
||||
return (
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Dropdown className="ms-auto" id="pagination-page-dropdown">
|
||||
<Dropdown.Toggle
|
||||
id="process-instances-per-page"
|
||||
variant="light border"
|
||||
>
|
||||
Number to show: {perPage}
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu variant="light">{perPageDropdownRows}</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const buildPaginationNav = () => {
|
||||
let previousPageTag = null;
|
||||
if (page === 1) {
|
||||
previousPageTag = (
|
||||
<li
|
||||
data-qa="pagination-previous-button-inactive"
|
||||
className="page-item disabled"
|
||||
key="previous"
|
||||
>
|
||||
<span style={{ fontSize: '1.5em' }} className="page-link">
|
||||
«
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
previousPageTag = (
|
||||
<li className="page-item" key="previous">
|
||||
<Link
|
||||
data-qa="pagination-previous-button"
|
||||
className="page-link"
|
||||
style={{ fontSize: '1.5em' }}
|
||||
to={`${path}?page=${
|
||||
page - 1
|
||||
}&per_page=${perPage}${queryParamString}`}
|
||||
>
|
||||
«
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
let nextPageTag = null;
|
||||
if (page >= pagination.pages) {
|
||||
nextPageTag = (
|
||||
<li
|
||||
data-qa="pagination-next-button-inactive"
|
||||
className="page-item disabled"
|
||||
key="next"
|
||||
>
|
||||
<span style={{ fontSize: '1.5em' }} className="page-link">
|
||||
»
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
nextPageTag = (
|
||||
<li className="page-item" key="next">
|
||||
<Link
|
||||
data-qa="pagination-next-button"
|
||||
className="page-link"
|
||||
style={{ fontSize: '1.5em' }}
|
||||
to={`${path}?page=${
|
||||
page + 1
|
||||
}&per_page=${perPage}${queryParamString}`}
|
||||
>
|
||||
»
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
let startingNumber = (page - 1) * perPage + 1;
|
||||
let endingNumber = page * perPage;
|
||||
if (endingNumber > pagination.total) {
|
||||
endingNumber = pagination.total;
|
||||
}
|
||||
if (startingNumber > pagination.total) {
|
||||
startingNumber = pagination.total;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<p className="ms-auto">
|
||||
{startingNumber}-{endingNumber} of{' '}
|
||||
<span data-qa="total-paginated-items">{pagination.total}</span>
|
||||
</p>
|
||||
<nav aria-label="Page navigation">
|
||||
<div>
|
||||
<ul className="pagination">
|
||||
{previousPageTag}
|
||||
{nextPageTag}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<main>
|
||||
{buildPaginationNav()}
|
||||
{tableToDisplay}
|
||||
{buildPerPageDropdown()}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import ProcessBreadcrumb from './ProcessBreadcrumb';
|
||||
|
||||
test('renders home link', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<ProcessBreadcrumb />
|
||||
</BrowserRouter>
|
||||
);
|
||||
const homeElement = screen.getByText(/Process Groups/);
|
||||
expect(homeElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders hotCrumbs', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<ProcessBreadcrumb
|
||||
hotCrumbs={[['Process Groups', '/admin'], [`Process Group: hey`]]}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
const homeElement = screen.getByText(/Process Groups/);
|
||||
expect(homeElement).toBeInTheDocument();
|
||||
const nextElement = screen.getByText(/Process Group: hey/);
|
||||
expect(nextElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders process group when given processGroupId', async () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<ProcessBreadcrumb processGroupId="group-a" />
|
||||
</BrowserRouter>
|
||||
);
|
||||
const processGroupElement = screen.getByText(/group-a/);
|
||||
expect(processGroupElement).toBeInTheDocument();
|
||||
const processGroupBreadcrumbs = await screen.findAllByText(
|
||||
/Process Group: group-a/
|
||||
);
|
||||
expect(processGroupBreadcrumbs[0]).toHaveClass('breadcrumb-item active');
|
||||
});
|
||||
|
||||
test('renders process model when given processModelId', async () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<ProcessBreadcrumb processGroupId="group-b" processModelId="model-c" />
|
||||
</BrowserRouter>
|
||||
);
|
||||
const processGroupElement = screen.getByText(/group-b/);
|
||||
expect(processGroupElement).toBeInTheDocument();
|
||||
const processModelBreadcrumbs = await screen.findAllByText(
|
||||
/Process Model: model-c/
|
||||
);
|
||||
expect(processModelBreadcrumbs[0]).toHaveClass('breadcrumb-item active');
|
||||
const processGroupBreadcrumbs = await screen.findAllByText(
|
||||
/Process Group: group-b/
|
||||
);
|
||||
expect(processGroupBreadcrumbs[0]).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import Breadcrumb from 'react-bootstrap/Breadcrumb';
|
||||
import { BreadcrumbItem } from '../interfaces';
|
||||
|
||||
type OwnProps = {
|
||||
processModelId?: string;
|
||||
processGroupId?: string;
|
||||
linkProcessModel?: boolean;
|
||||
hotCrumbs?: BreadcrumbItem[];
|
||||
};
|
||||
|
||||
export default function ProcessBreadcrumb({
|
||||
processModelId,
|
||||
processGroupId,
|
||||
hotCrumbs,
|
||||
linkProcessModel = false,
|
||||
}: OwnProps) {
|
||||
let processGroupBreadcrumb = null;
|
||||
let processModelBreadcrumb = null;
|
||||
if (hotCrumbs) {
|
||||
const lastItem = hotCrumbs.pop();
|
||||
if (lastItem === undefined) {
|
||||
return null;
|
||||
}
|
||||
const lastCrumb = <Breadcrumb.Item active>{lastItem[0]}</Breadcrumb.Item>;
|
||||
const leadingCrumbLinks = hotCrumbs.map((crumb) => {
|
||||
const valueLabel = crumb[0];
|
||||
const url = crumb[1];
|
||||
return (
|
||||
<Breadcrumb.Item key={valueLabel} linkAs={Link} linkProps={{ to: url }}>
|
||||
{valueLabel}
|
||||
</Breadcrumb.Item>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Breadcrumb>
|
||||
{leadingCrumbLinks}
|
||||
{lastCrumb}
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
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}
|
||||
data-qa="process-group-breadcrumb-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 (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
|
||||
Process Groups
|
||||
</Breadcrumb.Item>
|
||||
{processGroupBreadcrumb}
|
||||
{processModelBreadcrumb}
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,464 @@
|
|||
/* eslint-disable sonarjs/cognitive-complexity */
|
||||
// @ts-expect-error TS(7016) FIXME: 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';
|
||||
// @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
|
||||
import BpmnViewer from 'bpmn-js/lib/Viewer';
|
||||
import {
|
||||
BpmnPropertiesPanelModule,
|
||||
BpmnPropertiesProviderModule,
|
||||
// @ts-expect-error TS(7016) FIXME: 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) FIXME: 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) FIXME: 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';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
|
||||
import 'bpmn-js/dist/assets/diagram-js.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
|
||||
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css';
|
||||
import '../bpmn-js-properties-panel.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-js.css';
|
||||
|
||||
import 'dmn-js/dist/assets/diagram-js.css';
|
||||
import 'dmn-js/dist/assets/dmn-js-decision-table-controls.css';
|
||||
import 'dmn-js/dist/assets/dmn-js-decision-table.css';
|
||||
import 'dmn-js/dist/assets/dmn-js-drd.css';
|
||||
import 'dmn-js/dist/assets/dmn-js-literal-expression.css';
|
||||
import 'dmn-js/dist/assets/dmn-js-shared.css';
|
||||
import 'dmn-js/dist/assets/dmn-font/css/dmn-embedded.css';
|
||||
import 'dmn-js-properties-panel/dist/assets/properties-panel.css';
|
||||
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import spiffworkflow from 'bpmn-js-spiffworkflow/app/spiffworkflow';
|
||||
import 'bpmn-js-spiffworkflow/app/css/app.css';
|
||||
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import spiffModdleExtension from 'bpmn-js-spiffworkflow/app/spiffworkflow/moddle/spiffworkflow.json';
|
||||
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import TouchModule from 'diagram-js/lib/navigation/touch';
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
||||
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
import ButtonWithConfirmation from './ButtonWithConfirmation';
|
||||
import { makeid } from '../helpers';
|
||||
|
||||
type OwnProps = {
|
||||
processModelId: string;
|
||||
processGroupId: string;
|
||||
diagramType: string;
|
||||
readyOrWaitingBpmnTaskIds?: string[] | null;
|
||||
completedTasksBpmnIds?: string[] | null;
|
||||
saveDiagram?: (..._args: any[]) => any;
|
||||
onDeleteFile?: (..._args: any[]) => any;
|
||||
onSetPrimaryFile?: (..._args: any[]) => any;
|
||||
diagramXML?: string | null;
|
||||
fileName?: string;
|
||||
onLaunchScriptEditor?: (..._args: any[]) => any;
|
||||
onElementClick?: (..._args: any[]) => any;
|
||||
onServiceTasksRequested?: (..._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,
|
||||
processGroupId,
|
||||
diagramType,
|
||||
readyOrWaitingBpmnTaskIds,
|
||||
completedTasksBpmnIds,
|
||||
saveDiagram,
|
||||
onDeleteFile,
|
||||
onSetPrimaryFile,
|
||||
diagramXML,
|
||||
fileName,
|
||||
onLaunchScriptEditor,
|
||||
onElementClick,
|
||||
onServiceTasksRequested,
|
||||
url,
|
||||
}: OwnProps) {
|
||||
const [diagramXMLString, setDiagramXMLString] = useState('');
|
||||
const [diagramModelerState, setDiagramModelerState] = useState(null);
|
||||
const [performingXmlUpdates, setPerformingXmlUpdates] = useState(false);
|
||||
|
||||
const alreadyImportedXmlRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (diagramModelerState) {
|
||||
return;
|
||||
}
|
||||
|
||||
let canvasClass = 'diagram-editor-canvas';
|
||||
if (diagramType === 'readonly') {
|
||||
canvasClass = 'diagram-viewer-canvas';
|
||||
}
|
||||
|
||||
const temp = document.createElement('template');
|
||||
temp.innerHTML = `
|
||||
<div class="content with-diagram" id="js-drop-zone">
|
||||
<div class="canvas ${canvasClass}" id="canvas"
|
||||
></div>
|
||||
<div class="properties-panel-parent" id="js-properties-panel"></div>
|
||||
</div>
|
||||
`;
|
||||
const frag = temp.content;
|
||||
|
||||
const diagramContainerElement =
|
||||
document.getElementById('diagram-container');
|
||||
if (diagramContainerElement) {
|
||||
diagramContainerElement.innerHTML = '';
|
||||
diagramContainerElement.appendChild(frag);
|
||||
}
|
||||
|
||||
let diagramModeler: any = null;
|
||||
|
||||
if (diagramType === 'bpmn') {
|
||||
diagramModeler = new BpmnModeler({
|
||||
container: '#canvas',
|
||||
keyboard: {
|
||||
bindTo: document,
|
||||
},
|
||||
propertiesPanel: {
|
||||
parent: '#js-properties-panel',
|
||||
},
|
||||
additionalModules: [
|
||||
spiffworkflow,
|
||||
BpmnPropertiesPanelModule,
|
||||
BpmnPropertiesProviderModule,
|
||||
],
|
||||
moddleExtensions: {
|
||||
spiffworkflow: spiffModdleExtension,
|
||||
},
|
||||
});
|
||||
} else if (diagramType === 'dmn') {
|
||||
diagramModeler = new DmnModeler({
|
||||
container: '#canvas',
|
||||
keyboard: {
|
||||
bindTo: document,
|
||||
},
|
||||
drd: {
|
||||
propertiesPanel: {
|
||||
parent: '#js-properties-panel',
|
||||
},
|
||||
additionalModules: [
|
||||
DmnPropertiesPanelModule,
|
||||
DmnPropertiesProviderModule,
|
||||
],
|
||||
},
|
||||
});
|
||||
} else if (diagramType === 'readonly') {
|
||||
diagramModeler = new BpmnViewer({
|
||||
container: '#canvas',
|
||||
keyboard: {
|
||||
bindTo: document,
|
||||
},
|
||||
|
||||
// taken from the non-modeling components at
|
||||
// bpmn-js/lib/Modeler.js
|
||||
additionalModules: [
|
||||
KeyboardMoveModule,
|
||||
MoveCanvasModule,
|
||||
TouchModule,
|
||||
ZoomScrollModule,
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function handleLaunchScriptEditor(element: any) {
|
||||
if (onLaunchScriptEditor) {
|
||||
setPerformingXmlUpdates(true);
|
||||
const modeling = diagramModeler.get('modeling');
|
||||
onLaunchScriptEditor(element, modeling);
|
||||
}
|
||||
}
|
||||
|
||||
function handleElementClick(event: any) {
|
||||
if (onElementClick) {
|
||||
onElementClick(event.element);
|
||||
}
|
||||
}
|
||||
|
||||
function handleServiceTasksRequested(event: any) {
|
||||
if (onServiceTasksRequested) {
|
||||
onServiceTasksRequested(event);
|
||||
}
|
||||
}
|
||||
|
||||
setDiagramModelerState(diagramModeler);
|
||||
|
||||
diagramModeler.on('launch.script.editor', (event: any) => {
|
||||
const { error, element } = event;
|
||||
if (error) {
|
||||
console.log(error);
|
||||
}
|
||||
handleLaunchScriptEditor(element);
|
||||
});
|
||||
|
||||
// 'element.hover',
|
||||
// 'element.out',
|
||||
// 'element.click',
|
||||
// 'element.dblclick',
|
||||
// 'element.mousedown',
|
||||
// 'element.mouseup',
|
||||
diagramModeler.on('element.click', (element: any) => {
|
||||
handleElementClick(element);
|
||||
});
|
||||
|
||||
diagramModeler.on('spiff.service_tasks.requested', (event: any) => {
|
||||
handleServiceTasksRequested(event);
|
||||
});
|
||||
}, [
|
||||
diagramModelerState,
|
||||
diagramType,
|
||||
onLaunchScriptEditor,
|
||||
onElementClick,
|
||||
onServiceTasksRequested,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
// These seem to be system tasks that cannot be highlighted
|
||||
const taskSpecsThatCannotBeHighlighted = ['Root', 'Start', 'End'];
|
||||
|
||||
if (!diagramModelerState) {
|
||||
return undefined;
|
||||
}
|
||||
if (performingXmlUpdates) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function handleError(err: any) {
|
||||
console.log('ERROR:', err);
|
||||
}
|
||||
|
||||
function checkTaskCanBeHighlighted(taskBpmnId: string) {
|
||||
return (
|
||||
!taskSpecsThatCannotBeHighlighted.includes(taskBpmnId) &&
|
||||
!taskBpmnId.match(/EndJoin/)
|
||||
);
|
||||
}
|
||||
|
||||
function highlightBpmnIoElement(
|
||||
canvas: any,
|
||||
taskBpmnId: string,
|
||||
bpmnIoClassName: string
|
||||
) {
|
||||
if (checkTaskCanBeHighlighted(taskBpmnId)) {
|
||||
try {
|
||||
canvas.addMarker(taskBpmnId, bpmnIoClassName);
|
||||
} catch (bpmnIoError: any) {
|
||||
// the task list also contains task for processes called from call activities which will
|
||||
// not exist in this diagram so just ignore them for now.
|
||||
if (
|
||||
bpmnIoError.message !==
|
||||
"Cannot read properties of undefined (reading 'id')"
|
||||
) {
|
||||
throw bpmnIoError;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onImportDone(event: any) {
|
||||
const { error } = event;
|
||||
|
||||
if (error) {
|
||||
handleError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
let modeler = diagramModelerState;
|
||||
if (diagramType === 'dmn') {
|
||||
modeler = (diagramModelerState as any).getActiveViewer();
|
||||
}
|
||||
|
||||
const canvas = (modeler as any).get('canvas');
|
||||
|
||||
// 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
|
||||
if ((modeler as any).constructor.name === 'Modeler') {
|
||||
canvas.zoom('fit-viewport');
|
||||
}
|
||||
|
||||
// highlighting a field
|
||||
// Option 3 at:
|
||||
// https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors
|
||||
if (readyOrWaitingBpmnTaskIds) {
|
||||
readyOrWaitingBpmnTaskIds.forEach((readyOrWaitingBpmnTaskId) => {
|
||||
highlightBpmnIoElement(
|
||||
canvas,
|
||||
readyOrWaitingBpmnTaskId,
|
||||
'active-task-highlight'
|
||||
);
|
||||
});
|
||||
}
|
||||
if (completedTasksBpmnIds) {
|
||||
completedTasksBpmnIds.forEach((completedTaskBpmnId) => {
|
||||
highlightBpmnIoElement(
|
||||
canvas,
|
||||
completedTaskBpmnId,
|
||||
'completed-task-highlight'
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function displayDiagram(
|
||||
diagramModelerToUse: any,
|
||||
diagramXMLToDisplay: any
|
||||
) {
|
||||
if (alreadyImportedXmlRef.current) {
|
||||
return;
|
||||
}
|
||||
diagramModelerToUse.importXML(diagramXMLToDisplay);
|
||||
alreadyImportedXmlRef.current = true;
|
||||
}
|
||||
|
||||
function fetchDiagramFromURL(urlToUse: any) {
|
||||
fetch(urlToUse)
|
||||
.then((response) => response.text())
|
||||
.then((text) => {
|
||||
const processId = `Proccess_${makeid(7)}`;
|
||||
const newText = text.replace('{{PROCESS_ID}}', processId);
|
||||
setDiagramXMLString(newText);
|
||||
})
|
||||
.catch((err) => handleError(err));
|
||||
}
|
||||
|
||||
function setDiagramXMLStringFromResponseJson(result: any) {
|
||||
setDiagramXMLString(result.file_contents);
|
||||
}
|
||||
|
||||
function fetchDiagramFromJsonAPI() {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${processGroupId}/${processModelId}/files/${fileName}`,
|
||||
successCallback: setDiagramXMLStringFromResponseJson,
|
||||
});
|
||||
}
|
||||
|
||||
(diagramModelerState as any).on('import.done', onImportDone);
|
||||
|
||||
const diagramXMLToUse = diagramXML || diagramXMLString;
|
||||
if (diagramXMLToUse) {
|
||||
if (!diagramXMLString) {
|
||||
setDiagramXMLString(diagramXMLToUse);
|
||||
}
|
||||
displayDiagram(diagramModelerState, diagramXMLToUse);
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (!diagramXMLString) {
|
||||
if (url) {
|
||||
fetchDiagramFromURL(url);
|
||||
return undefined;
|
||||
}
|
||||
if (fileName) {
|
||||
fetchDiagramFromJsonAPI();
|
||||
return undefined;
|
||||
}
|
||||
let newDiagramFileName = 'new_bpmn_diagram.bpmn';
|
||||
if (diagramType === 'dmn') {
|
||||
newDiagramFileName = 'new_dmn_diagram.dmn';
|
||||
}
|
||||
fetchDiagramFromURL(`${process.env.PUBLIC_URL}/${newDiagramFileName}`);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return () => {
|
||||
(diagramModelerState as any).destroy();
|
||||
};
|
||||
}, [
|
||||
diagramModelerState,
|
||||
diagramType,
|
||||
diagramXML,
|
||||
diagramXMLString,
|
||||
readyOrWaitingBpmnTaskIds,
|
||||
completedTasksBpmnIds,
|
||||
fileName,
|
||||
performingXmlUpdates,
|
||||
processGroupId,
|
||||
processModelId,
|
||||
url,
|
||||
]);
|
||||
|
||||
function handleSave() {
|
||||
if (saveDiagram) {
|
||||
(diagramModelerState as any)
|
||||
.saveXML({ format: true })
|
||||
.then((xmlObject: any) => {
|
||||
saveDiagram(xmlObject.xml);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (onDeleteFile) {
|
||||
onDeleteFile(fileName);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSetPrimaryFile() {
|
||||
if (onSetPrimaryFile) {
|
||||
onSetPrimaryFile(fileName);
|
||||
}
|
||||
}
|
||||
|
||||
const downloadXmlFile = () => {
|
||||
(diagramModelerState as any)
|
||||
.saveXML({ format: true })
|
||||
.then((xmlObject: any) => {
|
||||
const element = document.createElement('a');
|
||||
const file = new Blob([xmlObject.xml], {
|
||||
type: 'application/xml',
|
||||
});
|
||||
let downloadFileName = fileName;
|
||||
if (!downloadFileName) {
|
||||
downloadFileName = `${processModelId}.${diagramType}`;
|
||||
}
|
||||
element.href = URL.createObjectURL(file);
|
||||
element.download = downloadFileName;
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
});
|
||||
};
|
||||
|
||||
const userActionOptions = () => {
|
||||
if (diagramType !== 'readonly') {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={handleSave} variant="danger">
|
||||
Save
|
||||
</Button>
|
||||
{fileName && (
|
||||
<ButtonWithConfirmation
|
||||
description={`Delete file ${fileName}?`}
|
||||
onConfirmation={handleDelete}
|
||||
buttonLabel="Delete"
|
||||
/>
|
||||
)}
|
||||
{onSetPrimaryFile && (
|
||||
<Button onClick={handleSetPrimaryFile}>Set as primary file</Button>
|
||||
)}
|
||||
<Button onClick={downloadXmlFile}>Download xml</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return <div>{userActionOptions()}</div>;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// // @ts-expect-error TS(7016) FIXME
|
||||
// import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder';
|
||||
//
|
||||
// type OwnProps = {
|
||||
// schema: string;
|
||||
// uischema: string;
|
||||
// };
|
||||
//
|
||||
// export default function ReactFormBuilder({ schema, uischema }: OwnProps) {
|
||||
// // onChange={(newSchema: string, newUiSchema: string) => {
|
||||
// // this.setState({
|
||||
// // schema: newSchema,
|
||||
// // uischema: newUiSchema,
|
||||
// // });
|
||||
// // }}
|
||||
// // return <main />;
|
||||
// return <FormBuilder schema={schema} uischema={uischema} />;
|
||||
// }
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
import UserService from '../services/UserService';
|
||||
|
||||
type Props = {
|
||||
roles: string[];
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
function RenderOnRole({ roles, children }: Props) {
|
||||
return UserService.hasRole(roles) ? children : null;
|
||||
}
|
||||
|
||||
export default RenderOnRole;
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import Nav from 'react-bootstrap/Nav';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
export default function SubNavigation() {
|
||||
const location = useLocation();
|
||||
const [activeKey, setActiveKey] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let newActiveKey = '/admin/process-groups';
|
||||
if (location.pathname.match(/^\/admin\/messages\b/)) {
|
||||
newActiveKey = '/admin/messages';
|
||||
} else if (location.pathname.match(/^\/admin\/process-instances\b/)) {
|
||||
newActiveKey = '/admin/process-instances';
|
||||
} else if (location.pathname.match(/^\/admin\/secrets\b/)) {
|
||||
newActiveKey = '/admin/secrets';
|
||||
} else if (location.pathname === '/') {
|
||||
newActiveKey = '/';
|
||||
} else if (location.pathname.match(/^\/tasks\b/)) {
|
||||
newActiveKey = '/';
|
||||
}
|
||||
setActiveKey(newActiveKey);
|
||||
}, [location]);
|
||||
|
||||
if (activeKey) {
|
||||
return (
|
||||
<Nav variant="tabs" activeKey={activeKey}>
|
||||
<Nav.Item data-qa="nav-home">
|
||||
<Nav.Link href="/">Home</Nav.Link>
|
||||
</Nav.Item>
|
||||
<Nav.Item>
|
||||
<Nav.Link href="/admin/process-groups">Process Models</Nav.Link>
|
||||
</Nav.Item>
|
||||
<Nav.Item>
|
||||
<Nav.Link href="/admin/process-instances">Process Instances</Nav.Link>
|
||||
</Nav.Item>
|
||||
<Nav.Item>
|
||||
<Nav.Link href="/admin/messages">Messages</Nav.Link>
|
||||
</Nav.Item>
|
||||
<Nav.Item>
|
||||
<Nav.Link href="/admin/secrets">Secrets</Nav.Link>
|
||||
</Nav.Item>
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
const host = window.location.hostname;
|
||||
export const HOST_AND_PORT = `${host}:7000`;
|
||||
|
||||
export const BACKEND_BASE_URL = `http://${HOST_AND_PORT}/v1.0`;
|
||||
|
||||
export const PROCESS_STATUSES = [
|
||||
'not_started',
|
||||
'user_input_required',
|
||||
'waiting',
|
||||
'complete',
|
||||
'faulted',
|
||||
'suspended',
|
||||
];
|
||||
|
||||
export const DATE_FORMAT = 'yyyy-MM-dd HH:mm:ss';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createContext } from 'react';
|
||||
|
||||
// @ts-expect-error TS(2554) FIXME: Expected 1 arguments, but got 0.
|
||||
const ErrorContext = createContext();
|
||||
export default ErrorContext;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { slugifyString } from './helpers';
|
||||
|
||||
test('it can slugify a string', () => {
|
||||
expect(slugifyString('hello---world_ and then Some such-')).toEqual(
|
||||
'hello-world-and-then-some-such'
|
||||
);
|
||||
});
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import { format } from 'date-fns';
|
||||
import { DATE_FORMAT } from './config';
|
||||
import {
|
||||
DEFAULT_PER_PAGE,
|
||||
DEFAULT_PAGE,
|
||||
} from './components/PaginationForTable';
|
||||
|
||||
// https://www.30secondsofcode.org/js/s/slugify
|
||||
export const slugifyString = (str: any) => {
|
||||
return str
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^\w\s-]/g, '')
|
||||
.replace(/[\s_-]+/g, '-')
|
||||
.replace(/^-+/g, '')
|
||||
.replace(/-+$/g, '');
|
||||
};
|
||||
|
||||
export const capitalizeFirstLetter = (string: any) => {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
};
|
||||
|
||||
export const convertDateToSeconds = (date: any, onChangeFunction: any) => {
|
||||
let dateInSeconds = date;
|
||||
if (date !== null) {
|
||||
let dateInMilliseconds = date;
|
||||
if (typeof date.getTime === 'function') {
|
||||
dateInMilliseconds = date.getTime();
|
||||
}
|
||||
dateInSeconds = Math.floor(dateInMilliseconds / 1000);
|
||||
}
|
||||
|
||||
if (onChangeFunction) {
|
||||
onChangeFunction(dateInSeconds);
|
||||
} else {
|
||||
return dateInSeconds;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const convertSecondsToFormattedDate = (seconds: number) => {
|
||||
if (seconds) {
|
||||
const startDate = new Date(seconds * 1000);
|
||||
return format(startDate, DATE_FORMAT);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const objectIsEmpty = (obj: object) => {
|
||||
return Object.keys(obj).length === 0;
|
||||
};
|
||||
|
||||
export const getPageInfoFromSearchParams = (
|
||||
searchParams: any,
|
||||
defaultPerPage: string | number = DEFAULT_PER_PAGE,
|
||||
defaultPage: string | number = DEFAULT_PAGE
|
||||
) => {
|
||||
const page = parseInt(searchParams.get('page') || defaultPage.toString(), 10);
|
||||
const perPage = parseInt(
|
||||
searchParams.get('per_page') || defaultPerPage.toString(),
|
||||
10
|
||||
);
|
||||
|
||||
return { page, perPage };
|
||||
};
|
||||
|
||||
// https://stackoverflow.com/a/1349426/6090676
|
||||
export const makeid = (length: number) => {
|
||||
let result = '';
|
||||
const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const charactersLength = characters.length;
|
||||
for (let i = 0; i < length; i += 1) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const getProcessModelFullIdentifierFromSearchParams = (
|
||||
searchParams: any
|
||||
) => {
|
||||
let processModelFullIdentifier = null;
|
||||
if (
|
||||
searchParams.get('process_model_identifier') &&
|
||||
searchParams.get('process_group_identifier')
|
||||
) {
|
||||
processModelFullIdentifier = `${searchParams.get(
|
||||
'process_group_identifier'
|
||||
)}/${searchParams.get('process_model_identifier')}`;
|
||||
}
|
||||
return processModelFullIdentifier;
|
||||
};
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
span.bjs-crumb {
|
||||
color: #0000ff;
|
||||
}
|
||||
.bjs-breadcrumbs li:last-of-type span.bjs-crumb a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
height: 35%;
|
||||
width: 35%;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
.active-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||||
fill: yellow !important;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.completed-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||||
fill: grey !important;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.diagram-editor-canvas {
|
||||
border:1px solid #000000;
|
||||
height:70vh;
|
||||
width:90vw;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.diagram-viewer-canvas {
|
||||
border:1px solid #000000;
|
||||
height:70vh;
|
||||
width:90vw;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.container .nav-tabs {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react';
|
||||
import * as ReactDOMClient from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import './index.css';
|
||||
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import UserService from './services/UserService';
|
||||
|
||||
// @ts-expect-error TS(2345) FIXME: Argument of type 'HTMLElement | null' is not assig... Remove this comment to see the full error message
|
||||
const root = ReactDOMClient.createRoot(document.getElementById('root'));
|
||||
|
||||
const doRender = () => {
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
};
|
||||
|
||||
UserService.getAuthTokenFromParams();
|
||||
doRender();
|
||||
|
||||
// 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) FIXME: Expected 1 arguments, but got 0.
|
||||
reportWebVitals();
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
export interface Secret {
|
||||
key: string;
|
||||
value: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface RecentProcessModel {
|
||||
processGroupIdentifier: string;
|
||||
processModelIdentifier: string;
|
||||
processModelDisplayName: string;
|
||||
}
|
||||
|
||||
export interface ProcessGroup {
|
||||
id: string;
|
||||
display_name: string;
|
||||
}
|
||||
|
||||
export interface ProcessModel {
|
||||
id: string;
|
||||
process_group_id: string;
|
||||
display_name: string;
|
||||
primary_file_name: string;
|
||||
}
|
||||
|
||||
// tuple of display value and URL
|
||||
export type BreadcrumbItem = [displayValue: string, url?: string];
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
|
||||
|
||||
<svg
|
||||
width="177.62154mm"
|
||||
height="36.387508mm"
|
||||
viewBox="0 0 177.62154 36.387508"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow2Send"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
|
||||
>
|
||||
<path
|
||||
transform="matrix(-0.3,0,0,-0.3,0.69,0)"
|
||||
d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:0.625;stroke-linejoin:round"
|
||||
id="path8760" />
|
||||
</marker>
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="marker9093"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
|
||||
>
|
||||
<path
|
||||
transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path9091" />
|
||||
</marker>
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow1Send"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
|
||||
>
|
||||
<path
|
||||
transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path8742" />
|
||||
</marker>
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow1Lend"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
|
||||
>
|
||||
<path
|
||||
transform="matrix(-0.8,0,0,-0.8,-10,0)"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path8730" />
|
||||
</marker>
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow1Lstart"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
|
||||
>
|
||||
<path
|
||||
transform="matrix(0.8,0,0,0.8,10,0)"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path8727" />
|
||||
</marker>
|
||||
<g
|
||||
|
||||
|
||||
id="layer1"
|
||||
transform="translate(461.53405,-851.65939)">
|
||||
<path
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path45562"
|
||||
d="" />
|
||||
<path
|
||||
style="fill:#000000;stroke-width:0.264583"
|
||||
id="path45542"
|
||||
d="" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:125%;font-family:NanumMyeongjo;-inkscape-font-specification:NanumMyeongjo;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="-250.71158"
|
||||
y="668.76953"
|
||||
id="text59672"><tspan
|
||||
|
||||
id="tspan59670"
|
||||
style="stroke-width:0.264583px"
|
||||
x="-250.71158"
|
||||
y="668.76953" /></text>
|
||||
<path
|
||||
d="m -419.85028,869.85972 q 2.10753,0 3.40104,1.63919 1.30466,1.63918 1.30466,4.80606 0,2.11867 -0.6133,3.56829 -0.61331,1.43847 -1.69494,2.17443 -1.08165,0.73597 -2.48666,0.73597 -0.90323,0 -1.54998,-0.22302 -0.64675,-0.23417 -1.10395,-0.591 -0.45719,-0.36798 -0.79171,-0.78057 h -0.17842 q 0.0892,0.44604 0.13383,0.91439 0.0446,0.46833 0.0446,0.91437 v 5.02907 h -3.40104 v -17.95302 h 2.76543 l 0.47949,1.6169 h 0.15605 q 0.33452,-0.5018 0.81401,-0.92554 0.47949,-0.42374 1.14855,-0.66905 0.68021,-0.25647 1.57228,-0.25647 z m -1.09279,2.72082 q -0.89207,0 -1.41617,0.36799 -0.52408,0.36798 -0.76942,1.10393 -0.23416,0.73597 -0.25646,1.86222 v 0.36798 q 0,1.2043 0.22301,2.04062 0.23418,0.83631 0.76942,1.27121 0.54639,0.43488 1.49423,0.43488 0.78056,0 1.28236,-0.43488 0.50179,-0.4349 0.74711,-1.27121 0.25646,-0.84748 0.25646,-2.06292 0,-1.82875 -0.56869,-2.75428 -0.56869,-0.92554 -1.76185,-0.92554 z"
|
||||
id="path105589-9"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -410.11335,870.09388 v 12.46676 h -3.40104 v -12.46676 z m -1.69494,-4.8841 q 0.75826,0 1.30466,0.35683 0.54639,0.34568 0.54639,1.30466 0,0.94782 -0.54639,1.31581 -0.5464,0.35682 -1.30466,0.35682 -0.76942,0 -1.31581,-0.35682 -0.53524,-0.36799 -0.53524,-1.31581 0,-0.95898 0.53524,-1.30466 0.54639,-0.35683 1.31581,-0.35683 z"
|
||||
id="path105591-5"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
d="m -391.15216,872.64745 h -2.94385 v 9.91319 h -3.40103 v -9.91319 h -1.87336 v -1.63918 l 1.87336,-0.91439 v -0.91437 q 0,-1.59458 0.53524,-2.4755 0.54639,-0.89209 1.52768,-1.24891 0.99243,-0.36799 2.34169,-0.36799 0.99245,0 1.80646,0.16725 0.81401,0.15605 1.32696,0.35684 l -0.86978,2.4978 q -0.39027,-0.12263 -0.84747,-0.22301 -0.45719,-0.10041 -1.04819,-0.10041 -0.71365,0 -1.04818,0.43488 -0.32338,0.42374 -0.32338,1.09279 v 0.78056 h 2.94385 z"
|
||||
id="path106049-0"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
d="m -400.25375,872.64745 h -2.94384 v 9.91319 h -3.40104 v -9.91319 h -1.87335 v -1.63918 l 1.87335,-0.91439 v -0.91437 q 0,-1.59458 0.53525,-2.4755 0.5464,-0.89209 1.52767,-1.24891 0.99244,-0.36799 2.34171,-0.36799 0.99243,0 1.80644,0.16725 0.81403,0.15605 1.32697,0.35684 l -0.86978,2.4978 q -0.39028,-0.12263 -0.84746,-0.22301 -0.45719,-0.10041 -1.04819,-0.10041 -0.71366,0 -1.0482,0.43488 -0.32337,0.42374 -0.32337,1.09279 v 0.78056 h 2.94384 z"
|
||||
id="path105593-48"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -367.2924,866.25797 -4.14815,16.30267 h -3.93629 l -2.20788,-8.56393 q -0.0668,-0.24532 -0.17842,-0.74711 -0.11144,-0.50178 -0.23417,-1.09278 -0.12264,-0.60216 -0.22302,-1.12626 -0.0892,-0.53524 -0.12263,-0.84746 -0.0334,0.31222 -0.13383,0.83632 -0.0892,0.5241 -0.21187,1.11509 -0.11144,0.591 -0.22303,1.10394 -0.11144,0.51294 -0.1784,0.78057 l -2.19675,8.54162 h -3.92512 l -4.1593,-16.30267 h 3.40103 l 2.08522,8.89845 q 0.0892,0.40143 0.20073,0.95898 0.12263,0.55753 0.23417,1.17084 0.12264,0.60216 0.21185,1.17085 0.10042,0.55755 0.14503,0.97013 0.0558,-0.42373 0.14502,-0.98128 0.0892,-0.56869 0.18956,-1.14854 0.11144,-0.591 0.22303,-1.0928 0.11144,-0.50179 0.20071,-0.81401 l 2.37516,-9.13262 h 3.26722 l 2.37515,9.13262 q 0.078,0.30107 0.17842,0.81401 0.11144,0.5018 0.22301,1.0928 0.11144,0.591 0.20073,1.15969 0.10041,0.55755 0.14502,0.97013 0.078,-0.55754 0.21187,-1.34926 0.14502,-0.80287 0.30107,-1.59459 0.16724,-0.79171 0.28993,-1.32695 l 2.07408,-8.89845 z"
|
||||
id="path105595-7"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -355.51468,876.30497 q 0,1.56112 -0.42374,2.76542 -0.41257,1.2043 -1.21544,2.04062 -0.79173,0.82517 -1.91797,1.24891 -1.11508,0.42374 -2.52011,0.42374 -1.3158,0 -2.41974,-0.42374 -1.09279,-0.42374 -1.90682,-1.24891 -0.80287,-0.83632 -1.2489,-2.04062 -0.43489,-1.2043 -0.43489,-2.76542 0,-2.07409 0.73597,-3.51256 0.73595,-1.43846 2.09636,-2.18557 1.36042,-0.74712 3.24494,-0.74712 1.75069,0 3.09996,0.74712 1.3604,0.74711 2.12982,2.18557 0.78056,1.43847 0.78056,3.51256 z m -8.61967,0 q 0,1.2266 0.26762,2.06292 0.26763,0.83631 0.83632,1.26005 0.56871,0.42374 1.48308,0.42374 0.90323,0 1.46077,-0.42374 0.56871,-0.42374 0.82517,-1.26005 0.26762,-0.83632 0.26762,-2.06292 0,-1.23777 -0.26762,-2.05178 -0.25646,-0.82517 -0.82517,-1.23775 -0.5687,-0.41259 -1.48307,-0.41259 -1.34927,0 -1.96256,0.92553 -0.60216,0.92552 -0.60216,2.77659 z"
|
||||
id="path105597-17"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -347.07121,869.85972 q 0.25648,0 0.59102,0.0334 0.34566,0.0222 0.55753,0.0668 l -0.25646,3.18918 q -0.16725,-0.0558 -0.47949,-0.078 -0.30108,-0.0334 -0.52411,-0.0334 -0.65789,0 -1.28235,0.16724 -0.61331,0.16725 -1.10394,0.54639 -0.49064,0.36799 -0.78056,0.98129 -0.27879,0.60214 -0.27879,1.48307 v 6.34489 h -3.40103 v -12.46675 h 2.57588 l 0.50178,2.09639 h 0.16724 q 0.36797,-0.63561 0.91437,-1.15971 0.55755,-0.53525 1.26006,-0.84746 0.71366,-0.32338 1.53882,-0.32338 z"
|
||||
id="path105599-2"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -341.03634,865.20978 v 7.76105 q 0,0.7025 -0.0558,1.40503 -0.0558,0.7025 -0.12264,1.40501 h 0.0446 q 0.34568,-0.49064 0.70252,-0.97013 0.36797,-0.47949 0.78057,-0.92554 l 3.49023,-3.79132 h 3.83593 l -4.95101,5.40822 5.25208,7.05854 h -3.92513 l -3.5906,-5.05137 -1.46078,1.17085 v 3.88052 h -3.40103 v -17.35086 z"
|
||||
id="path105601-7"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -323.25392,872.64745 h -2.94385 v 9.91319 h -3.40103 v -9.91319 h -1.87336 v -1.63918 l 1.87336,-0.91439 v -0.91437 q 0,-1.59458 0.53524,-2.4755 0.54639,-0.89209 1.52768,-1.24891 0.99243,-0.36799 2.34169,-0.36799 0.99245,0 1.80646,0.16725 0.81401,0.15605 1.32696,0.35684 l -0.86978,2.4978 q -0.39027,-0.12263 -0.84747,-0.22301 -0.45719,-0.10041 -1.04819,-0.10041 -0.71365,0 -1.04818,0.43488 -0.32338,0.42374 -0.32338,1.09279 v 0.78056 h 2.94385 z"
|
||||
id="path105603-22"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -317.17448,882.56064 h -3.40103 v -17.35086 h 3.40103 z"
|
||||
id="path105605-6"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -303.60161,876.30497 q 0,1.56112 -0.42372,2.76542 -0.41259,1.2043 -1.21546,2.04062 -0.79171,0.82517 -1.91797,1.24891 -1.11508,0.42374 -2.5201,0.42374 -1.31581,0 -2.41975,-0.42374 -1.09279,-0.42374 -1.90682,-1.24891 -0.80287,-0.83632 -1.24889,-2.04062 -0.4349,-1.2043 -0.4349,-2.76542 0,-2.07409 0.73597,-3.51256 0.73595,-1.43846 2.09637,-2.18557 1.36041,-0.74712 3.24493,-0.74712 1.75069,0 3.09996,0.74712 1.3604,0.74711 2.12982,2.18557 0.78056,1.43847 0.78056,3.51256 z m -8.61967,0 q 0,1.2266 0.26763,2.06292 0.26762,0.83631 0.83631,1.26005 0.56871,0.42374 1.48309,0.42374 0.90323,0 1.46076,-0.42374 0.56871,-0.42374 0.82517,-1.26005 0.26762,-0.83632 0.26762,-2.06292 0,-1.23777 -0.26762,-2.05178 -0.25646,-0.82517 -0.82517,-1.23775 -0.5687,-0.41259 -1.48307,-0.41259 -1.34925,0 -1.96256,0.92553 -0.60216,0.92552 -0.60216,2.77659 z"
|
||||
id="path105607-1"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
d="m -291.205,882.56064 -0.95898,-4.36001 q -0.078,-0.39029 -0.25648,-1.14855 -0.17842,-0.76942 -0.39027,-1.6392 -0.20073,-0.88092 -0.37915,-1.62804 -0.16724,-0.7471 -0.24532,-1.09278 h -0.10041 q -0.078,0.34568 -0.24532,1.09278 -0.16724,0.74712 -0.37913,1.62804 -0.20071,0.88093 -0.37913,1.66149 -0.17842,0.76942 -0.26762,1.17085 l -1.00359,4.31542 h -3.6575 l -3.546,-12.46676 h 3.38989 l 1.43847,5.51973 q 0.14503,0.57985 0.27877,1.38272 0.13383,0.7917 0.23417,1.53882 0.11144,0.73597 0.16725,1.17085 h 0.0892 q 0.0222,-0.32338 0.0892,-0.85862 0.078,-0.53525 0.16725,-1.10394 0.10041,-0.57985 0.17842,-1.03704 0.0892,-0.46835 0.13383,-0.63561 l 1.53882,-5.97691 h 3.74671 l 1.46078,5.97691 q 0.078,0.32338 0.20071,1.02588 0.13382,0.70252 0.23417,1.44964 0.10041,0.73595 0.11144,1.15969 h 0.0892 q 0.0446,-0.37913 0.15604,-1.12624 0.11144,-0.74712 0.25648,-1.56115 0.15605,-0.82515 0.31223,-1.405 l 1.49423,-5.51973 h 3.33412 l -3.5906,12.46676 z"
|
||||
id="path105609-0"
|
||||
style="font-weight:bold;font-size:13.4639px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#126d82;fill-opacity:1;stroke-width:1.42731px"
|
||||
|
||||
|
||||
/>
|
||||
<path
|
||||
id="path73257-7-2-9-159"
|
||||
style="vector-effect:none;fill:#126d82;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.433;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="m -436.04162,851.65939 v 0.91595 c 0.96107,0.84548 1.66181,1.94689 2.02041,3.17567 h -17.54738 c -3.11685,0 -5.68164,2.56482 -5.68164,5.68159 v 3.91192 c 0,3.11682 2.56479,5.68164 5.68164,5.68164 h 5.6851 4.69113 5.6878 c 1.21493,0 2.13344,0.91846 2.13344,2.13344 v 3.91632 c 0,1.21498 -0.91851,2.13346 -2.13344,2.13346 h -14.79076 c -0.75878,-2.29982 -2.93713,-3.97943 -5.47735,-3.97943 -3.16218,0 -5.76138,2.60267 -5.76138,5.76489 0,3.1622 2.5992,5.76399 5.76138,5.76399 2.54974,0 4.73517,-1.69176 5.48615,-4.00482 h 14.78196 c 3.1168,0 5.67808,-2.5613 5.67808,-5.67809 v -3.91632 c 0,-3.11677 -2.56128,-5.68164 -5.67808,-5.68164 h -5.6878 -4.69113 -5.6851 c -1.21497,0 -2.13609,-0.91837 -2.13609,-2.13344 v -3.91192 c 0,-1.21499 0.92112,-2.13696 2.13609,-2.13696 h 17.60609 c -0.33391,1.31874 -1.05865,2.50576 -2.07912,3.4053 v 0.68721 l 11.72877,-5.86483 z m -19.73105,27.11871 c 1.24555,0 2.21936,0.97116 2.21936,2.21674 0,1.24556 -0.97381,2.21936 -2.21936,2.21936 -1.24559,0 -2.21675,-0.9738 -2.21675,-2.21936 0,-1.24558 0.97116,-2.21674 2.21675,-2.21674 z"
|
||||
|
||||
|
||||
|
||||
/>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:7.18046px;line-height:125%;font-family:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.448779px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="-421.95959"
|
||||
y="859.76959"
|
||||
id="text109870-49"
|
||||
|
||||
|
||||
><tspan
|
||||
|
||||
id="tspan109868-0"
|
||||
style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:'Open Sans';fill:#FFFFFF;fill-opacity:1;stroke:none;stroke-width:0.448779px"
|
||||
x="-421.95959"
|
||||
y="859.76959">Draw the code</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
const reportWebVitals = (onPerfEntry: any) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import { Routes, Route, useLocation } from 'react-router-dom';
|
||||
|
||||
import { useContext, useEffect } from 'react';
|
||||
import ProcessGroupList from './ProcessGroupList';
|
||||
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 ProcessInstanceReportShow from './ProcessInstanceReportShow';
|
||||
import ProcessModelNew from './ProcessModelNew';
|
||||
import ProcessModelEdit from './ProcessModelEdit';
|
||||
import ProcessInstanceShow from './ProcessInstanceShow';
|
||||
import UserService from '../services/UserService';
|
||||
import ProcessInstanceReportList from './ProcessInstanceReportList';
|
||||
import ProcessInstanceReportNew from './ProcessInstanceReportNew';
|
||||
import ProcessInstanceReportEdit from './ProcessInstanceReportEdit';
|
||||
import ReactFormEditor from './ReactFormEditor';
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
import ProcessInstanceLogList from './ProcessInstanceLogList';
|
||||
import MessageInstanceList from './MessageInstanceList';
|
||||
import SecretList from './SecretList';
|
||||
import SecretNew from './SecretNew';
|
||||
import SecretShow from './SecretShow';
|
||||
|
||||
export default function AdminRoutes() {
|
||||
const location = useLocation();
|
||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||
|
||||
useEffect(() => {
|
||||
setErrorMessage('');
|
||||
}, [location, setErrorMessage]);
|
||||
|
||||
if (UserService.hasRole(['admin'])) {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<ProcessGroupList />} />
|
||||
<Route path="process-groups" element={<ProcessGroupList />} />
|
||||
<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/files"
|
||||
element={<ProcessModelEditDiagram />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/files/: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/edit"
|
||||
element={<ProcessModelEdit />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
|
||||
element={<ProcessInstanceShow />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/reports"
|
||||
element={<ProcessInstanceReportList />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/reports/:report_identifier"
|
||||
element={<ProcessInstanceReportShow />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/reports/new"
|
||||
element={<ProcessInstanceReportNew />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/reports/:report_identifier/edit"
|
||||
element={<ProcessInstanceReportEdit />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/form"
|
||||
element={<ReactFormEditor />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/form/:file_name"
|
||||
element={<ReactFormEditor />}
|
||||
/>
|
||||
<Route
|
||||
path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id/logs"
|
||||
element={<ProcessInstanceLogList />}
|
||||
/>
|
||||
<Route path="process-instances" element={<ProcessInstanceList />} />
|
||||
<Route path="messages" element={<MessageInstanceList />} />
|
||||
<Route path="secrets" element={<SecretList />} />
|
||||
<Route path="secrets/new" element={<SecretNew />} />
|
||||
<Route path="secrets/:key" element={<SecretShow />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
<h1>404</h1>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Button, Table } from 'react-bootstrap';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import { getPageInfoFromSearchParams } from '../helpers';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { RecentProcessModel } from '../interfaces';
|
||||
|
||||
const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
|
||||
|
||||
export default function HomePage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(
|
||||
searchParams,
|
||||
PER_PAGE_FOR_TASKS_ON_HOME_PAGE
|
||||
);
|
||||
const setTasksFromResult = (result: any) => {
|
||||
setTasks(result.results);
|
||||
setPagination(result.pagination);
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/tasks?per_page=${perPage}&page=${page}`,
|
||||
successCallback: setTasksFromResult,
|
||||
});
|
||||
}, [searchParams]);
|
||||
|
||||
let recentProcessModels: RecentProcessModel[] = [];
|
||||
const recentProcessModelsString = localStorage.getItem('recentProcessModels');
|
||||
if (recentProcessModelsString !== null) {
|
||||
recentProcessModels = JSON.parse(recentProcessModelsString);
|
||||
}
|
||||
|
||||
const buildTable = () => {
|
||||
const rows = tasks.map((row) => {
|
||||
const rowToUse = row as any;
|
||||
const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.id}`;
|
||||
return (
|
||||
<tr key={rowToUse.id}>
|
||||
<td>
|
||||
<Link
|
||||
data-qa="process-model-show-link"
|
||||
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}`}
|
||||
>
|
||||
{rowToUse.process_model_display_name}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<Link
|
||||
data-qa="process-instance-show-link"
|
||||
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}/process-instances/${rowToUse.process_instance_id}`}
|
||||
>
|
||||
View
|
||||
</Link>
|
||||
</td>
|
||||
<td
|
||||
title={`task id: ${rowToUse.name}, spiffworkflow task guid: ${rowToUse.id}`}
|
||||
>
|
||||
{rowToUse.title}
|
||||
</td>
|
||||
<td>{rowToUse.state}</td>
|
||||
<td>
|
||||
<Button variant="primary" href={taskUrl}>
|
||||
Complete Task
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Process Model</th>
|
||||
<th>Process Instance</th>
|
||||
<th>Task Name</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const buildRecentProcessModelSection = () => {
|
||||
const rows = recentProcessModels.map((row) => {
|
||||
const rowToUse = row as any;
|
||||
return (
|
||||
<tr
|
||||
key={`${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`}
|
||||
>
|
||||
<td>
|
||||
<Link
|
||||
data-qa="process-model-show-link"
|
||||
to={`/admin/process-models/${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`}
|
||||
>
|
||||
{rowToUse.processModelDisplayName}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<h2>Processes I can start</h2>
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Process Model</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const relevantProcessModelSection =
|
||||
recentProcessModels.length > 0 && buildRecentProcessModelSection();
|
||||
|
||||
if (pagination) {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(
|
||||
searchParams,
|
||||
PER_PAGE_FOR_TASKS_ON_HOME_PAGE
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<h2>Tasks waiting for me</h2>
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
|
||||
pagination={pagination}
|
||||
tableToDisplay={buildTable()}
|
||||
path="/tasks"
|
||||
/>
|
||||
{relevantProcessModelSection}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Table } from 'react-bootstrap';
|
||||
import { Link, useParams, useSearchParams } from 'react-router-dom';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import {
|
||||
convertSecondsToFormattedDate,
|
||||
getPageInfoFromSearchParams,
|
||||
} from '../helpers';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
export default function MessageInstanceList() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [messageIntances, setMessageInstances] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const setMessageInstanceListFromResult = (result: any) => {
|
||||
setMessageInstances(result.results);
|
||||
setPagination(result.pagination);
|
||||
};
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
let queryParamString = `per_page=${perPage}&page=${page}`;
|
||||
if (searchParams.get('process_instance_id')) {
|
||||
queryParamString += `&process_instance_id=${searchParams.get(
|
||||
'process_instance_id'
|
||||
)}`;
|
||||
}
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/messages?${queryParamString}`,
|
||||
successCallback: setMessageInstanceListFromResult,
|
||||
});
|
||||
}, [searchParams, params]);
|
||||
|
||||
const buildTable = () => {
|
||||
// return null;
|
||||
const rows = messageIntances.map((row) => {
|
||||
const rowToUse = row as any;
|
||||
return (
|
||||
<tr key={rowToUse.id}>
|
||||
<td>{rowToUse.id}</td>
|
||||
<td>
|
||||
<Link
|
||||
data-qa="process-model-show-link"
|
||||
to={`/admin/process-groups/${rowToUse.process_group_identifier}`}
|
||||
>
|
||||
{rowToUse.process_group_identifier}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<Link
|
||||
data-qa="process-model-show-link"
|
||||
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}`}
|
||||
>
|
||||
{rowToUse.process_model_identifier}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<Link
|
||||
data-qa="process-instance-show-link"
|
||||
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}/process-instances/${rowToUse.process_instance_id}`}
|
||||
>
|
||||
{rowToUse.process_instance_id}
|
||||
</Link>
|
||||
</td>
|
||||
<td>{rowToUse.message_identifier}</td>
|
||||
<td>{rowToUse.message_type}</td>
|
||||
<td>{rowToUse.failure_cause}</td>
|
||||
<td>{rowToUse.status}</td>
|
||||
<td>
|
||||
{convertSecondsToFormattedDate(rowToUse.created_at_in_seconds)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Instance Id</th>
|
||||
<th>Process Group</th>
|
||||
<th>Process Model</th>
|
||||
<th>Process Instance</th>
|
||||
<th>Message Model</th>
|
||||
<th>Type</th>
|
||||
<th>Failure Cause</th>
|
||||
<th>Status</th>
|
||||
<th>Created At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
if (pagination) {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
let queryParamString = '';
|
||||
let breadcrumbElement = null;
|
||||
if (searchParams.get('process_instance_id')) {
|
||||
queryParamString += `&process_group_id=${searchParams.get(
|
||||
'process_group_id'
|
||||
)}&process_model_id=${searchParams.get(
|
||||
'process_model_id'
|
||||
)}&process_instance_id=${searchParams.get('process_instance_id')}`;
|
||||
breadcrumbElement = (
|
||||
<ProcessBreadcrumb
|
||||
processModelId={searchParams.get('process_model_id') as any}
|
||||
processGroupId={searchParams.get('process_group_id') as any}
|
||||
linkProcessModel
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{breadcrumbElement}
|
||||
<h2>Messages</h2>
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
pagination={pagination}
|
||||
tableToDisplay={buildTable()}
|
||||
queryParamString={queryParamString}
|
||||
path="/admin/messages"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Button, Stack } from 'react-bootstrap';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
|
||||
export default function ProcessGroupEdit() {
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [processGroup, setProcessGroup] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const setProcessGroupsFromResult = (result: any) => {
|
||||
setProcessGroup(result);
|
||||
setDisplayName(result.display_name);
|
||||
};
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups/${params.process_group_id}`,
|
||||
successCallback: setProcessGroupsFromResult,
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
const navigateToProcessGroup = (_result: any) => {
|
||||
navigate(`/admin/process-groups/${(processGroup as any).id}`);
|
||||
};
|
||||
|
||||
const navigateToProcessGroups = (_result: any) => {
|
||||
navigate(`/admin/process-groups`);
|
||||
};
|
||||
|
||||
const updateProcessGroup = (event: any) => {
|
||||
event.preventDefault();
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups/${(processGroup as any).id}`,
|
||||
successCallback: navigateToProcessGroup,
|
||||
httpMethod: 'PUT',
|
||||
postBody: {
|
||||
display_name: displayName,
|
||||
id: (processGroup as any).id,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const deleteProcessGroup = () => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups/${(processGroup as any).id}`,
|
||||
successCallback: navigateToProcessGroups,
|
||||
httpMethod: 'DELETE',
|
||||
});
|
||||
};
|
||||
|
||||
const onDisplayNameChanged = (newDisplayName: any) => {
|
||||
setDisplayName(newDisplayName);
|
||||
};
|
||||
|
||||
if (processGroup) {
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb processGroupId={(processGroup as any).id} />
|
||||
<h2>Edit Process Group: {(processGroup as any).id}</h2>
|
||||
<form onSubmit={updateProcessGroup}>
|
||||
<label>Display Name:</label>
|
||||
<input
|
||||
name="display_name"
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => onDisplayNameChanged(e.target.value)}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Button type="submit">Submit</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
href={`/admin/process-groups/${(processGroup as any).id}`}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<ButtonWithConfirmation
|
||||
description={`Delete Process Group ${(processGroup as any).id}?`}
|
||||
onConfirmation={deleteProcessGroup}
|
||||
buttonLabel="Delete"
|
||||
/>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Form, InputGroup, Table } from 'react-bootstrap';
|
||||
import { Typeahead } from 'react-bootstrap-typeahead';
|
||||
import { Option } from 'react-bootstrap-typeahead/types/types';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { getPageInfoFromSearchParams } from '../helpers';
|
||||
import { ProcessModel } from '../interfaces';
|
||||
|
||||
// Example process group json
|
||||
// {'process_group_id': 'sure', 'display_name': 'Test Workflows', 'id': 'test_process_group'}
|
||||
export default function ProcessGroupList() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [processGroups, setProcessGroups] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
const [processModeleSelectionOptions, setProcessModelSelectionOptions] =
|
||||
useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const setProcessGroupsFromResult = (result: any) => {
|
||||
setProcessGroups(result.results);
|
||||
setPagination(result.pagination);
|
||||
};
|
||||
const processResultForProcessModels = (result: any) => {
|
||||
const selectionArray = result.results.map((item: any) => {
|
||||
const label = `${item.process_group_id}/${item.id}`;
|
||||
Object.assign(item, { label });
|
||||
return item;
|
||||
});
|
||||
setProcessModelSelectionOptions(selectionArray);
|
||||
};
|
||||
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
// for browsing
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups?per_page=${perPage}&page=${page}`,
|
||||
successCallback: setProcessGroupsFromResult,
|
||||
});
|
||||
// for search box
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models?per_page=1000`,
|
||||
successCallback: processResultForProcessModels,
|
||||
});
|
||||
}, [searchParams]);
|
||||
|
||||
const buildTable = () => {
|
||||
const rows = processGroups.map((row) => {
|
||||
return (
|
||||
<tr key={(row as any).id}>
|
||||
<td>
|
||||
<Link
|
||||
to={`/admin/process-groups/${(row as any).id}`}
|
||||
title={(row as any).id}
|
||||
>
|
||||
{(row as any).display_name}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Process Group</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const processGroupsDisplayArea = () => {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
let displayText = null;
|
||||
if (processGroups?.length > 0) {
|
||||
displayText = (
|
||||
<>
|
||||
<h3>Browse</h3>
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
pagination={pagination as any}
|
||||
tableToDisplay={buildTable()}
|
||||
path="/admin/process-groups"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
displayText = <p>No Groups To Display</p>;
|
||||
}
|
||||
return displayText;
|
||||
};
|
||||
|
||||
const processModelSearchArea = () => {
|
||||
const processModelSearchOnChange = (selected: Option[]) => {
|
||||
const processModel = selected[0] as ProcessModel;
|
||||
navigate(
|
||||
`/admin/process-models/${processModel.process_group_id}/${processModel.id}`
|
||||
);
|
||||
};
|
||||
return (
|
||||
<form onSubmit={function hey() {}}>
|
||||
<h3>Search</h3>
|
||||
<Form.Group>
|
||||
<InputGroup>
|
||||
<InputGroup.Text className="text-nowrap">
|
||||
Process Model:{' '}
|
||||
</InputGroup.Text>
|
||||
<Typeahead
|
||||
style={{ width: 500 }}
|
||||
id="process-model-selection"
|
||||
labelKey="label"
|
||||
onChange={processModelSearchOnChange}
|
||||
// for cypress tests since data-qa does not work
|
||||
inputProps={{
|
||||
name: 'process-model-selection',
|
||||
}}
|
||||
options={processModeleSelectionOptions}
|
||||
placeholder="Choose a process model..."
|
||||
/>
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
if (pagination) {
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb hotCrumbs={[['Process Groups']]} />
|
||||
<Button href="/admin/process-groups/new">Add a process group</Button>
|
||||
<br />
|
||||
<br />
|
||||
{processModelSearchArea()}
|
||||
<br />
|
||||
{processGroupsDisplayArea()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Form from 'react-bootstrap/Form';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import { slugifyString } from '../helpers';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
export default function ProcessGroupNew() {
|
||||
const [identifier, setIdentifier] = useState('');
|
||||
const [idHasBeenUpdatedByUser, setIdHasBeenUpdatedByUser] = useState(false);
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const navigateToProcessGroup = (_result: any) => {
|
||||
navigate(`/admin/process-groups/${identifier}`);
|
||||
};
|
||||
|
||||
const addProcessGroup = (event: any) => {
|
||||
event.preventDefault();
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups`,
|
||||
successCallback: navigateToProcessGroup,
|
||||
httpMethod: 'POST',
|
||||
postBody: {
|
||||
id: identifier,
|
||||
display_name: displayName,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onDisplayNameChanged = (newDisplayName: any) => {
|
||||
setDisplayName(newDisplayName);
|
||||
if (!idHasBeenUpdatedByUser) {
|
||||
setIdentifier(slugifyString(newDisplayName));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb />
|
||||
<h2>Add Process Group</h2>
|
||||
<Form onSubmit={addProcessGroup}>
|
||||
<Form.Group className="mb-3" controlId="display_name">
|
||||
<Form.Label>Display Name:</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
name="display_name"
|
||||
value={displayName}
|
||||
onChange={(e) => onDisplayNameChanged(e.target.value)}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="identifier">
|
||||
<Form.Label>ID:</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
name="id"
|
||||
value={identifier}
|
||||
onChange={(e) => {
|
||||
setIdentifier(e.target.value);
|
||||
setIdHasBeenUpdatedByUser(true);
|
||||
}}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button variant="primary" type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Link, useSearchParams, useParams } from 'react-router-dom';
|
||||
import { Button, Table, Stack } from 'react-bootstrap';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { getPageInfoFromSearchParams } from '../helpers';
|
||||
import { ProcessGroup } from '../interfaces';
|
||||
|
||||
export default function ProcessGroupShow() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
|
||||
const [processModels, setProcessModels] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
|
||||
const setProcessModelFromResult = (result: any) => {
|
||||
setProcessModels(result.results);
|
||||
setPagination(result.pagination);
|
||||
};
|
||||
const processResult = (result: any) => {
|
||||
setProcessGroup(result);
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models?process_group_identifier=${params.process_group_id}&per_page=${perPage}&page=${page}`,
|
||||
successCallback: setProcessModelFromResult,
|
||||
});
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups/${params.process_group_id}`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}, [params, searchParams]);
|
||||
|
||||
const buildTable = () => {
|
||||
if (processGroup === null) {
|
||||
return null;
|
||||
}
|
||||
const rows = processModels.map((row) => {
|
||||
return (
|
||||
<tr key={(row as any).id}>
|
||||
<td>
|
||||
<Link
|
||||
to={`/admin/process-models/${processGroup.id}/${(row as any).id}`}
|
||||
data-qa="process-model-show-link"
|
||||
>
|
||||
{(row as any).id}
|
||||
</Link>
|
||||
</td>
|
||||
<td>{(row as any).display_name}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<h3>Process Models</h3>
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Process Model Id</th>
|
||||
<th>Display Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (processGroup && pagination) {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
hotCrumbs={[
|
||||
['Process Groups', '/admin'],
|
||||
[`Process Group: ${processGroup.display_name}`],
|
||||
]}
|
||||
/>
|
||||
<ul>
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Button
|
||||
href={`/admin/process-models/${(processGroup as any).id}/new`}
|
||||
>
|
||||
Add a process model
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-groups/${(processGroup as any).id}/edit`}
|
||||
variant="secondary"
|
||||
>
|
||||
Edit process group
|
||||
</Button>
|
||||
</Stack>
|
||||
<br />
|
||||
<br />
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
pagination={pagination}
|
||||
tableToDisplay={buildTable()}
|
||||
path={`/admin/process-groups/${(processGroup as any).id}`}
|
||||
/>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,458 @@
|
|||
import { useContext, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
Link,
|
||||
useNavigate,
|
||||
useParams,
|
||||
useSearchParams,
|
||||
} from 'react-router-dom';
|
||||
|
||||
import { Button, Table, Stack, Form, InputGroup } from 'react-bootstrap';
|
||||
// @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message
|
||||
import DatePicker from 'react-datepicker';
|
||||
import { Typeahead } from 'react-bootstrap-typeahead';
|
||||
import { Option } from 'react-bootstrap-typeahead/types/types';
|
||||
import { PROCESS_STATUSES, DATE_FORMAT } from '../config';
|
||||
import {
|
||||
convertDateToSeconds,
|
||||
convertSecondsToFormattedDate,
|
||||
getPageInfoFromSearchParams,
|
||||
getProcessModelFullIdentifierFromSearchParams,
|
||||
} from '../helpers';
|
||||
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
import 'react-bootstrap-typeahead/css/Typeahead.css';
|
||||
import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
|
||||
|
||||
export default function ProcessInstanceList() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [processInstances, setProcessInstances] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
|
||||
const oneHourInSeconds = 3600;
|
||||
const oneMonthInSeconds = oneHourInSeconds * 24 * 30;
|
||||
const [startFrom, setStartFrom] = useState(null);
|
||||
const [startTill, setStartTill] = useState(null);
|
||||
const [endFrom, setEndFrom] = useState(null);
|
||||
const [endTill, setEndTill] = useState(null);
|
||||
|
||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||
|
||||
const [processStatuseSelectionOptions, setProcessStatusSelectionOptions] =
|
||||
useState<any[]>([]);
|
||||
const [processStatusSelection, setProcessStatusSelection] = useState<
|
||||
Option[]
|
||||
>([]);
|
||||
const [processModeleSelectionOptions, setProcessModelSelectionOptions] =
|
||||
useState([]);
|
||||
const [processModelSelection, setProcessModelSelection] = useState<Option[]>(
|
||||
[]
|
||||
);
|
||||
|
||||
const parametersToAlwaysFilterBy = useMemo(() => {
|
||||
return {
|
||||
start_from: setStartFrom,
|
||||
start_till: setStartTill,
|
||||
end_from: setEndFrom,
|
||||
end_till: setEndTill,
|
||||
};
|
||||
}, [setStartFrom, setStartTill, setEndFrom, setEndTill]);
|
||||
|
||||
const parametersToGetFromSearchParams = useMemo(() => {
|
||||
return {
|
||||
process_group_identifier: null,
|
||||
process_model_identifier: null,
|
||||
process_status: null,
|
||||
};
|
||||
}, []);
|
||||
|
||||
// eslint-disable-next-line sonarjs/cognitive-complexity
|
||||
useEffect(() => {
|
||||
function setProcessInstancesFromResult(result: any) {
|
||||
const processInstancesFromApi = result.results;
|
||||
setProcessInstances(processInstancesFromApi);
|
||||
setPagination(result.pagination);
|
||||
}
|
||||
function getProcessInstances() {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
let queryParamString = `per_page=${perPage}&page=${page}`;
|
||||
|
||||
Object.keys(parametersToAlwaysFilterBy).forEach((paramName: string) => {
|
||||
// @ts-expect-error TS(7053) FIXME:
|
||||
const functionToCall = parametersToAlwaysFilterBy[paramName];
|
||||
const searchParamValue = searchParams.get(paramName);
|
||||
if (searchParamValue) {
|
||||
queryParamString += `&${paramName}=${searchParamValue}`;
|
||||
functionToCall(searchParamValue);
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(parametersToGetFromSearchParams).forEach(
|
||||
(paramName: string) => {
|
||||
if (searchParams.get(paramName)) {
|
||||
// @ts-expect-error TS(7053) FIXME:
|
||||
const functionToCall = parametersToGetFromSearchParams[paramName];
|
||||
queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
|
||||
if (functionToCall !== null) {
|
||||
functionToCall(searchParams.get(paramName) || '');
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-instances?${queryParamString}`,
|
||||
successCallback: setProcessInstancesFromResult,
|
||||
});
|
||||
}
|
||||
function processResultForProcessModels(result: any) {
|
||||
const processModelFullIdentifier =
|
||||
getProcessModelFullIdentifierFromSearchParams(searchParams);
|
||||
const selectionArray = result.results.map((item: any) => {
|
||||
const label = `${item.process_group_id}/${item.id}`;
|
||||
Object.assign(item, { label });
|
||||
if (label === processModelFullIdentifier) {
|
||||
setProcessModelSelection([item]);
|
||||
}
|
||||
return item;
|
||||
});
|
||||
setProcessModelSelectionOptions(selectionArray);
|
||||
|
||||
const processStatusSelectedArray: Option[] = [];
|
||||
const processStatusSelectionArray = PROCESS_STATUSES.map(
|
||||
(processStatusOption: any) => {
|
||||
const regex = new RegExp(`\\b${processStatusOption}\\b`);
|
||||
if ((searchParams.get('process_status') || '').match(regex)) {
|
||||
processStatusSelectedArray.push({ label: processStatusOption });
|
||||
}
|
||||
return { label: processStatusOption };
|
||||
}
|
||||
);
|
||||
setProcessStatusSelection(processStatusSelectedArray);
|
||||
setProcessStatusSelectionOptions(processStatusSelectionArray);
|
||||
|
||||
getProcessInstances();
|
||||
}
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models?per_page=1000`,
|
||||
successCallback: processResultForProcessModels,
|
||||
});
|
||||
}, [
|
||||
searchParams,
|
||||
params,
|
||||
oneMonthInSeconds,
|
||||
oneHourInSeconds,
|
||||
parametersToAlwaysFilterBy,
|
||||
parametersToGetFromSearchParams,
|
||||
]);
|
||||
|
||||
// does the comparison, but also returns false if either argument
|
||||
// is not truthy and therefore not comparable.
|
||||
const isTrueComparison = (param1: any, operation: any, param2: any) => {
|
||||
if (param1 && param2) {
|
||||
switch (operation) {
|
||||
case '<':
|
||||
return param1 < param2;
|
||||
case '>':
|
||||
return param1 > param2;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleFilter = (event: any) => {
|
||||
event.preventDefault();
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
let queryParamString = `per_page=${perPage}&page=${page}`;
|
||||
|
||||
if (isTrueComparison(startFrom, '>', startTill)) {
|
||||
setErrorMessage('startFrom cannot be after startTill');
|
||||
return;
|
||||
}
|
||||
if (isTrueComparison(endFrom, '>', endTill)) {
|
||||
setErrorMessage('endFrom cannot be after endTill');
|
||||
return;
|
||||
}
|
||||
if (isTrueComparison(startFrom, '>', endFrom)) {
|
||||
setErrorMessage('startFrom cannot be after endFrom');
|
||||
return;
|
||||
}
|
||||
if (isTrueComparison(startTill, '>', endTill)) {
|
||||
setErrorMessage('startTill cannot be after endTill');
|
||||
return;
|
||||
}
|
||||
|
||||
if (startFrom) {
|
||||
queryParamString += `&start_from=${startFrom}`;
|
||||
}
|
||||
if (startTill) {
|
||||
queryParamString += `&start_till=${startTill}`;
|
||||
}
|
||||
if (endFrom) {
|
||||
queryParamString += `&end_from=${endFrom}`;
|
||||
}
|
||||
if (endTill) {
|
||||
queryParamString += `&end_till=${endTill}`;
|
||||
}
|
||||
if (processStatusSelection.length > 0) {
|
||||
const processStatusSelectionString = processStatusSelection.map(
|
||||
(pss: any) => {
|
||||
return pss.label;
|
||||
}
|
||||
);
|
||||
queryParamString += `&process_status=${processStatusSelectionString}`;
|
||||
}
|
||||
if (processModelSelection.length > 0) {
|
||||
const currentProcessModel: any = processModelSelection[0];
|
||||
queryParamString += `&process_group_identifier=${currentProcessModel.process_group_id}&process_model_identifier=${currentProcessModel.id}`;
|
||||
}
|
||||
|
||||
setErrorMessage('');
|
||||
navigate(`/admin/process-instances?${queryParamString}`);
|
||||
};
|
||||
|
||||
const dateComponent = (
|
||||
labelString: any,
|
||||
name: any,
|
||||
initialDate: any,
|
||||
onChangeFunction: any
|
||||
) => {
|
||||
let selectedDate = null;
|
||||
if (initialDate) {
|
||||
selectedDate = new Date(initialDate * 1000);
|
||||
}
|
||||
return (
|
||||
<Form.Group>
|
||||
<InputGroup>
|
||||
<Stack className="ms-auto" direction="horizontal" gap={3}>
|
||||
<InputGroup.Text className="text-nowrap">
|
||||
{labelString}
|
||||
{'\u00A0'}
|
||||
</InputGroup.Text>
|
||||
<DatePicker
|
||||
id={`date-picker-${name}`}
|
||||
selected={selectedDate}
|
||||
onChange={(date: any) =>
|
||||
convertDateToSeconds(date, onChangeFunction)
|
||||
}
|
||||
showTimeSelect
|
||||
dateFormat={DATE_FORMAT}
|
||||
/>
|
||||
</Stack>
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
const getSearchParamsAsQueryString = () => {
|
||||
let queryParamString = '';
|
||||
Object.keys(parametersToAlwaysFilterBy).forEach((paramName) => {
|
||||
const searchParamValue = searchParams.get(paramName);
|
||||
if (searchParamValue) {
|
||||
queryParamString += `&${paramName}=${searchParamValue}`;
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(parametersToGetFromSearchParams).forEach(
|
||||
(paramName: string) => {
|
||||
if (searchParams.get(paramName)) {
|
||||
queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
|
||||
}
|
||||
}
|
||||
);
|
||||
return queryParamString;
|
||||
};
|
||||
|
||||
const processModelSearch = () => {
|
||||
return (
|
||||
<Form.Group>
|
||||
<InputGroup>
|
||||
<InputGroup.Text className="text-nowrap">
|
||||
Process Model:{' '}
|
||||
</InputGroup.Text>
|
||||
<Typeahead
|
||||
style={{ width: 500 }}
|
||||
id="process-model-selection"
|
||||
labelKey="label"
|
||||
onChange={setProcessModelSelection}
|
||||
options={processModeleSelectionOptions}
|
||||
placeholder="Choose a process model..."
|
||||
selected={processModelSelection}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
const processStatusSearch = () => {
|
||||
return (
|
||||
<Form.Group>
|
||||
<InputGroup>
|
||||
<InputGroup.Text className="text-nowrap">
|
||||
Process Status:{' '}
|
||||
</InputGroup.Text>
|
||||
<Typeahead
|
||||
multiple
|
||||
style={{ width: 500 }}
|
||||
id="process-status-selection"
|
||||
// for cypress tests since data-qa does not work
|
||||
inputProps={{
|
||||
name: 'process-status-selection',
|
||||
}}
|
||||
labelKey="label"
|
||||
onChange={setProcessStatusSelection}
|
||||
options={processStatuseSelectionOptions}
|
||||
placeholder="Choose process statuses..."
|
||||
selected={processStatusSelection}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
const filterOptions = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<form onSubmit={handleFilter}>
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
{processModelSearch()}
|
||||
</Stack>
|
||||
<br />
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
{dateComponent(
|
||||
'Start Range: ',
|
||||
'start-from',
|
||||
startFrom,
|
||||
setStartFrom
|
||||
)}
|
||||
{dateComponent('-', 'start-till', startTill, setStartTill)}
|
||||
</Stack>
|
||||
<br />
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
{dateComponent(
|
||||
'End Range: \u00A0\u00A0',
|
||||
'end-from',
|
||||
endFrom,
|
||||
setEndFrom
|
||||
)}
|
||||
{dateComponent('-', 'end-till', endTill, setEndTill)}
|
||||
</Stack>
|
||||
<br />
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
{processStatusSearch()}
|
||||
</Stack>
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Button className="ms-auto" variant="secondary" type="submit">
|
||||
Filter
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</div>
|
||||
<div className="col" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buildTable = () => {
|
||||
const rows = processInstances.map((row: any) => {
|
||||
const formattedStartDate =
|
||||
convertSecondsToFormattedDate(row.start_in_seconds) || '-';
|
||||
const formattedEndDate =
|
||||
convertSecondsToFormattedDate(row.end_in_seconds) || '-';
|
||||
|
||||
return (
|
||||
<tr key={row.id}>
|
||||
<td>
|
||||
<Link
|
||||
data-qa="process-instance-show-link"
|
||||
to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}/process-instances/${row.id}`}
|
||||
>
|
||||
{row.id}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<Link to={`/admin/process-groups/${row.process_group_identifier}`}>
|
||||
{row.process_group_identifier}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<Link
|
||||
to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}`}
|
||||
>
|
||||
{row.process_model_identifier}
|
||||
</Link>
|
||||
</td>
|
||||
<td>{formattedStartDate}</td>
|
||||
<td>{formattedEndDate}</td>
|
||||
<td data-qa={`process-instance-status-${row.status}`}>
|
||||
{row.status}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Process Instance Id</th>
|
||||
<th>Process Group</th>
|
||||
<th>Process Model</th>
|
||||
<th>Start Time</th>
|
||||
<th>End Time</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const processInstanceTitleElement = () => {
|
||||
const processModelFullIdentifier =
|
||||
getProcessModelFullIdentifierFromSearchParams(searchParams);
|
||||
if (processModelFullIdentifier === null) {
|
||||
return <h2>Process Instances</h2>;
|
||||
}
|
||||
return (
|
||||
<h2>
|
||||
Process Instances for:{' '}
|
||||
<Link to={`/admin/process-models/${processModelFullIdentifier}`}>
|
||||
{processModelFullIdentifier}
|
||||
</Link>
|
||||
</h2>
|
||||
);
|
||||
};
|
||||
|
||||
if (pagination) {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
return (
|
||||
<>
|
||||
{processInstanceTitleElement()}
|
||||
{filterOptions()}
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
pagination={pagination}
|
||||
tableToDisplay={buildTable()}
|
||||
queryParamString={getSearchParamsAsQueryString()}
|
||||
path="/admin/process-instances"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Table } from 'react-bootstrap';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import {
|
||||
getPageInfoFromSearchParams,
|
||||
convertSecondsToFormattedDate,
|
||||
} from '../helpers';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
export default function ProcessInstanceLogList() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [processInstanceLogs, setProcessInstanceLogs] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const setProcessInstanceLogListFromResult = (result: any) => {
|
||||
setProcessInstanceLogs(result.results);
|
||||
setPagination(result.pagination);
|
||||
};
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/logs?per_page=${perPage}&page=${page}`,
|
||||
successCallback: setProcessInstanceLogListFromResult,
|
||||
});
|
||||
}, [searchParams, params]);
|
||||
|
||||
const buildTable = () => {
|
||||
// return null;
|
||||
const rows = processInstanceLogs.map((row) => {
|
||||
const rowToUse = row as any;
|
||||
return (
|
||||
<tr key={rowToUse.id}>
|
||||
<td>{rowToUse.bpmn_process_identifier}</td>
|
||||
<td>{rowToUse.message}</td>
|
||||
<td>{rowToUse.bpmn_task_identifier}</td>
|
||||
<td>{rowToUse.bpmn_task_name}</td>
|
||||
<td>{rowToUse.bpmn_task_type}</td>
|
||||
<td>{rowToUse.username}</td>
|
||||
<td>{convertSecondsToFormattedDate(rowToUse.timestamp)}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bpmn Process Identifier</th>
|
||||
<th>Message</th>
|
||||
<th>Task Identifier</th>
|
||||
<th>Task Name</th>
|
||||
<th>Task Type</th>
|
||||
<th>User</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
if (pagination) {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
return (
|
||||
<main>
|
||||
<ProcessBreadcrumb
|
||||
processModelId={params.process_model_id}
|
||||
processGroupId={params.process_group_id}
|
||||
linkProcessModel
|
||||
/>
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
pagination={pagination}
|
||||
tableToDisplay={buildTable()}
|
||||
path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/logs`}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
|
||||
type ReportColumn = {
|
||||
Header: string;
|
||||
accessor: string;
|
||||
};
|
||||
|
||||
type ReportFilterBy = {
|
||||
field_name: string;
|
||||
operator: string;
|
||||
field_value: string;
|
||||
};
|
||||
|
||||
export default function ProcessInstanceReportEdit() {
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [columns, setColumns] = useState('');
|
||||
const [orderBy, setOrderBy] = useState('');
|
||||
const [filterBy, setFilterBy] = useState('');
|
||||
|
||||
const navigateToProcessInstanceReport = (_result: any) => {
|
||||
navigate(
|
||||
`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}`
|
||||
);
|
||||
};
|
||||
|
||||
const navigateToProcessInstanceReports = (_result: any) => {
|
||||
navigate(
|
||||
`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: any) => {
|
||||
const reportMetadata = result.report_metadata;
|
||||
const columnCsv = reportMetadata.columns
|
||||
.map((column: ReportColumn) => column.accessor)
|
||||
.join(',');
|
||||
setColumns(columnCsv);
|
||||
|
||||
if (reportMetadata.order_by) {
|
||||
setOrderBy(reportMetadata.order_by.join(','));
|
||||
}
|
||||
const filterByCsv = reportMetadata.filter_by
|
||||
.map(
|
||||
(filterByItem: ReportFilterBy) =>
|
||||
`${filterByItem.field_name}=${filterByItem.field_value}`
|
||||
)
|
||||
.join(',');
|
||||
setFilterBy(filterByCsv);
|
||||
};
|
||||
function getProcessInstanceReport() {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}?per_page=1`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}
|
||||
|
||||
getProcessInstanceReport();
|
||||
}, [params]);
|
||||
|
||||
const editProcessInstanceReport = (event: any) => {
|
||||
event.preventDefault();
|
||||
|
||||
const columnArray = columns.split(',').map((column) => {
|
||||
return { Header: column, accessor: column };
|
||||
});
|
||||
const orderByArray = orderBy.split(',').filter((n) => n);
|
||||
|
||||
const filterByArray = filterBy
|
||||
.split(',')
|
||||
.map((filterByItem) => {
|
||||
const [fieldName, fieldValue] = filterByItem.split('=');
|
||||
if (fieldValue) {
|
||||
return {
|
||||
field_name: fieldName,
|
||||
operator: 'equals',
|
||||
field_value: fieldValue,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((n) => n);
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}`,
|
||||
successCallback: navigateToProcessInstanceReport,
|
||||
httpMethod: 'PUT',
|
||||
postBody: {
|
||||
report_metadata: {
|
||||
columns: columnArray,
|
||||
order_by: orderByArray,
|
||||
filter_by: filterByArray,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const deleteProcessInstanceReport = () => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}`,
|
||||
successCallback: navigateToProcessInstanceReports,
|
||||
httpMethod: 'DELETE',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb />
|
||||
<h2>Edit Process Instance Report: {params.report_identifier}</h2>
|
||||
<ButtonWithConfirmation
|
||||
description={`Delete Report ${params.report_identifier}?`}
|
||||
onConfirmation={deleteProcessInstanceReport}
|
||||
buttonLabel="Delete"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<form onSubmit={editProcessInstanceReport}>
|
||||
<label htmlFor="columns">
|
||||
columns:
|
||||
<input
|
||||
name="columns"
|
||||
id="columns"
|
||||
type="text"
|
||||
value={columns}
|
||||
onChange={(e) => setColumns(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="order_by">
|
||||
order_by:
|
||||
<input
|
||||
name="order_by"
|
||||
id="order_by"
|
||||
type="text"
|
||||
value={orderBy}
|
||||
onChange={(e) => setOrderBy(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<br />
|
||||
<p>Like: month=3,milestone=2</p>
|
||||
<label htmlFor="filter_by">
|
||||
filter_by:
|
||||
<input
|
||||
name="filter_by"
|
||||
id="filter_by"
|
||||
type="text"
|
||||
value={filterBy}
|
||||
onChange={(e) => setFilterBy(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Button, Table } from 'react-bootstrap';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
export default function ProcessInstanceReportList() {
|
||||
const params = useParams();
|
||||
const [processInstanceReports, setProcessInstanceReports] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`,
|
||||
successCallback: setProcessInstanceReports,
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
const buildTable = () => {
|
||||
const rows = processInstanceReports.map((row) => {
|
||||
const rowToUse = row as any;
|
||||
return (
|
||||
<tr key={(row as any).id}>
|
||||
<td>
|
||||
<Link
|
||||
to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${rowToUse.identifier}`}
|
||||
>
|
||||
{rowToUse.identifier}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Identifier</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const headerStuff = (
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
processGroupId={params.process_group_id}
|
||||
processModelId={params.process_model_id}
|
||||
linkProcessModel
|
||||
/>
|
||||
<h2>Reports for Process Model: {params.process_model_id}</h2>
|
||||
<Button
|
||||
href={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/new`}
|
||||
>
|
||||
Add a process instance report
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
if (processInstanceReports?.length > 0) {
|
||||
return (
|
||||
<main>
|
||||
{headerStuff}
|
||||
{buildTable()}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
{headerStuff}
|
||||
<p>No reports found</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import { useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
export default function ProcessInstanceReportNew() {
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [identifier, setIdentifier] = useState('');
|
||||
const [columns, setColumns] = useState('');
|
||||
const [orderBy, setOrderBy] = useState('');
|
||||
const [filterBy, setFilterBy] = useState('');
|
||||
|
||||
const navigateToNewProcessInstance = (_result: any) => {
|
||||
navigate(
|
||||
`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${identifier}`
|
||||
);
|
||||
};
|
||||
|
||||
const addProcessInstanceReport = (event: any) => {
|
||||
event.preventDefault();
|
||||
|
||||
const columnArray = columns.split(',').map((column) => {
|
||||
return { Header: column, accessor: column };
|
||||
});
|
||||
const orderByArray = orderBy.split(',').filter((n) => n);
|
||||
|
||||
const filterByArray = filterBy
|
||||
.split(',')
|
||||
.map((filterByItem) => {
|
||||
const [fieldName, fieldValue] = filterByItem.split('=');
|
||||
if (fieldValue) {
|
||||
return {
|
||||
field_name: fieldName,
|
||||
operator: 'equals',
|
||||
field_value: fieldValue,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((n) => n);
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`,
|
||||
successCallback: navigateToNewProcessInstance,
|
||||
httpMethod: 'POST',
|
||||
postBody: {
|
||||
identifier,
|
||||
report_metadata: {
|
||||
columns: columnArray,
|
||||
order_by: orderByArray,
|
||||
filter_by: filterByArray,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb />
|
||||
<h2>Add Process Model</h2>
|
||||
<form onSubmit={addProcessInstanceReport}>
|
||||
<label htmlFor="identifier">
|
||||
identifier:
|
||||
<input
|
||||
name="identifier"
|
||||
id="identifier"
|
||||
type="text"
|
||||
value={identifier}
|
||||
onChange={(e) => setIdentifier(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="columns">
|
||||
columns:
|
||||
<input
|
||||
name="columns"
|
||||
id="columns"
|
||||
type="text"
|
||||
value={columns}
|
||||
onChange={(e) => setColumns(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="order_by">
|
||||
order_by:
|
||||
<input
|
||||
name="order_by"
|
||||
id="order_by"
|
||||
type="text"
|
||||
value={orderBy}
|
||||
onChange={(e) => setOrderBy(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<br />
|
||||
<p>Like: month=3,milestone=2</p>
|
||||
<label htmlFor="filter_by">
|
||||
filter_by:
|
||||
<input
|
||||
name="filter_by"
|
||||
id="filter_by"
|
||||
type="text"
|
||||
value={filterBy}
|
||||
onChange={(e) => setFilterBy(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
|
||||
import { Button, Table } from 'react-bootstrap';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { getPageInfoFromSearchParams } from '../helpers';
|
||||
|
||||
const PER_PAGE_FOR_PROCESS_INSTANCE_REPORT = 500;
|
||||
|
||||
export default function ProcessInstanceReport() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [processInstances, setProcessInstances] = useState([]);
|
||||
const [reportMetadata, setReportMetadata] = useState({});
|
||||
const [pagination, setPagination] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: any) => {
|
||||
const processInstancesFromApi = result.results;
|
||||
setProcessInstances(processInstancesFromApi);
|
||||
setReportMetadata(result.report_metadata);
|
||||
setPagination(result.pagination);
|
||||
};
|
||||
|
||||
function getProcessInstances() {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(
|
||||
searchParams,
|
||||
PER_PAGE_FOR_PROCESS_INSTANCE_REPORT
|
||||
);
|
||||
let query = `?page=${page}&per_page=${perPage}`;
|
||||
searchParams.forEach((value, key) => {
|
||||
if (key !== 'page' && key !== 'per_page') {
|
||||
query += `&${key}=${value}`;
|
||||
}
|
||||
});
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}?${query}`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}
|
||||
|
||||
getProcessInstances();
|
||||
}, [searchParams, params]);
|
||||
|
||||
const buildTable = () => {
|
||||
const headers = (reportMetadata as any).columns.map((column: any) => {
|
||||
return <th>{(column as any).Header}</th>;
|
||||
});
|
||||
|
||||
const rows = processInstances.map((row) => {
|
||||
const currentRow = (reportMetadata as any).columns.map((column: any) => {
|
||||
return <td>{(row as any)[column.accessor]}</td>;
|
||||
});
|
||||
return <tr key={(row as any).id}>{currentRow}</tr>;
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>{headers}</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
if (pagination) {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(
|
||||
searchParams,
|
||||
PER_PAGE_FOR_PROCESS_INSTANCE_REPORT
|
||||
);
|
||||
return (
|
||||
<main>
|
||||
<ProcessBreadcrumb
|
||||
processModelId={params.process_model_id}
|
||||
processGroupId={params.process_group_id}
|
||||
linkProcessModel
|
||||
/>
|
||||
<h2>Process Instance Report: {params.report_identifier}</h2>
|
||||
<Button
|
||||
href={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}/edit`}
|
||||
>
|
||||
Edit process instance report
|
||||
</Button>
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
pagination={pagination}
|
||||
tableToDisplay={buildTable()}
|
||||
path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report`}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { Button, Modal, Stack } from 'react-bootstrap';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ReactDiagramEditor from '../components/ReactDiagramEditor';
|
||||
import { convertSecondsToFormattedDate } from '../helpers';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
|
||||
export default function ProcessInstanceShow() {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
|
||||
const [processInstance, setProcessInstance] = useState(null);
|
||||
const [tasks, setTasks] = useState<Array<object> | null>(null);
|
||||
const [taskToDisplay, setTaskToDisplay] = useState<object | null>(null);
|
||||
|
||||
const navigateToProcessInstances = (_result: any) => {
|
||||
navigate(
|
||||
`/admin/process-instances?process_group_identifier=${params.process_group_id}&process_model_identifier=${params.process_model_id}`
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`,
|
||||
successCallback: setProcessInstance,
|
||||
});
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-instance/${params.process_instance_id}/tasks?all_tasks=true`,
|
||||
successCallback: setTasks,
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
const deleteProcessInstance = () => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`,
|
||||
successCallback: navigateToProcessInstances,
|
||||
httpMethod: 'DELETE',
|
||||
});
|
||||
};
|
||||
|
||||
// to force update the diagram since it could have changed
|
||||
const refreshPage = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const terminateProcessInstance = () => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/terminate`,
|
||||
successCallback: refreshPage,
|
||||
httpMethod: 'POST',
|
||||
});
|
||||
};
|
||||
|
||||
const getTaskIds = () => {
|
||||
const taskIds = { completed: [], readyOrWaiting: [] };
|
||||
if (tasks) {
|
||||
tasks.forEach(function getUserTasksElement(task: any) {
|
||||
if (task.state === 'COMPLETED') {
|
||||
(taskIds.completed as any).push(task.name);
|
||||
}
|
||||
if (task.state === 'READY' || task.state === 'WAITING') {
|
||||
(taskIds.readyOrWaiting as any).push(task.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
return taskIds;
|
||||
};
|
||||
|
||||
const getInfoTag = (processInstanceToUse: any) => {
|
||||
const currentEndDate = convertSecondsToFormattedDate(
|
||||
processInstanceToUse.end_in_seconds
|
||||
);
|
||||
let currentEndDateTag;
|
||||
if (currentEndDate) {
|
||||
currentEndDateTag = (
|
||||
<li>
|
||||
Completed:{' '}
|
||||
{convertSecondsToFormattedDate(processInstanceToUse.end_in_seconds) ||
|
||||
'N/A'}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
Started:{' '}
|
||||
{convertSecondsToFormattedDate(processInstanceToUse.start_in_seconds)}
|
||||
</li>
|
||||
{currentEndDateTag}
|
||||
<li>Status: {processInstanceToUse.status}</li>
|
||||
<li>
|
||||
<Link
|
||||
data-qa="process-instance-log-list-link"
|
||||
to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/logs`}
|
||||
>
|
||||
Logs
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
data-qa="process-instance-message-instance-list-link"
|
||||
to={`/admin/messages?process_group_id=${params.process_group_id}&process_model_id=${params.process_model_id}&process_instance_id=${params.process_instance_id}`}
|
||||
>
|
||||
Messages
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const terminateButton = (processInstanceToUse: any) => {
|
||||
if (
|
||||
['complete', 'terminated', 'faulted'].indexOf(
|
||||
processInstanceToUse.status
|
||||
) === -1
|
||||
) {
|
||||
return (
|
||||
<Button onClick={terminateProcessInstance} variant="warning">
|
||||
Terminate
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return <div />;
|
||||
};
|
||||
|
||||
const handleClickedDiagramTask = (shapeElement: any) => {
|
||||
if (tasks) {
|
||||
const matchingTask = tasks.find(
|
||||
(task: any) => task.name === shapeElement.id
|
||||
);
|
||||
if (matchingTask) {
|
||||
setTaskToDisplay(matchingTask);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTaskDataDisplayClose = () => {
|
||||
setTaskToDisplay(null);
|
||||
};
|
||||
|
||||
const getTaskById = (taskId: string) => {
|
||||
if (tasks !== null) {
|
||||
return tasks.find((task: any) => task.id === taskId);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const processScriptUnitTestCreateResult = (result: any) => {
|
||||
console.log('result', result);
|
||||
};
|
||||
|
||||
const createScriptUnitTest = () => {
|
||||
if (taskToDisplay) {
|
||||
const taskToUse: any = taskToDisplay;
|
||||
const previousTask: any = getTaskById(taskToUse.parent);
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/script-unit-tests`,
|
||||
httpMethod: 'POST',
|
||||
successCallback: processScriptUnitTestCreateResult,
|
||||
postBody: {
|
||||
bpmn_task_identifier: taskToUse.name,
|
||||
input_json: previousTask.data,
|
||||
expected_output_json: taskToUse.data,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const taskDataDisplayArea = () => {
|
||||
const taskToUse: any = taskToDisplay;
|
||||
if (taskToDisplay) {
|
||||
let createScriptUnitTestElement = null;
|
||||
if (taskToUse.type === 'Script Task') {
|
||||
createScriptUnitTestElement = (
|
||||
<Button
|
||||
data-qa="create-script-unit-test-button"
|
||||
onClick={createScriptUnitTest}
|
||||
>
|
||||
Create Script Unit Test
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Modal show={!!taskToUse} onHide={handleTaskDataDisplayClose}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
{taskToUse.name} ({taskToUse.type}): {taskToUse.state}
|
||||
{createScriptUnitTestElement}
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<pre>{JSON.stringify(taskToUse.data, null, 2)}</pre>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
if (processInstance && tasks) {
|
||||
const processInstanceToUse = processInstance as any;
|
||||
const taskIds = getTaskIds();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
processModelId={params.process_model_id}
|
||||
processGroupId={params.process_group_id}
|
||||
linkProcessModel
|
||||
/>
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<h2>Process Instance Id: {processInstanceToUse.id}</h2>
|
||||
<ButtonWithConfirmation
|
||||
description="Delete Process Instance?"
|
||||
onConfirmation={deleteProcessInstance}
|
||||
buttonLabel="Delete"
|
||||
/>
|
||||
{terminateButton(processInstanceToUse)}
|
||||
</Stack>
|
||||
{getInfoTag(processInstanceToUse)}
|
||||
{taskDataDisplayArea()}
|
||||
<ReactDiagramEditor
|
||||
processModelId={params.process_model_id || ''}
|
||||
processGroupId={params.process_group_id || ''}
|
||||
diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''}
|
||||
fileName={processInstanceToUse.bpmn_xml_file_contents || ''}
|
||||
readyOrWaitingBpmnTaskIds={taskIds.readyOrWaiting}
|
||||
completedTasksBpmnIds={taskIds.completed}
|
||||
diagramType="readonly"
|
||||
onElementClick={handleClickedDiagramTask}
|
||||
/>
|
||||
|
||||
<div id="diagram-container" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import { useState, useEffect, useContext } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Button, Stack } from 'react-bootstrap';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
|
||||
export default function ProcessModelEdit() {
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [processModel, setProcessModel] = useState(null);
|
||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||
|
||||
const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`;
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: any) => {
|
||||
setProcessModel(result);
|
||||
setDisplayName(result.display_name);
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/${processModelPath}`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}, [processModelPath]);
|
||||
|
||||
const navigateToProcessModel = (_result: any) => {
|
||||
navigate(`/admin/${processModelPath}`);
|
||||
};
|
||||
|
||||
const navigateToProcessModels = (_result: any) => {
|
||||
navigate(`/admin/process-groups/${params.process_group_id}`);
|
||||
};
|
||||
|
||||
const updateProcessModel = (event: any) => {
|
||||
const processModelToUse = processModel as any;
|
||||
event.preventDefault();
|
||||
const processModelToPass = Object.assign(processModelToUse, {
|
||||
display_name: displayName,
|
||||
});
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/${processModelPath}`,
|
||||
successCallback: navigateToProcessModel,
|
||||
httpMethod: 'PUT',
|
||||
postBody: processModelToPass,
|
||||
});
|
||||
};
|
||||
|
||||
const deleteProcessModel = () => {
|
||||
setErrorMessage('');
|
||||
const processModelToUse = processModel as any;
|
||||
const processModelShowPath = `/process-models/${processModelToUse.process_group_id}/${processModelToUse.id}`;
|
||||
HttpService.makeCallToBackend({
|
||||
path: `${processModelShowPath}`,
|
||||
successCallback: navigateToProcessModels,
|
||||
httpMethod: 'DELETE',
|
||||
failureCallback: setErrorMessage,
|
||||
});
|
||||
};
|
||||
|
||||
const onDisplayNameChanged = (newDisplayName: any) => {
|
||||
setDisplayName(newDisplayName);
|
||||
};
|
||||
|
||||
if (processModel) {
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb processGroupId={(processModel as any).id} />
|
||||
<h2>Edit Process Group: {(processModel as any).id}</h2>
|
||||
<form onSubmit={updateProcessModel}>
|
||||
<label>Display Name:</label>
|
||||
<input
|
||||
name="display_name"
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => onDisplayNameChanged(e.target.value)}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Button type="submit">Submit</Button>
|
||||
<Button variant="secondary" href={`/admin/${processModelPath}`}>
|
||||
Cancel
|
||||
</Button>
|
||||
<ButtonWithConfirmation
|
||||
description={`Delete Process Model ${(processModel as any).id}?`}
|
||||
onConfirmation={deleteProcessModel}
|
||||
buttonLabel="Delete"
|
||||
/>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,644 @@
|
|||
import { useContext, useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Modal, Stack } from 'react-bootstrap';
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import Row from 'react-bootstrap/Row';
|
||||
import Col from 'react-bootstrap/Col';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
import ReactDiagramEditor from '../components/ReactDiagramEditor';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
import { makeid } from '../helpers';
|
||||
import { ProcessModel } from '../interfaces';
|
||||
|
||||
export default function ProcessModelEditDiagram() {
|
||||
const [showFileNameEditor, setShowFileNameEditor] = useState(false);
|
||||
const handleShowFileNameEditor = () => setShowFileNameEditor(true);
|
||||
|
||||
const [scriptText, setScriptText] = useState('');
|
||||
const [scriptModeling, setScriptModeling] = useState(null);
|
||||
const [scriptElement, setScriptElement] = useState(null);
|
||||
const [showScriptEditor, setShowScriptEditor] = useState(false);
|
||||
const handleShowScriptEditor = () => setShowScriptEditor(true);
|
||||
|
||||
const editorRef = useRef(null);
|
||||
const monacoRef = useRef(null);
|
||||
|
||||
const failingScriptLineClassNamePrefix = 'failingScriptLineError';
|
||||
|
||||
function handleEditorDidMount(editor: any, monaco: any) {
|
||||
// here is the editor instance
|
||||
// you can store it in `useRef` for further usage
|
||||
editorRef.current = editor;
|
||||
monacoRef.current = monaco;
|
||||
}
|
||||
|
||||
interface ScriptUnitTest {
|
||||
id: string;
|
||||
inputJson: any;
|
||||
expectedOutputJson: any;
|
||||
}
|
||||
|
||||
interface ScriptUnitTestResult {
|
||||
result: boolean;
|
||||
context: object;
|
||||
error: string;
|
||||
line_number: number;
|
||||
offset: number;
|
||||
}
|
||||
|
||||
const [currentScriptUnitTest, setCurrentScriptUnitTest] =
|
||||
useState<ScriptUnitTest | null>(null);
|
||||
const [currentScriptUnitTestIndex, setCurrentScriptUnitTestIndex] =
|
||||
useState<number>(-1);
|
||||
const [scriptUnitTestResult, setScriptUnitTestResult] =
|
||||
useState<ScriptUnitTestResult | null>(null);
|
||||
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||
const [processModelFile, setProcessModelFile] = useState(null);
|
||||
const [newFileName, setNewFileName] = useState('');
|
||||
const [bpmnXmlForDiagramRendering, setBpmnXmlForDiagramRendering] =
|
||||
useState(null);
|
||||
|
||||
const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
|
||||
|
||||
const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`;
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: ProcessModel) => {
|
||||
setProcessModel(result);
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/${processModelPath}`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}, [processModelPath]);
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: any) => {
|
||||
setProcessModelFile(result);
|
||||
setBpmnXmlForDiagramRendering(result.file_contents);
|
||||
};
|
||||
|
||||
if (params.file_name) {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/${processModelPath}/files/${params.file_name}`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}
|
||||
}, [processModelPath, params]);
|
||||
|
||||
const handleFileNameCancel = () => {
|
||||
setShowFileNameEditor(false);
|
||||
setNewFileName('');
|
||||
};
|
||||
|
||||
const navigateToProcessModelFile = (_result: any) => {
|
||||
if (!params.file_name) {
|
||||
const fileNameWithExtension = `${newFileName}.${searchParams.get(
|
||||
'file_type'
|
||||
)}`;
|
||||
navigate(
|
||||
`/admin/process-models/${params.process_group_id}/${params.process_model_id}/files/${fileNameWithExtension}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const saveDiagram = (bpmnXML: any, fileName = params.file_name) => {
|
||||
setErrorMessage('');
|
||||
setBpmnXmlForDiagramRendering(bpmnXML);
|
||||
|
||||
let url = `/process-models/${params.process_group_id}/${params.process_model_id}/files`;
|
||||
let httpMethod = 'PUT';
|
||||
let fileNameWithExtension = fileName;
|
||||
|
||||
if (newFileName) {
|
||||
fileNameWithExtension = `${newFileName}.${searchParams.get('file_type')}`;
|
||||
httpMethod = 'POST';
|
||||
} else {
|
||||
url += `/${fileNameWithExtension}`;
|
||||
}
|
||||
if (!fileNameWithExtension) {
|
||||
handleShowFileNameEditor();
|
||||
return;
|
||||
}
|
||||
|
||||
const bpmnFile = new File([bpmnXML], fileNameWithExtension);
|
||||
const formData = new FormData();
|
||||
formData.append('file', bpmnFile);
|
||||
formData.append('fileName', bpmnFile.name);
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: navigateToProcessModelFile,
|
||||
failureCallback: setErrorMessage,
|
||||
httpMethod,
|
||||
postBody: formData,
|
||||
});
|
||||
|
||||
// after saving the file, make sure we null out newFileName
|
||||
// so it does not get used over the params
|
||||
setNewFileName('');
|
||||
};
|
||||
|
||||
const onDeleteFile = (fileName = params.file_name) => {
|
||||
const url = `/process-models/${params.process_group_id}/${params.process_model_id}/files/${fileName}`;
|
||||
const httpMethod = 'DELETE';
|
||||
|
||||
const navigateToProcessModelShow = (_httpResult: any) => {
|
||||
navigate(
|
||||
`/admin/process-models/${params.process_group_id}/${params.process_model_id}`
|
||||
);
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: navigateToProcessModelShow,
|
||||
httpMethod,
|
||||
});
|
||||
};
|
||||
|
||||
const onSetPrimaryFile = (fileName = params.file_name) => {
|
||||
const url = `/process-models/${params.process_group_id}/${params.process_model_id}`;
|
||||
const httpMethod = 'PUT';
|
||||
|
||||
const navigateToProcessModelShow = (_httpResult: any) => {
|
||||
navigate(`/admin${url}`);
|
||||
};
|
||||
const processModelToPass = {
|
||||
primary_file_name: fileName,
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: navigateToProcessModelShow,
|
||||
httpMethod,
|
||||
postBody: processModelToPass,
|
||||
});
|
||||
};
|
||||
|
||||
const handleFileNameSave = (event: any) => {
|
||||
event.preventDefault();
|
||||
setShowFileNameEditor(false);
|
||||
saveDiagram(bpmnXmlForDiagramRendering);
|
||||
};
|
||||
|
||||
const newFileNameBox = () => {
|
||||
const fileExtension = `.${searchParams.get('file_type')}`;
|
||||
return (
|
||||
<Modal show={showFileNameEditor} onHide={handleFileNameCancel}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Process Model File Name</Modal.Title>
|
||||
</Modal.Header>
|
||||
<form onSubmit={handleFileNameSave}>
|
||||
<label>File Name:</label>
|
||||
<span>
|
||||
<input
|
||||
name="file_name"
|
||||
type="text"
|
||||
value={newFileName}
|
||||
onChange={(e) => setNewFileName(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
{fileExtension}
|
||||
</span>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleFileNameCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" type="submit">
|
||||
Save Changes
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const resetUnitTextResult = () => {
|
||||
setScriptUnitTestResult(null);
|
||||
const styleSheet = document.styleSheets[0];
|
||||
const ruleList = styleSheet.cssRules;
|
||||
for (let ii = ruleList.length - 1; ii >= 0; ii -= 1) {
|
||||
const regexp = new RegExp(
|
||||
`^.${failingScriptLineClassNamePrefix}_.*::after `
|
||||
);
|
||||
if (ruleList[ii].cssText.match(regexp)) {
|
||||
styleSheet.deleteRule(ii);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const makeApiHandler = (event: any) => {
|
||||
return function fireEvent(results: any) {
|
||||
event.eventBus.fire('spiff.service_tasks.returned', {
|
||||
serviceTaskOperators: results,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const onServiceTasksRequested = (event: any) => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/service_tasks`,
|
||||
successCallback: makeApiHandler(event),
|
||||
});
|
||||
};
|
||||
|
||||
const getScriptUnitTestElements = (element: any) => {
|
||||
const { extensionElements } = element.businessObject;
|
||||
if (extensionElements && extensionElements.values.length > 0) {
|
||||
const unitTestModdleElements = extensionElements
|
||||
.get('values')
|
||||
.filter(function getInstanceOfType(e: any) {
|
||||
return e.$instanceOf('spiffworkflow:unitTests');
|
||||
})[0];
|
||||
if (unitTestModdleElements) {
|
||||
return unitTestModdleElements.unitTests;
|
||||
}
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const setScriptUnitTestElementWithIndex = (
|
||||
scriptIndex: number,
|
||||
element: any = scriptElement
|
||||
) => {
|
||||
const unitTestsModdleElements = getScriptUnitTestElements(element);
|
||||
if (unitTestsModdleElements.length > 0) {
|
||||
setCurrentScriptUnitTest(unitTestsModdleElements[scriptIndex]);
|
||||
setCurrentScriptUnitTestIndex(scriptIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const onLaunchScriptEditor = (element: any, modeling: any) => {
|
||||
setScriptText(element.businessObject.script || '');
|
||||
setScriptModeling(modeling);
|
||||
setScriptElement(element);
|
||||
setScriptUnitTestElementWithIndex(0, element);
|
||||
handleShowScriptEditor();
|
||||
};
|
||||
|
||||
const handleScriptEditorClose = () => {
|
||||
resetUnitTextResult();
|
||||
setShowScriptEditor(false);
|
||||
};
|
||||
|
||||
const handleEditorScriptChange = (value: any) => {
|
||||
setScriptText(value);
|
||||
(scriptModeling as any).updateProperties(scriptElement, {
|
||||
scriptFormat: 'python',
|
||||
script: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditorScriptTestUnitInputChange = (value: any) => {
|
||||
if (currentScriptUnitTest) {
|
||||
currentScriptUnitTest.inputJson.value = value;
|
||||
(scriptModeling as any).updateProperties(scriptElement, {});
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditorScriptTestUnitOutputChange = (value: any) => {
|
||||
if (currentScriptUnitTest) {
|
||||
currentScriptUnitTest.expectedOutputJson.value = value;
|
||||
(scriptModeling as any).updateProperties(scriptElement, {});
|
||||
}
|
||||
};
|
||||
|
||||
const generalEditorOptions = () => {
|
||||
return {
|
||||
glyphMargin: false,
|
||||
folding: false,
|
||||
lineNumbersMinChars: 0,
|
||||
};
|
||||
};
|
||||
|
||||
const setPreviousScriptUnitTest = () => {
|
||||
resetUnitTextResult();
|
||||
const newScriptIndex = currentScriptUnitTestIndex - 1;
|
||||
if (newScriptIndex >= 0) {
|
||||
setScriptUnitTestElementWithIndex(newScriptIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const setNextScriptUnitTest = () => {
|
||||
resetUnitTextResult();
|
||||
const newScriptIndex = currentScriptUnitTestIndex + 1;
|
||||
const unitTestsModdleElements = getScriptUnitTestElements(scriptElement);
|
||||
if (newScriptIndex < unitTestsModdleElements.length) {
|
||||
setScriptUnitTestElementWithIndex(newScriptIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const processScriptUnitTestRunResult = (result: any) => {
|
||||
if ('result' in result) {
|
||||
setScriptUnitTestResult(result);
|
||||
if (
|
||||
result.line_number &&
|
||||
result.error &&
|
||||
editorRef.current &&
|
||||
monacoRef.current
|
||||
) {
|
||||
const currentClassName = `${failingScriptLineClassNamePrefix}_${makeid(
|
||||
7
|
||||
)}`;
|
||||
|
||||
// document.documentElement.style.setProperty causes the content property to go away
|
||||
// so add the rule dynamically instead of changing a property variable
|
||||
document.styleSheets[0].addRule(
|
||||
`.${currentClassName}::after`,
|
||||
`content: " # ${result.error.replaceAll('"', '')}"; color: red`
|
||||
);
|
||||
|
||||
const lineLength =
|
||||
scriptText.split('\n')[result.line_number - 1].length + 1;
|
||||
|
||||
const editorRefToUse = editorRef.current as any;
|
||||
editorRefToUse.deltaDecorations(
|
||||
[],
|
||||
[
|
||||
{
|
||||
// Range(lineStart, column, lineEnd, column)
|
||||
range: new (monacoRef.current as any).Range(
|
||||
result.line_number,
|
||||
lineLength
|
||||
),
|
||||
options: { afterContentClassName: currentClassName },
|
||||
},
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const runCurrentUnitTest = () => {
|
||||
if (currentScriptUnitTest && scriptElement) {
|
||||
resetUnitTextResult();
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/script-unit-tests/run`,
|
||||
httpMethod: 'POST',
|
||||
successCallback: processScriptUnitTestRunResult,
|
||||
postBody: {
|
||||
bpmn_task_identifier: (scriptElement as any).id,
|
||||
python_script: scriptText,
|
||||
input_json: JSON.parse(currentScriptUnitTest.inputJson.value),
|
||||
expected_output_json: JSON.parse(
|
||||
currentScriptUnitTest.expectedOutputJson.value
|
||||
),
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const unitTestFailureElement = () => {
|
||||
if (
|
||||
scriptUnitTestResult &&
|
||||
scriptUnitTestResult.result === false &&
|
||||
!scriptUnitTestResult.line_number
|
||||
) {
|
||||
let errorStringElement = null;
|
||||
if (scriptUnitTestResult.error) {
|
||||
errorStringElement = (
|
||||
<span>
|
||||
Received error when running script:{' '}
|
||||
{JSON.stringify(scriptUnitTestResult.error)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
let errorContextElement = null;
|
||||
if (scriptUnitTestResult.context) {
|
||||
errorContextElement = (
|
||||
<span>
|
||||
Received unexpected output:{' '}
|
||||
{JSON.stringify(scriptUnitTestResult.context)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span style={{ color: 'red', fontSize: '1em' }}>
|
||||
{errorStringElement}
|
||||
{errorContextElement}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const scriptUnitTestEditorElement = () => {
|
||||
if (currentScriptUnitTest) {
|
||||
let previousButtonDisable = true;
|
||||
if (currentScriptUnitTestIndex > 0) {
|
||||
previousButtonDisable = false;
|
||||
}
|
||||
let nextButtonDisable = true;
|
||||
const unitTestsModdleElements = getScriptUnitTestElements(scriptElement);
|
||||
if (currentScriptUnitTestIndex < unitTestsModdleElements.length - 1) {
|
||||
nextButtonDisable = false;
|
||||
}
|
||||
|
||||
// unset current unit test if all tests were deleted
|
||||
if (unitTestsModdleElements.length < 1) {
|
||||
setCurrentScriptUnitTest(null);
|
||||
setCurrentScriptUnitTestIndex(-1);
|
||||
}
|
||||
|
||||
let scriptUnitTestResultBoolElement = null;
|
||||
if (scriptUnitTestResult) {
|
||||
scriptUnitTestResultBoolElement = (
|
||||
<Col xs={1}>
|
||||
{scriptUnitTestResult.result === true && (
|
||||
<span style={{ color: 'green', fontSize: '3em' }}>✓</span>
|
||||
)}
|
||||
{scriptUnitTestResult.result === false && (
|
||||
<span style={{ color: 'red', fontSize: '3em' }}>✘</span>
|
||||
)}
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col xs={8}>
|
||||
<Button variant="link" disabled style={{ fontSize: '1.5em' }}>
|
||||
Unit Test: {currentScriptUnitTest.id}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={1}>
|
||||
<Button
|
||||
data-qa="unit-test-previous-button"
|
||||
style={{ fontSize: '1.5em' }}
|
||||
onClick={setPreviousScriptUnitTest}
|
||||
variant="link"
|
||||
disabled={previousButtonDisable}
|
||||
>
|
||||
«
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={1}>
|
||||
<Button
|
||||
data-qa="unit-test-next-button"
|
||||
style={{ fontSize: '1.5em' }}
|
||||
onClick={setNextScriptUnitTest}
|
||||
variant="link"
|
||||
disabled={nextButtonDisable}
|
||||
>
|
||||
»
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={1}>
|
||||
<Button
|
||||
className="justify-content-end"
|
||||
data-qa="unit-test-run"
|
||||
style={{ fontSize: '1.5em' }}
|
||||
onClick={runCurrentUnitTest}
|
||||
>
|
||||
Run
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
{unitTestFailureElement()}
|
||||
</Stack>
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Stack>
|
||||
<div>Input Json:</div>
|
||||
<div>
|
||||
<Editor
|
||||
height={200}
|
||||
defaultLanguage="json"
|
||||
options={Object.assign(generalEditorOptions(), {
|
||||
minimap: { enabled: false },
|
||||
})}
|
||||
value={currentScriptUnitTest.inputJson.value}
|
||||
onChange={handleEditorScriptTestUnitInputChange}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<div>Expected Output Json:</div>
|
||||
<div>
|
||||
<Editor
|
||||
height={200}
|
||||
defaultLanguage="json"
|
||||
options={Object.assign(generalEditorOptions(), {
|
||||
minimap: { enabled: false },
|
||||
})}
|
||||
value={currentScriptUnitTest.expectedOutputJson.value}
|
||||
onChange={handleEditorScriptTestUnitOutputChange}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const scriptEditor = () => {
|
||||
let scriptName = '';
|
||||
if (scriptElement) {
|
||||
scriptName = (scriptElement as any).di.bpmnElement.name;
|
||||
}
|
||||
return (
|
||||
<Modal size="xl" show={showScriptEditor} onHide={handleScriptEditorClose}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Editing Script: {scriptName}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Editor
|
||||
height={500}
|
||||
width="auto"
|
||||
options={generalEditorOptions()}
|
||||
defaultLanguage="python"
|
||||
defaultValue={scriptText}
|
||||
onChange={handleEditorScriptChange}
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
{scriptUnitTestEditorElement()}
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleScriptEditorClose}>
|
||||
Close
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const isDmn = () => {
|
||||
const fileName = params.file_name || '';
|
||||
return searchParams.get('file_type') === 'dmn' || fileName.endsWith('.dmn');
|
||||
};
|
||||
|
||||
const appropriateEditor = () => {
|
||||
if (isDmn()) {
|
||||
return (
|
||||
<ReactDiagramEditor
|
||||
processModelId={params.process_model_id || ''}
|
||||
processGroupId={params.process_group_id || ''}
|
||||
saveDiagram={saveDiagram}
|
||||
onDeleteFile={onDeleteFile}
|
||||
diagramXML={bpmnXmlForDiagramRendering}
|
||||
fileName={params.file_name}
|
||||
diagramType="dmn"
|
||||
/>
|
||||
);
|
||||
}
|
||||
// let this be undefined (so we won't display the button) unless the
|
||||
// current primary_file_name is different from the one we're looking at.
|
||||
let onSetPrimaryFileCallback;
|
||||
if (
|
||||
processModel &&
|
||||
params.file_name &&
|
||||
params.file_name !== processModel.primary_file_name
|
||||
) {
|
||||
onSetPrimaryFileCallback = onSetPrimaryFile;
|
||||
}
|
||||
return (
|
||||
<ReactDiagramEditor
|
||||
processModelId={params.process_model_id || ''}
|
||||
processGroupId={params.process_group_id || ''}
|
||||
saveDiagram={saveDiagram}
|
||||
onDeleteFile={onDeleteFile}
|
||||
onSetPrimaryFile={onSetPrimaryFileCallback}
|
||||
diagramXML={bpmnXmlForDiagramRendering}
|
||||
fileName={params.file_name}
|
||||
diagramType="bpmn"
|
||||
onLaunchScriptEditor={onLaunchScriptEditor}
|
||||
onServiceTasksRequested={onServiceTasksRequested}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// if a file name is not given then this is a new model and the ReactDiagramEditor component will handle it
|
||||
if (bpmnXmlForDiagramRendering || !params.file_name) {
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
processGroupId={params.process_group_id}
|
||||
processModelId={params.process_model_id}
|
||||
linkProcessModel
|
||||
/>
|
||||
<h2>
|
||||
Process Model File
|
||||
{processModelFile ? `: ${(processModelFile as any).name}` : ''}
|
||||
</h2>
|
||||
{appropriateEditor()}
|
||||
{newFileNameBox()}
|
||||
{scriptEditor()}
|
||||
|
||||
<div id="diagram-container" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import { useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Form from 'react-bootstrap/Form';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import { slugifyString } from '../helpers';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
export default function ProcessModelNew() {
|
||||
const params = useParams();
|
||||
|
||||
const [identifier, setIdentifier] = useState('');
|
||||
const [idHasBeenUpdatedByUser, setIdHasBeenUpdatedByUser] = useState(false);
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const navigateToNewProcessModel = (_result: any) => {
|
||||
navigate(`/admin/process-models/${params.process_group_id}/${identifier}`);
|
||||
};
|
||||
|
||||
const addProcessModel = (event: any) => {
|
||||
event.preventDefault();
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models`,
|
||||
successCallback: navigateToNewProcessModel,
|
||||
httpMethod: 'POST',
|
||||
postBody: {
|
||||
id: identifier,
|
||||
display_name: displayName,
|
||||
description: displayName,
|
||||
process_group_id: params.process_group_id,
|
||||
is_master_spec: false,
|
||||
standalone: false,
|
||||
library: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onDisplayNameChanged = (newDisplayName: any) => {
|
||||
setDisplayName(newDisplayName);
|
||||
if (!idHasBeenUpdatedByUser) {
|
||||
setIdentifier(slugifyString(newDisplayName));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb />
|
||||
<h2>Add Process Model</h2>
|
||||
<Form onSubmit={addProcessModel}>
|
||||
<Form.Group className="mb-3" controlId="display_name">
|
||||
<Form.Label>Display Name:</Form.Label>
|
||||
<Form.Control
|
||||
name="display_name"
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => onDisplayNameChanged(e.target.value)}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="identifier">
|
||||
<Form.Label>ID:</Form.Label>
|
||||
<Form.Control
|
||||
name="id"
|
||||
type="text"
|
||||
value={identifier}
|
||||
onChange={(e) => {
|
||||
setIdentifier(e.target.value);
|
||||
setIdHasBeenUpdatedByUser(true);
|
||||
}}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button variant="primary" type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
import { useContext, useEffect, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { Button, Stack } from 'react-bootstrap';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import FileInput from '../components/FileInput';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
import { RecentProcessModel } from '../interfaces';
|
||||
|
||||
const storeRecentProcessModelInLocalStorage = (
|
||||
processModelForStorage: any,
|
||||
params: any
|
||||
) => {
|
||||
if (
|
||||
params.process_group_id === undefined ||
|
||||
params.process_model_id === undefined
|
||||
) {
|
||||
return;
|
||||
}
|
||||
// All values stored in localStorage are strings.
|
||||
// Grab our recentProcessModels string from localStorage.
|
||||
const stringFromLocalStorage = window.localStorage.getItem(
|
||||
'recentProcessModels'
|
||||
);
|
||||
|
||||
// adapted from https://stackoverflow.com/a/59424458/6090676
|
||||
// If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, use the value we parse out.
|
||||
let array: RecentProcessModel[] = [];
|
||||
if (stringFromLocalStorage !== null) {
|
||||
// Then parse that string into an actual value.
|
||||
array = JSON.parse(stringFromLocalStorage);
|
||||
}
|
||||
|
||||
// Here's the value we want to add
|
||||
const value = {
|
||||
processGroupIdentifier: processModelForStorage.process_group_id,
|
||||
processModelIdentifier: processModelForStorage.id,
|
||||
processModelDisplayName: processModelForStorage.display_name,
|
||||
};
|
||||
|
||||
// If our parsed/empty array doesn't already have this value in it...
|
||||
const matchingItem = array.find(
|
||||
(item) =>
|
||||
item.processGroupIdentifier === value.processGroupIdentifier &&
|
||||
item.processModelIdentifier === value.processModelIdentifier
|
||||
);
|
||||
if (matchingItem === undefined) {
|
||||
// add the value to the beginning of the array
|
||||
array.unshift(value);
|
||||
|
||||
// Keep the array to 3 items
|
||||
if (array.length > 3) {
|
||||
array.pop();
|
||||
}
|
||||
|
||||
// turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage
|
||||
const stringRepresentingArray = JSON.stringify(array);
|
||||
|
||||
// and store it in localStorage as "recentProcessModels"
|
||||
window.localStorage.setItem('recentProcessModels', stringRepresentingArray);
|
||||
}
|
||||
};
|
||||
|
||||
export default function ProcessModelShow() {
|
||||
const params = useParams();
|
||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||
|
||||
const [processModel, setProcessModel] = useState({});
|
||||
const [processInstanceResult, setProcessInstanceResult] = useState(null);
|
||||
const [reloadModel, setReloadModel] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: object) => {
|
||||
setProcessModel(result);
|
||||
setReloadModel(false);
|
||||
storeRecentProcessModelInLocalStorage(result, params);
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}, [params, reloadModel]);
|
||||
|
||||
const processModelRun = (processInstance: any) => {
|
||||
setErrorMessage('');
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${processInstance.id}/run`,
|
||||
successCallback: setProcessInstanceResult,
|
||||
failureCallback: setErrorMessage,
|
||||
httpMethod: 'POST',
|
||||
});
|
||||
};
|
||||
|
||||
const processInstanceCreateAndRun = () => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`,
|
||||
successCallback: processModelRun,
|
||||
httpMethod: 'POST',
|
||||
});
|
||||
};
|
||||
|
||||
let processInstanceResultTag = null;
|
||||
if (processInstanceResult) {
|
||||
let takeMeToMyTaskBlurb = null;
|
||||
// FIXME: ensure that the task is actually for the current user as well
|
||||
const processInstanceId = (processInstanceResult as any).id;
|
||||
const nextTask = (processInstanceResult as any).next_task;
|
||||
if (nextTask && nextTask.state === 'READY') {
|
||||
takeMeToMyTaskBlurb = (
|
||||
<span>
|
||||
You have a task to complete. Go to{' '}
|
||||
<Link to={`/tasks/${processInstanceId}/${nextTask.id}`}>my task</Link>
|
||||
.
|
||||
</span>
|
||||
);
|
||||
}
|
||||
processInstanceResultTag = (
|
||||
<div className="alert alert-success" role="alert">
|
||||
<p>
|
||||
Process Instance {processInstanceId} kicked off (
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${
|
||||
(processModel as any).id
|
||||
}/process-instances/${processInstanceId}`}
|
||||
data-qa="process-instance-show-link"
|
||||
>
|
||||
view
|
||||
</Link>
|
||||
). {takeMeToMyTaskBlurb}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const onUploadedCallback = () => {
|
||||
setReloadModel(true);
|
||||
};
|
||||
|
||||
const processModelFileList = () => {
|
||||
let constructedTag;
|
||||
const tags = (processModel as any).files.map((processModelFile: any) => {
|
||||
if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
|
||||
let primarySuffix = '';
|
||||
if (processModelFile.name === (processModel as any).primary_file_name) {
|
||||
primarySuffix = '- Primary File';
|
||||
}
|
||||
constructedTag = (
|
||||
<li key={processModelFile.name}>
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/files/${processModelFile.name}`}
|
||||
>
|
||||
{processModelFile.name}
|
||||
</Link>
|
||||
{primarySuffix}
|
||||
</li>
|
||||
);
|
||||
} else if (processModelFile.name.match(/\.(json|md)$/)) {
|
||||
constructedTag = (
|
||||
<li key={processModelFile.name}>
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form/${processModelFile.name}`}
|
||||
>
|
||||
{processModelFile.name}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
constructedTag = (
|
||||
<li key={processModelFile.name}>{processModelFile.name}</li>
|
||||
);
|
||||
}
|
||||
return constructedTag;
|
||||
});
|
||||
|
||||
return <ul>{tags}</ul>;
|
||||
};
|
||||
|
||||
const processInstancesUl = () => {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
to={`/admin/process-instances?process_group_identifier=${
|
||||
(processModel as any).process_group_id
|
||||
}&process_model_identifier=${(processModel as any).id}`}
|
||||
data-qa="process-instance-list-link"
|
||||
>
|
||||
List
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/process-instances/reports`}
|
||||
data-qa="process-instance-reports-link"
|
||||
>
|
||||
Reports
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const processModelButtons = () => {
|
||||
return (
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Button onClick={processInstanceCreateAndRun} variant="primary">
|
||||
Run
|
||||
</Button>
|
||||
<Button
|
||||
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 as any).process_group_id
|
||||
}/${(processModel as any).id}/files?file_type=bpmn`}
|
||||
variant="warning"
|
||||
>
|
||||
Add New BPMN File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/files?file_type=dmn`}
|
||||
variant="success"
|
||||
>
|
||||
Add New DMN File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form?file_ext=json`}
|
||||
variant="info"
|
||||
>
|
||||
Add New JSON File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form?file_ext=md`}
|
||||
variant="info"
|
||||
>
|
||||
Add New Markdown File
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
if (Object.keys(processModel).length > 1) {
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
processGroupId={(processModel as any).process_group_id}
|
||||
processModelId={(processModel as any).id}
|
||||
/>
|
||||
{processInstanceResultTag}
|
||||
<FileInput
|
||||
processModelId={(processModel as any).id}
|
||||
processGroupId={(processModel as any).process_group_id}
|
||||
onUploadedCallback={onUploadedCallback}
|
||||
/>
|
||||
<br />
|
||||
{processModelButtons()}
|
||||
<br />
|
||||
<br />
|
||||
<h3>Process Instances</h3>
|
||||
{processInstancesUl()}
|
||||
<br />
|
||||
<br />
|
||||
<h3>Files</h3>
|
||||
{processModelFileList()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import Editor from '@monaco-editor/react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Modal } from 'react-bootstrap';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
|
||||
// NOTE: This is mostly the same as ProcessModelEditDiagram and if we go this route could
|
||||
// possibly be merged into it. I'm leaving as a separate file now in case it does
|
||||
// end up diverging greatly
|
||||
export default function ReactFormEditor() {
|
||||
const params = useParams();
|
||||
const [showFileNameEditor, setShowFileNameEditor] = useState(false);
|
||||
const [newFileName, setNewFileName] = useState('');
|
||||
const searchParams = useSearchParams()[0];
|
||||
const handleShowFileNameEditor = () => setShowFileNameEditor(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [processModelFile, setProcessModelFile] = useState(null);
|
||||
const [processModelFileContents, setProcessModelFileContents] = useState('');
|
||||
|
||||
const fileExtension = (() => {
|
||||
if (params.file_name) {
|
||||
const matches = params.file_name.match(/\.([a-z]+)/);
|
||||
if (matches !== null && matches.length > 1) {
|
||||
return matches[1];
|
||||
}
|
||||
}
|
||||
|
||||
return searchParams.get('file_ext') ?? 'json';
|
||||
})();
|
||||
|
||||
const editorDefaultLanguage = fileExtension === 'md' ? 'markdown' : 'json';
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: any) => {
|
||||
setProcessModelFile(result);
|
||||
setProcessModelFileContents(result.file_contents);
|
||||
};
|
||||
|
||||
if (params.file_name) {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-models/${params.process_group_id}/${params.process_model_id}/files/${params.file_name}`,
|
||||
successCallback: processResult,
|
||||
});
|
||||
}
|
||||
}, [params]);
|
||||
|
||||
const navigateToProcessModelFile = (_result: any) => {
|
||||
if (!params.file_name) {
|
||||
const fileNameWithExtension = `${newFileName}.${fileExtension}`;
|
||||
navigate(
|
||||
`/admin/process-models/${params.process_group_id}/${params.process_model_id}/form/${fileNameWithExtension}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const saveFile = () => {
|
||||
let url = `/process-models/${params.process_group_id}/${params.process_model_id}/files`;
|
||||
let httpMethod = 'PUT';
|
||||
let fileNameWithExtension = params.file_name;
|
||||
|
||||
if (newFileName) {
|
||||
fileNameWithExtension = `${newFileName}.${fileExtension}`;
|
||||
httpMethod = 'POST';
|
||||
} else {
|
||||
url += `/${fileNameWithExtension}`;
|
||||
}
|
||||
if (!fileNameWithExtension) {
|
||||
handleShowFileNameEditor();
|
||||
return;
|
||||
}
|
||||
|
||||
const file = new File(
|
||||
[processModelFileContents],
|
||||
fileNameWithExtension || ''
|
||||
);
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('fileName', file.name);
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: navigateToProcessModelFile,
|
||||
httpMethod,
|
||||
postBody: formData,
|
||||
});
|
||||
};
|
||||
|
||||
const deleteFile = () => {
|
||||
const url = `/process-models/${params.process_group_id}/${params.process_model_id}/files/${params.file_name}`;
|
||||
const httpMethod = 'DELETE';
|
||||
|
||||
const navigateToProcessModelShow = (_httpResult: any) => {
|
||||
navigate(
|
||||
`/admin/process-models/${params.process_group_id}/${params.process_model_id}`
|
||||
);
|
||||
};
|
||||
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: navigateToProcessModelShow,
|
||||
httpMethod,
|
||||
});
|
||||
};
|
||||
|
||||
const handleFileNameCancel = () => {
|
||||
setShowFileNameEditor(false);
|
||||
setNewFileName('');
|
||||
};
|
||||
|
||||
const handleFileNameSave = (event: any) => {
|
||||
event.preventDefault();
|
||||
setShowFileNameEditor(false);
|
||||
saveFile();
|
||||
};
|
||||
|
||||
const newFileNameBox = () => {
|
||||
return (
|
||||
<Modal show={showFileNameEditor} onHide={handleFileNameCancel}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Process Model File Name</Modal.Title>
|
||||
</Modal.Header>
|
||||
<form onSubmit={handleFileNameSave}>
|
||||
<label>File Name:</label>
|
||||
<span>
|
||||
<input
|
||||
name="file_name"
|
||||
type="text"
|
||||
value={newFileName}
|
||||
onChange={(e) => setNewFileName(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
.{fileExtension}
|
||||
</span>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleFileNameCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" type="submit">
|
||||
Save Changes
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
if (processModelFile || !params.file_name) {
|
||||
return (
|
||||
<main>
|
||||
<ProcessBreadcrumb
|
||||
processGroupId={params.process_group_id}
|
||||
processModelId={params.process_model_id}
|
||||
linkProcessModel
|
||||
/>
|
||||
<h2>
|
||||
Process Model File
|
||||
{processModelFile ? `: ${(processModelFile as any).name}` : ''}
|
||||
</h2>
|
||||
{newFileNameBox()}
|
||||
<Button onClick={saveFile} variant="danger">
|
||||
Save
|
||||
</Button>
|
||||
{params.file_name ? (
|
||||
<ButtonWithConfirmation
|
||||
description={`Delete file ${params.file_name}?`}
|
||||
onConfirmation={deleteFile}
|
||||
buttonLabel="Delete"
|
||||
/>
|
||||
) : null}
|
||||
<Editor
|
||||
height={600}
|
||||
width="auto"
|
||||
defaultLanguage={editorDefaultLanguage}
|
||||
defaultValue={processModelFileContents || ''}
|
||||
onChange={(value) => setProcessModelFileContents(value || '')}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
return <main />;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Table } from 'react-bootstrap';
|
||||
import PaginationForTable from '../components/PaginationForTable';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { getPageInfoFromSearchParams } from '../helpers';
|
||||
|
||||
export default function SecretList() {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [secrets, setSecrets] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const setSecretsFromResult = (result: any) => {
|
||||
setSecrets(result.results);
|
||||
setPagination(result.pagination);
|
||||
};
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/secrets?per_page=${perPage}&page=${page}`,
|
||||
successCallback: setSecretsFromResult,
|
||||
});
|
||||
}, [searchParams]);
|
||||
|
||||
const buildTable = () => {
|
||||
const rows = secrets.map((row) => {
|
||||
return (
|
||||
<tr key={(row as any).key}>
|
||||
<td>
|
||||
<Link to={`/admin/secrets/${(row as any).key}`}>
|
||||
{(row as any).key}
|
||||
</Link>
|
||||
</td>
|
||||
<td>{(row as any).value}</td>
|
||||
<td>{(row as any).username}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Secret Key</th>
|
||||
<th>Secret Value</th>
|
||||
<th>Creator</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const SecretsDisplayArea = () => {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
let displayText = null;
|
||||
if (secrets?.length > 0) {
|
||||
displayText = (
|
||||
<PaginationForTable
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
pagination={pagination as any}
|
||||
tableToDisplay={buildTable()}
|
||||
path="/admin/secrets"
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
displayText = <p>No Secrets to Display</p>;
|
||||
}
|
||||
return displayText;
|
||||
};
|
||||
|
||||
if (pagination) {
|
||||
return (
|
||||
<>
|
||||
<Button href="/admin/secrets/new">Add a secret</Button>
|
||||
<br />
|
||||
<br />
|
||||
{SecretsDisplayArea()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Form from 'react-bootstrap/Form';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
||||
export default function SecretNew() {
|
||||
const [value, setValue] = useState('');
|
||||
const [key, setKey] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const navigateToSecret = (_result: any) => {
|
||||
navigate(`/admin/secrets/${key}`);
|
||||
};
|
||||
|
||||
const addSecret = (event: any) => {
|
||||
event.preventDefault();
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/secrets`,
|
||||
successCallback: navigateToSecret,
|
||||
httpMethod: 'POST',
|
||||
postBody: {
|
||||
key,
|
||||
value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<main style={{ padding: '1rem 0' }}>
|
||||
<h2>Add Secret</h2>
|
||||
<Form onSubmit={addSecret}>
|
||||
<Form.Group className="mb-3" controlId="formDisplayName">
|
||||
<Form.Label>Key:</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={key}
|
||||
onChange={(e) => setKey(e.target.value)}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3" controlId="formIdentifier">
|
||||
<Form.Label>Value:</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button variant="primary" type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Stack, Table } from 'react-bootstrap';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { Secret } from '../interfaces';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
|
||||
export default function SecretShow() {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
|
||||
const [secret, setSecret] = useState<Secret | null>(null);
|
||||
|
||||
const navigateToSecrets = (_result: any) => {
|
||||
navigate(`/admin/secrets`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/secrets/${params.key}`,
|
||||
successCallback: setSecret,
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
const deleteSecret = () => {
|
||||
if (secret === null) {
|
||||
return;
|
||||
}
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/secrets/${secret.key}`,
|
||||
successCallback: navigateToSecrets,
|
||||
httpMethod: 'DELETE',
|
||||
});
|
||||
};
|
||||
|
||||
if (secret) {
|
||||
const secretToUse = secret as any;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<h2>Secret Key: {secretToUse.key}</h2>
|
||||
<ButtonWithConfirmation
|
||||
description="Delete Secret?"
|
||||
onConfirmation={deleteSecret}
|
||||
buttonLabel="Delete"
|
||||
/>
|
||||
</Stack>
|
||||
<div>
|
||||
<Table striped bordered>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{params.key}</td>
|
||||
<td>{secretToUse.value}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
import { useContext, useEffect, useState } from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import Form from '@rjsf/core';
|
||||
import { Button, Stack } from 'react-bootstrap';
|
||||
|
||||
import HttpService from '../services/HttpService';
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
|
||||
export default function TaskShow() {
|
||||
const [task, setTask] = useState(null);
|
||||
const [userTasks, setUserTasks] = useState(null);
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||
|
||||
useEffect(() => {
|
||||
setErrorMessage('');
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/tasks/${params.process_instance_id}/${params.task_id}`,
|
||||
successCallback: setTask,
|
||||
failureCallback: setErrorMessage,
|
||||
});
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-instance/${params.process_instance_id}/tasks`,
|
||||
successCallback: setUserTasks,
|
||||
});
|
||||
}, [params, setErrorMessage]);
|
||||
|
||||
const processSubmitResult = (result: any) => {
|
||||
setErrorMessage('');
|
||||
if (result.ok) {
|
||||
navigate(`/tasks`);
|
||||
} else if (result.process_instance_id) {
|
||||
navigate(`/tasks/${result.process_instance_id}/${result.id}`);
|
||||
} else {
|
||||
setErrorMessage(`Received unexpected error: ${result.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = (event: any) => {
|
||||
setErrorMessage('');
|
||||
const dataToSubmit = event.formData;
|
||||
delete dataToSubmit.isManualTask;
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/tasks/${params.process_instance_id}/${params.task_id}`,
|
||||
successCallback: processSubmitResult,
|
||||
failureCallback: setErrorMessage,
|
||||
httpMethod: 'PUT',
|
||||
postBody: dataToSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
const buildTaskNavigation = () => {
|
||||
let userTasksElement;
|
||||
if (userTasks) {
|
||||
userTasksElement = (userTasks as any).map(function getUserTasksElement(
|
||||
userTask: any
|
||||
) {
|
||||
const taskUrl = `/tasks/${params.process_instance_id}/${userTask.id}`;
|
||||
if (userTask.id === params.task_id) {
|
||||
return <span>{userTask.name}</span>;
|
||||
}
|
||||
if (userTask.state === 'COMPLETED') {
|
||||
return (
|
||||
<Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}>
|
||||
{userTask.name}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
if (userTask.state === 'FUTURE') {
|
||||
return <span style={{ color: 'red' }}>{userTask.name}</span>;
|
||||
}
|
||||
if (userTask.state === 'READY') {
|
||||
return (
|
||||
<Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}>
|
||||
{userTask.name} - Current
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
}
|
||||
return (
|
||||
<Stack direction="horizontal" gap={3}>
|
||||
<Button href="/tasks">Go Back To List</Button>
|
||||
{userTasksElement}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const formElement = (taskToUse: any) => {
|
||||
let formUiSchema;
|
||||
let taskData = taskToUse.data;
|
||||
let jsonSchema = taskToUse.form_schema;
|
||||
let reactFragmentToHideSubmitButton = null;
|
||||
if (taskToUse.type === 'Manual Task') {
|
||||
taskData = {};
|
||||
jsonSchema = {
|
||||
title: 'Instructions',
|
||||
description: taskToUse.properties.instructionsForEndUser,
|
||||
type: 'object',
|
||||
required: [],
|
||||
properties: {
|
||||
isManualTask: {
|
||||
type: 'boolean',
|
||||
title: 'Is ManualTask',
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
formUiSchema = {
|
||||
isManualTask: {
|
||||
'ui:widget': 'hidden',
|
||||
},
|
||||
};
|
||||
} else if (taskToUse.form_ui_schema) {
|
||||
formUiSchema = JSON.parse(taskToUse.form_ui_schema);
|
||||
}
|
||||
|
||||
if (taskToUse.state !== 'READY') {
|
||||
formUiSchema = Object.assign(formUiSchema || {}, {
|
||||
'ui:readonly': true,
|
||||
});
|
||||
|
||||
// It doesn't seem as if Form allows for removing the default submit button
|
||||
// so passing a blank fragment or children seem to do it though
|
||||
//
|
||||
// from: https://github.com/rjsf-team/react-jsonschema-form/issues/1602
|
||||
reactFragmentToHideSubmitButton = <div />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Form
|
||||
formData={taskData}
|
||||
onSubmit={handleFormSubmit}
|
||||
schema={jsonSchema}
|
||||
uiSchema={formUiSchema}
|
||||
>
|
||||
{reactFragmentToHideSubmitButton}
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
if (task) {
|
||||
const taskToUse = task as any;
|
||||
let statusString = '';
|
||||
if (taskToUse.state !== 'READY') {
|
||||
statusString = ` ${taskToUse.state}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
{buildTaskNavigation()}
|
||||
<h3>
|
||||
Task: {taskToUse.title} ({taskToUse.process_model_display_name})
|
||||
{statusString}
|
||||
</h3>
|
||||
{formElement(taskToUse)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import { BACKEND_BASE_URL } from '../config';
|
||||
import { objectIsEmpty } from '../helpers';
|
||||
import UserService from './UserService';
|
||||
|
||||
const HttpMethods = {
|
||||
GET: 'GET',
|
||||
POST: 'POST',
|
||||
DELETE: 'DELETE',
|
||||
};
|
||||
|
||||
const getBasicHeaders = (): object => {
|
||||
if (UserService.isLoggedIn()) {
|
||||
return {
|
||||
Authorization: `Bearer ${UserService.getAuthToken()}`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
type backendCallProps = {
|
||||
path: string;
|
||||
successCallback: Function;
|
||||
failureCallback?: Function;
|
||||
httpMethod?: string;
|
||||
extraHeaders?: object;
|
||||
postBody?: any;
|
||||
};
|
||||
|
||||
class UnauthenticatedError extends Error {
|
||||
constructor(message: string) {
|
||||
super(message);
|
||||
this.name = 'UnauthenticatedError';
|
||||
}
|
||||
}
|
||||
|
||||
const makeCallToBackend = ({
|
||||
path,
|
||||
successCallback,
|
||||
failureCallback,
|
||||
httpMethod = 'GET',
|
||||
extraHeaders = {},
|
||||
postBody = {},
|
||||
}: // eslint-disable-next-line sonarjs/cognitive-complexity
|
||||
backendCallProps) => {
|
||||
const headers = getBasicHeaders();
|
||||
|
||||
if (!objectIsEmpty(extraHeaders)) {
|
||||
Object.assign(headers, extraHeaders);
|
||||
}
|
||||
|
||||
const httpArgs = {};
|
||||
|
||||
if (postBody instanceof FormData) {
|
||||
Object.assign(httpArgs, { body: postBody });
|
||||
} else if (typeof postBody === 'object') {
|
||||
if (!objectIsEmpty(postBody)) {
|
||||
Object.assign(httpArgs, { body: JSON.stringify(postBody) });
|
||||
Object.assign(headers, { 'Content-Type': 'application/json' });
|
||||
}
|
||||
} else {
|
||||
Object.assign(httpArgs, { body: postBody });
|
||||
}
|
||||
|
||||
Object.assign(httpArgs, {
|
||||
headers: new Headers(headers as any),
|
||||
method: httpMethod,
|
||||
});
|
||||
|
||||
let isSuccessful = true;
|
||||
fetch(`${BACKEND_BASE_URL}${path}`, httpArgs)
|
||||
.then((response) => {
|
||||
if (response.status === 401) {
|
||||
UserService.doLogin();
|
||||
throw new UnauthenticatedError('You must be authenticated to do this.');
|
||||
} else if (!response.ok) {
|
||||
isSuccessful = false;
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((result: any) => {
|
||||
if (isSuccessful) {
|
||||
successCallback(result);
|
||||
} else {
|
||||
let message = 'A server error occurred.';
|
||||
if (result.message) {
|
||||
message = result.message;
|
||||
}
|
||||
if (failureCallback) {
|
||||
failureCallback(message);
|
||||
} else {
|
||||
console.error(message);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.name !== 'UnauthenticatedError') {
|
||||
if (failureCallback) {
|
||||
failureCallback(error.message);
|
||||
} else {
|
||||
console.error(error.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const HttpService = {
|
||||
HttpMethods,
|
||||
makeCallToBackend,
|
||||
};
|
||||
|
||||
export default HttpService;
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import jwt from 'jwt-decode';
|
||||
import { BACKEND_BASE_URL } from '../config';
|
||||
|
||||
// NOTE: this currently stores the jwt token in local storage
|
||||
// which is considered insecure. Server set cookies seem to be considered
|
||||
// the most secure but they require both frontend and backend to be on the same
|
||||
// domain which we probably can't guarantee. We could also use cookies directly
|
||||
// but they have the same XSS issues as local storage.
|
||||
//
|
||||
// Some explanation:
|
||||
// https://dev.to/nilanth/how-to-secure-jwt-in-a-single-page-application-cko
|
||||
|
||||
const getCurrentLocation = () => {
|
||||
// to trim off any query params
|
||||
return `${window.location.origin}${window.location.pathname}`;
|
||||
};
|
||||
|
||||
const doLogin = () => {
|
||||
const url = `${BACKEND_BASE_URL}/login?redirect_url=${getCurrentLocation()}`;
|
||||
window.location.href = url;
|
||||
};
|
||||
const getIdToken = () => {
|
||||
return localStorage.getItem('jwtIdToken');
|
||||
};
|
||||
|
||||
const doLogout = () => {
|
||||
const idToken = getIdToken();
|
||||
localStorage.removeItem('jwtAccessToken');
|
||||
localStorage.removeItem('jwtIdToken');
|
||||
const redirctUrl = `${window.location.origin}/`;
|
||||
const url = `${BACKEND_BASE_URL}/logout?redirect_url=${redirctUrl}&id_token=${idToken}`;
|
||||
window.location.href = url;
|
||||
};
|
||||
|
||||
const getAuthToken = () => {
|
||||
return localStorage.getItem('jwtAccessToken');
|
||||
};
|
||||
const isLoggedIn = () => {
|
||||
return !!getAuthToken();
|
||||
};
|
||||
|
||||
const getUsername = () => {
|
||||
const idToken = getIdToken();
|
||||
if (idToken) {
|
||||
const idObject = jwt(idToken);
|
||||
return (idObject as any).preferred_username;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// FIXME: we could probably change this search to a hook
|
||||
// and then could use useSearchParams here instead
|
||||
const getAuthTokenFromParams = () => {
|
||||
const queryParams = window.location.search;
|
||||
const accessTokenMatch = queryParams.match(/.*\baccess_token=([^&]+).*/);
|
||||
const idTokenMatch = queryParams.match(/.*\bid_token=([^&]+).*/);
|
||||
if (accessTokenMatch) {
|
||||
const accessToken = accessTokenMatch[1];
|
||||
localStorage.setItem('jwtAccessToken', accessToken);
|
||||
if (idTokenMatch) {
|
||||
const idToken = idTokenMatch[1];
|
||||
localStorage.setItem('jwtIdToken', idToken);
|
||||
}
|
||||
// to remove token query param
|
||||
window.location.href = getCurrentLocation();
|
||||
} else if (!isLoggedIn()) {
|
||||
doLogin();
|
||||
}
|
||||
};
|
||||
|
||||
const hasRole = (_roles: string[]): boolean => {
|
||||
return isLoggedIn();
|
||||
};
|
||||
|
||||
const UserService = {
|
||||
doLogin,
|
||||
doLogout,
|
||||
isLoggedIn,
|
||||
getAuthToken,
|
||||
getAuthTokenFromParams,
|
||||
getUsername,
|
||||
hasRole,
|
||||
};
|
||||
|
||||
export default UserService;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2016",
|
||||
"jsx": "react-jsx",
|
||||
"module": "commonjs",
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
Loading…
Reference in New Issue