[Bug]-[340]:There is no way to reset the pagination variables in GraphQL query

[rohan-arthur]

Is there an existing issue for this?

• [X] I have searched the existing issues

Description

https://user-images.githubusercontent.com/94514895/185849311-b4057a1d-319f-4825-b924-377edbee516f.mov

Steps To Reproduce

1. Create GraphQL query
2. Create some variables in the body
3. Select these variables in the pagination tab
4. Now go back to body and remove those variables (you might have decided against using pagination for the moment)
5. Go back to Pagination tab and as you can see in the video, you cannot remove the selected variables - you can still set the pagination option to none, but when you switch back to the previously selected option, these variables are still present and they cannot be removed.

Public Sample App

No response

Version

Cloud

[sumitsum]

@AmanAgarwal041 assigning this to you since this looks like something that should be handled from he client side. Please let me know if it needs to be handled on server side.

[AmanAgarwal041]

@rohan-arthur @parth-appsmith we will be requiring design to add this functionality.

[parth-appsmith]

@AmanAgarwal041 from what I understand of this issue is that once the selected variables are removed from the query variable they still appear selected in the pagination with an error (Since those variables doesn't exists). I dont see where are designs required for this, shouldn't the interaction be as soon as the source of the variable doesn't exists then there is no point that they should appear in the dropdown. The dropdown in this case should fall back to default state (nothing is selected).

Even providing a CTA to reset values is adding an extra step of friction to an experience which should happen automatically.

CC: @rohan-arthur

[rohan-arthur]

@parth-appsmith you're right of course, and that's the bug we want to fix. However, the component itself can be better: suppose I select something in the drop-down, how can I un-select it again? This is currently not working. I imagine a "blank" value in the drop-down should work - would you please suggest a suitable existing component?

[rohan-arthur]

There are two scenarios we need to address:

1. allow users to have nothing selected, after they once select something?
2. where the dropdown is bound to a variable and the variable is deleted, what should happen?

As discussed today, let's confine this issue to scenario 1. Scenario 2 will be tackled in a separate issue.

The solution should be similar to the action selector, in which I can reset my trigger action after selecting something first:

However, instead of No action, this dropdown should have the reset option as None, so that:

1. On selecting this, the selection should effectively be cleared.
2. This additional option should be available in all the dropdowns in the graphql pagination tab

[sumitsum]

6m usage of GraphQL: 341 Impacted % of users: 25

Stats

Stat	Values
Reach	85
Effort (months)	0.25

[rohan-arthur]

assigning medium priority to this