Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

747 - Users should be able to click on the full field of a dropdown-type filter to open up the dropdown #903

Merged
merged 6 commits into from
Jul 20, 2022
Merged

747 - Users should be able to click on the full field of a dropdown-type filter to open up the dropdown #903

merged 6 commits into from
Jul 20, 2022

Conversation

chriscalhoun1974
Copy link
Contributor

@chriscalhoun1974 chriscalhoun1974 commented Jul 19, 2022 •
edited
Loading

Purpose

Users should be able to click on the full field of a dropdown-type filter to open up the dropdown

Changes

  • Updated all of the Datastore Connections filters to use the MultiSelectDropdown and SelectDropdown components. As a result, a given user can click anywhere within a filter container to open the dropdown.

Checklist

  • Update CHANGELOG.md file
    • Merge in main so the most recent CHANGELOG.md file is being appended to
    • Add description within the Unreleased section in an appropriate category. Add a new category from the list at the top of the file if the needed one isn't already there.
    • Add a link to this PR at the end of the description with the PR number as the text. example: #1
  • Applicable documentation updated (guides, quickstart, postman collections, tutorial, fidesdemo, database diagram.
  • If docs updated (select one):
    • documentation complete, or draft/outline provided (tag docs-team to complete/review on this branch)
    • documentation issue created (tag docs-team to complete issue separately)
  • Good unit test/integration test coverage
  • This PR contains a DB migration. If checked, the reviewer should confirm with the author that the down_revision correctly references the previous migration before merging
  • The Run Unsafe PR Checks label has been applied, and checks have passed, if this PR touches any external services

Ticket

Fixes #747

Screen Shot 2022-07-19 at 10 35 12 PM

@chriscalhoun1974 chriscalhoun1974 marked this pull request as ready for review July 20, 2022 02:42
TheAndrewJackson
TheAndrewJackson reviewed Jul 20, 2022
View reviewed changes
Copy link
Contributor

@TheAndrewJackson TheAndrewJackson left a comment

Choose a reason for hiding this comment

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

@chriscalhoun1974 Everything looks great! I have one question regarding the width of the dropdowns and the searchbar.

Before this update each field in the filter bar took up the same amount of space.
Screen Shot 2022-07-20 at 10 18 03

Now the dropdowns only take up enough space to display the text within them and the seachbar fills up the remaining space.
Screen Shot 2022-07-20 at 10 19 30

Is this the intended behavior? It makes sense to me but it can result in some really wide search bars. Especially on big screens.

If this is the intended behavior then it's ready to ship :shipit:

clients/admin-ui/src/features/datastore-connections/filters/ConnectionTypeFilter.tsx Show resolved Hide resolved
@chriscalhoun1974
Copy link
Contributor Author

@chriscalhoun1974 Everything looks great! I have one question regarding the width of the dropdowns and the searchbar.

Before this update each field in the filter bar took up the same amount of space. Screen Shot 2022-07-20 at 10 18 03

Now the dropdowns only take up enough space to display the text within them and the seachbar fills up the remaining space. Screen Shot 2022-07-20 at 10 19 30

Is this the intended behavior? It makes sense to me but it can result in some really wide search bars. Especially on big screens.

If this is the intended behavior then it's ready to ship :shipit:

@chriscalhoun1974
Copy link
Contributor Author

@TheAndrewJackson Great question! I can make it take a 1/3 of the screen perhaps. Let me look back at the original Figma design and consult with Simon on the expected responsive behavior. Thanks for the feedback.

@TheAndrewJackson
Copy link
Contributor

@chriscalhoun1974 As per our conversation at standup I'm going to merge this in. We can address the searchbar in a future PR if it needs to be updated.

@TheAndrewJackson TheAndrewJackson self-requested a review July 20, 2022 15:33
@TheAndrewJackson TheAndrewJackson merged commit 3ee1eca into ethyca:main Jul 20, 2022
sanders41 pushed a commit that referenced this pull request Sep 22, 2022
@chriscalhoun1974
747 - Users should be able to click on the full field of a dropdown-t…
e4d8543 
…ype filter to open up the dropdown (#903)

* 747 - Users should be able to click on the full field of a dropdown-type filter to open up the dropdown

* Disabled eslint import/extensions rule for certain files with an alias path in the import statement

* Updated CHANGELOG.md file

* Resolved jest unit tests from failing

* Removed eslint-disable import/extensions declarations
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@TheAndrewJackson TheAndrewJackson TheAndrewJackson approved these changes

Assignees

@TheAndrewJackson TheAndrewJackson

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Users should be able to click on the full field of a dropdown-type filter to open up the dropdown
2 participants
@chriscalhoun1974 @TheAndrewJackson