NO-ISSUE: Make examples better reflect their domain and contain more focused code

tiagobento commented 2 weeks ago

In this PR I'm improving almost all examples to have a more descriptive README and package name. I also split the huge webapp example to make our builds faster, separating the serverless-workflow-editor-on-webapp example be built as part of partition1.txt.

In this PR:

Split examples/webapp into several different examples, to make our builds faster and to have the examples have less boilerplate code, allowing users to focus on the content that matters for each individual component usage inside webapps:
- examples/bpmn-editor-classic-on-webapp
- examples/dmn-editor-classic-on-webapp
- examples/dmn-editor-on-webapp
- examples/dmn-editor-standalone-on-webapp
- examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp
- examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp
- examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp
- examples/serverless-workflow-editor-standalone-on-webapp
Renamed examples/commit-message-validation-service to examples/kie-sandbox-commit-message-validation-service
Renamed examples/jbpm-compact-architecture-example to examples/process-compact-architecture
Renamed example/drools-process-usertasks-quarkus-example to examples/process-user-tasks-subsystem
Prefixed examples/ping-pong* and examples/todo-list* packages with micro-frontends-multiplying-architecture, to make it clear that those examples are related to Multiplying Architecture. The "Micro-frontends" part is to not have them be confused with Compact Architecture, which is a completely unrelated term used to signify the embedding of Data-Index, Jobs Service, and Data-Audit on Process applications.
Revisited the READMEs of all examples
Added a very short README to the packages and examples folder.

I know this is quite a lot, but there's not much difference in content. I recommend checking out this branch and looking at each of the changed examples individually, they're all quite small and simple, so shouldn't be a big effort to do it.

tiagobento commented 2 weeks ago

@jomarko Sorry not sure if you already began reviewing it, but there's a new commit from @cimbalek here, fixing running the containers of process-compact-architecture example on Ubuntu.

jomarko commented 1 week ago

Verification checklst

[x] @kie-tools-examples/bpmn-editor-classic-on-webapp
[x] @kie-tools-examples/dmn-editor-classic-on-webapp
[x] @kie-tools-examples/dmn-editor-on-webapp
[x] @kie-tools-examples/dmn-editor-standalone-on-webapp
[x] @kie-tools-examples/kie-sandbox-commit-message-validation-service
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp
[x] kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view
[x] @kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp
[x] kie-tools-examples-micro-frontends-multuplying-architecture-todo-list-view-vscode-extension
[x] @kie-tools-examples/process-compact-architecture
[x] @kie-tools-examples/process-user-tasks-subsystem
[x] @kie-tools-examples/serverless-workflow-editor-standalone-on-webapp
[x] @kie-tools-examples/sonataflow-greeting
[x] @kie-tools-examples/uniforms-patternfly

jomarko commented 1 week ago

@kie-tools-examples/bpmn-editor-classic-on-webapp feedback

All buttons are bound to DMN instead of BPMN

New empty file tries to create DMN file
Open file tries to open DMN files
Open Sample same as ^
Download downloaded file has dmn extension, not bpmn

opening the homescreen http://localhost:7771/ works

Code

Sidebar.tsx contains unused import NavItem Readme start command should contain filter -F @kie-tools-examples/bpmn-editor-classic-on-webapp

jomarko commented 1 week ago

@kie-tools-examples/dmn-editor-classic-on-webapp feedback

🟢 passed

Code

Sidebar.tsx contains unused import NavItem Readme start command should contain filter -F @kie-tools-examples/dmn-editor-classic-on-webapp

jomarko commented 1 week ago

@kie-tools-examples/dmn-editor-on-webapp feedback

🟢 passed

Code

Sidebar.tsx contains unused import NavItem Readme start command should contain filter -F @kie-tools-examples/dmn-editor-on-webapp

jomarko commented 1 week ago

@kie-tools-examples/dmn-editor-standalone-on-webapp feedback

7778 should be used instead of 9102 in the text below

Open http://localhost:9102 to see the list of files bundled by Webpack, then choose an example:

- State Control: http://localhost:9102/state_control.html
- Read Only: http://localhost:9102/read_only.html
- With Included Models: http://localhost:9102/with_included_models.html

next in the code we have this:

    resources: new Map<string, DmnEditorStandaloneResource>([
      ["path1/can-drive-types.dmn", { contentType: "text", content: loadFile("can-drive-types.dmn") }],
      ["path2/loan-pre-qualification.dmn", { contentType: "text", content: loadFile("loan-pre-qualification.dmn") }],
    ]),

however in real UI only can-drive-types is available. | Screenshot 2024-11-13 153452

jomarko commented 1 week ago

@kie-tools-examples/kie-sandbox-commit-message-validation-service

Readme build command is missing => no manual check done, struggled to build as KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/kie-sandbox-commit-message-validation-service^... build:dev Readme start command should contain the filter

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor

