chore(console): change icon of past steps to checkbox

[doncicuto]

As a developer/admin I want to see at which step in the process of creating a new application I am.

Here's a screenshot

And a video:

output.mp4

Acceptance Criteria

• Steps I have done have a checkbox as an icon (see below)
• Lines between past and and/or current step are shown in the keycolor and 3px thick (see below)
• The icons/numbers are centered (currently it's leaning approx. 2px to bottom and 1px to the right)

Closes #3908

Some notes:

Material UI Stepper has some limitations. I've had to override the edit icon (pencil) with the check icon because all the steps are editable so the done icon is never set (angular/components#8997 (comment)). In this proposal the pencil icon is not used, but in a whole I think that the PR meet the acceptance criteria.

Definition of Ready

Edit tasklist title

Beta Give feedback Tasklist Definition of Ready, more options

• Rename
• Copy markdown
• Delete tasklist

Delete tasklist

Delete tasklist block?

Are you sure? All relationships in this tasklist will be removed.

Cancel Delete

1. I am happy with the code

   I am happy with the code
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
2. Short description of the feature/issue is added in the pr description

   Short description of the feature/issue is added in the pr description
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
3. PR is linked to the corresponding user story

   PR is linked to the corresponding user story
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
4. Acceptance criteria are met

   Acceptance criteria are met
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
5. All open todos and follow ups are defined in a new ticket and justified

   All open todos and follow ups are defined in a new ticket and justified
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
6. Deviations from the acceptance criteria and design are agreed with the PO and documented.

   Deviations from the acceptance criteria and design are agreed with the PO and documented.
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
7. No debug or dead code

   No debug or dead code
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
8. Critical parts are tested automatically

   Critical parts are tested automatically
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
9. Where possible E2E tests are implemented

   Where possible E2E tests are implemented
   Options

   • Convert to issue
   • Toggle completion
   • Rename
   • Remove
10. Documentation/examples are up-to-date

    Documentation/examples are up-to-date
    Options

    • Convert to issue
    • Toggle completion
    • Rename
    • Remove
11. All non-functional requirements are met

    All non-functional requirements are met
    Options

    • Convert to issue
    • Toggle completion
    • Rename
    • Remove
12. Functionality of the acceptance criteria is checked manually on the dev system.

    Functionality of the acceptance criteria is checked manually on the dev system.
    Options

    • Convert to issue
    • Toggle completion
    • Rename
    • Remove

Add item to Definition of Ready

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 11, 2023 9:48am

[codecov]

Codecov Report

Merging #5580 (b97fdc7) into main (991a563) will decrease coverage by 0.01%.
The diff coverage is 55.00%.

@@            Coverage Diff             @@
##             main    #5580      +/-   ##
==========================================
- Coverage   48.42%   48.41%   -0.01%     
==========================================
  Files         693      693              
  Lines       72237    72253      +16     
==========================================
+ Hits        34981    34982       +1     
- Misses      35620    35632      +12     
- Partials     1636     1639       +3     

Impacted Files	Coverage Δ
internal/command/project_application_saml_model.go	61.79% <0.00%> (+0.34%)	⬆️
internal/query/event.go	0.00% <0.00%> (ø)
internal/query/org.go	44.44% <0.00%> (-0.20%)	⬇️
...epository/eventsourcing/eventstore/auth_request.go	24.17% <31.57%> (-0.33%)	⬇️
internal/eventstore/repository/sql/crdb.go	62.01% <100.00%> (ø)
...nal/eventstore/v1/internal/repository/sql/query.go	87.19% <100.00%> (+0.07%)	⬆️
internal/query/projection/idp_login_policy_link.go	58.68% <100.00%> (+0.39%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[hifabienne]

@doncicuto Thank you for your work.
@peintnermax or @eliobischof can one of you have a look at this?

[eliobischof]

@peintnermax would you mind if I hand that over to you? You are more experienced with scss, I guess?
Thanks and sorry 🙁

[peintnermax]

sure 👍

[peintnermax]

thx @doncicuto 👍

[doncicuto]

Perfect, thanks @peintnermax as always for your review, I'll prepare the changes.

Only one comment/question about why I've set 45% 49% at console/src/app/pages/projects/apps/app-create/app-create.component.scss. Using 50% 50%, the number inside the circle it's leaning approx 2px to bottom and 1px to the right (as @juergrinaldi pointed out, maybe because o font type/size?) and using 45% 49% was a compromise measure to try to center the number in browser (Chrome, Firefox tested). What would you propose to fix that placement (CSS is not my strong point) and keep the question mark centered? Thanks in advance!

[peintnermax]

What would you propose to fix that placement (CSS is not my strong point) and keep the question mark centered? Thanks in advance!

I thinks its placed perfectly centered with 50 50 👍

[github-actions]

🎉 This PR is included in version 2.24.0-ignore-me2.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