Skip to content

Lihlumise/e/4527#4743

Draft
Lihlu wants to merge 12 commits intoshesha-io:mainfrom
Lihlu:lihlumise/e/4527
Draft

Lihlumise/e/4527#4743
Lihlu wants to merge 12 commits intoshesha-io:mainfrom
Lihlu:lihlumise/e/4527

Conversation

@Lihlu
Copy link
Copy Markdown
Collaborator

@Lihlu Lihlu commented Apr 7, 2026

#4527

Summary by CodeRabbit

  • New Features

    • Password-type text fields gain configurable complexity checks, inline validation feedback, and a tooltip for password errors; error text now truncates to one line.
  • Migration

    • Legacy password-combo components are migrated to separate password + confirm-password fields with confirm-match validation via an automated migration step.
  • Deprecations

    • Legacy PasswordCombo moved to the Legacy toolbox, hidden at runtime and designer-recommended views.
  • Bug Fixes

    • Removed outdated documentation link for the PasswordCombo component.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 7, 2026

Walkthrough

Deprecated the legacy PasswordCombo (removed docs mapping and hidden in toolbox). Added password support to textField: complexity settings, runtime validators, truncated tooltip error UI, hidden min/max in settings, styles, and a migrator converting passwordCombo into a password textField plus confirm field.

Changes

Cohort / File(s) Summary
Docs & Registry
shesha-reactjs/src/components/componentErrors/component-docs.json, shesha-reactjs/src/providers/form/defaults/toolboxComponents.ts
Removed passwordCombo docs mapping; moved PasswordCombo from "Advanced" to hidden "Legacy" toolbox group and adjusted toolbox entry.
PasswordCombo Migration
shesha-reactjs/src/designer-components/passwordCombo/index.tsx
Removed runtime Factory rendering for legacy component; renamed/hid toolbox entry; added migratePasswordComboToTextField(prev, context) to produce a textField (password) plus generated confirm textField, update flatStructure/componentRelations, and register a confirm-match validator; added migrator step.
Password Complexity Utilities
shesha-reactjs/src/designer-components/textField/utils.ts
Added IPasswordComplexitySettings, usePasswordComplexitySettings() hook, validatePasswordValue() and buildPasswordValidatorString() to read settings, produce error messages, and emit a runtime validator string.
TextField Integration
shesha-reactjs/src/designer-components/textField/textField.tsx
Injected runtime password validator for textType === 'password', removed passing length props to Input, added passwordError state updated on change using complexity checks, and wrapped password inputs in a tooltip-enabled truncated wrapper.
TextField Settings & Styles
shesha-reactjs/src/designer-components/textField/settingsForm.ts, shesha-reactjs/src/designer-components/textField/styles.ts
Hidden min/max length inputs when textType === 'password'; added passwordFieldWrapper style to constrain/truncate .ant-form-item-explain-error and returned it from useStyles.

Sequence Diagram

sequenceDiagram
    participant Designer as Form Designer
    participant TextField as textField (password)
    participant Settings as Settings Store
    participant Validator as Validation Engine
    participant UI as Tooltip/Error Display

    Designer->>TextField: Configure field with textType: 'password'
    TextField->>Settings: usePasswordComplexitySettings()
    Settings-->>TextField: Complexity config
    Designer->>TextField: onChange(value)
    TextField->>Validator: validatePasswordValue(value, settings)
    Validator-->>TextField: errors[] or []
    TextField->>UI: Update passwordError state
    UI-->>Designer: Show tooltip/truncated error (if errors)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related issues

Poem

