Skip to content

fix(orchestrator):Add status icons#613

Merged
mareklibra merged 2 commits into
redhat-developer:mainfrom
LiorSoffer:statusIcons
Apr 23, 2025
Merged

fix(orchestrator):Add status icons#613
mareklibra merged 2 commits into
redhat-developer:mainfrom
LiorSoffer:statusIcons

Conversation

@LiorSoffer
Copy link
Copy Markdown
Contributor

@LiorSoffer LiorSoffer commented Apr 7, 2025

resolve FLPATH-2253

image

@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented Apr 7, 2025

Changed Packages

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

Copy link
Copy Markdown
Member

@mareklibra mareklibra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please check WorkflowProgressNode.tsx as well and fix it in case of significant inconsistencies?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
icon = <CircularProgress size="1.15rem" />;
icon = <CircularProgress size="1.15rem" className={iconColor} />;

Maybe there is no obvious change but it will make the code coherent.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it bothers me as well thanks :)

@LiorSoffer
Copy link
Copy Markdown
Contributor Author

@ShiranHi what do you think?

@ShiranHi
Copy link
Copy Markdown

ShiranHi commented Apr 7, 2025

Thank you Lior, looks great!
I have few questions to match it to the design?

  1. Could we change the status column title to "Run status" as shown in the design?
  2. Is it possible to change the "Running" and "Aborted" icons to grey?
  3. Can the pending icon be different?
  4. Can the suspended icon be as the "Aborted" icon but in grey?

@LiorSoffer
Copy link
Copy Markdown
Contributor Author

@ShiranHi yes! , regarding the pending icon I couldn't find the exact one on https://v4.mui.com/components/material-icons/, is there something else there which is more suitable?

@ShiranHi
Copy link
Copy Markdown

ShiranHi commented Apr 10, 2025

@ShiranHi yes! , regarding the pending icon I couldn't find the exact one on https://v4.mui.com/components/material-icons/, is there something else there which is more suitable?

Can we use this one?
If not, let's use the "HourglassEmpty".

@LiorSoffer
Copy link
Copy Markdown
Contributor Author

@ShiranHi please take a look

@ShiranHi
Copy link
Copy Markdown

ShiranHi commented Apr 10, 2025

Looks great Lior, thank you so much!
I just saw the check icon is not like in the Figma file, sorry I missed that before

@LiorSoffer
Copy link
Copy Markdown
Contributor Author

@ShiranHi @mareklibra np, icon is fixed

@mareklibra
Copy link
Copy Markdown
Member

@ShiranHi , can we choose something from https://mui.com/material-ui/material-icons/ ?
We should not mix icons from other sources.

@LiorSoffer By choosing a MUI icon, following will not be relevant. But to give some hints: we should use an svg icon file committed to our project and use it instead of the recent approach.

@ShiranHi
Copy link
Copy Markdown

@ShiranHi , can we choose something from https://mui.com/material-ui/material-icons/ ? We should not mix icons from other sources.

Yes, we can use the HourglassEmpty icon

Signed-off-by: Lior Soffer <liorsoffer1@gmail.com>
title = 'Completed';
break;
case ProcessInstanceStatusDTO.Suspended:
icon = <b className={iconColor}>--</b>;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The last one, I promise: We use 3 dashes on other places (---). I don't have any preference what to choose but we should align.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use 3 dashes for unavailable value , I think suspended is a different scenario than unavailable
@ShiranHi @mareklibra what do you think?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would align it.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use the WarningAmberOutlined icon for Unavailable status as in the design.

Copy link
Copy Markdown
Contributor Author

@LiorSoffer LiorSoffer Apr 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry, I was unclear. there's not an Unavailable status,
There are cases in the app when we are missing values for example (last run of workflow which was never executed, image added) in these cases we use 3 dashes.
image

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, got it. Thanks for the clarification!
We use just two dashes (--) to indicate this state.

@sonarqubecloud
Copy link
Copy Markdown

@mareklibra mareklibra merged commit 4842b37 into redhat-developer:main Apr 23, 2025
9 checks passed
@LiorSoffer LiorSoffer deleted the statusIcons branch August 28, 2025 12:14
elai-shalev pushed a commit to elai-shalev/rhdh-plugins that referenced this pull request Jan 21, 2026
Signed-off-by: Lior Soffer <liorsoffer1@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants