@checkstack/ui 1.1.5 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @checkstack/ui
 
+## 1.2.1
+
+### Patch Changes
+
+- d1a2796: Enforce stricter code quality standards and eliminate AI slop anti-patterns.
+
+  **New utility**
+
+  - `extractErrorMessage(error, fallback?)` in `@checkstack/common` for consistent error extraction
+
+  **ESLint rules**
+
+  - `react-hooks/rules-of-hooks` and `exhaustive-deps` for hook correctness
+  - `no-console` in frontend packages — forces `toast` over silent `console.error`
+  - `no-restricted-syntax` banning `instanceof Error` — forces `extractErrorMessage`
+  - Custom `no-eslint-disable-any` rule preventing `@typescript-eslint/no-explicit-any` circumvention
+
+  **Refactoring**
+
+  - Replace 141 `instanceof Error` boilerplate patterns across the codebase
+  - Replace swallowed `console.error` with user-visible `toast.error()` feedback
+  - Remove 15 redundant `as` type casts in IntegrationsPage and ProviderConnectionsPage
+  - Consolidate 3 identical callback handlers into `handleDialogClose`
+  - Fix conditional React hook call in `FormField.tsx`
+  - Fix unstable useMemo deps in `Dashboard.tsx`
+  - Replace `useEffect`→`setState` with derived `useMemo` in `RegisterPage.tsx`
+  - Rewrite `keystore.test.ts` with typed `DrizzleMockChain` (eliminating 7 `any` suppressions)
+  - Delete obvious comments in `encryption.ts` and Teams `provider.ts`
+
+- Updated dependencies [d1a2796]
+  - @checkstack/common@0.6.5
+  - @checkstack/frontend-api@0.3.9
+
+## 1.2.0
+
+### Minor Changes
+
+- 23c80bc: ### Jira Data Center Support
+
+  Added support for on-premise Jira Data Center installations alongside existing Jira Cloud support:
+
+  - **Authentication mode switching**: New `authMode` field (`cloud` | `datacenter`) on connection configuration. Cloud uses Basic Auth (email + API token), Data Center uses Bearer Auth (Personal Access Token).
+  - **API version routing**: Automatically selects REST API v3 for Cloud and v2 for Data Center.
+  - **Description format**: Cloud uses Atlassian Document Format (ADF), Data Center uses plain text.
+  - **Connection schema v2**: Backward-compatible — defaults to `cloud` mode for existing connections.
+
+  ### DynamicForm `x-hidden-when` Conditional Visibility
+
+  New generic platform feature for conditionally hiding form fields based on sibling field values:
+
+  - Added `x-hidden-when` metadata extension to `ConfigMeta` and `JsonSchemaProperty`.
+  - DynamicForm automatically hides fields and skips their validation when conditions match.
+  - Used by Jira integration to hide the email field when `authMode` is `datacenter`.
+
 ## 1.1.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
@@ -31,7 +31,7 @@
     "@types/react": "^18.2.0",
     "@testing-library/react": "^16.0.0",
     "@checkstack/test-utils-frontend": "0.0.4",