Readme build and start command is missing. IIUC, this is actually not an example in the sense of being runnable ? Probably we should mention it in a readme.

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension

Start command misses filter.

No manual check done. Do you have a link for a public base64png file on github that I could try for verification?

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp

Start command dos not contain filter -F part

jomarko commented 1 week ago

kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension

is not consistent in naming:

kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension
vs @kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension,

this is also incompatible with the build command [1] KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension^... build:dev

Probably also build:prod command should contain -F part.

🔴 build command [1] failed

│ > copyfiles -u 1 "src/**/*.{sass,scss,css}" dist/
└─ Running...
packages/vscode-extension build:dev$ rimraf dist && tsc -p tsconfig.json
│ src/workspace/VsCodeResourceContentServiceForWorkspaces.ts(33,27): error TS2307: Cannot find module 'isomorphic-git' or its corresponding type declarations.
│ src/workspace/VsCodeResourceContentServiceForWorkspaces.ts(81,10): error TS7006: Parameter 'p' implicitly has an 'any' type.
└─ Failed in 9.5s at /home/jomarko/kie-tools/packages/vscode-extension
/home/jomarko/kie-tools/packages/vscode-extension:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @kie-tools-core/vscode-extension@0.0.0 build:dev: `rimraf dist && tsc -p tsconfig.json`
Exit status 2

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view

No manual checks done, README looks fine.

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular

No manual checks done. From README it is not clear to me how to start the example.

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react

same as above ^

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp

Start command in readme could include -F part.

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view

No checks done, no comments to code.

jomarko commented 1 week ago

@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp

Readme start command could include -F part probably

jomarko commented 1 week ago

kie-tools-examples-micro-frontends-multuplying-architecture-todo-list-view-vscode-extension

Similar issues as base64png vscode extension package

│ [run-script-if] Finished 'pnpm build'
└─ Done in 9s
packages/editor build:dev$ rimraf dist && pnpm copy:css && tsc -p tsconfig.json
│ > @kie-tools-core/editor@0.0.0 copy:css /home/jomarko/kie-tools/packages/editor
│ > copyfiles -u 1 "src/**/*.{sass,scss,css}" dist/
└─ Done in 9.2s
packages/vscode-extension build:dev$ rimraf dist && tsc -p tsconfig.json
│ src/workspace/VsCodeResourceContentServiceForWorkspaces.ts(33,27): error TS2307: Cannot find module 'isomorphic-git' or its corresponding type declarations.
│ src/workspace/VsCodeResourceContentServiceForWorkspaces.ts(81,10): error TS7006: Parameter 'p' implicitly has an 'any' type.
└─ Failed in 6.1s at /home/jomarko/kie-tools/packages/vscode-extension
/home/jomarko/kie-tools/packages/vscode-extension:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @kie-tools-core/vscode-extension@0.0.0 build:dev: `rimraf dist && tsc -p tsconfig.json`
Exit status 2

jomarko commented 1 week ago

[edited]

@kie-tools-examples/process-compact-architecture

🟠 I am not able to use startContainers script and follow readme steps, until I build the example with KOGITO_RUNTIME_version as 999-SNAPSHOT, otherwise user will get the error below when starting a process instance.


