Refactor user management UI code (#839)

* 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

CHANGELOG.md

@@ -36,6 +36,7 @@ The types of changes are:
 * Fixed `check-migrations` Make command [#806](https://github.com/ethyca/fidesops/pull/806)
 * Fix issue requiring separate install of snowflake-connector-python [#807](https://github.com/ethyca/fidesops/pull/807)
 * [User Management] Create new user gives HTTP 422 Unprocessable Entity exception [#832] (https://github.com/ethyca/fidesops/pull/833)
+* [User Management] Refactored New and Edit user pages to reduce duplicate code [#839]https://github.com/ethyca/fidesops/pull/839
 
 ### Docs
 * Backend UI deployment [#827](https://github.com/ethyca/fidesops/pull/827)

clients/admin-ui/.eslintrc.js

@@ -1,30 +1,32 @@
 module.exports = {
   extends: [
-    'airbnb',
-    'airbnb-typescript/base',
-    'prettier',
-    'next/core-web-vitals',
+    "airbnb",
+    "airbnb-typescript/base",
+    "prettier",
+    "next/core-web-vitals",
   ],
-  plugins: ['simple-import-sort'],
+  plugins: ["simple-import-sort"],
   root: true,
   parserOptions: {
-    project: './tsconfig.json',
+    project: "./tsconfig.json",
     tsconfigRootDir: __dirname,
   },
   rules: {
     // causes bug in re-exporting default exports, see
     // https://github.com/eslint/eslint/issues/15617
-    'no-restricted-exports': [0],
-    'import/prefer-default-export': 'off',
-    'react/function-component-definition': [
+    "no-restricted-exports": [0],
+    "import/prefer-default-export": "off",
+    "react/function-component-definition": [
       2,
       {
-        namedComponents: 'arrow-function',
+        namedComponents: "arrow-function",
       },
     ],
-    'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
-    'react/jsx-props-no-spreading': [0],
-    'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error',
+    // since defaultProps are deprecated for function components
+    "react/require-default-props": "off",
+    "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
+    "react/jsx-props-no-spreading": [0],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
   },
 };

clients/admin-ui/package.json

@@ -37,7 +37,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
-    "whatwg-fetch": "^3.6.2"
+    "whatwg-fetch": "^3.6.2",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^12.0.10",

clients/admin-ui/src/features/common/Icon/Eye.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "EyeIcon",
+  viewBox: "0 0 20 18",
+  d: "M5.55556 8.88886C5.55556 6.434 7.54514 4.44442 10 4.44442C12.4549 4.44442 14.4444 6.434 14.4444 8.88886C14.4444 11.3437 12.4549 13.3333 10 13.3333C7.54514 13.3333 5.55556 11.3437 5.55556 8.88886ZM10 11.6666C11.5347 11.6666 12.7778 10.4236 12.7778 8.88886C12.7778 7.35414 11.5347 6.11108 10 6.11108C9.9757 6.11108 9.95486 6.11108 9.89931 6.11108C9.9757 6.28817 10 6.47567 10 6.66664C10 7.89233 9.00347 8.88886 7.77778 8.88886C7.58681 8.88886 7.39931 8.86456 7.22222 8.78817C7.22222 8.84372 7.22222 8.86456 7.22222 8.85761C7.22222 10.4236 8.46528 11.6666 10 11.6666ZM3.3132 3.9097C4.94792 2.39025 7.19445 1.11108 10 1.11108C12.8056 1.11108 15.0521 2.39025 16.6875 3.9097C18.3125 5.41664 19.3993 7.19095 19.9132 8.46178C20.0278 8.73608 20.0278 9.04164 19.9132 9.31595C19.3993 10.5555 18.3125 12.3298 16.6875 13.868C15.0521 15.3889 12.8056 16.6666 10 16.6666C7.19445 16.6666 4.94792 15.3889 3.3132 13.868C1.6882 12.3298 0.602087 10.5555 0.0854557 9.31595C-0.0284852 9.04164 -0.0284852 8.73608 0.0854557 8.46178C0.602087 7.19095 1.6882 5.41664 3.3132 3.9097ZM10 2.77775C7.73611 2.77775 5.875 3.80553 4.44792 5.12845C3.11111 6.3715 2.1882 7.81595 1.71667 8.88886C2.1882 9.93053 3.11111 11.4062 4.44792 12.6493C5.875 13.9722 7.73611 15 10 15C12.2639 15 14.125 13.9722 15.5521 12.6493C16.8889 11.4062 17.7812 9.93053 18.2847 8.88886C17.7812 7.81595 16.8889 6.3715 15.5521 5.12845C14.125 3.80553 12.2639 2.77775 10 2.77775Z",
+});

clients/admin-ui/src/features/common/Icon/index.tsx

@@ -1,6 +1,7 @@
 export { default as ArrowDownLineIcon } from "./ArrowDownLine";
 export { default as CloseSolidIcon } from "./CloseSolid";
 export { default as DownloadSolidIcon } from "./DownloadSolid";
+export { default as EyeIcon } from "./Eye";
 export { default as GearIcon } from "./Gear";
 export { default as GreenCheckCircle } from "./GreenCheckCircle";
 export { default as MoreIcon } from "./More";