@checkstack/ui 1.1.3 → 1.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @checkstack/ui
 
+## 1.1.5
+
+### Patch Changes
+
+- 95aa716: Fix LDAP CA certificate input: The custom CA certificate field was rendered as a single-line password input, which stripped newlines from PEM certificates and caused TLS connection failures ("Failed to connect"). The field now renders as a multi-line secret textarea that properly preserves PEM format while still encrypting the value in storage.
+
+## 1.1.4
+
+### Patch Changes
+
+- c0c0ed2: Fix LDAP group-to-role mapping not assigning roles on login. The LDAP search now explicitly requests the `memberOf` operational attribute, which is not returned by default. Also fixes array flattening that discarded multi-valued group memberships, and adds case-insensitive DN comparison for group matching. The test LDAP environment now uses `groupOfUniqueNames` to enable the memberOf overlay. Additionally, the DynamicForm validation no longer blocks saving when optional array fields (like group mappings) are empty.
+
 ## 1.1.3
 
 ### Patch Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
-    "@checkstack/common": "0.6.3",
-    "@checkstack/frontend-api": "0.3.7",
+    "@checkstack/common": "0.6.4",
+    "@checkstack/frontend-api": "0.3.8",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -30,9 +30,9 @@
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@testing-library/react": "^16.0.0",
-    "@checkstack/test-utils-frontend": "0.0.3",
-    "@checkstack/tsconfig": "0.0.3",
-    "@checkstack/scripts": "0.1.1"
+    "@checkstack/test-utils-frontend": "0.0.4",
+    "@checkstack/tsconfig": "0.0.4",
+    "@checkstack/scripts": "0.1.2"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/components/DynamicForm/FormField.tsx

