Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

Refactor user management UI code #839

Merged
merged 13 commits into from
Jul 12, 2022

Conversation

allisonking
Copy link
Contributor

@allisonking allisonking commented Jul 8, 2022

Purpose

There was a lot of duplicate code between EditUserForm.tsx and NewUserForm.tsx. This PR separates their commonalities into UserForm.tsx.

Changes

  • Refactors EditUserForm.tsx and NewUserForm.tsx to both call a new UserForm.tsx
  • Introduces Yup for form validation (we are using this in fidesctl, and also it comes recommended by Formik)
  • Refactors the form to use a CustomTextInput like we have in fidesctl. Eventually, I think this form input should be pulled into fidesui, but for now, it's copied over and tweaked. This component also comes with an Eye icon that lets you reveal the password.
  • Fixes typescript errors in EditUserForm.tsx (there was a // @ts-nocheck at the top which was hiding a lot of errors)
  • Adds more accurate types to user-management-slice.tsx
  • Adds loading states for editing a user page for when we are retrieving user data

Checklist

  • Update CHANGELOG.md file
    • Merge in main so the most recent CHANGELOG.md file is being appended to
    • Add description within the Unreleased section in an appropriate category. Add a new category from the list at the top of the file if the needed one isn't already there.
    • Add a link to this PR at the end of the description with the PR number as the text. example: #1
  • Applicable documentation updated (guides, quickstart, postman collections, tutorial, fidesdemo, database diagram.
  • If docs updated (select one):
    • documentation complete, or draft/outline provided (tag docs-team to complete/review on this branch)
    • documentation issue created (tag docs-team to complete issue separately)
  • Good unit test/integration test coverage
  • This PR contains a DB migration. If checked, the reviewer should confirm with the author that the down_revision correctly references the previous migration before merging
  • The Run Unsafe PR Checks label has been applied, and checks have passed, if this PR touches any external services

Ticket

Fixes #812

Flow for adding/editing a user

Screen.Recording.2022-07-08.at.2.12.34.PM.mov

Form validation via Yup

Screen.Recording.2022-07-08.at.2.15.17.PM.mov

When editing your own user, you'll have the option to change your password
Screen Shot 2022-07-08 at 2 20 59 PM


import { EyeIcon } from "../../common/Icon";

interface InputProps {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is our standard to use interface or type?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

oh I don't know! I use interface out of habit, but it appears they're pretty interchangeable? happy to go with whatever people prefer

Copy link
Contributor

@chriscalhoun1974 chriscalhoun1974 left a comment

Choose a reason for hiding this comment

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

lgtm :)

@chriscalhoun1974 chriscalhoun1974 merged commit 33b09ca into main Jul 12, 2022
@chriscalhoun1974 chriscalhoun1974 deleted the aking-812-refactor-user-management branch July 12, 2022 14:01
sanders41 pushed a commit that referenced this pull request Sep 22, 2022
* Refactor pages to use the same Layout

* Add UserForm.tsx

* Add Yup validation schema

* Integrate refactored form to New route

* Styling

* WIP refactor EditUserForm

* Fix EditUserForm typescript errors

* Refactor handleSubmit

* Small fixes to EditUserForm

* Make call to get scopes earlier so form will be populated on first render

* Update changelog
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Refactor NewUserForm.tsx and EditUserForm.tsx in admin-ui
2 participants