Change the Debug Outputs section to be resizable

[anna-geller]

Feature description

Some expressions or outputs are large. It would be great to make this Debug Outputs section as a resizable component:

Extra info for first-time contributors

You can reproduce it by adding this flow, running it and navigating to Outputs:

id: hello-world
namespace: dev
description: Hello World
inputs:
  - id: user
    type: STRING
    defaults: Rick Astley
tasks:
  - id: first_task
    type: io.kestra.plugin.core.debug.Return
    format: thrilled
  - id: second_task
    type: io.kestra.plugin.scripts.shell.Commands
    commands:
      - sleep 0.42
      - echo '::{"outputs":{"returned_data":"mydata"}}::'
  - id: hello_world
    type: io.kestra.plugin.core.log.Log
    message: |
      Welcome to Kestra, {{ inputs.user }}! 
      We are {{ outputs.first_task.value}} to have You here!

[osmaneTKT]

Hello @anna-geller some time ago I came across this project and I would like to contribute to it as part of a course requirement for my computer science degree.

[MilosPaunovic]

That's awesome, go for it @osmaneTKT! 🚀

[satvik2131]

can i use vue-resizable
https://www.npmjs.com/package/vue-resizable
or if we have any better suggestions , I would like to implement .

[anna-geller]

I don't know how it's technically implemented, but you could try using the same component that we use within the editor, see https://share.descript.com/view/p5vqgmD53pw

[osmaneTKT]

@satvik2131 I'm working on it.

[osmaneTKT]

Hello @anna-geller , I think I managed to solve the problem.

[MilosPaunovic]

@osmaneTKT You've opened two PRs about this, could you check which one is the right one and close the other one?

[osmaneTKT]

Sorry, I hadn't noticed.

[osmaneTKT]

hey @MilosPaunovic , do i need to do anything else ?

[MilosPaunovic]

Not sure, would need to review the PR first, and that's probably going to happen next week. Will let you know, it's on a TODO list.

[osmaneTKT]

thanks

[MilosPaunovic]

Thanks for the efforts @osmaneTKT, but the solution was not what we were aiming for.

If someone else want to try this, check out how it's done inside kestra/ui/src/components/Tabs.vue component, and I've added a slider and placeholder method to kestra/ui/src/components/executions/outputs/Wrapper.vue file, where the change needs to be done.

[ArmandoJA]

Hello @MilosPaunovic I would like your permission to give this issue a try as part of a course activity for one of my CS classes.

[MilosPaunovic]

Absolutely, go for it @ArmandoJA, will wait for your PR! 🚀

[MilosPaunovic]

Hi @ArmandoJA,

As there hasn't been any progress or updates on this, I'll unassign you for now. However, if you do open a PR, it will be reviewed, and you'll be reassigned if no one else handles it in the meantime.

Thanks for all the efforts so far! 🍀

[Alessandra005]

Hi @MilosPaunovic, I would like to help with this issue if it's still available, can I?

[MilosPaunovic]

Certainly, go ahead @Alessandra005! 🚀

[Alessandra005]

Hey, I’ve been working on the issue, and I just submitted a PR for it. Let me know if any changes are needed, and I’ll be happy to adjust! 🚀

[MilosPaunovic]

This is already closed via #7377, as part of #7242.

Thanks for the efforts, @Alessandra005! 🚀