Improve UX for topics-filter

[ppuschmann]

Using Kowl again after some time I didn't drectly find a way to remove the applied search-filter for topics.

For me as a generic user I was puzzled the filter was only accessible via the looking-glass icon. This was not obvious to me.

While I cat understand the UI is now cleaner and sleeker, I'd still recommend to show the applied search-filter in open and maybe with some "nuke"/"x" icon to reset the filter.

Kowl version: v1.5.1-3e20cbb

[dleser]

Same happened to me a recently. I was confused that I could only see 3 topics out of >40. Only the URL showed me that an old filter condition was still active. ...and the behaviour differs from the UI for the consumer groups.

[rikimaru0345]

Hi, yea that part is not great currently.

I think there are actually two issues here, can you confirm?

• It is difficult to figure out that icon is supposed to mean "click here for search/filtering". So search became more "hidden".
• It's not obvious enough if filtering is currently happening or not

When a filter is active it could show something like this: Quick mockup

I guess it would help for the second point. But not sure about the first one.

Do you (@ppuschmann) think it would have helped if the icon would have just been larger? Do you think there's another way the current design could be made better?

Or do you think the old way (search bar just directly above the table, always open/visible) was just simply better?

Of course I'm also open to just scrapping the whole idea 😂 Like, if you think the new design can't be fixed I'll revert it. However, we didn't make the change for no reason either...

Background why we even made that change in the first place:

We needed to make some space in certain views. Specifically those tables:

• topic messages
• topic configuration
• broker configuration

The search field for topic messages was especially important since the UI is already so "cramped" and the search-bar wasn't even near the table because of the gap for the JS-filters (if the filter toggle is turned on)

[dleser]

Hi Moritz, I like your proposal/mockup! Initially I have found the magnifier to set the filter, it was just confusing when coming back later and the filter was still active.

[holgeradam]

Hi @rikimaru0345 , the part about the icon being sort of hidden initially is key here. Once I remembered where the filter went it comes back when I look for it, but the magnifying glass would otherwise go totally unnoticed. I get the point about saving space and it might be trouble for smaller columns, but this looks like it's a frequently used feature. Therefore it should be easy to spot, assess the current state and be usable with as little clicks as possible. A suitable option might be to add a permanently visible field to the column header so that I can see the current filter, edit it with a click and find it easily if I need it.

[rikimaru0345]

I tried to come up with other alternatives to make it more obvious where the search/filter thing is now. But so far everything I tried wasn't really satisfactory.

I'll revert the filter on the topics list back to how it was before soon. (need to finish a few other features, but it's on the list 😄)

[twmb]

We are migrating table components, this will be resolved then. cc @jvorcak

[jvorcak]

This is the behaviour in the PR of a migrated Table component. I hope it does comply with this request.

[twmb]

Closing per the above comment, this will be in the next release, releasing shortly.