-    "@checkstack/tsconfig": "0.0.4",
+    "@checkstack/tsconfig": "0.0.5",
     "@checkstack/scripts": "0.1.2"
   },
   "scripts": {

package/src/components/DynamicForm/DynamicForm.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { EmptyState } from "../../index";
 
 import type { DynamicFormProps } from "./types";
-import { extractDefaults, isValueEmpty } from "./utils";
+import { extractDefaults, isValueEmpty, isFieldHiddenByCondition } from "./utils";
 import { FormField } from "./FormField";
 
 /**
@@ -33,7 +33,8 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
     if (JSON.stringify(merged) !== JSON.stringify(value)) {
       onChange(merged);
     }
-  }, [schema]); // Only run when schema changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentional: runs only on schema change. Including onChange would re-fire on parent re-renders; including value would cause an infinite loop since this effect calls onChange(merged)
+  }, [schema]);
 
   // Compute validity and report changes
   React.useEffect(() => {
@@ -50,6 +51,13 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
       // Skip hidden fields - they are auto-populated
       if (propSchema["x-hidden"]) continue;
 
+      // Skip conditionally hidden fields - they are not visible
+      if (
+        propSchema["x-hidden-when"] &&
+        isFieldHiddenByCondition(propSchema["x-hidden-when"], value)
+      )
+        continue;
+
       if (isValueEmpty(value[key], propSchema)) {
         isValid = false;
         break;
@@ -79,7 +87,15 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
   return (
     <div className="space-y-6">
       {Object.entries(schema.properties)
-        .filter(([, propSchema]) => !propSchema["x-hidden"])
+        .filter(([, propSchema]) => {
+          if (propSchema["x-hidden"]) return false;
+          if (
+            propSchema["x-hidden-when"] &&
+            isFieldHiddenByCondition(propSchema["x-hidden-when"], value)
+          )
+            return false;
+          return true;
+        })
         .map(([key, propSchema]) => {
           const isRequired = schema.required?.includes(key);
           const label = key.charAt(0).toUpperCase() + key.slice(1);

package/src/components/DynamicForm/DynamicOptionsField.tsx

@@ -13,6 +13,7 @@ import {
 
 import type { DynamicOptionsFieldProps, ResolverOption } from "./types";
 import { getCleanDescription, NONE_SENTINEL } from "./utils";
+import { extractErrorMessage } from "@checkstack/common";
 
 /**
  * Field component for dynamically resolved options.
@@ -72,7 +73,7 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
       .catch((error_) => {
         if (!cancelled) {
           setError(
-            error_ instanceof Error ? error_.message : "Failed to load options",
+            extractErrorMessage(error_, "Failed to load options"),
           );
           setLoading(false);
         }

package/src/components/DynamicForm/FormField.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useEffect, useState } from "react";
 import { Plus, Trash2 } from "lucide-react";
 
 import {
@@ -37,6 +37,14 @@ export const FormField: React.FC<FormFieldProps> = ({
 }) => {
   const description = propSchema.description || "";
 
+  // Const field handling - must be before any early returns (rules-of-hooks)
+  const isConstField = propSchema.const !== undefined;
+  useEffect(() => {
+    if (isConstField && value !== propSchema.const) {
+      onChange(propSchema.const);
+    }
+  }, [isConstField, value, propSchema.const, onChange]);
+
   // Dynamic options via resolver
   const resolverName = propSchema["x-options-resolver"];
   if (resolverName && optionsResolvers) {
@@ -57,14 +65,7 @@ export const FormField: React.FC<FormFieldProps> = ({
     );
   }
 
-  // Const field handling - auto-set value and hide (value is fixed)
-  if (propSchema.const !== undefined) {
-    // Silently ensure the value is set, no UI needed
-    React.useEffect(() => {
-      if (value !== propSchema.const) {
-        onChange(propSchema.const);
-      }
-    }, [value, propSchema.const, onChange]);
+  if (isConstField) {
     return <></>;
   }
 
@@ -653,7 +654,7 @@ const SecretField: React.FC<{
   isRequired?: boolean;
   onChange: (val: unknown) => void;
 }> = ({ id, label, description, value, isRequired, onChange }) => {
-  const [showPassword, setShowPassword] = React.useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const currentValue = value || "";
   const hasExistingValue = currentValue.length > 0;
 
@@ -702,7 +703,7 @@ const SecretTextareaField: React.FC<{
   isRequired?: boolean;
   onChange: (val: unknown) => void;
 }> = ({ id, label, description, value, isRequired, onChange }) => {
-  const [showContent, setShowContent] = React.useState(false);
+  const [showContent, setShowContent] = useState(false);
   const currentValue = value || "";
   const hasExistingValue = currentValue.length > 0;
 
@@ -723,7 +724,9 @@ const SecretTextareaField: React.FC<{
             value={currentValue}
             onChange={(e) => onChange(e.target.value)}
             placeholder={
-              hasExistingValue ? "Leave empty to keep existing value" : "Paste content here"
+              hasExistingValue
+                ? "Leave empty to keep existing value"
+                : "Paste content here"
             }
             rows={5}
             className="pr-10 font-mono text-xs"
@@ -750,7 +753,9 @@ const SecretTextareaField: React.FC<{
               }
             }}
             placeholder={
-              hasExistingValue ? "Leave empty to keep existing value" : "Paste content here"
+              hasExistingValue
+                ? "Leave empty to keep existing value"
+                : "Paste content here"
             }
             rows={3}
             className="pr-10"

package/src/components/DynamicForm/types.ts

@@ -21,6 +21,7 @@ export interface JsonSchemaProperty extends JsonSchemaPropertyCore<JsonSchemaPro
   "x-hidden"?: boolean; // Field should be hidden in form (auto-populated)
   "x-searchable"?: boolean; // Shows search input for filtering dropdown options
   "x-editor-types"?: EditorType[]; // Available editor types for multi-type input
+  "x-hidden-when"?: Record<string, string[]>; // Conditionally hide based on sibling field values
 }
 
 /** Option returned by an options resolver */

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

@@ -5,6 +5,7 @@ import {
   extractDefaults,
   getCleanDescription,
   isValueEmpty,
+  isFieldHiddenByCondition,
   NONE_SENTINEL,
   parseSelectValue,
   serializeFormData,
@@ -398,3 +399,71 @@ describe("detectEditorType", () => {
     });
   });
 });