nator.beforeCompletion - failed for SynchronizationImple< 0:ffffac120005:a927:6735b50d:190, org.hibernate.resource.transaction.backend.jta.internal.synchronization.RegisteredSynchronization@1fcaee53 >: org.hibernate.exception.SQLGrammarException: could not execute statement [ERROR: column "recipient" is of type jsonb but expression is of type bytea
process-compact-architecture-service  |   Hint: You will need to rewrite or cast the expression.
process-compact-architecture-service  |   Position: 221] [insert into job_details (correlation_id,created,execution_counter,execution_timeout,execution_timeout_unit,fire_time,last_update,priority,recipient,retries,scheduled_id,status,trigger,id) values (?,?,?,?,?,?,?,?,?,?,?,?,?,?)]
process-compact-architecture-service  |         at org.hibernate.exception.internal.SQLStateConversionDelegate.convert(SQLStateConversionDelegate.java:91)
process-compact-architecture-service  |         at org.hibernate.exception.internal.StandardSQLExceptionConverter.convert(StandardSQLExceptionConverter.java:58)
process-compact-architecture-service  |         at org.hibernate.engine.jdbc.spi.SqlExceptionHelper.convert(SqlExceptionHelper.java:108)
process-compact-architecture-service  |         at org.hibernate.engine.jdbc.internal.ResultSetReturnImpl.executeUpdate(ResultSetReturnImpl.java:197)
process-compact-architecture-service  |         at org.hibernate.engine.jdbc.mutation.internal.AbstractMutationExecutor.performNonBatchedMutation(AbstractMutationExecutor.java:108)
process-compact-architecture-service  |         at org.hibernate.engine.jdbc.mutation.internal.MutationExecutorSingleNonBatched.performNonBatchedOperations(MutationExecutorSingleNonBatched.java:40)
process-compact-architecture-service  |         at org.hibernate.engine.jdbc.mutation.internal.AbstractMutationExecutor.execute(AbstractMutationExecutor.java:52)
process-compact-architecture-service  |         at org.hibernate.persister.entity.mutation.InsertCoordinator.doStaticInserts(InsertCoordinator.java:175)
process-compact-architecture-service  |         at org.hibernate.persister.entity.mutation.InsertCoordinator.coordinateInsert(InsertCoordinator.java:113)
process-compact-architecture-service  |         at org.hibernate.persister.entity.AbstractEntityPersister.insert(AbstractEntityPersister.java:2863)
process-compact-architecture-service  |         at org.hibernate.action.internal.EntityInsertAction.execute(EntityInsertAction.java:104)
process-compact-architecture-service  |         at org.hibernate.engine.spi.ActionQueue.executeActions(ActionQueue.java:632)
process-compact-architecture-service  |         at org.hibernate.engine.spi.ActionQueue.executeActions(ActionQueue.java:499)
process-compact-architecture-service  |         at org.hibernate.event.internal.AbstractFlushingEventListener.performExecutions(AbstractFlushingEventListener.java:363)
process-compact-architecture-service  |         at org.hibernate.event.internal.DefaultFlushEventListener.onFlush(DefaultFlushEventListener.java:41)```

We should mention `docker compose down` as prerequisite, I think.

**mvn clean package quarkus:dev** seems to work fine 🟢

jomarko commented 1 week ago

@kie-tools-examples/process-user-tasks-subsystem

🔴 there is a compilation error

[INFO] -------------------------------------------------------------
[ERROR] COMPILATION ERROR : 
[INFO] -------------------------------------------------------------
[ERROR] /home/jomarko/kie-tools/examples/process-user-tasks-subsystem/src/test/java/org/acme/travels/quarkus/ApprovalsProcessTest.java:[28,48] package org.jbpm.process.instance.impl.humantask does not exist
[ERROR] /home/jomarko/kie-tools/examples/process-user-tasks-subsystem/src/test/java/org/acme/travels/quarkus/ApprovalsProcessTest.java:[29,55] package org.jbpm.process.instance.impl.humantask.phases does not exist
[ERROR] /home/jomarko/kie-tools/examples/process-user-tasks-subsystem/src/test/java/org/acme/travels/quarkus/ApprovalsProcessTest.java:[30,47] package org.jbpm.process.instance.impl.workitem does not exist

jomarko commented 1 week ago

@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp

Manual check passed, start command could maybe include -F part.

jomarko commented 1 week ago

@kie-tools-examples/sonataflow-greeting

No comments

jomarko commented 1 week ago

@kie-tools-examples/uniforms-patternfly

Readme could contain at least information how to build and start the example.

tiagobento commented 5 days ago

General comments:

All commands in READMEs assume you're in the example's folder.
Bootstrapping the repo with pnpm bootstrap is always necessary.

@kie-tools-examples/dmn-editor-classic-on-webapp

✅ Fixed

@kie-tools-examples/dmn-editor-on-webapp

✅ Fixed

@kie-tools-examples/dmn-editor-on-webapp

✅ Fixed

@kie-tools-examples/dmn-editor-standalone-on-webapp

🟡 Updated the port. Will investigate the failures.

@kie-tools-examples/kie-sandbox-commit-message-validation-service

✅ There are no build instructions necessary here.. Simply "pnpm start" suffices.

@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor

✅ True. This is not runnable. Mentioned in the README.

@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension

✅ There are some in this repo! :) Or you can use the Base64 Editor VS Code Extension to create some based on PNG files.

@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp

✅ Nothing done.

kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension

✅ Not having the scope (@kie-tools) part in the name of the package is a requirement from the VS Code Marketplace. Fixed the build command. Build failed for you because you didn't bootstrap first, I guess?

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view

✅ OK

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular

✅ This is not runnable. I made it clear on the README now.

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react

✅ Same as above.

@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp

✅ OK

@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view

🟡 Not sure I understand your feedback here...

@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp

✅ OK

kie-tools-examples-micro-frontends-multuplying-architecture-todo-list-view-vscode-extension

✅ Please see the other VS Code extension example's comment from my end as they apply here too.

@kie-tools-examples/process-compact-architecture

✅ True... this is expected, and we need to upgrade the Kogito version of the repo. I'll do it soon in a separate PR.

@kie-tools-examples/process-user-tasks-subsystem

🟡 Weird... Will investigate. Thanks!

@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp

✅ OK

@kie-tools-examples/sonataflow-greeting

✅ Out of scope of this PR.

@kie-tools-examples/uniforms-patternfly

✅ Out of scope of this PR.

apache / incubator-kie-tools