From 3c86c885ab224a751b729f811e3f03227a6546dd Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Mon, 27 Jan 2025 21:12:20 -0600 Subject: [PATCH 1/5] Always show labels on dynamic props --- .../src/components/ControlSelect.tsx | 20 +++++-------------- .../connect-react/src/hooks/form-context.tsx | 6 ++++++ packages/connect-react/src/utils/component.ts | 3 +++ 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx index b7f1be6ae704d..fcc312f665098 100644 --- a/packages/connect-react/src/components/ControlSelect.tsx +++ b/packages/connect-react/src/components/ControlSelect.tsx @@ -171,26 +171,16 @@ export function ControlSelect({ if (o) { if (Array.isArray(o)) { if (typeof o[0] === "object" && "value" in o[0]) { - const vs = []; - for (const _o of o) { - if (prop.withLabel) { - vs.push(_o); - } else { - vs.push(_o.value); - } - } - onChange(vs); - } else { - onChange(o); - } - } else if (typeof o === "object" && "value" in o) { - if (prop.withLabel) { onChange({ __lv: o, }); } else { - onChange(o.value); + onChange(o); } + } else if (typeof o === "object" && "value" in o) { + onChange({ + __lv: o, + }); } else { throw new Error("unhandled option type"); // TODO } diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx index 6c0634a15918a..d1367ec72c084 100644 --- a/packages/connect-react/src/hooks/form-context.tsx +++ b/packages/connect-react/src/hooks/form-context.tsx @@ -254,6 +254,12 @@ export const FormContextProvider = ({ setErrors(_errors); }; + useEffect(() => { + updateConfiguredPropsQueryDisabledIdx(_configuredProps) + }, [ + _configuredProps, + ]); + useEffect(() => { const newConfiguredProps: ConfiguredProps = {}; for (const prop of configurableProps) { diff --git a/packages/connect-react/src/utils/component.ts b/packages/connect-react/src/utils/component.ts index c3fe9e212832b..703c1fc5921f4 100644 --- a/packages/connect-react/src/utils/component.ts +++ b/packages/connect-react/src/utils/component.ts @@ -40,6 +40,9 @@ export function valuesFromOptions(value: unknown | T[] | PropOptions): T[] } return results } + if (value && typeof value === "object" && "__lv" in value && Array.isArray(value.__lv)) { + return value.__lv as T[] + } if (!Array.isArray(value)) return [] return value as T[] From 8835a04b79ab0c59933db5c0cefbe46e6cc3801e Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Tue, 28 Jan 2025 10:55:08 -0600 Subject: [PATCH 2/5] Update version to 1.0.0-preview.25 --- packages/connect-react/CHANGELOG.md | 5 +++++ packages/connect-react/package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md index af8ac173e64a3..2d7a9befc78af 100644 --- a/packages/connect-react/CHANGELOG.md +++ b/packages/connect-react/CHANGELOG.md @@ -1,6 +1,11 @@ # Changelog +# [1.0.0-preview.25] - 2025-01-28 + +- Show prop labels instead of values after selecting dynamic props +- Fix the bug where a remote option would not be reloaded when the form component is re-rendered + # [1.0.0-preview.24] - 2025-01-24 - Fix the bug where inputting multiple strings into an array prop would merge the strings into one diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index b4c52d6571bd7..1f50b66dc317f 100644 --- a/packages/connect-react/package.json +++ b/packages/connect-react/package.json @@ -1,6 +1,6 @@ { "name": "@pipedream/connect-react", - "version": "1.0.0-preview.24", + "version": "1.0.0-preview.25", "description": "Pipedream Connect library for React", "files": [ "dist" From 0befd3ecf1c58fc0c7ae998654520cdee2f017bc Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Tue, 28 Jan 2025 11:18:28 -0600 Subject: [PATCH 3/5] Add comment to useEffect --- packages/connect-react/src/hooks/form-context.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx index d1367ec72c084..6e814f05ff6d7 100644 --- a/packages/connect-react/src/hooks/form-context.tsx +++ b/packages/connect-react/src/hooks/form-context.tsx @@ -255,6 +255,9 @@ export const FormContextProvider = ({ }; useEffect(() => { + // Initialize queryDisabledIdx on load so that we don't force users + // to reconfigure a prop they've already configured whenever the page + // or component is reloaded updateConfiguredPropsQueryDisabledIdx(_configuredProps) }, [ _configuredProps, From 8aed3a6a288aeb377d232719b03859841e18962e Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Tue, 28 Jan 2025 17:09:40 -0600 Subject: [PATCH 4/5] Handle propsNeedConfiguring on field registration --- .../connect-react/examples/nextjs/package-lock.json | 2 +- packages/connect-react/src/hooks/form-context.tsx | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/connect-react/examples/nextjs/package-lock.json b/packages/connect-react/examples/nextjs/package-lock.json index 9d9ef59557722..a68badecb0ec5 100644 --- a/packages/connect-react/examples/nextjs/package-lock.json +++ b/packages/connect-react/examples/nextjs/package-lock.json @@ -23,7 +23,7 @@ }, "../..": { "name": "@pipedream/connect-react", - "version": "1.0.0-preview.24", + "version": "1.0.0-preview.25", "license": "MIT", "dependencies": { "@pipedream/sdk": "workspace:^", diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx index 6e814f05ff6d7..2f26376e4b3dc 100644 --- a/packages/connect-react/src/hooks/form-context.tsx +++ b/packages/connect-react/src/hooks/form-context.tsx @@ -13,6 +13,7 @@ import { appPropErrors, arrayPropErrors, booleanPropErrors, integerPropErrors, stringPropErrors, } from "../utils/component"; +import _ from "lodash"; export type DynamicProps = { id: string; configurableProps: T; }; // TODO @@ -374,6 +375,15 @@ export const FormContextProvider = ({ } } // propsNeedConfiguring.splice(0, propsNeedConfiguring.length, ..._propsNeedConfiguring) + + // Prevent useEffect/useState infinite loop by updating + // propsNeedConfiguring only if there is an actual change to the list of + // props that need to be configured. + // NB: The infinite loop is triggered because of calling + // checkPropsNeedConfiguring() from registerField, which is called + // from inside useEffect. + if (_propsNeedConfiguring && propsNeedConfiguring && _.isEqual(_propsNeedConfiguring, propsNeedConfiguring)) return; + setPropsNeedConfiguring(_propsNeedConfiguring) } @@ -382,6 +392,7 @@ export const FormContextProvider = ({ fields[field.prop.name] = field return fields }); + checkPropsNeedConfiguring() }; // console.log("***", configurableProps, configuredProps) From c8d82bc3d0171f507ebbd010a7ca3251cf84d27e Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Tue, 28 Jan 2025 17:20:12 -0600 Subject: [PATCH 5/5] Cleanup --- packages/connect-react/src/utils/component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/connect-react/src/utils/component.ts b/packages/connect-react/src/utils/component.ts index 703c1fc5921f4..e217e1a985a7d 100644 --- a/packages/connect-react/src/utils/component.ts +++ b/packages/connect-react/src/utils/component.ts @@ -40,7 +40,7 @@ export function valuesFromOptions(value: unknown | T[] | PropOptions): T[] } return results } - if (value && typeof value === "object" && "__lv" in value && Array.isArray(value.__lv)) { + if (value && typeof value === "object" && Array.isArray(value.__lv)) { return value.__lv as T[] } if (!Array.isArray(value))