feat: Paginated Tables for Resource List Views by Wr4th100 · Pull Request #602 · dittofeed/dittofeed

Wr4th100 · 2024-01-23T19:05:17Z

Added 5 Paginated Tables.

Fixes #583
/claim #583

Wr4th100 · 2024-01-23T19:09:06Z

Hi!
I still have some issues regarding how to get and display "Journeys Used By" and "Last Re-Computed" in the tables. I request some clarification that would help me correct it!

maxgurewitz · 2024-01-24T15:29:24Z

Hi @Wr4th100! Congrats on the PR! Excited to start digging into it.

Hi!
I still have some issues regarding how to get and display "Journeys Used By" and "Last Re-Computed" in the tables. I request some clarification that would help me correct it!

Last Re-Computed: check the ComputedPropertyPeriod table, where the segment, or user property id is equal to the computedPropertyId.
Journeys Used By: get all Journey definitions, then iterate through the nodes, finding MessageNode's and checking their templateId values.

Wr4th100 · 2024-01-26T09:34:56Z

Hi @maxgurewitz! I have made the respective changes. Please have a look.

maxgurewitz · 2024-01-26T14:54:49Z

@Wr4th100 looking!

…00/dittofeed into Wr4th100/paginated-tables

Wr4th100 · 2024-01-27T05:19:12Z

I have made the requested changes @maxgurewitz, please have a look!

maxgurewitz · 2024-01-28T03:07:23Z

@Wr4th100 looking!

maxgurewitz

Can you fix linting by running yarn workspace dashboard lint --fix and yarn workspace backend-lib lint --fix.

Wr4th100 · 2024-01-28T04:26:37Z

Can you fix linting by running yarn workspace dashboard lint --fix and yarn workspace backend-lib lint --fix.

Yeah sure, done!

maxgurewitz

Borders

Apologies for the late response! It looks like several of the paginated tables have black borders, but the templates do not. I prefer the look of the table without those borders, if you could please remove them!

Table Row Count

Can you make use of the autoPageSize option to ensure that the table expands to full height of the page?

https://mui.com/x/react-data-grid/pagination/#automatic-page-size

Recording Reminder

Finally, a reminder to post a screen recording of the tables' UX! Thank you!

maxgurewitz

A few more requested changes!

Wr4th100 · 2024-02-03T07:07:04Z

I prefer the look of the table without those borders, if you could please remove them!

Yeah sure!

Can you make use of the autoPageSize option to ensure that the table expands to full height of the page?

I have tried this, but it results in this error.

So worked it out by just removing the maxHeight property. The table automatically resizes to screen size.

Also, should I make the tables expand up to the screen width?

Wr4th100 · 2024-02-03T12:16:28Z

I have made the requested changes. Please have a look!

Also, the video for the tables' UX:

DittofeedVid.mp4

maxgurewitz

@Wr4th100

So worked it out by just removing the maxHeight property. The table automatically resizes to screen size.

To clarify, the goal is to have the number of rows also adjust to fit the screen size so if the screen is larger, more rows are rendered. However, looking at timestamp 1:04 of your recording above, I see that the page size is 5, despite there being 9 results, and room to show more.

Also, should I make the tables expand up to the screen width?

Yes please!

maxgurewitz

Hi @Wr4th100 a few more changes are required.

maxgurewitz · 2024-02-06T00:45:12Z

