[Bug]: Disable clicking on Next page button when Table record reached to last page

[chandannkumar]

Is there an existing issue for this?

• I have searched the existing issues

Description

In Table widget, when pagination reach to it's last page the icon seems disabled but we can still Click on it and see rendering of data.

Steps To Reproduce

1. Drag & drop a Table widget
2. Run a server side pagination query SELECT * FROM users ORDER BY id LIMIT {{Table2.pageSize}} offset {{Table2.pageOffset}}
3. Enable server side pagination and configure onPageChange & Total records
4. Reach to last page of the table records
5. Observe that Next page button is disabled but clickable

Public Sample App

No response

Environment

Production

Issue video log

https://www.loom.com/share/bad8d690647c4583b7e82d6092a1ccbe

Version

Cloud / Production

[avijeetpandey]

@chandannkumar @keyurparalkar @dilippitchika i wanted to contribute and work on this issue can you please assign this issue to me ?

[dilippitchika]

Greetings @avijeetpandey thanks for showing interest 🎉 , This is all your. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate if you can open a PR within the next 2 days. let us know here

[avijeetpandey]

Thanks @dilippitchika , will try my best to do that

[Ashmash100]

Hi @dilippitchika @chandannkumar @keyurparalkar
In case the PR isn't raised, I would like to work on this issue.

[avijeetpandey]

@dilippitchika the client is taking so much time to compile, anything that can be done to speed this up , have setup the client and server as per the docs , but upon running yarn start its taking so much to complile .

System Info

Ubuntu 22.10
8GB RAM

[avijeetpandey]

@dilippitchika @chandannkumar After following the docs and setting up the server successfully got the following error on the client, need little help in making the client a successful connection to a staging/local environment.

Attaching the screenshot for a better understanding of the issue.

Thanks

[sharat87]

Hey @avijeetpandey, I think you're opening http://dev.appsmith.com:3000 in your browser. Can you try https://dev.appsmith.com instead please? If that also shows the same error, please share the exact full command you've used to run the start-https.sh script for us to debug further. Thanks!

[avijeetpandey]

@sharat87 here are the set of commands i am running after setting up the repo as per the docs

// for backend
cd appsmith/app/server
docker-compose up -d

cd appsmith/app/client
./start-https.sh
yarn start

on accessing http://dev.appsmith.com I am getting the following

[Ashmash100]

Hi @dilippitchika @sharat87 @chandannkumar
I know the solution for this. If this issue is still open can I work on it?

[sharat87]

@avijeetpandey, that looks odd. Can you share the output of the start-https.sh command, as well as the generated NGINX configuration located at app/client/nginx/nginx.dev.conf here please?

[harrybasra95]

@chandannkumar @keyurparalkar @dilippitchika I was going through this issue and I have found the buggy code.

Code Location

The below image is from /app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx

What's the issue

We are adding pointerEvents: none to the child elements of PaginationItemWrapper. But the onClick code is working on the PaginationItemWrapper element itself. Because of this on hover the button looks like disabled but still the onClick works.

Proposed solution

With CSS - We can add pointerEvents: none to the parent element but it will disable the cursor: not-allowed property. Thus it will start showing the move icon when hovered on the disabled button.

With JS - We can directly add the disable condition on the onClick event.

Please suggest to me how to proceed.

[keyurparalkar]

Greetings @harrybasra95 thanks for showing interest 🎉 , This is all your. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate if you can open a PR within the next 2 days. let us know here

[keyurparalkar]

@harrybasra95 can you proceed with the JS solution where we add a disable condition to the onClick event

[harshitpandey0426]

@keyurparalkar Is this resolved, I can open a PR if required?

[keyurparalkar]

@harshitpandey0426 thanks for showing interest but the PR has already been raised for it.

[Dvinod28]

Hi, is this issue still open, and it is client-side only?, I want to contribute