Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): resource sorting dropdowns #17321

Merged
merged 33 commits into from
Apr 13, 2020
Merged

feat(ui): resource sorting dropdowns #17321

merged 33 commits into from
Apr 13, 2020

Conversation

alexpaxton
Copy link
Contributor

@alexpaxton alexpaxton commented Mar 17, 2020

Closes #16967

Goals

  • Working towards better responsive support. Sorting via drop downs works better on smaller screens
  • Make the resource lists less noisy and more space efficient
  • Ensure the sorting mechanism is always present
  • Make it more clear what the current sort is

Changes

  • Replace sortable table headers with sort dropdowns in resource lists
    • This ensures the sorting functionality is always present
    • Is more clear that a single sort can be applied at any given time
    • Ensures the filter bar doesn't get squished
  • Create a single component for sorting resources
    • The contents of each resource's sorting dropdown are in a single place
    • Hard coded the dropdown items because it was too complex to generate programmatically from the resource type
  • Standardize tabbed page headers to use a single component and styles
    • This component is also now responsive
  • Moved dashboards empty state into own component

Preview

Dashboards & Tasks:
dashboards-sort-dropdown
Screen Shot 2020-03-17 at 3 42 33 PM

Load Data Tabs:
Screen Shot 2020-04-07 at 6 01 01 PM
Screen Shot 2020-04-08 at 9 52 48 AM
Screen Shot 2020-04-08 at 9 52 54 AM

Settings:
Screen Shot 2020-04-07 at 5 37 45 PM
Screen Shot 2020-04-07 at 5 46 22 PM
Screen Shot 2020-04-07 at 5 37 34 PM

Tabbed Page Headers on small screen:
Screen Shot 2020-04-08 at 9 54 53 AM

  • CHANGELOG.md updated with a link to the PR (not the Issue)
  • Well-formatted commit messages
  • Rebased/mergeable
  • Tests pass
  • http/swagger.yml updated (if modified Go structs or API)
  • Documentation updated or issue created (provide link to issue/pr)
  • Signed CLA (if not already signed)

@alexpaxton alexpaxton requested review from a team and hoorayimhelping and removed request for a team March 18, 2020 17:52
sortDirection={sortDirection}
sortType={sortType}
onFilterChange={onFilterChange}
if (searchTerm) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This is getting gnarly enough were it might be better as its own component. DashboardEmptyState

)
}

export default TasksSortDropdown
Copy link
Contributor

Choose a reason for hiding this comment

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

This looks almost identical to the DashboardSortDropdown. I'm down to work with you on making one SortDropdown component that can take additional labels to sort by.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes! that would be excellent as we'll probs roll this out to other parts of the UI and having a generic component would be great

@alexpaxton alexpaxton requested a review from a team April 8, 2020 18:33
@alexpaxton alexpaxton merged commit 8130aa0 into master Apr 13, 2020
@alexpaxton alexpaxton deleted the feat/sorting-dropdowns branch April 13, 2020 22:38
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.

Show search at all costs
2 participants