+                      key={journey}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        router.push({


A few things need here:

Rather than a button that uses the router to navigate, can you use a nextjs link?

Can you style the link so that it has max character limit for journeys with long names, with a "..." appended to the end, and wrapped in a <Tooltip> with the full name.

Can you style the link so that it has a light grey background color, so that it's clearly distinguishable from neighboring links?

This feedback is applicable to the other page's related resources columns as well.

…00/dittofeed into Wr4th100/paginated-tables

Wr4th100 · 2024-02-08T17:00:36Z

Apologies for the late updates. I have made the required changes. Please have a look!

maxgurewitz

Some questions.

maxgurewitz · 2024-02-13T18:23:16Z

Hi apologies @Wr4th100 I totally missed that you had made additional changes, will re-review today!

maxgurewitz

@Wr4th100 here's a video recording with some additional feedback.

https://www.loom.com/share/0f63abbb8dd04c34af1cbfad7709e271?sid=5948fa65-faf8-4b35-bc25-3e8ac1bf384a

Wr4th100 · 2024-02-17T07:12:33Z

@Wr4th100 here's a video recording with some additional feedback.

https://www.loom.com/share/0f63abbb8dd04c34af1cbfad7709e271?sid=5948fa65-faf8-4b35-bc25-3e8ac1bf384a

Sorry went offline for a few days, will be looking into it!

maxgurewitz · 2024-02-28T19:56:57Z

@Wr4th100 this is rising in priority, if you're not able to work on this, I'm going to have to ask someone else to take it over!

…4th100/paginated-tables

Wr4th100 · 2024-02-29T04:48:11Z

@Wr4th100 this is rising in priority, if you're not able to work on this, I'm going to have to ask someone else to take it over!

Apologies @maxgurewitz, I have had some health issues in the past few weeks.

I have made the required changes but there are some few issues...

Regarding that table scroll, autoPageSize does not work correctly when the rows have variable height. This has been highlighted in the issue mui/mui-x#5697.

So, I have changed the "Used By" columns to dropdowns which displays the templates/journeys concisely.

DrppDownVideo.mp4

Please let me know if this is ok. If not, I would love to have some guidance on how to use that old UI itself.

maxgurewitz · 2024-02-29T19:45:45Z

Apologies @maxgurewitz, I have had some health issues in the past few weeks.

I'm sorry to hear that! Please let me know if there's anything I can do to help.

So, I have changed the "Used By" columns to dropdowns which displays the templates/journeys concisely.

Great idea! I love it.

Looks like you still have some linting errors here. Beyond that, I will try to give a full re-review by EOD!

maxgurewitz

A few comments! Also linting is failing to the open-api check. If you merge main back in, they should be fixed!

maxgurewitz · 2024-03-01T02:43:27Z

+      }}
+      getRowId={(row) => row.id}
+      onRowClick={(params) => {
+        router.push({


Please use <Link>'s here instead of router.push!

There is no direct way to wrap the entire row inside a <Link> tag. I would need to put the Link tag in every cell's renderCell property. Is that the right way to do it?

hey @Wr4th100 yah, you can put it inside of the renderCell of the baseColumn. apologies for not responding sooner. I missed this comment!

maxgurewitz · 2024-03-01T02:43:45Z

+      }}
+      getRowId={(row) => row.id}
+      onRowClick={(params) => {
+        router.push({


maxgurewitz · 2024-03-01T02:44:00Z

+      }}
+      getRowId={(row) => row.id}
+      onRowClick={(params) => {
+        router.push({


Please use <Link/> instead of router.push

maxgurewitz · 2024-03-01T02:44:50Z

+      }}
+      getRowId={(row) => row.id}
+      onRowClick={(params) => {
+        router.push({


Please use <Link> instead of router.push

maxgurewitz · 2024-03-01T02:45:18Z

+      }}
+      getRowId={(row) => row.id}
+      onRowClick={(params) => {
+        router.push({


Please use <Link/> instead of router.push.

maxgurewitz · 2024-03-01T02:46:06Z

+      sx={{
+        height: "100%",
+        width: "100%",
+        ".MuiDataGrid-row:first-child": {


You seem to be re-using the same styles over and over. Can you deduplicate this code?

Ok sure, shall I use this code to override the theme for DataGrid in themeCustomization?

How about you just export a value from a shared components/resourceTable.tsx file

const RESOURCE_TABLE_STYLE: SxProps<Theme> = { ... }

and then use it

<DataGrid sx={{...RESOURCE_TABLE_STYLE, myStyle1: 1 }} >

Ok sure, will do it!

maxgurewitz · 2024-03-01T03:04:06Z

Other than small fixes requested, looks amazing! Just ran it locally on my machine and its working great! Thanks for your patience @Wr4th100

Wr4th100 · 2024-03-05T09:14:31Z

@maxgurewitz I have made the changes. Please have a look!

maxgurewitz · 2024-03-06T01:11:50Z

@Wr4th100 looking!

maxgurewitz

Amazing looks good to me!

Please fix the api test error and it's ready to merge!

https://docs.dittofeed.com/contributing/updating-api-docs

Wr4th100 · 2024-03-06T19:08:24Z

Amazing looks good to me!

Please fix the api test error and it's ready to merge!

https://docs.dittofeed.com/contributing/updating-api-docs

Done. Please have a look!

maxgurewitz · 2024-03-06T20:55:02Z

/tip $50

algora-pbc · 2024-03-06T20:55:07Z

👉 @maxgurewitz: Navigate to your dashboard to proceed

algora-pbc · 2024-03-06T20:55:36Z

🎉🎈 @Wr4th100 has been awarded $50! 🎈🎊

maxgurewitz · 2024-03-06T20:56:55Z

@Wr4th100 you should join our discord, I'd like to give you a shoutout!

Wr4th100 added 2 commits January 23, 2024 23:47

feat: Paginated Table for resource list views

a493498

Merge branch 'main' of https://github.com/dittofeed/dittofeed

be73b50

algora-pbc bot mentioned this pull request Jan 23, 2024

[DF-415] create paginated table for resource list views #583

Closed

algora-pbc bot added the 🙋 Bounty claim label Jan 23, 2024

Wr4th100 and others added 2 commits January 26, 2024 14:50

fix: Tables corrected

10d77ed

Merge branch 'main' into Wr4th100/paginated-tables

ba4b077

maxgurewitz requested changes Jan 26, 2024

View reviewed changes

Wr4th100 and others added 4 commits January 27, 2024 00:17

fix: Requested Changes 1

c5838fb

Merge branch 'Wr4th100/paginated-tables' of https://github.com/Wr4th1…

3fc111b

…00/dittofeed into Wr4th100/paginated-tables

Merge branch 'dittofeed:main' into Wr4th100/paginated-tables

249ee01

fix: Requested Changes 2

d757239

maxgurewitz requested changes Jan 28, 2024

View reviewed changes

fix: lint fix

2b28eb0

fix: check fix

caba84e

Wr4th100 requested a review from maxgurewitz January 29, 2024 12:22

maxgurewitz requested changes Feb 1, 2024

View reviewed changes

Wr4th100 and others added 2 commits February 3, 2024 17:37

Merge branch 'dittofeed:main' into Wr4th100/paginated-tables

636b529

fix: Requested Changes 3

203b5b6

maxgurewitz requested changes Feb 3, 2024

View reviewed changes

Merge branch 'dittofeed:main' into Wr4th100/paginated-tables

047b2e5

maxgurewitz requested changes Feb 6, 2024

View reviewed changes

Wr4th100 and others added 3 commits February 8, 2024 21:58

fix: Changed Link Appearance + Other Requested Changes

6722beb

Merge branch 'dittofeed:main' into Wr4th100/paginated-tables

9665775

Merge branch 'Wr4th100/paginated-tables' of https://github.com/Wr4th1…

7424dea

…00/dittofeed into Wr4th100/paginated-tables

maxgurewitz reviewed Feb 9, 2024

View reviewed changes

Comment thread packages/dashboard/src/components/userPropertiesTable.tsx Outdated

Comment thread packages/isomorphic-lib/src/types.ts Outdated

fix: Removed Unnecessary Types

e5968a5

maxgurewitz requested changes Feb 14, 2024

View reviewed changes

Merge branch 'main' of https://github.com/dittofeed/dittofeed into Wr…

33c05ff

…4th100/paginated-tables

maxgurewitz requested changes Mar 1, 2024

View reviewed changes

Wr4th100 and others added 3 commits March 4, 2024 08:14

Merge branch 'dittofeed:main' into Wr4th100/paginated-tables

cd0342e

fix: Styles Deduplicated + Link Tag for rows

9006273

Merge branch 'dittofeed:main' into Wr4th100/paginated-tables

0f70269

maxgurewitz approved these changes Mar 6, 2024

View reviewed changes

fix: OpenAPI Schema

0e685e2

maxgurewitz merged commit d05ba15 into dittofeed:main Mar 6, 2024

algora-pbc bot added the 💰 Rewarded label Mar 6, 2024

Conversation

Wr4th100 commented Jan 23, 2024

Uh oh!

Wr4th100 commented Jan 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maxgurewitz commented Jan 24, 2024

Uh oh!

Wr4th100 commented Jan 26, 2024

Uh oh!

maxgurewitz commented Jan 26, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Wr4th100 commented Jan 27, 2024

Uh oh!

maxgurewitz commented Jan 28, 2024

Uh oh!

maxgurewitz left a comment

Choose a reason for hiding this comment

Uh oh!

Wr4th100 commented Jan 28, 2024

Uh oh!

maxgurewitz left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Borders

Table Row Count

Recording Reminder

Uh oh!

maxgurewitz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Wr4th100 commented Feb 3, 2024

Uh oh!

Wr4th100 commented Feb 3, 2024

Uh oh!

maxgurewitz left a comment

Choose a reason for hiding this comment

Uh oh!

maxgurewitz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Wr4th100 commented Feb 8, 2024

Uh oh!

maxgurewitz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

maxgurewitz commented Feb 13, 2024

Uh oh!

maxgurewitz left a comment

Choose a reason for hiding this comment

Uh oh!

Wr4th100 commented Feb 17, 2024

Uh oh!

maxgurewitz commented Feb 28, 2024

Uh oh!

Wr4th100 commented Feb 29, 2024

Uh oh!

maxgurewitz commented Feb 29, 2024

Uh oh!

Wr4th100 commented Jan 23, 2024 •

edited

Loading

maxgurewitz left a comment •

edited

Loading

maxgurewitz left a comment •

edited

Loading

maxgurewitz Mar 1, 2024 •

edited

Loading