PipedreamHQ / PipedreamHQ/pipedream

[BUG] Options prop with query does not refresh pagination properly

Open
#12,615 0 comments 0 reactions 0 assignees View on GitHub
bug tracked internally triaged
Dominant language
JavaScript
Stars
11.7k
Forks
5.8k
Avg merge
3d 10h
Merged PRs (30d)
102

Description

**Describe the bug**
Given a prop that uses `options`, when all options are loaded, the "load more" button is disabled and its text becomes "no more to load".

If this prop has `useQuery: true`, the query changes which results are provided. However, if the button is already disabled due to having loaded the last page, it is not re-enabled when the query is changed. Hence, the user is stuck on the first page of options until they reload the page.

**To Reproduce**
Create a Nodejs code step with the following code:
```
const getNewArr = (s) => new Array(s).fill(0).map((v, index) => ({ label: "test " + index.toString(), value: index }));
const arrOptions = getNewArr(5);
const arrOptionsQuery = getNewArr(3);

export default defineComponent({
props: {
selection: {
type: "string",
label: "Selection",
useQuery: true,
options({ query, page }) {
let arr = query ? arrOptionsQuery : arrOptions;
const value = arr[page];
return value ? [value] : [];
}
}
},
async run({ steps, $ }) {
return this.selection;
},
});
```

You can use the 'load more' button to load through the pages without entering a query, and then after all 5 pages are loaded, you can type "test" in the query, which will now draw from a list with 3 pages. The button, however, will not be re-enabled, so you will only see the first value.

The opposite works the same way: you can type in a query and load all 3 pages, then clear it to draw from the list of 5 pages, but will be unable to load beyond the first.

**Expected behavior**
In a prop with `useQuery: true`, whenever the query is changed, the 'load more' button should have its state reset along with the pagination.

**Screenshots**
Loading all pages without query:
![image](https://github.com/PipedreamHQ/pipedream/assets/48412907/9ebdb86b-92c7-4d88-9859-b634342fe602)

Then, after typing in a query:
![image](https://github.com/PipedreamHQ/pipedream/assets/48412907/970fb738-2038-4a7c-99c1-8546df9dadcc)

Then, after refreshing the page:
![image](https://github.com/PipedreamHQ/pipedream/assets/48412907/4b371055-4915-468e-aa4f-f9f16c2e5993)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.