User Event Logs - filter, search and sorting

[nebs-dev]

Resolves #376

• Added sorting, filtering and search UI
• Refactor Event Logs query and EventLogsTypes recoil methods
• Added EventLogsTypes transformer and controller method

[mattyg]

let's rename useAllEventTypeLogs to useAllEventLogTypes

[mattyg]

It might be a bit cleaner to use the apiAuthClient instead of the ApiAuthGet recoil selector -- then you can pass the query parameters as an object and you don't have to do this string formatting stuff.

I'm hoping we can rip out the recoil api selectors (ApiAuthGet, ApiAuthPost, etc.) entirely at some point.

[mattyg]

getting a lint warning

[nebs-dev]

hm, i am not sure what to do here - if i add dependencies for useMemo hook (queryParameters & setQueryParameters) i will create infinite loop because we are updating queryParameters here and they will change every time.
Also i am not really sure why component is rerendering every time I update queryParameters @mattyg

[mattyg]

hm, i am not sure what to do here - if i add dependencies for useMemo hook (queryParameters & setQueryParameters) i will create infinite loop because we are updating queryParameters here and they will change every time. Also i am not really sure why component is rerendering every time I update queryParameters @mattyg

Sorry I think I didn't look closely enough at this the first time. I think the confusion comes from using this pattern where EventLogsList reads+writes to recoil state, and EventLogsActions also reads+writes to recoil state, and the parameters to the api request are stored in recoil state.

I think it would be clearer if instead:

• EventLogsList is the "smart" component, that reads+writes to recoil state
• The query parameters are stored internally in EventLogsList's component state
• EventLogsActions is a "dumb" component, that purely takes in user input and emits it to it's parent component. Or alternatively, you could remove it entirely and put the code inside it's parent component

Does that make sense? We could pair program it too if you want.

[mattyg]

Awesome!

I requested some minor changes inline.

The only other change I'd request is that we style the search, filter, and sort input components to reflect the styling used in the new Users page. Ideally by making generic input components we can keep using throughout the application.

[nebs-dev]

throughout

ok.. i will have to check new user page and use those input styles
but honestly my design looks better to me :)

[kristoferlund]

How about this:

• Skip the filter icon, it is vague. Go with the standard dropdown icon instead.
• The headless ui dropdown provides the checkboxes the default dropdown doesn't include. Let's make this component our default choice.
• Margins need to be adjusted, use margin 4 between components.
• These inputs should be same height as a std text input (on my screen 42 px) - adjust margins pls.

We'll look into styling borders etc soon - perhaps making them slightly more soft.

[nebs-dev]

How about this:

• Skip the filter icon, it is vague. Go with the standard dropdown icon instead.
• The headless ui dropdown provides the checkboxes the default dropdown doesn't include. Let's make this component our default choice.
• Margins need to be adjusted, use margin 4 between components.
• These inputs should be same height as a std text input (on my screen 42 px) - adjust margins pls.

We'll look into styling borders etc soon - perhaps making them slightly more soft.

i updated styles to be like your design, now we have checkboxes that are black/white.. and also i changed some other styles
And i updated user screen to use new components for sorti/filter

[kristoferlund]

Great, almost there! I'll post a few comments before Monday.

[kristoferlund]

Great! I made some minor styling changes. Merging now.

Changes done