fix: Enforce string limits (#14953)

Co-authored-by: Moshe Grunwald <34072688+TheBestMoshe@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

components/onelogin/onelogin.app.mjs

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

components/pennylane/pennylane.app.mjs

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

components/pingone/pingone.app.mjs

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

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,10 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.10] - 2024-12-12
+
+- Enforce string length limits
+
 # [1.0.0-preview.9] - 2024-12-10
 
 - Disabled submit button when form is incomplete

packages/connect-react/package.json

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

packages/connect-react/src/hooks/form-context.tsx

@@ -4,7 +4,7 @@ import {
 import isEqual from "lodash.isequal";
 import { useQuery } from "@tanstack/react-query";
 import type {
-  ComponentReloadPropsOpts, ConfigurableProp, ConfigurableProps, ConfiguredProps, V1Component, PropValue,
+  ComponentReloadPropsOpts, ConfigurableProp, ConfigurableProps, ConfiguredProps, V1Component,
 } from "@pipedream/sdk";
 import { useFrontendClient } from "./frontend-client-context";
 import type { ComponentFormProps } from "../components/ComponentForm";
@@ -166,7 +166,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
 
   // these validations are necessary because they might override PropInput for number case for instance
   // so can't rely on that base control form validation
-  const propErrors = <T extends ConfigurableProps>(prop: ConfigurableProp, value: unknown): string[] => {
+  const propErrors = (prop: ConfigurableProp, value: unknown): string[] => {
     const errs: string[] = [];
     if (value === undefined) {
       if (!prop.optional) {
@@ -188,14 +188,31 @@ export const FormContextProvider = <T extends ConfigurableProps>({
         errs.push("not a boolean");
       }
     } else if (prop.type === "string") {
+      type StringProp = ConfigurableProp & {
+        min?: number;
+        max?: number;
+      }
+      const {
+        min = 1, max,
+      } = prop as StringProp;
       if (typeof value !== "string") {
         errs.push("not a string");
+      } else {
+        if (value.length < min) {
+          errs.push(`string length must be at least ${min} characters`);
+        }
+        if (max && value.length > max) {
+          errs.push(`string length must not exceed ${max} characters`);
+        }
       }
     } else if (prop.type === "app") {
       const field = fields[prop.name]
       if (field) {
         const app = field.extra.app
-        const err = appPropError({ value, app })
+        const err = appPropError({
+          value,
+          app,
+        })
         if (err) errs.push(err)
       } else {
         errs.push("field not registered")