fix(orchestarator):Disable abort when workflow execution does not exist

[LiorSoffer]

resolve FLPATH-1080

Screencast.from.2025-02-18.13-36-48.mp4

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-orchestrator	workspaces/orchestrator/plugins/orchestrator	patch	v2.6.0

[mareklibra]

Can we use const classes = useStyles(); instead?

[LiorSoffer]

Do you mean we should take const classes = useStyles(); out of WorkflowInstancePage instead of providing it as prop?

[mareklibra]

yes, sort of:

const AbortConfirmationDialogActions = (
  props: AbortConfirmationDialogActionsProps,
) => {
const classes = useStyles();

return (<><Button>....</>)
}

[gciavarrini]

I know that the issue is exactly about disabling the "abort" button, and this PR matches the requirement. But in terms of user experience, i think it isn't clear why the abort is unavailable. I mean, this can be confusing for the user.
Can we consider showing a different popup when the workflow can't be aborted? or to give some info to help the user?

[gabriel-farache]

i think it isn't clear why the abort is unavailable

@gciavarrini I agree with you that having the button disappears is a bit unexpected but I think it's obvious that the disappearance is caused by the abortion of the workflow so it cannot be aborted anymore

My personal preference would have been to grey-out the button so the layer does not change, the button is still there but it is not actionable anymore. But I am no UX designer :)

Can we consider showing a different popup when the workflow can't be aborted?

Having a clickable button then upon the action showing a pop-up saying "No you can't do that, the workflow is not running" is a little not-nice to me: I hate pop-up as they are interrupting the browsing flow
Having a tool tip on the disabled/greyed-out button stating that would be a good idea though

[LiorSoffer]

There are two "Abort" buttons:
-The first one opens the "Are you sure?" confirmation dialog.
-The second one (red button) actually aborts the instance.

When an instance isn't abortable:
The first "Abort" button is removed from the screen.
If the confirmation dialog is already open, the red "Abort" button becomes disabled.

In the video, the red "Abort" button becomes disabled because the process completes before the user clicks the button.
This is visible under "Results," where the status changes from "Running" to "Completed" (in red).
What do you think should be the behavior in this case? @ShiranHi

[ShiranHi]

Thank you, I have some comments:

Two small comments:

1. Modal UI (design):

• Title should be "Abort workflow run"
• The text on the modal should not be bold but medium
• It seems the red color is not the right shade
• We should add padding below the buttons

2. When users click "Abort" on the modal we should close it

[LiorSoffer]

@ShiranHi Thank you for the comments.
In this case the user didn't click abort on the modal :) This video demonstrates a case where the user opens the modal and is contemplating whether to abort the instance or not. Meanwhile, the run completes, causing the abort button to become disabled.

[ShiranHi]

@LiorSoffer go it!
In this case, I think we need to inform users on the modal what happened, like here.

[LiorSoffer]

@ShiranHi So, the title has been changed, the text is bigger, padding has been added, and the information now appears when the instance isn't abortable.

The button is in theme.palette.error.main color, but on hover, it changes to theme.palette.error.dark color, which is closer to the design. I noticed that in other parts of the plugin, we also use the main shade. What do you think?

[ShiranHi]

@ShiranHi So, the title has been changed, the text is bigger, padding has been added, and the information now appears when the instance isn't abortable.

Thank you, could you please add a screenshot/screen recording of it?

[LiorSoffer]

@ShiranHi updated

[ShiranHi]

Thank you @LiorSoffer

We need to make two design adjustments:

1. The padding between the title and the text appears too large
2. The red icon and the red button should use a different shade of red

[LiorSoffer]

@mareklibra Am I allowed to change these? theme.palette.error.main theme.palette.error.dark

[mareklibra]

Am I allowed to change these?

Of course you are. Just be prepared for more reviewers and opinions.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[LiorSoffer]

@shiran I fixed the colors and padding plus aligned the icon with the text and action buttons

[ShiranHi]

@shiran I fixed the colors and padding plus aligned the icon with the text and action buttons

Thank you! Could you please add a screenshot so I can see it?

[LiorSoffer]

@ShiranHi the video is already updated :)

[ShiranHi]

@ShiranHi the video is already updated :)

Thank you! Looks good