[DDW-435] Filtering stake pools through checkboxes - Private, Retiring and Pools without off-chain data

[topseniors]

This PR implemented Stake pools filter popover.
Jira Ticket

Todos

• Implement stake pools filter popover markup
• Show warnings when selecting retiring, private and high profit margin stake pools on delegation setup wizard dialog
• Filter stake pools list based on selected checkboxes on the filter pop up

Issues

• This should go under header when scrolled (or even collapsed when "filter" button is out of range)
• After I closed the filter popup It should go back to it's current state - here it saved that I clicked the reset filter button and didn't apply it.
• There should be no left padding for red label here
• Something is wrong here
• Is this OK to have this ranking with and without filters.
• Remove focus from this filter button
• Shift popup to the left to match design
• Is it OK to have missing parts in this list?
• Not sure that this is expected 😓
• Red text shouldn't have top margin here
• Rewards view is broken

Testing Checklist

• Slack QA thread

Test Cases

Scenario 1: Filter only private pools
Given there are private pools
And there are other pools
When I filter just to show private pools
Then only private pools are shown

Scenario 2: Filter only retiring pools
Given there are retiring pools
And there are other pools
When I filter just to show retiring pools
Then only retiring pools are shown

Scenario 3: Filter only pools without metadata
Given there are pools without metadata
And there are other pools
When I filter just to show pools without metadata
Then only pools without metadata are shown

Scenario 4: Filter private pools, retiring pools, pools without metadata
Given there are private pools, retiring pools and pools without metadata
And there are other pools
When I filter to show private pools, retiring pools and pools without metadata
Then private pools, retiring pools and pools without metadata are shown

App

• Go to Staking => Stake Pools and make sure stake pools are filtered based on the selected checkboxes of filter popover.

Screenshots

English

Japanese

Review Checklist

Basics

• PR has been assigned and has appropriate labels (feature/bug/chore, release-x.x.x)
• PR is updated to the most recent version of the target branch (and there are no conflicts)
• PR has a good description that summarizes all changes and shows some screenshots or animated GIFs of important UI changes
• CHANGELOG entry has been added to the top of the appropriate section (Features, Fixes, Chores) and is linked to the correct PR on GitHub
• Automated tests: All acceptance and unit tests are passing (yarn test)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in development build (yarn dev)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in production build (yarn package / CI builds)
• There are no flow errors or warnings (yarn flow:test)
• There are no lint errors or warnings (yarn lint)
• There are no prettier errors or warnings (yarn prettier:check)
• There are no missing translations (running yarn manage:translations produces no changes)
• Text changes are proofread and approved (Jane Wild / Amy Reeve)
• Japanese text changes are proofread and approved (Junko Oda)
• UI changes look good in all themes (Alexander Rukin)
• Storybook works and no stories are broken (yarn storybook)
• In case of dependency changes yarn.lock file is updated

Code Quality

• Important parts of the code are properly commented and documented
• Code is properly typed with flow
• React components are split-up enough to avoid unnecessary re-renderings
• Any code that only works in main process is neatly separated from components

Testing

• New feature/change is covered by acceptance tests
• New feature/change is manually tested and approved by QA team
• All existing acceptance tests are still up-to-date
• New feature/change is covered by Daedalus Testing scenario
• All existing Daedalus Testing scenarios are still up-to-date

After Review

• Merge the PR
• Delete the source branch
• Move the ticket to done column on the YouTrack board
• Update Slack QA thread by marking it with a green checkmark

[alexander-rukin]

Updated ##Issues section

[topseniors]

@alexander-rukin
All the issues were fixed except 2 items.
Actually those 2 items are not issues.

• Remove focus from this filter button => This focus is for keyboard shortcut. This was already confirmed by Nikola for a different task in the past. (It was other filter button on transactions screen)
• Red text shouldn't have top margin here => If you scroll down on the fee input field, spending password field would appear and you will notice that margin is just normal vertical margin between 2 fields. And the other margin was for top margin for warning text. So it is not additional margin.

[alexander-rukin]

• Remove focus from this filter button => This focus is for keyboard shortcut. This was already confirmed by Nikola for a different task in the past. (It was other filter button on transactions screen)

What is this keyboard shortcut? cmd+"what?"
It's OK to have focus when you TAB, but after you apply filter or close this popup we need to clear focus state
cc @nikolaglumac

[alexander-rukin]

• Red text shouldn't have top margin here => If you scroll down on the fee input field, spending password field would appear and you will notice that margin is just normal vertical margin between 2 fields. And the other margin was for top margin for warning text. So it is not additional margin.

What I see is that this margin is 40px instead of 20px...
same here (stake pools step)

plus header issue is still here for me 🤔

[topseniors]

• Remove focus from this filter button => This focus is for keyboard shortcut. This was already confirmed by Nikola for a different task in the past. (It was other filter button on transactions screen)

What is this keyboard shortcut? cmd+"what?"
It's OK to have focus when you TAB, but after you apply filter or close this popup we need to clear focus state
cc @nikolaglumac

No, @alexander-rukin I need to call you to explain this.