kestra-io/kestra

[UI] Add arrow description in conditional branching on the `Switch` task

Open

#2072 opened on Sep 9, 2023

View on GitHub
 (40 comments) (0 reactions) (1 assignee)Java (26,854 stars) (2,579 forks)batch import
area/frontendgood first issuekind/highlight

Description

Feature description

Consider the following workflow:

id: switch
namespace: dev

inputs:
  - name: language
    type: STRING
    defaults: English

tasks:

  - id: render-language
    type: io.kestra.core.tasks.flows.Switch
    value: "{{ inputs.language }}"
    cases:
      French:
        - id: french
          type: io.kestra.core.tasks.debugs.Return
          format: "The input is {{ inputs.language }}"
      German:
        - id: german
          type: io.kestra.core.tasks.debugs.Return
          format: "The input is {{ inputs.language }}"
    defaults:
      - id: english
        type: io.kestra.core.tasks.debugs.Return
        format: "The input is {{ inputs.language }}"

It would be user-friendly if the cases can be added next to the arrows as follows:

image

Contributor guide

Tech stack
vuejavascripttypescriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic Vue.js knowledgeKestra UI component structureGraph visualization concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the UI component responsible for rendering the Switch task workflow, likely in the frontend directory. Look for how arrows are currently displayed and the data structure for cases. Review the discussion in the comments for any proposed implementation details. Consult the maintainers for clarification on the expected design if needed.