@@ -140,6 +140,20 @@ export const FormField: React.FC<FormFieldProps> = ({
       propSchema as JsonSchemaProperty & { "x-secret"?: boolean }
     )["x-secret"];
 
+    // Secret textarea fields (e.g., PEM certificates)
+    if (isTextarea && isSecret) {
+      return (
+        <SecretTextareaField
+          id={id}
+          label={label}
+          description={cleanDesc}
+          value={value as string}
+          isRequired={isRequired}
+          onChange={onChange}
+        />
+      );
+    }
+
     // Textarea fields
     if (isTextarea) {
       return (
@@ -577,6 +591,56 @@ export const FormField: React.FC<FormFieldProps> = ({
   return <></>;
 };
 
+/**
+ * Shared visibility toggle button for secret fields.
+ */
+const VisibilityToggle: React.FC<{
+  visible: boolean;
+  onToggle: () => void;
+}> = ({ visible, onToggle }) => (
+  <button
+    type="button"
+    onClick={onToggle}
+    className="absolute right-2 top-3 text-muted-foreground hover:text-foreground"
+  >
+    {visible ? (
+      <svg
+        className="h-5 w-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+        />
+      </svg>
+    ) : (
+      <svg
+        className="h-5 w-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+        />
+      </svg>
+    )}
+  </button>
+);
+
 /**
  * Secret field component with password visibility toggle.
  * Extracted to keep hooks at component top level.
@@ -612,47 +676,91 @@ const SecretField: React.FC<{
           placeholder={hasExistingValue ? "••••••••" : "Enter secret value"}
           className="pr-10"
         />
-        <button
-          type="button"
-          onClick={() => setShowPassword(!showPassword)}
-          className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-        >
-          {showPassword ? (
-            <svg
-              className="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-              />
-            </svg>
-          ) : (
-            <svg
-              className="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-              />
-            </svg>
-          )}
-        </button>
+        <VisibilityToggle
+          visible={showPassword}
+          onToggle={() => setShowPassword(!showPassword)}
+        />
+      </div>
+      {hasExistingValue && currentValue === "" && (
+        <p className="text-xs text-muted-foreground">
+          Leave empty to keep existing value
+        </p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Secret textarea field for multi-line secrets (e.g., PEM certificates).
+ * Renders a textarea with a visibility toggle and secret-like behavior.
+ */
+const SecretTextareaField: React.FC<{
+  id: string;
+  label: string;
+  description?: string;
+  value: string;
+  isRequired?: boolean;
+  onChange: (val: unknown) => void;
+}> = ({ id, label, description, value, isRequired, onChange }) => {
+  const [showContent, setShowContent] = React.useState(false);
+  const currentValue = value || "";
+  const hasExistingValue = currentValue.length > 0;
+
+  return (
+    <div className="space-y-2">
+      <div>
+        <Label htmlFor={id}>
+          {label} {isRequired && "*"}
+        </Label>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
+        )}
+      </div>
+      <div className="relative">
+        {showContent ? (
+          <Textarea
+            id={id}
+            value={currentValue}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={
+              hasExistingValue ? "Leave empty to keep existing value" : "Paste content here"
+            }
+            rows={5}
+            className="pr-10 font-mono text-xs"
+          />
+        ) : (
+          <Textarea
+            id={id}
+            value={currentValue ? "••••••••••••••••••••" : ""}
+            onChange={(e) => {
+              // If user types/pastes into masked field, switch to visible mode
+              const newVal = e.target.value.replaceAll("•", "");
+              if (newVal) {
+                setShowContent(true);
+                onChange(newVal);
+              }
+            }}
+            onPaste={(e) => {
+              // On paste, switch to visible mode and use pasted content
+              e.preventDefault();
+              const pastedText = e.clipboardData.getData("text");
+              if (pastedText) {
+                setShowContent(true);
+                onChange(pastedText);
+              }
+            }}
+            placeholder={
+              hasExistingValue ? "Leave empty to keep existing value" : "Paste content here"
+            }
+            rows={3}
+            className="pr-10"
+            readOnly={!!currentValue}
+          />
+        )}
+        <VisibilityToggle
+          visible={showContent}
+          onToggle={() => setShowContent(!showContent)}
+        />
       </div>
       {hasExistingValue && currentValue === "" && (
         <p className="text-xs text-muted-foreground">

package/src/components/DynamicForm/utils.test.ts

@@ -155,13 +155,23 @@ describe("isValueEmpty", () => {
   });
 
   describe("arrays", () => {
-    it("treats empty array as empty", () => {
-      expect(isValueEmpty([], arraySchema)).toBe(true);
+    it("treats empty array as valid when no minItems specified", () => {
+      expect(isValueEmpty([], arraySchema)).toBe(false);
+    });
+
+    it("treats empty array as empty when minItems > 0", () => {
+      const requiredArraySchema: JsonSchemaProperty = { type: "array", minItems: 1 } as JsonSchemaProperty;
+      expect(isValueEmpty([], requiredArraySchema)).toBe(true);
     });
 
     it("treats non-empty array as not empty", () => {
       expect(isValueEmpty([1, 2, 3], arraySchema)).toBe(false);
     });
+
+    it("treats non-empty array as not empty even with minItems", () => {
+      const requiredArraySchema: JsonSchemaProperty = { type: "array", minItems: 1 } as JsonSchemaProperty;
+      expect(isValueEmpty([1], requiredArraySchema)).toBe(false);
+    });
   });
 
   describe("objects", () => {

package/src/components/DynamicForm/utils.ts

@@ -48,8 +48,13 @@ export function isValueEmpty(
 ): boolean {
   if (val === undefined || val === null) return true;
   if (typeof val === "string" && val.trim() === "") return true;
-  // For arrays, check if empty
-  if (Array.isArray(val) && val.length === 0) return true;
+  // For arrays, only consider empty if schema requires minimum items
+  if (Array.isArray(val) && val.length === 0) {
+    const minItems = (propSchema as JsonSchemaProperty & { minItems?: number }).minItems;
+    if (minItems !== undefined && minItems > 0) return true;
+    // Empty arrays are valid by default (e.g., optional mappings lists)
+    return false;
+  }
   // For objects (nested schemas), recursively check required fields
   if (propSchema.type === "object" && propSchema.properties) {
     const objVal = val as Record<string, unknown>;