🐰 I hopped through code and found a key,
The combo folded into a password tree,
Validators hum to guard each gate,
Tooltips tidy errors small and great,
Legacy tucked — new fields bound free. 🔐

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Title check ⚠️ Warning The PR title 'Lihlumise/e/4527' is a branch/ticket reference that does not meaningfully describe the actual changes made in the pull request. Use a descriptive title that summarizes the main change, such as 'Migrate passwordCombo component to textField with password validation' or 'Deprecate passwordCombo and migrate to modern textField implementation'.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@shesha-reactjs/src/designer-components/passwordCombo/index.tsx`:
- Around line 41-44: The catch block in the password validator (inside
passwordCombo component where you call callback on error) assumes the caught
variable e has a .message property which is invalid under TypeScript strict
mode; update the catch to narrow e safely (e.g., use if (e instanceof Error) {
msg = e.message } else { msg = String(e) }) and pass that msg to callback and
console.error so you never access .message on an unknown type and preserve
meaningful error text.

In `@shesha-reactjs/src/designer-components/textField/utils.ts`:
- Around line 103-106: The catch block in the password validator uses the
unknown catch variable e and accesses e.message directly; change the handler to
narrow e (e.g., treat it as unknown and derive a message via e instanceof Error
? e.message : String(e)) and use that sanitized message in both
console.error('[TextField] Password validator error:', ...) and
callback('Password validation failed: ' + message). Update the catch signature
(catch (e)) handling in the TextField password validation utility so you never
access e.message without narrowing and you pass a safe string to callback and
console.error.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 1b539991-70c0-41be-a1f0-025aa6c83bd3

📥 Commits

Reviewing files that changed from the base of the PR and between a1ed251 and 7172b8a.

⛔ Files ignored due to path filters (4)
  • package-lock.json is excluded by !**/package-lock.json and included by none
  • shesha-functional-tests/backend/src/Boxfusion.SheshaFunctionalTests.Web.Host/appsettings.json is excluded by !shesha-functional-tests/** and included by none
  • shesha-reactjs/eslint.config.mjs is excluded by none and included by none
  • shesha-reactjs/package-lock.json is excluded by !**/package-lock.json and included by none
📒 Files selected for processing (7)
  • shesha-reactjs/src/components/componentErrors/component-docs.json
  • shesha-reactjs/src/designer-components/passwordCombo/index.tsx
  • shesha-reactjs/src/designer-components/textField/settingsForm.ts
  • shesha-reactjs/src/designer-components/textField/styles.ts
  • shesha-reactjs/src/designer-components/textField/textField.tsx
  • shesha-reactjs/src/designer-components/textField/utils.ts
  • shesha-reactjs/src/providers/form/defaults/toolboxComponents.ts
💤 Files with no reviewable changes (1)
  • shesha-reactjs/src/components/componentErrors/component-docs.json

Comment thread shesha-reactjs/src/designer-components/passwordCombo/index.tsx Outdated
Comment thread shesha-reactjs/src/designer-components/textField/utils.ts
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@shesha-reactjs/src/designer-components/textField/textField.tsx`:
- Line 97: Replace the parameter type for the onChangeInternal function from
any[] to unknown[] and then narrow or assert the first argument before accessing
currentTarget.value: in onChangeInternal inspect/type-guard the args[0] (e.g.,
check it's an object with a currentTarget property or use a type assertion to
the expected event type) so the expression args[0]?.currentTarget?.value is
type-safe; update the handler logic inside onChangeInternal accordingly to avoid
any usage while preserving existing behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: c54ae95c-d302-4c29-bbac-aba14256e99b

📥 Commits

Reviewing files that changed from the base of the PR and between 7172b8a and d67ea8e.

📒 Files selected for processing (3)
  • shesha-reactjs/src/designer-components/passwordCombo/index.tsx
  • shesha-reactjs/src/designer-components/textField/textField.tsx
  • shesha-reactjs/src/designer-components/textField/utils.ts

Comment thread shesha-reactjs/src/designer-components/textField/textField.tsx Outdated
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
shesha-reactjs/src/designer-components/textField/textField.tsx (1)

46-54: 🧹 Nitpick | 🔵 Trivial

Consider narrowing the dependency array.

The useMemo for regExpObj only uses model.regExp and model.propertyName, but the dependency array includes the entire model object. This causes unnecessary recalculation when unrelated model properties change.

