MM-32425 new data table component for data retention

[BenCookie95]

Summary

This component already existed in billing history but we needed to re-use it. I pulled it out and made a few adjustments to allow for server side pagination and it is functionally similar to the data grid

See design here: https://www.figma.com/proto/PdZPkf36lNU6ZO41JlEjKd/Team-%26-Channel-Data-Retention?node-id=20%3A181&scaling=min-zoom

Ticket Link

https://mattermost.atlassian.net/browse/MM-32425

Screenshots

Added a new optional prop to the DataGrid component called customClass. The new custom class called customTable is used by data retention.

[hahmadia]

I had one question regarding this component.

We already have a common component called DataGrid which looks very similar to the screenshots you’ve posted and has extra things but they are optional (such as a search bar).

I think we can replace instances of data tables with data grid (with small modifications such as passing custom css class) to achieve the same thing without needing too create a whole new component.

This way, we could help to avoid confusion between differentiating between the two components and when each one should be used.

You can take a look at the component here
https://github.com/mattermost/mattermost-webapp/blob/master/components/admin_console/data_grid/data_grid.tsx

And see it being used in the teams and channel page in the system console (System Console > User Management > Teams/Channels). The grid displaying the teams and channels is using this.

Anyhow, let me know what you think. These were just my thoughts after I realized what it was we were creating. Thanks!

Edit I believe you can also see an instance of the DataGrid component being used in the fashion of a Data Table in either the Users section of the Teams/Channels page in the system console. It just has this extra search functionality added.

[BenCookie95]

I had one question regarding this component.

We already have a common component called DataGrid which looks very similar to the screenshots you’ve posted and has extra things but they are optional (such as a search bar).

I think we can replace instances of data tables with data grid (with small modifications such as passing custom css class) to achieve the same thing without needing too create a whole new component.

This way, we could help to avoid confusion between differentiating between the two components and when each one should be used.

You can take a look at the component here
https://github.com/mattermost/mattermost-webapp/blob/master/components/admin_console/data_grid/data_grid.tsx

And see it being used in the teams and channel page in the system console (System Console > User Management > Teams/Channels). The grid displaying the teams and channels is using this.

Anyhow, let me know what you think. These were just my thoughts after I realized what it was we were creating. Thanks!

Edit I believe you can also see an instance of the DataGrid component being used in the fashion of a Data Table in either the Users section of the Teams/Channels page in the system console. It just has this extra search functionality added.

I agree with everything you said, I've integrated it into the datagrid now. Looks a lot better and the updates were pretty minimal!

[BenCookie95]

/update-branch

[hahmadia]

Hey! I had a discussion with @devinbinnie and came to realization that the way we are handling the CSS here can be done in a more efficient manner. He will comment about the required changes to make this happen. Thanks!

[hahmadia]

LGTM. Agree with Devin NIT. Thanks!

[furqanmlk]

[mm-cloud-bot]

@BenCookie95: Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

I understand the commands that are listed here

[mm-cloud-bot]

@BenCookie95: Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

I understand the commands that are listed here