Skip to content

UX Enhancement: Add button to clear search query from DAG search#11583

Merged
kaxil merged 4 commits intoapache:masterfrom
astronomer:clear_search_form
Oct 16, 2020
Merged

UX Enhancement: Add button to clear search query from DAG search#11583
kaxil merged 4 commits intoapache:masterfrom
astronomer:clear_search_form

Conversation

@ryanahamilton
Copy link
Contributor

Currently there is no easy way to reset the DAGs view (home) after performing a search—leaving users stranded. This update adds a button (X) that only displays when a search query is present. This button removes the search param from the page and refreshes the page (while retaining other url params).

Screen Recording 2020-10-16 at 11 09 53 AM


^ Add meaningful description above

Read the Pull Request Guidelines for more information.
In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.

@boring-cyborg boring-cyborg bot added the area:webserver Webserver related Issues label Oct 16, 2020

$('#search_form').on('reset', function() {
var query = new URLSearchParams(window.location.search);
query.delete('search');
Copy link
Member

Choose a reason for hiding this comment

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

Should we remove page no also? I think the user should always be redirected to the first page.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah, yes, good call!

Copy link
Member

Choose a reason for hiding this comment

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

Oh yes, good catch.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Instead of deleting the page param, I had to set it to 0. Because the page value is maintained in the session cookie, that value was re-added to to the URL after deletion. By setting to 0, that will update the cookie value as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I take that back… I was confusing the page param with how the search/tags/status params were being handled. Updated to delete the page param completely.

@ryanahamilton
Copy link
Contributor Author

I've got a follow-up to this PR in the works that will apply this same pattern to the tag filter as well:
Image 2020-10-16 at 4 38 20 PM

@kaxil kaxil requested a review from mik-laj October 16, 2020 20:44
@kaxil kaxil merged commit 4582c80 into apache:master Oct 16, 2020
@kaxil kaxil deleted the clear_search_form branch October 16, 2020 21:56
@ryanahamilton ryanahamilton added the area:UI Related to UI/UX. For Frontend Developers. label Nov 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. area:webserver Webserver related Issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants