Skip to content

refactor: password editing [ENG-2430]#7357

Merged
speaker-ender merged 1 commit intomainfrom
refactor/password-editing--ENG-2430
Feb 11, 2026
Merged

refactor: password editing [ENG-2430]#7357
speaker-ender merged 1 commit intomainfrom
refactor/password-editing--ENG-2430

Conversation

@speaker-ender
Copy link
Copy Markdown
Contributor

@speaker-ender speaker-ender commented Feb 11, 2026

Ticket ENG-2430

Description Of Changes

Adding a new password editing flow to reduce confusion when clicking the 'show' icon for editable passwords.

Code Changes

  • Updating the chakra password field in inputs.tsx to include new edit button flow.

Steps to Confirm

  1. Confirm login password input looks and functions as usual with the hide/show password icon and functionality
  2. Edit an existing monitor configuration
  3. Confirm that api credential fields now include an 'edit' button that clears the existing api credential and then adds the hide/show password icon
  4. Check that there are no regressions in chakra password fields

Pre-Merge Checklist

  • Issue requirements met
  • All CI pipelines succeeded
  • CHANGELOG.md updated
    • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
    • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
    • Updates unreleased work already in Changelog, no new entry necessary
  • UX feedback:
    • All UX related changes have been reviewed by a designer
    • No UX review needed
  • Followup issues:
    • Followup issues created
    • No followup issues
  • Database migrations:
    • Ensure that your downrev is up to date with the latest revision on main
    • Ensure that your downgrade() migration is correct and works
      • If a downgrade migration is not possible for this change, please call this out in the PR description!
    • No migrations
  • Documentation:
    • Documentation complete, PR opened in fidesdocs
    • Documentation issue created in fidesdocs
    • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
    • No documentation updates required

@speaker-ender speaker-ender requested a review from a team as a code owner February 11, 2026 14:31
@speaker-ender speaker-ender requested review from jpople and removed request for a team February 11, 2026 14:31
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Feb 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
fides-plus-nightly Ready Ready Preview, Comment Feb 11, 2026 5:34pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
fides-privacy-center Ignored Ignored Feb 11, 2026 5:34pm

Request Review

@speaker-ender speaker-ender force-pushed the refactor/password-editing--ENG-2430 branch from 8c6cdad to 06cd030 Compare February 11, 2026 14:39
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Feb 11, 2026

Greptile Overview

Greptile Summary

This PR updates the shared Formik TextInput/password handling in clients/admin-ui/src/features/common/form/inputs.tsx to add an explicit “Edit” button for pre-populated secret fields. The intent is to keep existing credentials masked/locked until the user chooses to edit, after which the reveal/hide icon appears.

Main concern is the new local disabled state: it’s initialized from props/Formik meta but not kept in sync, so switching records or toggling disabled can leave the UI in the wrong state. Additionally, TextInput now always calls useField(props.name ?? ""), which can bind to an empty Formik field name if name is omitted, leading to incorrect form state updates.

Confidence Score: 2/5

  • Not safe to merge until the password input state sync issues are addressed.
  • The refactor introduces stateful disabled/edit behavior for password fields, but the disabled state is only initialized once and can become incorrect when props or Formik meta change (common when forms reinitialize). It also binds Formik state to an empty field name when name is missing, which can corrupt form state in any usage that omits name.
  • clients/admin-ui/src/features/common/form/inputs.tsx

Important Files Changed

Filename Overview
clients/admin-ui/src/features/common/form/inputs.tsx Refactors password input to add an 'Edit' button that clears initial secrets and disables the input until edited; introduces local disabled state derived from Formik meta but does not resync when props/meta change, and forces a Formik field hook even when no name is provided.

Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

1 file reviewed, 2 comments

Edit Code Review Agent Settings | Greptile

Comment on lines +100 to +106
const [, meta, { setValue }] = useField(props.name ?? "");
const [type, setType] = useState<"text" | "password">(
isPassword ? "password" : "text",
);
const [disabled, setDisabled] = useState(
isDisabled || (isPassword && !!meta.initialValue && !meta.touched),
);
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.

Disabled state gets stuck
disabled is initialized from isDisabled/Formik meta once, but never updated if isDisabled changes or if Formik reinitializes (e.g., editing a different monitor/config). This will leave the input enabled/disabled incorrectly. Consider deriving disabled from current props/meta each render, or add an effect to resync when isDisabled, meta.initialValue, or meta.touched change.

Comment on lines 100 to 103
const [, meta, { setValue }] = useField(props.name ?? "");
const [type, setType] = useState<"text" | "password">(
isPassword ? "password" : "text",
);
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.

Formik field name can be empty
useField(props.name ?? "") will bind this input to an empty field name when name is missing, which can cause Formik state collisions/unexpected updates. If TextInput can be used without a name, it should avoid calling useField (or require name when isPassword uses the edit flow).

chore: update changelog

refactor: refine to allow password reset

fix: sync disabled conditionally

fix: test edit

fix: remove formik hook from input into custominput
Copy link
Copy Markdown
Contributor

@jpople jpople left a comment

Choose a reason for hiding this comment

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

Tested locally, working for me. Nice change, this feels much better than what we were doing before.

@speaker-ender speaker-ender added this pull request to the merge queue Feb 11, 2026
Merged via the queue into main with commit fd80f65 Feb 11, 2026
45 checks passed
@speaker-ender speaker-ender deleted the refactor/password-editing--ENG-2430 branch February 11, 2026 18:13
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.

2 participants