Biz/dj 2800 add async options pagination in connect react (#15248)

* Add load more button for async options

* Hide load more button on error

* Bump package version

* Fix linter errors

* Hook up load more button

* Disable eslint error

* Fix canLoadMore logic

* Remove React import statement

* Remove React import statement

* Remove React import statement

* Update pnpm-lock.yaml

Author: bzwrk

components/bluesnap/bluesnap.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/grafana/grafana.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/polymer_co/polymer_co.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/shutterstock/shutterstock.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

packages/connect-react/examples/nextjs/package-lock.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@pipedream/connect-react": "file:../..",
-    "@pipedream/sdk": "^1.0.6",
+    "@pipedream/sdk": "^1.1.4",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106"

packages/connect-react/examples/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.18",
+  "version": "1.0.0-preview.19",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

packages/connect-react/package.json

@@ -1,20 +1,25 @@
 import { useMemo } from "react";
-import Select, { Props as ReactSelectProps } from "react-select";
+import Select, {
+  Props as ReactSelectProps, components,
+} from "react-select";
 import type { CSSObjectWithLabel } from "react-select";
 import CreatableSelect from "react-select/creatable";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import { useCustomize } from "../hooks/customization-context";
 import type { BaseReactSelectProps } from "../hooks/customization-context";
+import { LoadMoreButton } from "./LoadMoreButton";
 
 // XXX T and ConfigurableProp should be related
 type ControlSelectProps<T> = {
   isCreatable?: boolean;
   options: {label: string; value: T;}[];
   selectProps?: ReactSelectProps;
+  showLoadMoreButton?: boolean;
+  onLoadMore?: () => void;
 };
 
 export function ControlSelect<T>({
-  isCreatable, options, selectProps,
+  isCreatable, options, selectProps, showLoadMoreButton, onLoadMore,
 }: ControlSelectProps<T>) {
   const formFieldCtx = useFormFieldContext();
   const {
@@ -24,7 +29,7 @@ export function ControlSelect<T>({
     select, theme,
   } = useCustomize();
 
-  const baseSelectProps: BaseReactSelectProps<any, any, any> = {
+  const baseSelectProps: BaseReactSelectProps<never, never, never> = {
     styles: {
       container: (base): CSSObjectWithLabel => ({
         ...base,
@@ -69,6 +74,28 @@ export function ControlSelect<T>({
     options,
   ]);
 
+  const LoadMore = ({
+    // eslint-disable-next-line react/prop-types
+    children, ...props
+  }) => {
+    return (
+      <components.MenuList  {...props}>
+        { children }
+        <div className="pt-4">
+          <LoadMoreButton onChange={onLoadMore}/>
+        </div>
+      </components.MenuList>
+    )
+  }
+
+  const props = select.getProps("controlSelect", baseSelectProps)
+  if (showLoadMoreButton) {
+    props.components = {
+      // eslint-disable-next-line react/prop-types
+      ...props.components,
+      MenuList: LoadMore,
+    }
+  }
   const MaybeCreatableSelect = isCreatable
     ? CreatableSelect
     : Select;
@@ -81,7 +108,7 @@ export function ControlSelect<T>({
       isMulti={prop.type.endsWith("[]")}
       isClearable={true}
       required={!prop.optional}
-      {...select.getProps("controlSelect", baseSelectProps)}
+      {...props}
       {...selectProps}
       onChange={(o) => {
         if (o) {
@@ -101,7 +128,9 @@ export function ControlSelect<T>({
             }
           } else if (typeof o === "object" && "value" in o) {
             if (prop.withLabel) {
-              onChange({__lv: o});
+              onChange({
+                __lv: o,
+              });
             } else {
               onChange(o.value);
             }

packages/connect-react/src/components/ControlSelect.tsx

@@ -0,0 +1,33 @@
+import { useCustomize } from "../hooks/customization-context";
+import type { CSSProperties } from "react";
+
+export type ButtonProps = {
+  onChange: () => void;
+};
+
+export const LoadMoreButton = (props: ButtonProps) => {
+  const { onChange } = props;
+  const {
+    getProps, theme,
+  } = useCustomize();
+
+  const baseStyles: CSSProperties = {
+    backgroundColor: theme.colors.primary,
+    borderRadius: theme.borderRadius,
+    border: "solid 1px",
+    borderColor: theme.colors.primary25,
+    color: theme.colors.primary25,
+    padding: "0.5rem",
+    fontSize: "0.8125rem",
+    fontWeight: "450",
+    gridArea: "control",
+    cursor: "pointer",
+    width: "100%",
+  };
+
+  return (
+    <button onClick={onChange} type="button" {...getProps("loadMoreButton", baseStyles, props)}>
+      Load More
+    </button>
+  );
+};

packages/connect-react/src/components/LoadMoreButton.tsx

@@ -29,13 +29,40 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
     setQuery,
   ] = useState("");
 
+  const [
+    page,
+    setPage,
+  ] = useState<number>(0);
+
+  const [
+    canLoadMore,
+    setCanLoadMore,
+  ] = useState<boolean>(true);
+
+  const [
+    context,
+    setContext,
+  ] = useState<never | undefined>(undefined);
+
+  const [
+    pageable,
+    setPageable,
+  ] = useState({
+    page: 0,
+    prevContext: {},
+    data: [],
+    values: new Set(),
+  })
+
   const configuredPropsUpTo: Record<string, unknown> = {};
   for (let i = 0; i < idx; i++) {
     const prop = configurableProps[i];
     configuredPropsUpTo[prop.name] = configuredProps[prop.name];
   }
   const componentConfigureInput: ComponentConfigureOpts = {
     userId,
+    page,
+    prevContext: context,
     componentId: component.key,
     propName: prop.name,
     configuredProps: configuredPropsUpTo,
@@ -55,9 +82,18 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
     setError,
   ] = useState<{ name: string; message: string; }>();
 
+  const onLoadMore = () => {
+    setPage(pageable.page)
+    setContext(pageable.prevContext)
+    setPageable({
+      ...pageable,
+      prevContext: {},
+    })
+  }
+
   // TODO handle error!
   const {
-    isFetching, data, refetch,
+    isFetching, refetch,
   } = useQuery({
     queryKey: [
       "componentConfigure",
@@ -67,11 +103,11 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
       setError(undefined);
       const res = await client.componentConfigure(componentConfigureInput);
 
-      // console.log("res", res)
       // XXX look at errors in response here too
       const {
         options, stringOptions, errors,
       } = res;
+
       if (errors?.length) {
         // TODO field context setError? (for validity, etc.)
         try {
@@ -84,8 +120,9 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
         }
         return [];
       }
+      let _options = []
       if (options?.length) {
-        return options;
+        _options = options;
       }
       if (stringOptions?.length) {
         const options = [];
@@ -95,13 +132,45 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
             value: stringOption,
           });
         }
-        return options;
+        _options = options;
+      }
+
+      const newOptions = []
+      const allValues = new Set(pageable.values)
+      for (const o of _options || []) {
+        const value = typeof o === "string"
+          ? o
+          : o.value
+        if (allValues.has(value)) {
+          continue
+        }
+        allValues.add(value)
+        newOptions.push(o)
+      }
+      let data = pageable.data
+      if (newOptions.length) {
+        data = [
+          ...pageable.data,
+          ...newOptions,
+        ]
+        setPageable({
+          page: page + 1,
+          prevContext: res.context,
+          data,
+          values: allValues,
+        })
+      } else {
+        setCanLoadMore(false)
       }
-      return [];
+      return data;
     },
     enabled: !!queryEnabled,
   });
 
+  const showLoadMoreButton = () => {
+    return !isFetching && !error && canLoadMore
+  }
+
   // TODO show error in different spot!
   const placeholder = error
     ? error.message
@@ -116,7 +185,9 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
 
   return (
     <ControlSelect
-      options={data || []}
+      showLoadMoreButton={showLoadMoreButton()}
+      onLoadMore={onLoadMore}
+      options={pageable.data}
       // XXX isSearchable if pageQuery? or maybe in all cases? or maybe NOT when pageQuery
       selectProps={{
         isLoading: isFetching,