FE: Messages: Implement messages export

[alexanderlz]

• Breaking change? (if so, please describe the impact and migration path for existing application instances)

What changes did you make? (Give an overview)

Added an option to download all messages that are displayed on page(as csv or json)
as per #688

useDataSaver method is reused here.

Is there anything you'd like reviewers to focus on?

How Has This Been Tested? (put an "x" (case-sensitive!) next to an item)

• No need to
• Manually (please, describe, if necessary)
• Unit checks
• Integration checks
• Covered by existing automation

Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (e.g. ENVIRONMENT VARIABLES)
• My changes generate no new warnings (e.g. Sonar is happy)
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged

Check out Contributing and Code of Conduct

A picture of a cute animal (not mandatory but encouraged)

[github-actions]

Hi alexanderlz! 👋

Welcome, and thank you for opening your first PR in the repo!

Please wait for triaging by our maintainers.

Please take a look at our contributing guide.

[Haarolean]

Hi, thanks for the PR! Could you please take a look at the linter errors? And could we get some tests for the new functionality?

[alexanderlz]

definitely (both of your questions).

Happy New Year!

[Haarolean]

definitely (both of your questions).

Happy New Year!

likewise, happy new year 😊

[yeikel]

The one comment I have is that in the screenshot, the icon for "export" looks more like "Import/Upload" to me

In most UI, I've seen "arrow up" means upload while "arrow down" means download

The design also mentioned "functionality for uploading," but that's a different functionality

[alexanderlz]

@Haarolean will do

@yeikel - arrow down it is.

[Haarolean]

The one comment I have is that in the screenshot, the icon for "export" looks more like "Import/Upload" to me

In most UI, I've seen "arrow up" means upload while "arrow down" means download

The design also mentioned "functionality for uploading," but that's a different functionality

@yeikel have you got some examples?

[yeikel]

The one comment I have is that in the screenshot, the icon for "export" looks more like "Import/Upload" to me

In most UI, I've seen "arrow up" means upload while "arrow down" means download

The design also mentioned "functionality for uploading," but that's a different functionality

@yeikel have you got some examples?

An example of what? An UI that implements this?

Just searching for upload/download icons online yields the kind of results I refer to. For example:

https://www.flaticon.com/free-icons/upload

https://www.flaticon.com/search?word=Download

In terms of the reference design, this is the contradiction I refer to:

[alexanderlz]

@Haarolean @yeikel done.

LMK if anything else needed.

[yeikel]

@Haarolean @yeikel done.

LMK if anything else needed.

It looks great! Thank you for the awesome work!

[yeikel]

I am not sure how we'll document this, but we need to make sure we document somehow that this will only download the current page and not all the data

If it can be in our documentation to avoid making the UI too cluttered, I think that would work

We just need to make sure it's communicated to avoid future bug reports about it

[yeikel]

@alexanderlz Could you please resolve the conflicts?

[alexanderlz]

@yeikel done

[yeikel]

@Haarolean Could you please do another round of reviews?

[Haarolean]

@yeikel

searching for upload/download icons online yields the kind of results I refer tosearching for upload/download icons online yields the kind of results I refer to

Indeed, but if you'd look up 'export icon' it'd yield the opposite one.

@snoorge's point:

it's important to understand the difference here, i think.
uploading into the kafka system → down arrow, since you're loading stuff into it (like into a box).
downloading from the kafka system → up arrow, since you're pulling it out into the outside world (like taking something out of a box).

I have to agree with @snoorge here, however it's kinda counter intuitive.

[yeikel]

@yeikel

Indeed, but if you'd look up 'export icon' it'd yield the opposite one.

Fair enough. I have also seen it like this to differentiate it from a upload

I think that at some point in the future, we may want to add "upload" or "import" into Kafka which would be a very similar icon and maybe even more confusing

In this case, we have text along with the icon, and I think that the icon is not as important here. Both points can be made

[alexanderlz]

tl;dr - we change the icon or leave it as is?
@yeikel

[yeikel]

tl;dr - we change the icon or leave it as is? @yeikel

Based on the comments above, it seems that @Haarolean is looking to implement it as the original design intended and not what I suggested. But @Haarolean can confirm

Apologies for the back and forth @alexanderlz , it was my opinion and not final. I appreciate your efforts :)

[Haarolean]

tl;dr - we change the icon or leave it as is? @yeikel

I'd stick to @snoorge implementation (arrow up).