+
+// =============================================================================
+// Conditional Visibility Tests
+// =============================================================================
+
+describe("isFieldHiddenByCondition", () => {
+  it("returns true when sibling value matches a value in the array", () => {
+    const conditions = { authMode: ["datacenter"] };
+    const formValues = { authMode: "datacenter" };
+    expect(isFieldHiddenByCondition(conditions, formValues)).toBe(true);
+  });
+
+  it("returns true when sibling value matches any value in the array", () => {
+    const conditions = { authMode: ["datacenter", "server"] };
+    const formValues = { authMode: "server" };
+    expect(isFieldHiddenByCondition(conditions, formValues)).toBe(true);
+  });
+
+  it("returns false when sibling value does not match", () => {
+    const conditions = { authMode: ["datacenter"] };
+    const formValues = { authMode: "cloud" };
+    expect(isFieldHiddenByCondition(conditions, formValues)).toBe(false);
+  });
+
+  it("returns false when sibling field is missing (coerces to empty string)", () => {
+    const conditions = { authMode: ["datacenter"] };
+    const formValues = {};
+    expect(isFieldHiddenByCondition(conditions, formValues)).toBe(false);
+  });
+
+  it("returns true when sibling field is missing and empty string is in the value list", () => {
+    const conditions = { authMode: [""] };
+    const formValues = {};
+    expect(isFieldHiddenByCondition(conditions, formValues)).toBe(true);
+  });
+
+  it("handles multiple conditions with OR semantics (any match hides)", () => {
+    const conditions = {
+      authMode: ["datacenter"],
+      environment: ["staging"],
+    };
+    // Only authMode matches
+    expect(
+      isFieldHiddenByCondition(conditions, {
+        authMode: "datacenter",
+        environment: "production",
+      }),
+    ).toBe(true);
+    // Only environment matches
+    expect(
+      isFieldHiddenByCondition(conditions, {
+        authMode: "cloud",
+        environment: "staging",
+      }),
+    ).toBe(true);
+    // Neither matches
+    expect(
+      isFieldHiddenByCondition(conditions, {
+        authMode: "cloud",
+        environment: "production",
+      }),
+    ).toBe(false);
+  });
+
+  it("returns false for empty conditions object", () => {
+    expect(isFieldHiddenByCondition({}, { authMode: "cloud" })).toBe(false);
+  });
+});

package/src/components/DynamicForm/utils.ts

@@ -72,6 +72,22 @@ export function isValueEmpty(
 /** Sentinel value used to represent "None" selection in Select components */
 export const NONE_SENTINEL = "__none__";
 
+/**
+ * Evaluate x-hidden-when conditions against current form values.
+ * Returns true if the field should be hidden.
+ *
+ * Each condition maps a sibling field name to values that trigger hiding.
+ * The field is hidden if ANY condition matches (OR semantics).
+ */
+export function isFieldHiddenByCondition(
+  conditions: Record<string, string[]>,
+  formValues: Record<string, unknown>,
+): boolean {
+  return Object.entries(conditions).some(([field, values]) =>
+    values.includes(String(formValues[field] ?? "")),
+  );
+}
+
 /**
  * Converts a select value to the actual form value.
  * Handles the "None" sentinel value by returning undefined.