♻️ Proposed optimization
     const regExpObj = useMemo(() => {
       if (!model.regExp) return null;
       try {
         return new RegExp(model.regExp, 'g');
       } catch (error) {
         console.warn(`Invalid regExp pattern for '${model.propertyName}':`, model, error);
         return null;
       }
-    }, [model]);
+    }, [model.regExp, model.propertyName]);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@shesha-reactjs/src/designer-components/textField/textField.tsx` around lines
46 - 54, The useMemo creating regExpObj depends only on model.regExp and
model.propertyName but currently lists the whole model in its dependency array,
causing unnecessary recalcs; change the dependency array on the useMemo that
returns regExpObj to use [model.regExp, model.propertyName] (keeping the same
try/catch and console.warn behavior) so the memo only updates when the pattern
or propertyName actually change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@shesha-reactjs/src/designer-components/textField/textField.tsx`:
- Around line 46-54: The useMemo creating regExpObj depends only on model.regExp
and model.propertyName but currently lists the whole model in its dependency
array, causing unnecessary recalcs; change the dependency array on the useMemo
that returns regExpObj to use [model.regExp, model.propertyName] (keeping the
same try/catch and console.warn behavior) so the memo only updates when the
pattern or propertyName actually change.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 29a1dfb1-c84c-4c28-b4c2-3ad33c3e178a

📥 Commits

Reviewing files that changed from the base of the PR and between d67ea8e and ebd3be9.

📒 Files selected for processing (1)
  • shesha-reactjs/src/designer-components/textField/textField.tsx

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@shesha-reactjs/src/designer-components/textField/textField.tsx`:
- Line 58: The tooltip and passwordError state drift because password complexity
is evaluated independently in onChangeInternal instead of using the effective
validator that the form actually commits; compose the password validator into
model.validate.validator (or into the effective validator used by the component)
so there is a single source of truth, then derive the tooltip message by running
that composed validator against the committed value (or by computing
passwordError from validate(value)) inside a useEffect that listens to
value/model.validate changes rather than only in onChangeInternal; remove or
stop updating the separate passwordError state ad-hoc and ensure components like
passwordError, setPasswordError, onChangeInternal, model.validate?.validator and
the tooltip rendering all read from the composed validator result.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3d36919c-3014-45d2-9f75-afe9be13ae57

📥 Commits

Reviewing files that changed from the base of the PR and between ebd3be9 and b2d916f.

📒 Files selected for processing (1)
  • shesha-reactjs/src/designer-components/textField/textField.tsx


const isPassword = model.textType === 'password';
const passwordComplexity = usePasswordComplexitySettings();
const [passwordError, setPasswordError] = useState<string | null>(null);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Use one source of truth for password validation.

Line 66 skips injecting the password validator when model.validate?.validator already exists, but Lines 106-110 still compute passwordError from the complexity rules, and Lines 134-139 surface that state in the tooltip. This can make the tooltip warn about a rule the form is not actually enforcing, and because that state is only updated inside onChangeInternal, it can also drift after resets or other external value updates. Please drive the tooltip from the committed value and the effective validator set, or compose the password validator into the existing validator before both paths use it.

Also applies to: 65-76, 97-110, 134-139

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@shesha-reactjs/src/designer-components/textField/textField.tsx` at line 58,
The tooltip and passwordError state drift because password complexity is
evaluated independently in onChangeInternal instead of using the effective
validator that the form actually commits; compose the password validator into
model.validate.validator (or into the effective validator used by the component)
so there is a single source of truth, then derive the tooltip message by running
that composed validator against the committed value (or by computing
passwordError from validate(value)) inside a useEffect that listens to
value/model.validate changes rather than only in onChangeInternal; remove or
stop updating the separate passwordError state ad-hoc and ensure components like
passwordError, setPasswordError, onChangeInternal, model.validate?.validator and
the tooltip rendering all read from the composed validator result.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant