No Code Experience

[Ben8t]

Feature description

Motivation

The existing no code editor, now outdated after more than two years without updates, remains cumbersome [despite recent fixes](#4581). It remains unintuitive and non UX friendly.

Here is a (non-exhaustive) list of current flaws:

• Hidden in the Editor. Users have to clik on “Source & Topology” in the Editor and don’t have clear hints that a low editor is available
• No onboarding. When creating a flow, the “low code” way isn’t promoted and a user have to ditch into the UI to edit core properties such as flow id or namespace. There’s no journey to save a first valid flow (flow id, namespace and at least one task).
• Too much information. When editing or creating a task, the current form is cluttered with all the available task properties. It’s hard for the user to know what’s required and what’s not.

Next Steps

0.21 - Highlights

• No code is now moved to the left. Topology is always displayed on the right.
• Tasks and nested properties are contained inside drawers. Every “parent to child” behavior should open a drawer (example: a task within a flow, a task within a flowable, a item property within an array property, etc.).
• Navigation between drawers is made through a top breadcrumb.
• Only required properties are shown by default. Other properties are folded under a "Advanced configuration" collapsible.
• [TBD] When selecting a task type: show core plugins at the top OR split plugin into categories OR sort plugins by popularity. Make the sort behavior customizable.
• Add "groupProperties" for every task property #6534

Figma Design

https://www.figma.com/design/ew0uXk0NRXJ2NBBJTNe2n1/01_UI?node-id=5038-53766&t=kmdYYEvUxUFrxssi-1

---

0.XX - Follow Up

• Change the “Editor” name by “Edit” #6533

• Add No Code onboarding #6558

---

Miscellaneous:

• NamespaceFiles drawer stay where it is. We could reevaluate position later.

[johnkm516]

Completely agree with this. A lot of people on my project team have a difficult time figuring out how to use the product the first time as the low code way is not presented as the default way of implementing flows.

Another thing to add is the UI for the low code editor constantly suffers from issues where the UI does not match the actual task properties properly, as task properties are constantly being updated / deprecated. For example :

1. Properties that are deprecated should not be in the low code editor, but in many tasks still exist in the UI, which causes flow errors if the user selects / inputs them
2. UI does not match the schema properly, for example currently (0.20.6) the flow outputs in the low code editor is a string input when it should be an object with id, type, value.
3. Properties are not properly reflected in the low code editor, for example, currently (0.20.6) transmitFailed and wait in the subflow task is not properly reflected in the low code editor, despite these properties being set to true in the YAML it's unchecked in the low code editor.

I've reported many of these issues in the past but it might be fixed in one patch and then broken again in the next, as every time a property is changed the frontend also has to be updated.

I haven't looked into the source code at all and I know this could be a huge change, but perhaps a more coupled, dynamic way for the low code editor UI implementation could be a solution? For example, when a task's schema is updated on the backend, rather than the frontend manually having to update the property, you could read the task's schema to code-generate the necessary low code editor UI automatically, and add this to the CICD pipeline so the frontend UI is always in alignment with the backend task schema, and the backend task schema is always the "single source of truth". I don't know about the feasibility of this, but it's just a suggestion. I don't know if there is a reliable way of reading the Java annotations and getting the task schema, but if necessary you could always just parse the file string to do it.

[Ben8t]

Definitely @johnkm516 thanks for this comment !

• On 1. we have this open and pretty related indeed: Hide deprecated features by default #4905
• On 2. and 3. and general frontend/backend I can't agree more with what you wrote: @MilosPaunovic could you evaluate if it's something more backend or frontend pls? This seems the good opportunity to make this whole thing more stable.

[Ben8t]

List of missing things and issues after first development iteration:

•  Styling needs to be amended to match the brand-new design from Figma (currently multiple fields come from the old form)
•  Add missing fields for Concurrency
•  Add options to remove items (Tasks, Triggers) from the No Code section
•  Switching from the Add Task/Trigger section to editing the Task/Trigger section is not making the necessary change
• Remove the old options on the top right of the panel under the context menu
•  Saving a task or trigger is not working
•  There are still drawers opening on the right (for example: log message should open a column in the middle to keep topology visible but it instead opens a drawer from the right side as it's used to in the past)
•  Remove edit/delete on topology
•  There is a green button on Variables section but all other buttons are purple. The variable button doesn't work
•  The task documentation didn't shows up when entering a task form.
• The icons are too small
• Add "Advanced Configuration" collapse for non-required task properties
• When user saves a task get him back to the parent task + add a confirmation pop up on save
• YAML Editor should be the default one
• Change the button switcher to the no code editor to a switch type
• Design for input fields should be the same as the every next level property
• Replace plugin default component from regular input field to editor type input with syntax highlighting

Additional feedback from Nicolas:

• The no-code mode: it should only be no-code with topology. If I want to view the source, I select the source code mode.
• I don't think the save button should appear when I haven't selected a task yet.
• I would like to limit the default width of the no-code layer.
• Button save task can be more larger
• Grouping of non-mandatory forms in Advanced Configuration is missing.
• There are still some stray string tags in blue.
• There's a green "Add" button that should be purple.
• The default plugin should be a section, like tasks, triggers, and errors.
• Some information is missing, for example, on form labels. I have two fields; what should I put in the first and second? Since this is no-code, it needs to be as simple as possible.
• On the form input, we still have + and - buttons that are hard to understand. I suggest having a delete button inside the field to replace the "-", and a text below saying "Add an input," like "add a label."

Question from Nico that needs a bit more opinions

We already have information about the task validation at the top-right corner next to the save button. Why we have a second info :white_tick: or ⚠️ before save task button

The validation at the bottom is for the task level, and the one on the top is for the flow level. Do we want to keep it like that is the question for product team.

[anna-geller]

Currently:

We want:

[anna-geller]

Instead of the "No Code Editor" text or "YAML Editor", we can add this switcher:

[anna-geller]

• move all General Properties to the top level
• make Retry and plugin defaults code blocks

[MilosPaunovic]

Note on the No Code/YAML switcher, we've decided to merge this one and re-iterate if necesary.

[MilosPaunovic]

Below is a sorted and merged list of all comments/feedback so far.

Done:

• Saving a task or trigger is not working
• Remove the old options on the top right of the panel under the context menu
• move all General Properties to the top level
• make Retry and plugin defaults code blocks
• The icons are too small
• YAML Editor should be the default one
• Change the button switcher to the no code editor to a switch type
• Replace plugin default component from regular input field to editor type input with syntax highlighting
• I don't think the save button should appear when I haven't selected a task yet.
•  There is a green button on Variables section but all other buttons are purple. The variable button doesn't work
• There's a green "Add" button that should be purple.
• Some information is missing, for example, on form labels. I have two fields; what should I put in the first and second? Since this is no-code, it needs to be as simple as possible. Note from Milos - Added placeholders to all new fields (the ones not redesigned yet are missing it).
• Rework all the field which have small +/- signs to the new design
• When user saves a task get him back to the parent task + add a confirmation pop up on save
• Add options to remove items (Tasks, Triggers) from the No Code section
• https://github.com/kestra-io/kestra-ee/issues/2737
• There are still some stray string tags in blue.
• Button save task can be more larger
• On the form input, we still have + and - buttons that are hard to understand. I suggest having a delete button inside the field to replace the "-", and a text below saying "Add an input," like "add a label."
• Design for input fields should be the same as the every next level property
• YAML editor should open by default, not the no-code one #6941
• Remove "topology only-view" inside editor
• Add missing fields for Concurrency
• I would like to limit the default width of the no-code layer. - max 33%
• Add "Advanced Configuration" collapse for non-required task properties
• There are still drawers opening on the right (for example: log message should open a column in the middle to keep topology visible but it instead opens a drawer from the right side as it's used to in the past)
  • inputs
  • array properties (task-based)

Questions needing answer before proceeding:

We already have information about the task validation at the top-right corner next to the save button. Why we have a second info :white_tick: or ⚠️ before save task button

The validation at the bottom is for the task level, and the one on the top is for the flow level. Do we want to keep it like that is the question for product team.

[MilosPaunovic]

Copying the list from the comment above just to have it a bit more visible.

Still to be done:

• Array of values is bugged and not stable - https://share.descript.com/view/ZNkyaqPoGuA + No Code - Add element missing in Array one of input #7047
• Save task button should be sticky (at the bottom)
• Styling needs to be amended to match the brand-new design from Figma (currently multiple fields come from the old form)
• Retry block is not fixed - No Code - Retry form is not present at flow level #7031
•  Switching from the Add Task/Trigger section to editing the Task/Trigger section is not making the necessary change
• Trigger conditions are not showing up when typing them in the low-code form #2311
• The default plugin should be a section, like tasks, triggers, and errors.
• The task documentation didn't shows up when entering a task form.
• Inputs are not working properly - https://share.descript.com/view/WTAmbd05RDT

[Ben8t]

@MilosPaunovic closing this one in favor of #7050. Also one issue will be created per issue raised during QA (linked into the later)